npm - @bestow-ui/react - Versions diffs - 1.7.0 → 2.0.0 - Mend

@bestow-ui/react 1.7.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md +6 -7
package/dist/{chunk-YYLDXZWR.js → chunk-BDQ5IJIS.js} +9 -8
package/dist/chunk-BDQ5IJIS.js.map +1 -0
package/dist/client.js +404 -235
package/dist/client.js.map +1 -1
package/dist/index.cjs +539 -373
package/dist/index.cjs.map +1 -1
package/dist/index.css +83 -46
package/dist/index.css.map +1 -1
package/dist/index.d.cts +60 -38
package/dist/index.d.ts +60 -38
package/dist/shared.js +2 -1
package/dist/shared.js.map +1 -1
package/package.json +5 -3
package/dist/chunk-YYLDXZWR.js.map +0 -1

package/dist/index.cjs CHANGED Viewed

@@ -159,7 +159,7 @@ module.exports = __toCommonJS(src_exports);
 // src/theme/contract.css.ts
 var systemThemeClass = "tkagtb2";
 var themeClass = { light: "tkagtb0", dark: "tkagtb1" };
-var vars = { space: { "0": "var(--bestow-space-0)", "1": "var(--bestow-space-1)", "2": "var(--bestow-space-2)", "3": "var(--bestow-space-3)", "4": "var(--bestow-space-4)", "5": "var(--bestow-space-5)", "6": "var(--bestow-space-6)", "8": "var(--bestow-space-8)", "10": "var(--bestow-space-10)", "12": "var(--bestow-space-12)", "16": "var(--bestow-space-16)" }, radius: { none: "var(--bestow-radius-none)", sm: "var(--bestow-radius-sm)", md: "var(--bestow-radius-md)", lg: "var(--bestow-radius-lg)", xl: "var(--bestow-radius-xl)", full: "var(--bestow-radius-full)" }, font: { family: { sans: "var(--bestow-font-family-sans)", mono: "var(--bestow-font-family-mono)" }, size: { xs: "var(--bestow-font-size-xs)", sm: "var(--bestow-font-size-sm)", md: "var(--bestow-font-size-md)", lg: "var(--bestow-font-size-lg)", xl: "var(--bestow-font-size-xl)", "2xl": "var(--bestow-font-size-2xl)", "3xl": "var(--bestow-font-size-3xl)", "4xl": "var(--bestow-font-size-4xl)" }, weight: { regular: "var(--bestow-font-weight-regular)", medium: "var(--bestow-font-weight-medium)", semibold: "var(--bestow-font-weight-semibold)", bold: "var(--bestow-font-weight-bold)" }, lineHeight: { tight: "var(--bestow-font-line-height-tight)", normal: "var(--bestow-font-line-height-normal)", relaxed: "var(--bestow-font-line-height-relaxed)" } }, duration: { fast: "var(--bestow-duration-fast)", normal: "var(--bestow-duration-normal)", slow: "var(--bestow-duration-slow)" }, zIndex: { overlay: "var(--bestow-z-index-overlay)", modal: "var(--bestow-z-index-modal)", dropdown: "var(--bestow-z-index-dropdown)", toast: "var(--bestow-z-index-toast)", tooltip: "var(--bestow-z-index-tooltip)" }, color: { bg: { "default": "var(--bestow-color-bg-default)", subtle: "var(--bestow-color-bg-subtle)", muted: "var(--bestow-color-bg-muted)", inverse: "var(--bestow-color-bg-inverse)", overlay: "var(--bestow-color-bg-overlay)" }, fg: { "default": "var(--bestow-color-fg-default)", muted: "var(--bestow-color-fg-muted)", subtle: "var(--bestow-color-fg-subtle)", inverse: "var(--bestow-color-fg-inverse)" }, border: { "default": "var(--bestow-color-border-default)", strong: "var(--bestow-color-border-strong)", focus: "var(--bestow-color-border-focus)", input: "var(--bestow-color-border-input)", inputHover: "var(--bestow-color-border-input-hover)", control: "var(--bestow-color-border-control)" }, primary: { solid: "var(--bestow-color-primary-solid)", solidHover: "var(--bestow-color-primary-solid-hover)", contrast: "var(--bestow-color-primary-contrast)", subtle: "var(--bestow-color-primary-subtle)", subtleHover: "var(--bestow-color-primary-subtle-hover)", text: "var(--bestow-color-primary-text)" }, neutral: { solid: "var(--bestow-color-neutral-solid)", solidHover: "var(--bestow-color-neutral-solid-hover)", contrast: "var(--bestow-color-neutral-contrast)", subtle: "var(--bestow-color-neutral-subtle)", subtleHover: "var(--bestow-color-neutral-subtle-hover)", text: "var(--bestow-color-neutral-text)" }, danger: { solid: "var(--bestow-color-danger-solid)", solidHover: "var(--bestow-color-danger-solid-hover)", contrast: "var(--bestow-color-danger-contrast)", subtle: "var(--bestow-color-danger-subtle)", subtleHover: "var(--bestow-color-danger-subtle-hover)", text: "var(--bestow-color-danger-text)" }, success: { solid: "var(--bestow-color-success-solid)", solidHover: "var(--bestow-color-success-solid-hover)", contrast: "var(--bestow-color-success-contrast)", subtle: "var(--bestow-color-success-subtle)", subtleHover: "var(--bestow-color-success-subtle-hover)", text: "var(--bestow-color-success-text)" }, warning: { solid: "var(--bestow-color-warning-solid)", solidHover: "var(--bestow-color-warning-solid-hover)", contrast: "var(--bestow-color-warning-contrast)", subtle: "var(--bestow-color-warning-subtle)", subtleHover: "var(--bestow-color-warning-subtle-hover)", text: "var(--bestow-color-warning-text)" }, info: { solid: "var(--bestow-color-info-solid)", solidHover: "var(--bestow-color-info-solid-hover)", contrast: "var(--bestow-color-info-contrast)", subtle: "var(--bestow-color-info-subtle)", subtleHover: "var(--bestow-color-info-subtle-hover)", text: "var(--bestow-color-info-text)" } }, shadow: { sm: "var(--bestow-shadow-sm)", md: "var(--bestow-shadow-md)", lg: "var(--bestow-shadow-lg)" } };
+var vars = { space: { "0": "var(--bestow-space-0)", "1": "var(--bestow-space-1)", "2": "var(--bestow-space-2)", "3": "var(--bestow-space-3)", "4": "var(--bestow-space-4)", "5": "var(--bestow-space-5)", "6": "var(--bestow-space-6)", "8": "var(--bestow-space-8)", "10": "var(--bestow-space-10)", "12": "var(--bestow-space-12)", "16": "var(--bestow-space-16)" }, radius: { none: "var(--bestow-radius-none)", sm: "var(--bestow-radius-sm)", md: "var(--bestow-radius-md)", lg: "var(--bestow-radius-lg)", xl: "var(--bestow-radius-xl)", full: "var(--bestow-radius-full)" }, font: { family: { sans: "var(--bestow-font-family-sans)", mono: "var(--bestow-font-family-mono)" }, size: { xs: "var(--bestow-font-size-xs)", sm: "var(--bestow-font-size-sm)", md: "var(--bestow-font-size-md)", lg: "var(--bestow-font-size-lg)", xl: "var(--bestow-font-size-xl)", "2xl": "var(--bestow-font-size-2xl)", "3xl": "var(--bestow-font-size-3xl)", "4xl": "var(--bestow-font-size-4xl)" }, weight: { regular: "var(--bestow-font-weight-regular)", medium: "var(--bestow-font-weight-medium)", semibold: "var(--bestow-font-weight-semibold)", bold: "var(--bestow-font-weight-bold)" }, lineHeight: { tight: "var(--bestow-font-line-height-tight)", normal: "var(--bestow-font-line-height-normal)", relaxed: "var(--bestow-font-line-height-relaxed)" } }, duration: { fast: "var(--bestow-duration-fast)", normal: "var(--bestow-duration-normal)", slow: "var(--bestow-duration-slow)" }, opacity: { disabled: "var(--bestow-opacity-disabled)" }, zIndex: { overlay: "var(--bestow-z-index-overlay)", modal: "var(--bestow-z-index-modal)", dropdown: "var(--bestow-z-index-dropdown)", toast: "var(--bestow-z-index-toast)", tooltip: "var(--bestow-z-index-tooltip)" }, color: { bg: { "default": "var(--bestow-color-bg-default)", subtle: "var(--bestow-color-bg-subtle)", muted: "var(--bestow-color-bg-muted)", inverse: "var(--bestow-color-bg-inverse)", overlay: "var(--bestow-color-bg-overlay)" }, fg: { "default": "var(--bestow-color-fg-default)", muted: "var(--bestow-color-fg-muted)", subtle: "var(--bestow-color-fg-subtle)", inverse: "var(--bestow-color-fg-inverse)" }, border: { "default": "var(--bestow-color-border-default)", strong: "var(--bestow-color-border-strong)", focus: "var(--bestow-color-border-focus)", input: "var(--bestow-color-border-input)", inputHover: "var(--bestow-color-border-input-hover)", control: "var(--bestow-color-border-control)" }, primary: { solid: "var(--bestow-color-primary-solid)", solidHover: "var(--bestow-color-primary-solid-hover)", contrast: "var(--bestow-color-primary-contrast)", subtle: "var(--bestow-color-primary-subtle)", subtleHover: "var(--bestow-color-primary-subtle-hover)", text: "var(--bestow-color-primary-text)" }, neutral: { solid: "var(--bestow-color-neutral-solid)", solidHover: "var(--bestow-color-neutral-solid-hover)", contrast: "var(--bestow-color-neutral-contrast)", subtle: "var(--bestow-color-neutral-subtle)", subtleHover: "var(--bestow-color-neutral-subtle-hover)", text: "var(--bestow-color-neutral-text)" }, danger: { solid: "var(--bestow-color-danger-solid)", solidHover: "var(--bestow-color-danger-solid-hover)", contrast: "var(--bestow-color-danger-contrast)", subtle: "var(--bestow-color-danger-subtle)", subtleHover: "var(--bestow-color-danger-subtle-hover)", text: "var(--bestow-color-danger-text)" }, success: { solid: "var(--bestow-color-success-solid)", solidHover: "var(--bestow-color-success-solid-hover)", contrast: "var(--bestow-color-success-contrast)", subtle: "var(--bestow-color-success-subtle)", subtleHover: "var(--bestow-color-success-subtle-hover)", text: "var(--bestow-color-success-text)" }, warning: { solid: "var(--bestow-color-warning-solid)", solidHover: "var(--bestow-color-warning-solid-hover)", contrast: "var(--bestow-color-warning-contrast)", subtle: "var(--bestow-color-warning-subtle)", subtleHover: "var(--bestow-color-warning-subtle-hover)", text: "var(--bestow-color-warning-text)" }, info: { solid: "var(--bestow-color-info-solid)", solidHover: "var(--bestow-color-info-solid-hover)", contrast: "var(--bestow-color-info-contrast)", subtle: "var(--bestow-color-info-subtle)", subtleHover: "var(--bestow-color-info-subtle-hover)", text: "var(--bestow-color-info-text)" } }, shadow: { sm: "var(--bestow-shadow-sm)", md: "var(--bestow-shadow-md)", lg: "var(--bestow-shadow-lg)" } };
 // src/theme/color.ts
 var import_tokens = require("@bestow-ui/tokens");
@@ -383,6 +383,7 @@ var en = {
   increment: "Increase",
   steps: "Progress",
   stepCompleted: "completed",
+  stepInProgress: "in progress",
   fileSelect: "Choose files",
   fileDropHint: "or drag and drop here",
   fileList: "Selected files",
@@ -515,18 +516,19 @@ function loadKakaoPostcode() {
   const existing = w.kakao?.Postcode ?? w.daum?.Postcode;
   if (existing) return Promise.resolve(existing);
   loading ?? (loading = new Promise((resolve, reject) => {
+    const fail = (message) => {
+      loading = null;
+      reject(new Error(message));
+    };
     const script = document.createElement("script");
     script.src = KAKAO_POSTCODE_SRC;
     script.async = true;
     script.onload = () => {
       const ctor = w.kakao?.Postcode ?? w.daum?.Postcode;
-      if (ctor) resolve(ctor);
-      else reject(new Error("\uC6B0\uD3B8\uBC88\uD638 \uC11C\uBE44\uC2A4\uB97C \uCC3E\uC9C0 \uBABB\uD588\uC5B4\uC694"));
-    };
-    script.onerror = () => {
-      loading = null;
-      reject(new Error("\uC6B0\uD3B8\uBC88\uD638 \uC11C\uBE44\uC2A4\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694"));
+      if (ctor) return resolve(ctor);
+      fail("\uC6B0\uD3B8\uBC88\uD638 \uC11C\uBE44\uC2A4\uB97C \uCC3E\uC9C0 \uBABB\uD588\uC5B4\uC694");
     };
+    script.onerror = () => fail("\uC6B0\uD3B8\uBC88\uD638 \uC11C\uBE44\uC2A4\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694");
     document.head.appendChild(script);
   }));
   return loading;
@@ -1098,14 +1100,40 @@ var AccordionItem = /* @__PURE__ */ (0, import_react16.forwardRef)(function Acco
 });
 // src/components/AddressInput/AddressInput.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
+// src/utils/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (value4) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value4);
+      else if (ref) ref.current = value4;
+    }
+  };
+}
+// src/utils/useFormReset.ts
+var import_react17 = require("react");
+function useFormReset(ref, onReset) {
+  const latest = (0, import_react17.useRef)(onReset);
+  (0, import_react17.useEffect)(() => {
+    latest.current = onReset;
+  });
+  (0, import_react17.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
-var import_react18 = require("react");
+var import_react19 = require("react");
 // src/components/Spinner/Spinner.tsx
 var import_icons2 = require("@bestow-ui/icons");
-var import_react17 = require("react");
+var import_react18 = require("react");
 // src/components/Spinner/Spinner.css.ts
 var import_createRuntimeFn11 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -1113,7 +1141,7 @@ var spinner = /* @__PURE__ */ (0, import_createRuntimeFn11.createRuntimeFn)({ de
 // src/components/Spinner/Spinner.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Spinner = /* @__PURE__ */ (0, import_react17.forwardRef)(function Spinner2({ size, color, label: labelProp, className, ...rest }, ref) {
+var Spinner = /* @__PURE__ */ (0, import_react18.forwardRef)(function Spinner2({ size, color, label: labelProp, className, ...rest }, ref) {
   const m = useMessages();
   const label7 = labelProp ?? m.loading ?? "\uB85C\uB529 \uC911";
   const a11y = label7 ? { role: "status" } : { "aria-hidden": true };
@@ -1130,7 +1158,7 @@ var icon2 = "xcekdai";
 // src/components/Button/Button.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var Button = /* @__PURE__ */ (0, import_react18.forwardRef)(function Button2({
+var Button = /* @__PURE__ */ (0, import_react19.forwardRef)(function Button2({
   variant,
   color,
   size,
@@ -1138,6 +1166,8 @@ var Button = /* @__PURE__ */ (0, import_react18.forwardRef)(function Button2({
   startIcon,
   endIcon,
   loading: loading2,
+  asChild,
+  disabled,
   className,
   type = "button",
   onClick,
@@ -1145,36 +1175,63 @@ var Button = /* @__PURE__ */ (0, import_react18.forwardRef)(function Button2({
   ...rest
 }, ref) {
   const handleClick = (event) => {
-    if (loading2) {
+    if (loading2 || disabled) {
       event.preventDefault();
       return;
     }
     onClick?.(event);
   };
   const leading = loading2 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Spinner, { size: "sm", label: "" }) : startIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  const buttonClassName = cx(button({ variant, color, size, fullWidth }), className);
+  const content12 = (label7) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    leading && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: icon2, children: leading }),
+    label7,
+    endIcon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: icon2, children: endIcon })
+  ] });
+  if (asChild) {
+    const child = import_react19.Children.only(children);
+    const { props } = child;
+    return (0, import_react19.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(import_react19.version) >= 19 ? props.ref : child.ref),
+        tabIndex: disabled ? -1 : props.tabIndex,
+        "aria-busy": loading2 || void 0,
+        "aria-disabled": loading2 || disabled || void 0,
+        "data-disabled": disabled ? "" : void 0,
+        onClick: (event) => {
+          handleClick(event);
+          if (!loading2 && !disabled) props.onClick?.(event);
+        }
+      },
+      content12(props.children)
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
     {
       ref,
       type,
-      className: cx(button({ variant, color, size, fullWidth }), className),
+      disabled,
+      className: buttonClassName,
       "aria-busy": loading2 || void 0,
       "aria-disabled": loading2 || void 0,
       onClick: handleClick,
       ...rest,
-      children: [
-        leading && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: icon2, children: leading }),
-        children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: icon2, children: endIcon })
-      ]
+      children: content12(children)
     }
   );
 });
 // src/components/Input/Input.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var Input = /* @__PURE__ */ (0, import_react19.forwardRef)(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
+var Input = /* @__PURE__ */ (0, import_react20.forwardRef)(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
@@ -1200,10 +1257,10 @@ var Input = /* @__PURE__ */ (0, import_react19.forwardRef)(function Input2({ siz
 });
 // src/components/Input/TextField.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var TextField = /* @__PURE__ */ (0, import_react20.forwardRef)(function TextField2({ label: label7, helperText: helperText3, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
-  const generatedId = (0, import_react20.useId)();
+var TextField = /* @__PURE__ */ (0, import_react21.forwardRef)(function TextField2({ label: label7, helperText: helperText3, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
+  const generatedId = (0, import_react21.useId)();
   const inputId = id ?? generatedId;
   const helperId = helperText3 ? `${inputId}-helper` : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
@@ -1232,9 +1289,9 @@ var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_icons3 = require("@bestow-ui/icons");
 // src/utils/useReturnFocus.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 function useReturnFocus(hasTrigger, onCloseAutoFocus) {
-  const returnTo = (0, import_react21.useRef)(null);
+  const returnTo = (0, import_react22.useRef)(null);
   return {
     onOpenAutoFocus: () => {
       const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -1334,13 +1391,13 @@ function SearchArea({
   loadErrorText,
   loadingText
 }) {
-  const containerRef = (0, import_react22.useRef)(null);
-  const [status, setStatus] = (0, import_react22.useState)("loading");
-  const onSelectRef = (0, import_react22.useRef)(onSelect);
-  (0, import_react22.useEffect)(() => {
+  const containerRef = (0, import_react23.useRef)(null);
+  const [status, setStatus] = (0, import_react23.useState)("loading");
+  const onSelectRef = (0, import_react23.useRef)(onSelect);
+  (0, import_react23.useEffect)(() => {
     onSelectRef.current = onSelect;
   });
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const container3 = containerRef.current;
     if (!container3) return;
     let cleanup;
@@ -1362,7 +1419,7 @@ function SearchArea({
     status !== "ready" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: searchStatus, role: "status", children: status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Spinner, { label: loadingText }) : loadErrorText })
   ] });
 }
-var AddressInput = /* @__PURE__ */ (0, import_react22.forwardRef)(
+var AddressInput = /* @__PURE__ */ (0, import_react23.forwardRef)(
   function AddressInput2(props, ref) {
     const {
       value: value4,
@@ -1385,18 +1442,22 @@ var AddressInput = /* @__PURE__ */ (0, import_react22.forwardRef)(
     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 = (0, import_react22.useId)();
+    const baseId = (0, import_react23.useId)();
     const helperId = helperText3 ? `${baseId}-helper` : void 0;
-    const detailRef = (0, import_react22.useRef)(null);
-    const selectedRef = (0, import_react22.useRef)(false);
-    const [open, setOpen] = (0, import_react22.useState)(false);
+    const detailRef = (0, import_react23.useRef)(null);
+    const selectedRef = (0, import_react23.useRef)(false);
+    const [open, setOpen] = (0, import_react23.useState)(false);
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = (0, import_react22.useState)(defaultValue ?? EMPTY);
+    const [innerValue, setInnerValue] = (0, import_react23.useState)(defaultValue ?? EMPTY);
     const current2 = isControlled ? value4 ?? EMPTY : innerValue;
     const update = (next) => {
       if (!isControlled) setInnerValue(next);
       onValueChange?.(next);
     };
+    const rootRef = (0, import_react23.useRef)(null);
+    useFormReset(rootRef, () => {
+      if (!isControlled) update(defaultValue ?? EMPTY);
+    });
     const openSearch = () => {
       if (disabled) return;
       selectedRef.current = false;
@@ -1413,102 +1474,101 @@ var AddressInput = /* @__PURE__ */ (0, import_react22.forwardRef)(
       setOpen(false);
     };
     const fullAddress = `${current2.address}${current2.extraAddress ?? ""}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("fieldset", { ref, className: cx(fieldset, className), disabled, "aria-describedby": helperId, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("legend", { className: legend, children: [
-        label7,
-        required && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          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__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "outline", color: "neutral", onClick: openSearch, disabled, children: searchLabel })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        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__ */ (0, import_jsx_runtime21.jsx)(
-        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__ */ (0, import_jsx_runtime21.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
-      name && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "hidden", name: `${name}[zonecode]`, value: current2.zonecode }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "hidden", name: `${name}[address]`, value: fullAddress }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "hidden", name: `${name}[detail]`, value: current2.detail })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        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__ */ (0, import_jsx_runtime21.jsxs)(
+      "fieldset",
+      {
+        ref: mergeRefs(ref, rootRef),
+        className: cx(fieldset, className),
+        disabled,
+        "aria-describedby": helperId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("legend", { className: legend, children: [
+            label7,
+            required && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: row, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              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__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "outline", color: "neutral", onClick: openSearch, disabled, children: searchLabel })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            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__ */ (0, import_jsx_runtime21.jsx)(
-            SearchArea,
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            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__ */ (0, import_jsx_runtime21.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
+          name && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "hidden", name: `${name}[zonecode]`, value: current2.zonecode }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "hidden", name: `${name}[address]`, value: fullAddress }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "hidden", name: `${name}[detail]`, value: current2.detail })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            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__ */ (0, import_jsx_runtime21.jsx)(
+                SearchArea,
+                {
+                  provider,
+                  onSelect: handleSelect,
+                  loadErrorText,
+                  loadingText: m.addressLoading ?? "\uC8FC\uC18C \uAC80\uC0C9\uC744 \uBD88\uB7EC\uC624\uB294 \uC911"
+                }
+              )
             }
           )
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
 );
 // src/components/AgreementGroup/AgreementGroup.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_icons4 = require("@bestow-ui/icons");
 // src/components/Checkbox/Checkbox.tsx
-var import_react23 = require("react");
-// src/utils/mergeRefs.ts
-function mergeRefs(...refs) {
-  return (value4) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") ref(value4);
-      else if (ref) ref.current = value4;
-    }
-  };
-}
+var import_react24 = require("react");
 // src/components/Checkbox/Checkbox.css.ts
 var import_createRuntimeFn14 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -1520,9 +1580,9 @@ var root6 = /* @__PURE__ */ (0, import_createRuntimeFn14.createRuntimeFn)({ defa
 // src/components/Checkbox/Checkbox.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var Checkbox = /* @__PURE__ */ (0, import_react23.forwardRef)(function Checkbox2({ label: label7, size, indeterminate = false, invalid, disabled, onChange, onCheckedChange, className, ...rest }, ref) {
-  const innerRef = (0, import_react23.useRef)(null);
-  (0, import_react23.useEffect)(() => {
+var Checkbox = /* @__PURE__ */ (0, import_react24.forwardRef)(function Checkbox2({ label: label7, size, indeterminate = false, invalid, disabled, onChange, onCheckedChange, className, ...rest }, ref) {
+  const innerRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(() => {
     if (innerRef.current) innerRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: cx(root6({ size }), className), "data-disabled": disabled || void 0, children: [
@@ -1573,7 +1633,7 @@ var toggle = "j3uxdc8";
 // src/components/AgreementGroup/AgreementGroup.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var AgreementGroup = /* @__PURE__ */ (0, import_react24.forwardRef)(
+var AgreementGroup = /* @__PURE__ */ (0, import_react25.forwardRef)(
   function AgreementGroup2(props, ref) {
     const {
       items: items3,
@@ -1599,12 +1659,19 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react24.forwardRef)(
     const optionalText = optionalTextProp ?? m.optional ?? "\uC120\uD0DD";
     const showText = showTextProp ?? m.show ?? "\uBCF4\uAE30";
     const hideText = hideTextProp ?? m.hide ?? "\uC811\uAE30";
-    const baseId = (0, import_react24.useId)();
+    const baseId = (0, import_react25.useId)();
     const helperId = helperText3 ? `${baseId}-helper` : void 0;
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = (0, import_react24.useState)(defaultValue ?? []);
+    const [innerValue, setInnerValue] = (0, import_react25.useState)(defaultValue ?? []);
     const agreed = isControlled ? value4 ?? [] : innerValue;
-    const [expanded, setExpanded] = (0, import_react24.useState)([]);
+    const [expanded, setExpanded] = (0, import_react25.useState)([]);
+    const rootRef = (0, import_react25.useRef)(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);
@@ -1616,7 +1683,7 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react24.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "fieldset",
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id,
         className: cx(fieldset2, className),
         disabled,
@@ -1686,7 +1753,7 @@ var AgreementGroup = /* @__PURE__ */ (0, import_react24.forwardRef)(
 );
 // src/components/Alert/Alert.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_icons5 = require("@bestow-ui/icons");
 // src/components/Alert/Alert.css.ts
@@ -1709,7 +1776,7 @@ var defaultIcons = {
   danger: import_icons5.CircleAlertIcon,
   info: import_icons5.InfoIcon
 };
-var Alert = /* @__PURE__ */ (0, import_react25.forwardRef)(function Alert2({
+var Alert = /* @__PURE__ */ (0, import_react26.forwardRef)(function Alert2({
   variant,
   color = "primary",
   title: title6,
@@ -1737,15 +1804,15 @@ var Alert = /* @__PURE__ */ (0, import_react25.forwardRef)(function Alert2({
 });
 // src/components/AmountInput/AmountInput.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_korean_utils4 = require("@bestow-ui/korean-utils");
 // src/utils/useFormattedInput.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 // src/utils/useIsomorphicLayoutEffect.ts
-var import_react26 = require("react");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react26.useLayoutEffect : import_react26.useEffect;
+var import_react27 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react27.useLayoutEffect : import_react27.useEffect;
 // src/utils/useFormattedInput.ts
 function caretAfter(display, count2, isMeaningful2) {
@@ -1762,15 +1829,16 @@ function useFormattedInput({
   value: value4,
   defaultValue,
   onValueChange,
-  sanitize: sanitize4,
+  sanitize: sanitize3,
   format: format2,
   isMeaningful: isMeaningful2,
-  inputRef
+  inputRef,
+  manualReset
 }) {
-  const [innerValue, setInnerValue] = (0, import_react27.useState)(() => sanitize4(defaultValue ?? ""));
-  const raw = isControlled ? sanitize4(value4 ?? "") : innerValue;
+  const [innerValue, setInnerValue] = (0, import_react28.useState)(() => sanitize3(defaultValue ?? ""));
+  const raw = isControlled ? sanitize3(value4 ?? "") : innerValue;
   const display = format2(raw);
-  const pendingCaret = (0, import_react27.useRef)(null);
+  const pendingCaret = (0, import_react28.useRef)(null);
   useIsomorphicLayoutEffect(() => {
     const input6 = inputRef.current;
     if (pendingCaret.current === null || !input6 || document.activeElement !== input6) return;
@@ -1778,6 +1846,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);
@@ -1785,8 +1859,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) => {
@@ -1806,7 +1880,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 };
 }
@@ -1817,7 +1891,7 @@ var input3 = "_70qkav0";
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var MAX_DIGITS = 15;
 var isDigit = (char) => /\d/.test(char);
-var AmountInput = /* @__PURE__ */ (0, import_react28.forwardRef)(
+var AmountInput = /* @__PURE__ */ (0, import_react29.forwardRef)(
   function AmountInput2(props, ref) {
     const {
       value: value4,
@@ -1833,11 +1907,11 @@ var AmountInput = /* @__PURE__ */ (0, import_react28.forwardRef)(
       className,
       ...rest
     } = props;
-    const inputRef = (0, import_react28.useRef)(null);
+    const inputRef = (0, import_react29.useRef)(null);
     const m = useMessages();
     const unit2 = unitProp ?? m.currencyUnit ?? "\uC6D0";
     const label7 = 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;
@@ -1848,7 +1922,7 @@ var AmountInput = /* @__PURE__ */ (0, import_react28.forwardRef)(
       value: toRaw(value4),
       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
@@ -1883,7 +1957,7 @@ var AmountInput = /* @__PURE__ */ (0, import_react28.forwardRef)(
 // src/components/Avatar/Avatar.tsx
 var RadixAvatar = __toESM(require("@radix-ui/react-avatar"), 1);
 var import_icons6 = require("@bestow-ui/icons");
-var import_react29 = require("react");
+var import_react30 = require("react");
 // src/components/Avatar/Avatar.css.ts
 var import_createRuntimeFn16 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -1898,7 +1972,7 @@ function getInitials(name) {
   const first = (word) => Array.from(word)[0] ?? "";
   return (first(a) + first(b)).toUpperCase();
 }
-var Avatar = /* @__PURE__ */ (0, import_react29.forwardRef)(function Avatar2({ src, alt, name, fallback: fallback2, size, shape, className, ...rest }, ref) {
+var Avatar = /* @__PURE__ */ (0, import_react30.forwardRef)(function Avatar2({ src, alt, name, fallback: fallback2, size, shape, className, ...rest }, ref) {
   const label7 = alt ?? name;
   const a11y = label7 ? { role: "img", "aria-label": label7 } : { "aria-hidden": true };
   const initials = name ? getInitials(name) : "";
@@ -1909,12 +1983,12 @@ var Avatar = /* @__PURE__ */ (0, import_react29.forwardRef)(function Avatar2({ s
 });
 // src/components/Breadcrumb/Breadcrumb.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_icons8 = require("@bestow-ui/icons");
 // src/components/Link/Link.tsx
 var import_react_slot = require("@radix-ui/react-slot");
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_icons7 = require("@bestow-ui/icons");
 // src/components/Link/Link.css.ts
@@ -1927,7 +2001,7 @@ var import_jsx_runtime27 = (
   // Slot 의 props 타입은 HTMLElement 기준이라 <a> 전용 속성(target·rel 등)은 그대로 넘기도록 단언한다
   require("react/jsx-runtime")
 );
-var Link = /* @__PURE__ */ (0, import_react30.forwardRef)(function Link2({
+var Link = /* @__PURE__ */ (0, import_react31.forwardRef)(function Link2({
   as: Component = "a",
   asChild,
   color,
@@ -1975,7 +2049,7 @@ var separator = "_18t8ztt4";
 // src/components/Breadcrumb/Breadcrumb.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var Breadcrumb = /* @__PURE__ */ (0, import_react31.forwardRef)(function Breadcrumb2({ items: items3, linkAs, separator: separator5, "aria-label": ariaLabelProp, className, ...rest }, ref) {
+var Breadcrumb = /* @__PURE__ */ (0, import_react32.forwardRef)(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 = separator5 ?? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons8.ChevronRightIcon, { size: 14 });
@@ -1989,15 +2063,15 @@ var Breadcrumb = /* @__PURE__ */ (0, import_react31.forwardRef)(function Breadcr
 });
 // src/components/BusinessNumberInput/BusinessNumberInput.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_korean_utils5 = require("@bestow-ui/korean-utils");
 // src/utils/useDelayedAnnouncement.ts
-var import_react32 = require("react");
+var import_react33 = require("react");
 var ANNOUNCE_DELAY = 800;
 function useDelayedAnnouncement(message, delay = ANNOUNCE_DELAY) {
-  const [announced, setAnnounced] = (0, import_react32.useState)("");
-  (0, import_react32.useEffect)(() => {
+  const [announced, setAnnounced] = (0, import_react33.useState)("");
+  (0, import_react33.useEffect)(() => {
     const timer2 = setTimeout(() => setAnnounced(message), message ? delay : 0);
     return () => clearTimeout(timer2);
   }, [message, delay]);
@@ -2008,7 +2082,7 @@ function useDelayedAnnouncement(message, delay = ANNOUNCE_DELAY) {
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var sanitize = (input6) => input6.replace(/\D/g, "").slice(0, 10);
 var isDigit2 = (char) => /\d/.test(char);
-var BusinessNumberInput = /* @__PURE__ */ (0, import_react33.forwardRef)(
+var BusinessNumberInput = /* @__PURE__ */ (0, import_react34.forwardRef)(
   function BusinessNumberInput2(props, ref) {
     const {
       value: value4,
@@ -2024,12 +2098,13 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react33.forwardRef)(
       onKeyDown,
       ...rest
     } = props;
-    const inputRef = (0, import_react33.useRef)(null);
+    const inputRef = (0, import_react34.useRef)(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 label7 = 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] = (0, import_react33.useState)(false);
+    const [touched, setTouched] = (0, import_react34.useState)(false);
+    useFormReset(inputRef, () => setTouched(false));
     const field4 = useFormattedInput({
       isControlled: "value" in props,
       value: value4,
@@ -2073,16 +2148,16 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react33.forwardRef)(
 );
 // src/components/Calendar/Calendar.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_icons9 = require("@bestow-ui/icons");
 var import_korean_utils6 = require("@bestow-ui/korean-utils");
 // src/utils/useIsClient.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 var subscribeNothing = () => () => {
 };
 function useIsClient() {
-  return (0, import_react34.useSyncExternalStore)(
+  return (0, import_react35.useSyncExternalStore)(
     subscribeNothing,
     () => true,
     () => false
@@ -2090,7 +2165,7 @@ function useIsClient() {
 }
 // src/components/IconButton/IconButton.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 // src/components/IconButton/IconButton.css.ts
 var import_createRuntimeFn18 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -2098,7 +2173,7 @@ var iconButton = /* @__PURE__ */ (0, import_createRuntimeFn18.createRuntimeFn)({
 // src/components/IconButton/IconButton.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var IconButton = /* @__PURE__ */ (0, import_react35.forwardRef)(function IconButton2({ variant = "ghost", color = "neutral", size, loading: loading2, className, children, ...rest }, ref) {
+var IconButton = /* @__PURE__ */ (0, import_react36.forwardRef)(function IconButton2({ variant = "ghost", color = "neutral", size, loading: loading2, asChild, className, children, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     Button,
     {
@@ -2107,9 +2182,10 @@ var IconButton = /* @__PURE__ */ (0, import_react35.forwardRef)(function IconBut
       color,
       size,
       loading: loading2,
+      asChild,
       className: cx(iconButton({ size }), className),
       ...rest,
-      children: !loading2 && children
+      children: loading2 ? asChild && (0, import_react36.cloneElement)(children, void 0, null) : children
     }
   );
 });
@@ -2125,7 +2201,7 @@ var weekday = "_1qyq67b4";
 // src/components/Calendar/Calendar.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Calendar = /* @__PURE__ */ (0, import_react36.forwardRef)(function Calendar2(props, ref) {
+var Calendar = /* @__PURE__ */ (0, import_react37.forwardRef)(function Calendar2(props, ref) {
   const {
     value: value4,
     defaultValue,
@@ -2145,10 +2221,10 @@ var Calendar = /* @__PURE__ */ (0, import_react36.forwardRef)(function Calendar2
   const nextMonthLabel = nextMonthLabelProp ?? m.nextMonth ?? "\uB2E4\uC74C \uB2EC";
   const weekdaysShort = m.weekdaysShort ?? import_korean_utils6.KOREAN_WEEKDAYS;
   const weekdaysLong = m.weekdaysLong ?? import_korean_utils6.KOREAN_WEEKDAYS.map((name) => `${name}\uC694\uC77C`);
-  const headingId = (0, import_react36.useId)();
-  const gridRef = (0, import_react36.useRef)(null);
+  const headingId = (0, import_react37.useId)();
+  const gridRef = (0, import_react37.useRef)(null);
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react36.useState)(defaultValue ?? "");
+  const [innerValue, setInnerValue] = (0, import_react37.useState)(defaultValue ?? "");
   const selected = parseISODate(isControlled ? value4 : innerValue);
   const isClient = useIsClient();
   const today = parseISODate(todayProp) ?? (isClient ? /* @__PURE__ */ new Date() : null);
@@ -2160,16 +2236,16 @@ var Calendar = /* @__PURE__ */ (0, import_react36.forwardRef)(function Calendar2
     return date;
   };
   const isDisabled = (date) => minDate !== null && compareDays(date, minDate) < 0 || maxDate !== null && compareDays(date, maxDate) > 0 || !!isDateDisabled?.(date);
-  const [focusedState, setFocused] = (0, import_react36.useState)(null);
+  const [focusedState, setFocused] = (0, import_react37.useState)(null);
   const base = selected ?? today;
   const focused = focusedState ?? (base ? clamp(base) : null);
-  const moveFocus = (0, import_react36.useRef)(initialFocus ?? false);
+  const moveFocus = (0, import_react37.useRef)(initialFocus ?? false);
   const selectedIso = selected ? toISODate(selected) : "";
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const date = parseISODate(selectedIso);
     if (date) setFocused((prev) => isSameDay(prev, date) ? prev : date);
   }, [selectedIso]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!moveFocus.current || !focused) return;
     moveFocus.current = false;
     gridRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
@@ -2272,7 +2348,7 @@ var Calendar = /* @__PURE__ */ (0, import_react36.forwardRef)(function Calendar2
 });
 // src/components/CheckboxGroup/CheckboxGroup.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 // src/components/CheckboxGroup/CheckboxGroup.css.ts
 var import_createRuntimeFn19 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -2283,7 +2359,7 @@ var option = "_1z0r6xj4";
 // src/components/CheckboxGroup/CheckboxGroup.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var CheckboxGroup = /* @__PURE__ */ (0, import_react37.forwardRef)(
+var CheckboxGroup = /* @__PURE__ */ (0, import_react38.forwardRef)(
   function CheckboxGroup2(props, ref) {
     const {
       options,
@@ -2304,12 +2380,19 @@ var CheckboxGroup = /* @__PURE__ */ (0, import_react37.forwardRef)(
     } = props;
     const m = useMessages();
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = (0, import_react37.useState)(defaultValue ?? []);
+    const [innerValue, setInnerValue] = (0, import_react38.useState)(defaultValue ?? []);
     const current2 = isControlled ? value4 ?? [] : innerValue;
-    const generatedId = (0, import_react37.useId)();
+    const generatedId = (0, import_react38.useId)();
     const baseId = id ?? generatedId;
     const labelId = label7 ? `${baseId}-label` : void 0;
     const helperId = helperText3 ? `${baseId}-helper` : void 0;
+    const rootRef = (0, import_react38.useRef)(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);
@@ -2331,7 +2414,7 @@ var CheckboxGroup = /* @__PURE__ */ (0, import_react37.forwardRef)(
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
-          ref,
+          ref: mergeRefs(ref, rootRef),
           id: baseId,
           role: "group",
           "aria-label": ariaLabel,
@@ -2369,7 +2452,7 @@ var CheckboxGroup = /* @__PURE__ */ (0, import_react37.forwardRef)(
 // src/components/Combobox/Combobox.tsx
 var Popover = __toESM(require("@radix-ui/react-popover"), 1);
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_icons10 = require("@bestow-ui/icons");
 // src/components/Select/Select.css.ts
@@ -2390,7 +2473,7 @@ var toggle2 = "c2pbq71 c2pbq70";
 // src/components/Combobox/Combobox.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var defaultFilter = (option3, query2) => option3.label.toLowerCase().includes(query2.trim().toLowerCase());
-var Combobox = /* @__PURE__ */ (0, import_react38.forwardRef)(function Combobox2(props, ref) {
+var Combobox = /* @__PURE__ */ (0, import_react39.forwardRef)(function Combobox2(props, ref) {
   const {
     options,
     value: value4,
@@ -2418,23 +2501,23 @@ var Combobox = /* @__PURE__ */ (0, import_react38.forwardRef)(function Combobox2
   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 = (0, import_react38.useId)();
+  const generatedId = (0, import_react39.useId)();
   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 = (0, import_react38.useRef)(null);
-  const anchorRef = (0, import_react38.useRef)(null);
+  const inputRef = (0, import_react39.useRef)(null);
+  const anchorRef = (0, import_react39.useRef)(null);
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react38.useState)(defaultValue);
+  const [innerValue, setInnerValue] = (0, import_react39.useState)(defaultValue);
   const selectedValue = isControlled ? value4 : innerValue;
   const selectedOption = options.find((o) => o.value === selectedValue);
-  const [open, setOpen] = (0, import_react38.useState)(false);
-  const [query2, setQuery] = (0, import_react38.useState)(null);
-  const [activeIndex, setActiveIndex] = (0, import_react38.useState)(-1);
-  const filtered = (0, import_react38.useMemo)(() => query2 ? options.filter((o) => filter(o, query2)) : options, [options, filter, query2]);
+  const [open, setOpen] = (0, import_react39.useState)(false);
+  const [query2, setQuery] = (0, import_react39.useState)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react39.useState)(-1);
+  const filtered = (0, import_react39.useMemo)(() => 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;
@@ -2452,6 +2535,12 @@ var Combobox = /* @__PURE__ */ (0, import_react38.forwardRef)(function Combobox2
     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?.("");
@@ -2479,6 +2568,7 @@ var Combobox = /* @__PURE__ */ (0, import_react38.forwardRef)(function Combobox2
     setActiveIndex(nextQuery ? firstEnabled(nextList) : -1);
   };
   const handleKeyDown = (event) => {
+    if (event.nativeEvent.isComposing || event.keyCode === 229) return;
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
@@ -2509,14 +2599,14 @@ var Combobox = /* @__PURE__ */ (0, import_react38.forwardRef)(function Combobox2
         break;
     }
   };
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     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] = (0, import_react38.useState)(void 0);
-  (0, import_react38.useEffect)(() => {
+  const [announcedFor, setAnnouncedFor] = (0, import_react39.useState)(void 0);
+  (0, import_react39.useEffect)(() => {
     if (!noResults) return;
     const timer2 = setTimeout(() => setAnnouncedFor(query2), ANNOUNCE_DELAY);
     return () => clearTimeout(timer2);
@@ -2665,13 +2755,13 @@ var Combobox = /* @__PURE__ */ (0, import_react38.forwardRef)(function Combobox2
 });
 // src/components/DatePicker/DatePicker.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_icons12 = require("@bestow-ui/icons");
 // src/components/Popover/Popover.tsx
 var RadixPopover = __toESM(require("@radix-ui/react-popover"), 1);
 var import_icons11 = require("@bestow-ui/icons");
-var import_react39 = require("react");
+var import_react40 = require("react");
 // src/components/Popover/Popover.css.ts
 var arrow = "_1j99p8x4";
@@ -2701,7 +2791,7 @@ function Popover2({
 }) {
   const portal2 = usePortalProps();
   const m = useMessages();
-  const titleId = (0, import_react39.useId)();
+  const titleId = (0, import_react40.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RadixPopover.Trigger, { asChild: true, children }),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RadixPopover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
@@ -2735,7 +2825,7 @@ var import_jsx_runtime35 = require("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__ */ (0, import_react40.forwardRef)(
+var DatePicker = /* @__PURE__ */ (0, import_react41.forwardRef)(
   function DatePicker2(props, ref) {
     const {
       value: value4,
@@ -2761,17 +2851,17 @@ var DatePicker = /* @__PURE__ */ (0, import_react40.forwardRef)(
       id,
       className
     } = props;
-    const inputRef = (0, import_react40.useRef)(null);
+    const inputRef = (0, import_react41.useRef)(null);
     const m = useMessages();
     const label7 = 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] = (0, import_react40.useState)(false);
-    const [touched, setTouched] = (0, import_react40.useState)(false);
+    const [open, setOpen] = (0, import_react41.useState)(false);
+    const [touched, setTouched] = (0, import_react41.useState)(false);
     const isControlled = "value" in props;
-    const lastEmitted = (0, import_react40.useRef)(isControlled ? value4 ?? "" : defaultValue ?? "");
+    const lastEmitted = (0, import_react41.useRef)(isControlled ? value4 ?? "" : 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)}` : "";
@@ -2792,11 +2882,12 @@ var DatePicker = /* @__PURE__ */ (0, import_react40.forwardRef)(
       sanitize: sanitize2,
       format,
       isMeaningful: isDigit3,
-      inputRef
+      inputRef,
+      manualReset: true
     });
     const textIso = toIso(field4.raw);
     const { setRaw } = field4;
-    (0, import_react40.useEffect)(() => {
+    (0, import_react41.useEffect)(() => {
       if (!isControlled) return;
       const next = value4 ?? "";
       lastEmitted.current = next;
@@ -2806,6 +2897,12 @@ var DatePicker = /* @__PURE__ */ (0, import_react40.forwardRef)(
       if (next === "" && !textIsValid) return;
       setRaw(next.replace(/\D/g, ""));
     }, [value4]);
+    useFormReset(inputRef, () => {
+      setTouched(false);
+      const next = (isControlled ? value4 : 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;
@@ -2870,7 +2967,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react40.forwardRef)(
 );
 // src/components/DateRangePicker/DateRangePicker.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 // src/components/DateRangePicker/DateRangePicker.css.ts
 var field2 = "_17277dh3";
@@ -2882,7 +2979,7 @@ var separator2 = "_17277dh4";
 // src/components/DateRangePicker/DateRangePicker.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var DateRangePicker = /* @__PURE__ */ (0, import_react41.forwardRef)(
+var DateRangePicker = /* @__PURE__ */ (0, import_react42.forwardRef)(
   function DateRangePicker2(props, ref) {
     const {
       value: value4,
@@ -2907,18 +3004,22 @@ var DateRangePicker = /* @__PURE__ */ (0, import_react41.forwardRef)(
       className
     } = props;
     const m = useMessages();
-    const generatedId = (0, import_react41.useId)();
+    const generatedId = (0, import_react42.useId)();
     const baseId = id ?? generatedId;
     const helperId = helperText3 ? `${baseId}-helper` : void 0;
     const isClient = useIsClient();
     const isControlled = "value" in props;
-    const [inner, setInner] = (0, import_react41.useState)(defaultValue ?? { start: "", end: "" });
+    const [inner, setInner] = (0, import_react42.useState)(defaultValue ?? { start: "", end: "" });
     const range3 = isControlled ? value4 ?? { start: "", end: "" } : inner;
     const update = (next) => {
       if (next.start === range3.start && next.end === range3.end) return;
       if (!isControlled) setInner(next);
       onValueChange?.(next);
     };
+    const rootRef = (0, import_react42.useRef)(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";
@@ -2926,7 +3027,7 @@ var DateRangePicker = /* @__PURE__ */ (0, import_react41.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "fieldset",
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id,
         className: cx(fieldset3, className),
         "aria-describedby": helperId,
@@ -3061,7 +3162,7 @@ function Drawer({
 var DrawerClose = Dialog2.Close;
 // src/components/ErrorSummary/ErrorSummary.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 // src/components/ErrorSummary/ErrorSummary.css.ts
 var link3 = "_1cdophv2";
@@ -3070,12 +3171,12 @@ var root9 = "_1cdophv0";
 // src/components/ErrorSummary/ErrorSummary.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var ErrorSummary = /* @__PURE__ */ (0, import_react42.forwardRef)(function ErrorSummary2({ errors: errors2, title: title6, focusKey, className, ...rest }, ref) {
+var ErrorSummary = /* @__PURE__ */ (0, import_react43.forwardRef)(function ErrorSummary2({ errors: errors2, title: title6, focusKey, className, ...rest }, ref) {
   const m = useMessages();
-  const titleId = (0, import_react42.useId)();
-  const rootRef = (0, import_react42.useRef)(null);
+  const titleId = (0, import_react43.useId)();
+  const rootRef = (0, import_react43.useRef)(null);
   const hasErrors = errors2.length > 0;
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (hasErrors) rootRef.current?.focus();
   }, [focusKey, hasErrors]);
   if (!hasErrors) return null;
@@ -3110,9 +3211,20 @@ var ErrorSummary = /* @__PURE__ */ (0, import_react42.forwardRef)(function Error
 });
 // src/components/FileUpload/FileUpload.tsx
-var import_react43 = require("react");
+var import_react45 = require("react");
 var import_icons14 = require("@bestow-ui/icons");
+// src/utils/useFieldsetDisabled.ts
+var import_react44 = require("react");
+var noSubscribe = () => () => void 0;
+function useFieldsetDisabled(ref) {
+  return (0, import_react44.useSyncExternalStore)(
+    noSubscribe,
+    () => !!ref.current?.matches("fieldset:disabled *"),
+    () => false
+  );
+}
 // src/components/FileUpload/FileUpload.css.ts
 var dropHint = "r2jefr3";
 var dropIcon = "r2jefr2";
@@ -3143,7 +3255,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__ */ (0, import_react43.forwardRef)(function FileUpload2(props, ref) {
+var FileUpload = /* @__PURE__ */ (0, import_react45.forwardRef)(function FileUpload2(props, ref) {
   const {
     value: value4,
     defaultValue,
@@ -3157,29 +3269,32 @@ var FileUpload = /* @__PURE__ */ (0, import_react43.forwardRef)(function FileUpl
     helperText: helperText3,
     error,
     required,
-    disabled,
+    disabled: disabledProp,
     name,
     id,
     className
   } = props;
   const m = useMessages();
+  const rootRef = (0, import_react45.useRef)(null);
+  const fieldsetDisabled = useFieldsetDisabled(rootRef);
+  const disabled = disabledProp || fieldsetDisabled;
   const isControlled = "value" in props;
-  const [innerFiles, setInnerFiles] = (0, import_react43.useState)(defaultValue ?? []);
+  const [innerFiles, setInnerFiles] = (0, import_react45.useState)(defaultValue ?? []);
   const files = isControlled ? value4 ?? NO_FILES : innerFiles;
-  const [rejections, setRejections] = (0, import_react43.useState)([]);
-  const [announcement, setAnnouncement] = (0, import_react43.useState)("");
-  const [dragging, setDragging] = (0, import_react43.useState)(false);
-  const generatedId = (0, import_react43.useId)();
+  const [rejections, setRejections] = (0, import_react45.useState)([]);
+  const [announcement, setAnnouncement] = (0, import_react45.useState)("");
+  const [dragging, setDragging] = (0, import_react45.useState)(false);
+  const generatedId = (0, import_react45.useId)();
   const baseId = id ?? generatedId;
   const labelId = label7 ? `${baseId}-label` : void 0;
   const helperId = helperText3 ? `${baseId}-helper` : void 0;
   const errorsId = rejections.length > 0 ? `${baseId}-errors` : void 0;
-  const inputRef = (0, import_react43.useRef)(null);
-  const selectButtonRef = (0, import_react43.useRef)(null);
-  const removeButtonRefs = (0, import_react43.useRef)([]);
-  const focusAfterRemove = (0, import_react43.useRef)(null);
-  const announceTimer = (0, import_react43.useRef)(void 0);
-  (0, import_react43.useEffect)(() => () => clearTimeout(announceTimer.current), []);
+  const inputRef = (0, import_react45.useRef)(null);
+  const selectButtonRef = (0, import_react45.useRef)(null);
+  const removeButtonRefs = (0, import_react45.useRef)([]);
+  const focusAfterRemove = (0, import_react45.useRef)(null);
+  const announceTimer = (0, import_react45.useRef)(void 0);
+  (0, import_react45.useEffect)(() => () => clearTimeout(announceTimer.current), []);
   const selectLabel = m.fileSelect ?? "\uD30C\uC77C \uC120\uD0DD";
   const reasonText = (rejection) => {
     const fileName2 = rejection.file.name;
@@ -3227,13 +3342,13 @@ var FileUpload = /* @__PURE__ */ (0, import_react43.forwardRef)(function FileUpl
     setRejections([]);
     commit(next, m.fileRemoved?.(removed.name) ?? `${removed.name} \uC0AD\uC81C\uB428`, REMOVED_ANNOUNCE_DELAY);
   };
-  (0, import_react43.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (focusAfterRemove.current === null) return;
     const target = focusAfterRemove.current;
     focusAfterRemove.current = null;
     (target >= 0 ? removeButtonRefs.current[target] : selectButtonRef.current)?.focus();
   }, [files]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const input6 = inputRef.current;
     if (!name || !input6 || typeof DataTransfer === "undefined") return;
     try {
@@ -3243,12 +3358,20 @@ var FileUpload = /* @__PURE__ */ (0, import_react43.forwardRef)(function FileUpl
     } 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__ */ (0, import_jsx_runtime39.jsxs)("div", { ref, className: cx(field, root10, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref: mergeRefs(ref, rootRef), className: cx(field, root10, className), children: [
     label7 && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { id: labelId, className: label, children: [
       label7,
       required && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
@@ -3339,7 +3462,7 @@ var FileUpload = /* @__PURE__ */ (0, import_react43.forwardRef)(function FileUpl
 // src/components/DropdownMenu/DropdownMenu.tsx
 var RadixMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
 var import_icons15 = require("@bestow-ui/icons");
-var import_react44 = require("react");
+var import_react46 = require("react");
 // src/components/DropdownMenu/DropdownMenu.css.ts
 var content9 = "_1d7ahux0";
@@ -3360,7 +3483,7 @@ var import_jsx_runtime40 = require("react/jsx-runtime");
 var DropdownMenu = RadixMenu.Root;
 var DropdownMenuTrigger = RadixMenu.Trigger;
 var DropdownMenuGroup = RadixMenu.Group;
-var DropdownMenuContent = /* @__PURE__ */ (0, import_react44.forwardRef)(
+var DropdownMenuContent = /* @__PURE__ */ (0, import_react46.forwardRef)(
   function DropdownMenuContent2({ className, style, side = "bottom", align = "start", sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
     const portal2 = usePortalProps();
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -3378,7 +3501,7 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react44.forwardRef)(
     ) });
   }
 );
-var DropdownMenuItem = /* @__PURE__ */ (0, import_react44.forwardRef)(
+var DropdownMenuItem = /* @__PURE__ */ (0, import_react46.forwardRef)(
   function DropdownMenuItem2({ icon: icon8, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(RadixMenu.Item, { ref, className: cx(item7, color === "danger" && danger, className), ...rest, children: [
       icon8 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: icon5, "aria-hidden": true, children: icon8 }),
@@ -3387,17 +3510,17 @@ var DropdownMenuItem = /* @__PURE__ */ (0, import_react44.forwardRef)(
     ] });
   }
 );
-var DropdownMenuLabel = /* @__PURE__ */ (0, import_react44.forwardRef)(
+var DropdownMenuLabel = /* @__PURE__ */ (0, import_react46.forwardRef)(
   function DropdownMenuLabel2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RadixMenu.Label, { ref, className: cx(label3, className), ...rest });
   }
 );
-var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react44.forwardRef)(
+var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react46.forwardRef)(
   function DropdownMenuSeparator2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RadixMenu.Separator, { ref, className: cx(separator3, className), ...rest });
   }
 );
-var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react44.forwardRef)(
+var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react46.forwardRef)(
   function DropdownMenuCheckboxItem2({ className, children, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(RadixMenu.CheckboxItem, { ref, className: cx(item7, className), ...rest, children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: indicator2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RadixMenu.ItemIndicator, { className: indicatorInner, children: rest.checked === "indeterminate" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons15.MinusIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons15.CheckIcon, { size: 16 }) }) }),
@@ -3406,7 +3529,7 @@ var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react44.forwardRef)(
   }
 );
 var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
-var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react44.forwardRef)(
+var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react46.forwardRef)(
   function DropdownMenuRadioItem2({ className, children, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(RadixMenu.RadioItem, { ref, className: cx(item7, className), ...rest, children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: indicator2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RadixMenu.ItemIndicator, { className: indicatorInner, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: radioDot }) }) }),
@@ -3415,7 +3538,7 @@ var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react44.forwardRef)(
   }
 );
 var DropdownMenuSub = RadixMenu.Sub;
-var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react44.forwardRef)(
+var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react46.forwardRef)(
   function DropdownMenuSubTrigger2({ icon: icon8, className, children, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(RadixMenu.SubTrigger, { ref, className: cx(item7, subTrigger, className), ...rest, children: [
       icon8 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: icon5, "aria-hidden": true, children: icon8 }),
@@ -3424,7 +3547,7 @@ var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react44.forwardRef)(
     ] });
   }
 );
-var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react44.forwardRef)(
+var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react46.forwardRef)(
   function DropdownMenuSubContent2({ className, style, sideOffset = 4, alignOffset = -5, collisionPadding = 8, ...rest }, ref) {
     const portal2 = usePortalProps();
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -3443,7 +3566,7 @@ var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react44.forwardRef)(
 );
 // src/components/NumberInput/NumberInput.tsx
-var import_react45 = require("react");
+var import_react47 = require("react");
 var import_icons16 = require("@bestow-ui/icons");
 // src/components/NumberInput/NumberInput.css.ts
@@ -3459,7 +3582,7 @@ 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__ */ (0, import_react45.forwardRef)(
+var NumberInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
   function NumberInput2(props, ref) {
     const {
       value: value4,
@@ -3485,15 +3608,15 @@ var NumberInput = /* @__PURE__ */ (0, import_react45.forwardRef)(
     } = props;
     const isControlled = "value" in props;
     const m = useMessages();
-    const inputRef = (0, import_react45.useRef)(null);
-    const generatedId = (0, import_react45.useId)();
+    const inputRef = (0, import_react47.useRef)(null);
+    const generatedId = (0, import_react47.useId)();
     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);
@@ -3506,7 +3629,7 @@ var NumberInput = /* @__PURE__ */ (0, import_react45.forwardRef)(
       const [, sign = "", int = "", rest2 = ""] = raw.match(/^(-?)(\d*)(.*)$/) ?? [];
       return `${sign}${int ? Number(int).toLocaleString("ko-KR") : ""}${rest2}`;
     };
-    const lastEmitted = (0, import_react45.useRef)(parse(toRaw(isControlled ? value4 : defaultValue)));
+    const lastEmitted = (0, import_react47.useRef)(parse(toRaw(isControlled ? value4 : defaultValue)));
     const emit = (next) => {
       if (next === lastEmitted.current) return;
       lastEmitted.current = next;
@@ -3517,21 +3640,27 @@ var NumberInput = /* @__PURE__ */ (0, import_react45.forwardRef)(
       value: void 0,
       defaultValue: toRaw(isControlled ? value4 : defaultValue),
       onValueChange: (raw) => emit(parse(raw)),
-      sanitize: sanitize4,
+      sanitize: sanitize3,
       format: format2,
       isMeaningful,
-      inputRef
+      inputRef,
+      manualReset: true
     });
     const { setRaw } = field4;
-    (0, import_react45.useEffect)(() => {
+    (0, import_react47.useEffect)(() => {
       if (!isControlled) return;
       const next = value4 ?? null;
       lastEmitted.current = next;
       if (parse(field4.raw) !== next) setRaw(toRaw(next));
     }, [value4]);
+    useFormReset(inputRef, () => {
+      const next = toRaw(isControlled ? value4 : defaultValue);
+      setRaw(next);
+      if (!isControlled) emit(parse(next));
+    });
     const current2 = parse(field4.raw);
     const valueText = (n) => `${format2(toRaw(n))}${unit2 ?? ""}`;
-    const [announcement, setAnnouncement] = (0, import_react45.useState)("");
+    const [announcement, setAnnouncement] = (0, import_react47.useState)("");
     const setValue = (next, announce = true) => {
       setRaw(toRaw(next));
       emit(next);
@@ -3624,7 +3753,7 @@ var NumberInput = /* @__PURE__ */ (0, import_react45.forwardRef)(
 // src/components/Pagination/Pagination.tsx
 var import_icons17 = require("@bestow-ui/icons");
-var import_react46 = require("react");
+var import_react48 = require("react");
 // src/components/Pagination/getPaginationItems.ts
 var range = (start, end2) => end2 < start ? [] : Array.from({ length: end2 - start + 1 }, (_, i) => start + i);
@@ -3658,7 +3787,7 @@ var list5 = "_1iraoak0";
 // src/components/Pagination/Pagination.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var Pagination = /* @__PURE__ */ (0, import_react46.forwardRef)(function Pagination2({
+var Pagination = /* @__PURE__ */ (0, import_react48.forwardRef)(function Pagination2({
   totalPages,
   page: pageProp,
   defaultPage = 1,
@@ -3671,7 +3800,7 @@ var Pagination = /* @__PURE__ */ (0, import_react46.forwardRef)(function Paginat
   "aria-label": ariaLabelProp,
   ...rest
 }, ref) {
-  const [uncontrolledPage, setUncontrolledPage] = (0, import_react46.useState)(defaultPage);
+  const [uncontrolledPage, setUncontrolledPage] = (0, import_react48.useState)(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`);
@@ -3723,15 +3852,11 @@ var Pagination = /* @__PURE__ */ (0, import_react46.forwardRef)(function Paginat
 });
 // src/components/PhoneNumberInput/PhoneNumberInput.tsx
-var import_react47 = require("react");
+var import_react49 = require("react");
 var import_korean_utils7 = require("@bestow-ui/korean-utils");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var sanitize3 = (input6) => {
-  const digits = input6.replace(/\D/g, "");
-  return digits.slice(0, (0, import_korean_utils7.phoneNumberMaxDigits)(digits));
-};
 var isDigit4 = (char) => /\d/.test(char);
-var PhoneNumberInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
+var PhoneNumberInput = /* @__PURE__ */ (0, import_react49.forwardRef)(
   function PhoneNumberInput2(props, ref) {
     const {
       value: value4,
@@ -3742,7 +3867,7 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
       onKeyDown,
       ...rest
     } = props;
-    const inputRef = (0, import_react47.useRef)(null);
+    const inputRef = (0, import_react49.useRef)(null);
     const m = useMessages();
     const label7 = labelProp ?? m.phoneNumber ?? "\uD734\uB300\uD3F0 \uBC88\uD638";
     const field4 = useFormattedInput({
@@ -3750,7 +3875,7 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
       value: value4,
       defaultValue,
       onValueChange,
-      sanitize: sanitize3,
+      sanitize: import_korean_utils7.phoneNumberDigits,
       format: import_korean_utils7.formatPhoneNumber,
       isMeaningful: isDigit4,
       inputRef
@@ -3777,7 +3902,7 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react47.forwardRef)(
 );
 // src/components/RadioGroup/RadioGroup.tsx
-var import_react48 = require("react");
+var import_react50 = require("react");
 // src/components/RadioGroup/RadioGroup.css.ts
 var import_createRuntimeFn23 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -3791,7 +3916,7 @@ var text = "_1w9iwjma";
 // src/components/RadioGroup/RadioGroup.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var RadioGroup2 = /* @__PURE__ */ (0, import_react48.forwardRef)(function RadioGroup3(props, ref) {
+var RadioGroup2 = /* @__PURE__ */ (0, import_react50.forwardRef)(function RadioGroup3(props, ref) {
   const {
     options,
     value: value4,
@@ -3810,14 +3935,21 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react48.forwardRef)(function RadioG
     className
   } = props;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react48.useState)(defaultValue ?? "");
+  const [innerValue, setInnerValue] = (0, import_react50.useState)(defaultValue ?? "");
   const current2 = isControlled ? value4 ?? "" : innerValue;
-  const generatedId = (0, import_react48.useId)();
+  const generatedId = (0, import_react50.useId)();
   const baseId = id ?? generatedId;
   const labelId = label7 ? `${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 = (0, import_react50.useRef)(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);
@@ -3831,7 +3963,7 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react48.forwardRef)(function RadioG
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "div",
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id: baseId,
         role: "radiogroup",
         "aria-label": ariaLabel,
@@ -3877,7 +4009,7 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react48.forwardRef)(function RadioG
 });
 // src/components/ResidentNumberInput/ResidentNumberInput.tsx
-var import_react49 = require("react");
+var import_react51 = require("react");
 var import_korean_utils8 = require("@bestow-ui/korean-utils");
 // src/components/ResidentNumberInput/ResidentNumberInput.css.ts
@@ -3891,7 +4023,7 @@ var separator4 = "_1llmfr74";
 // src/components/ResidentNumberInput/ResidentNumberInput.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var onlyDigits = (input6) => input6.replace(/\D/g, "");
-var ResidentNumberInput = /* @__PURE__ */ (0, import_react49.forwardRef)(
+var ResidentNumberInput = /* @__PURE__ */ (0, import_react51.forwardRef)(
   function ResidentNumberInput2(props, ref) {
     const {
       value: value4,
@@ -3921,16 +4053,16 @@ var ResidentNumberInput = /* @__PURE__ */ (0, import_react49.forwardRef)(
       const d = onlyDigits(v).slice(0, digits);
       return { front: d.slice(0, 6), back: d.slice(6) };
     };
-    const [parts, setParts] = (0, import_react49.useState)(() => split((isControlled ? value4 : defaultValue) ?? ""));
+    const [parts, setParts] = (0, import_react51.useState)(() => split((isControlled ? value4 : defaultValue) ?? ""));
     const current2 = isControlled && (value4 ?? "") !== parts.front + parts.back ? split(value4 ?? "") : parts;
     const raw = current2.front + current2.back;
-    const generatedId = (0, import_react49.useId)();
+    const generatedId = (0, import_react51.useId)();
     const baseId = id ?? generatedId;
     const frontId = `${baseId}-front`;
     const backId = `${baseId}-back`;
     const labelId = `${baseId}-label`;
-    const frontRef = (0, import_react49.useRef)(null);
-    const backRef = (0, import_react49.useRef)(null);
+    const frontRef = (0, import_react51.useRef)(null);
+    const backRef = (0, import_react51.useRef)(null);
     const complete = current2.front.length === 6 && current2.back.length === backLength;
     const isValid = (v) => digits === 13 ? (0, import_korean_utils8.isValidResidentNumber)(v) : (0, import_korean_utils8.parseResidentNumber)(v) !== null;
     const update = (next) => {
@@ -3940,7 +4072,13 @@ var ResidentNumberInput = /* @__PURE__ */ (0, import_react49.forwardRef)(
       const nextComplete = next.front.length === 6 && next.back.length === backLength;
       onValueChange?.(nextRaw, nextComplete ? isValid(nextRaw) : null);
     };
-    const [touched, setTouched] = (0, import_react49.useState)(false);
+    const [touched, setTouched] = (0, import_react51.useState)(false);
+    useFormReset(frontRef, () => {
+      setTouched(false);
+      if (isControlled) return setParts(split(value4 ?? ""));
+      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;
@@ -4023,7 +4161,7 @@ var ResidentNumberInput = /* @__PURE__ */ (0, import_react49.forwardRef)(
 );
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_react50 = require("react");
+var import_react52 = require("react");
 // src/components/SegmentedControl/SegmentedControl.css.ts
 var import_createRuntimeFn24 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -4034,7 +4172,7 @@ var root11 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ def
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var NEXT_KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
-var SegmentedControl = /* @__PURE__ */ (0, import_react50.forwardRef)(
+var SegmentedControl = /* @__PURE__ */ (0, import_react52.forwardRef)(
   function SegmentedControl2(props, ref) {
     const {
       options,
@@ -4051,12 +4189,19 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react50.forwardRef)(
       className
     } = props;
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = (0, import_react50.useState)(defaultValue ?? "");
+    const [innerValue, setInnerValue] = (0, import_react52.useState)(defaultValue ?? "");
     const current2 = isControlled ? value4 ?? "" : innerValue;
-    const generatedId = (0, import_react50.useId)();
+    const generatedId = (0, import_react52.useId)();
     const labelId = label7 ? `${id ?? generatedId}-label` : void 0;
-    const itemRefs = (0, import_react50.useRef)([]);
+    const itemRefs = (0, import_react52.useRef)([]);
     const isEnabled = (index) => !disabled && !options[index]?.disabled;
+    const rootRef = (0, import_react52.useRef)(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;
@@ -4089,7 +4234,7 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react50.forwardRef)(
     const group = /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
       "div",
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id,
         role: "radiogroup",
         "aria-labelledby": labelId,
@@ -4136,7 +4281,7 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react50.forwardRef)(
 );
 // src/components/NativeSelect/NativeSelect.tsx
-var import_react51 = require("react");
+var import_react53 = require("react");
 var import_icons18 = require("@bestow-ui/icons");
 // src/components/NativeSelect/NativeSelect.css.ts
@@ -4147,7 +4292,7 @@ var wrapper = "_5silym0";
 // src/components/NativeSelect/NativeSelect.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var NativeSelect = /* @__PURE__ */ (0, import_react51.forwardRef)(function NativeSelect2({
+var NativeSelect = /* @__PURE__ */ (0, import_react53.forwardRef)(function NativeSelect2({
   options,
   onValueChange,
   onChange,
@@ -4167,7 +4312,7 @@ var NativeSelect = /* @__PURE__ */ (0, import_react51.forwardRef)(function Nativ
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = (0, import_react51.useId)();
+  const generatedId = (0, import_react53.useId)();
   const selectId = id ?? generatedId;
   const helperId = helperText3 ? `${selectId}-helper` : void 0;
   const handleChange = (event) => {
@@ -4216,10 +4361,10 @@ var NativeSelect = /* @__PURE__ */ (0, import_react51.forwardRef)(function Nativ
 // src/components/Select/Select.tsx
 var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
-var import_react52 = require("react");
+var import_react54 = require("react");
 var import_icons19 = require("@bestow-ui/icons");
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var Select = /* @__PURE__ */ (0, import_react52.forwardRef)(function Select2(props, ref) {
+var Select = /* @__PURE__ */ (0, import_react54.forwardRef)(function Select2(props, ref) {
   const {
     options,
     value: value4,
@@ -4239,7 +4384,7 @@ var Select = /* @__PURE__ */ (0, import_react52.forwardRef)(function Select2(pro
     className
   } = props;
   const isControlled = "value" in props;
-  const generatedId = (0, import_react52.useId)();
+  const generatedId = (0, import_react54.useId)();
   const triggerId = id ?? generatedId;
   const helperId = helperText3 ? `${triggerId}-helper` : void 0;
   const portal2 = usePortalProps();
@@ -4305,14 +4450,14 @@ var Select = /* @__PURE__ */ (0, import_react52.forwardRef)(function Select2(pro
 });
 // src/components/SkipLink/SkipLink.tsx
-var import_react53 = require("react");
+var import_react55 = require("react");
 // src/components/SkipLink/SkipLink.css.ts
 var skipLink = "_1t9jaar0";
 // src/components/SkipLink/SkipLink.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var SkipLink = /* @__PURE__ */ (0, import_react53.forwardRef)(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
+var SkipLink = /* @__PURE__ */ (0, import_react55.forwardRef)(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
   const m = useMessages();
   const handleClick = (event) => {
     onClick?.(event);
@@ -4329,7 +4474,7 @@ var SkipLink = /* @__PURE__ */ (0, import_react53.forwardRef)(function SkipLink2
 // src/components/Slider/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"), 1);
-var import_react54 = require("react");
+var import_react56 = require("react");
 // src/components/Slider/Slider.css.ts
 var import_createRuntimeFn26 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -4345,7 +4490,7 @@ var value3 = "_126mzjm3";
 // src/components/Slider/Slider.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var Slider = /* @__PURE__ */ (0, import_react54.forwardRef)(function Slider2(props, ref) {
+var Slider = /* @__PURE__ */ (0, import_react56.forwardRef)(function Slider2(props, ref) {
   const {
     value: value4,
     defaultValue,
@@ -4361,19 +4506,28 @@ var Slider = /* @__PURE__ */ (0, import_react54.forwardRef)(function Slider2(pro
     size,
     id,
     className,
-    disabled,
+    disabled: disabledProp,
     ...rest
   } = props;
   const m = useMessages();
   const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
-  const generatedId = (0, import_react54.useId)();
+  const generatedId = (0, import_react56.useId)();
   const baseId = id ?? generatedId;
   const labelId = `${baseId}-label`;
   const helperId = `${baseId}-helper`;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react54.useState)(defaultValue ?? [min]);
+  const [innerValue, setInnerValue] = (0, import_react56.useState)(defaultValue ?? [min]);
   const current2 = isControlled ? value4 ?? [min] : innerValue;
   const isRange = current2.length > 1;
+  const rootRef = (0, import_react56.useRef)(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);
@@ -4387,7 +4541,7 @@ var Slider = /* @__PURE__ */ (0, import_react54.forwardRef)(function Slider2(pro
     /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       RadixSlider.Root,
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id: baseId,
         min,
         max,
@@ -4424,22 +4578,23 @@ var Slider = /* @__PURE__ */ (0, import_react54.forwardRef)(function Slider2(pro
 });
 // src/components/Stepper/Stepper.tsx
-var import_react55 = require("react");
+var import_react57 = require("react");
 var import_icons20 = require("@bestow-ui/icons");
 // src/components/Stepper/Stepper.css.ts
 var import_createRuntimeFn27 = require("@vanilla-extract/recipes/createRuntimeFn");
-var description7 = "kervhmh";
+var description7 = "kervhmi";
 var indicator3 = /* @__PURE__ */ (0, import_createRuntimeFn27.createRuntimeFn)({ defaultClassName: "kervhm6", variantClassNames: { status: { complete: "kervhm7", current: "kervhm8", upcoming: "kervhm9" } }, defaultVariants: {}, compoundVariants: [] });
-var label5 = /* @__PURE__ */ (0, import_createRuntimeFn27.createRuntimeFn)({ defaultClassName: "kervhmd", variantClassNames: { status: { complete: "kervhme", current: "kervhmf", upcoming: "kervhmg" } }, defaultVariants: {}, compoundVariants: [] });
+var label5 = /* @__PURE__ */ (0, import_createRuntimeFn27.createRuntimeFn)({ defaultClassName: "kervhme", variantClassNames: { status: { complete: "kervhmf", current: "kervhmg", upcoming: "kervhmh" } }, defaultVariants: {}, compoundVariants: [] });
 var root13 = /* @__PURE__ */ (0, import_createRuntimeFn27.createRuntimeFn)({ defaultClassName: "kervhm0", variantClassNames: { orientation: { horizontal: "kervhm1", vertical: "kervhm2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
 var step = /* @__PURE__ */ (0, import_createRuntimeFn27.createRuntimeFn)({ defaultClassName: "kervhm3", variantClassNames: { orientation: { horizontal: "kervhm4", vertical: "kervhm5" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
-var text2 = /* @__PURE__ */ (0, import_createRuntimeFn27.createRuntimeFn)({ defaultClassName: "kervhma", variantClassNames: { orientation: { horizontal: "kervhmb", vertical: "kervhmc" } }, defaultVariants: {}, compoundVariants: [] });
+var text2 = /* @__PURE__ */ (0, import_createRuntimeFn27.createRuntimeFn)({ defaultClassName: "kervhma", variantClassNames: { orientation: { horizontal: "kervhmb", vertical: "kervhmc" }, reserveDescription: { true: "kervhmd" } }, defaultVariants: {}, compoundVariants: [] });
 // src/components/Stepper/Stepper.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
-var Stepper = /* @__PURE__ */ (0, import_react55.forwardRef)(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
+var Stepper = /* @__PURE__ */ (0, import_react57.forwardRef)(function Stepper2({ steps, current: current2, orientation = "horizontal", loading: loading2, "aria-label": ariaLabel, className, ...rest }, ref) {
   const m = useMessages();
+  const reserveDescription = orientation === "vertical" && steps.some((step2) => step2.description);
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "ol",
     {
@@ -4449,6 +4604,7 @@ var Stepper = /* @__PURE__ */ (0, import_react55.forwardRef)(function Stepper2({
       ...rest,
       children: steps.map((step2, index) => {
         const status = index < current2 ? "complete" : index === current2 ? "current" : "upcoming";
+        const inProgress = loading2 && status === "current";
         return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           "li",
           {
@@ -4456,14 +4612,19 @@ var Stepper = /* @__PURE__ */ (0, import_react55.forwardRef)(function Stepper2({
             "data-status": status,
             "aria-current": status === "current" ? "step" : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: indicator3({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons20.CheckIcon, { size: 16, strokeWidth: 2.5 }) : index + 1 }),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: text2({ orientation }), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: indicator3({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons20.CheckIcon, { size: 16, strokeWidth: 2.5 }) : inProgress ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Spinner, { size: "sm", label: "" }) : index + 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: text2({ orientation, reserveDescription }), children: [
                 /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: label5({ status }), children: [
                   step2.label,
                   status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: visuallyHidden, children: [
                     " (",
                     m.stepCompleted ?? "\uC644\uB8CC",
                     ")"
+                  ] }),
+                  inProgress && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: visuallyHidden, children: [
+                    " (",
+                    m.stepInProgress ?? "\uC9C4\uD589 \uC911",
+                    ")"
                   ] })
                 ] }),
                 step2.description && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: description7, children: step2.description })
@@ -4478,7 +4639,7 @@ var Stepper = /* @__PURE__ */ (0, import_react55.forwardRef)(function Stepper2({
 });
 // src/components/Switch/Switch.tsx
-var import_react56 = require("react");
+var import_react58 = require("react");
 // src/components/Switch/Switch.css.ts
 var import_createRuntimeFn28 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -4493,7 +4654,7 @@ var import_jsx_runtime52 = require("react/jsx-runtime");
 function setNativeChecked(input6, checked) {
   Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "checked")?.set?.call(input6, checked);
 }
-var Switch = /* @__PURE__ */ (0, import_react56.forwardRef)(function Switch2({
+var Switch = /* @__PURE__ */ (0, import_react58.forwardRef)(function Switch2({
   label: label7,
   size,
   id,
@@ -4507,31 +4668,26 @@ var Switch = /* @__PURE__ */ (0, import_react56.forwardRef)(function Switch2({
   onCheckedChange,
   "aria-label": ariaLabel
 }, ref) {
-  const generatedId = (0, import_react56.useId)();
+  const generatedId = (0, import_react58.useId)();
   const switchId = id ?? generatedId;
-  const [uncontrolled, setUncontrolled] = (0, import_react56.useState)(defaultChecked ?? false);
+  const [uncontrolled, setUncontrolled] = (0, import_react58.useState)(defaultChecked ?? false);
   const isControlled = checkedProp !== void 0;
   const checked = isControlled ? checkedProp : uncontrolled;
-  const buttonRef = (0, import_react56.useRef)(null);
-  const inputRef = (0, import_react56.useRef)(null);
-  const [inForm, setInForm] = (0, import_react56.useState)(true);
-  const userToggled = (0, import_react56.useRef)(false);
+  const buttonRef = (0, import_react58.useRef)(null);
+  const inputRef = (0, import_react58.useRef)(null);
+  const [inForm, setInForm] = (0, import_react58.useState)(true);
+  const userToggled = (0, import_react58.useRef)(false);
   const setChecked = (next) => {
     if (!isControlled) setUncontrolled(next);
     if (next !== checked) onCheckedChange?.(next);
   };
-  const setCheckedRef = (0, import_react56.useRef)(setChecked);
-  setCheckedRef.current = setChecked;
-  (0, import_react56.useEffect)(() => {
-    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);
+  });
+  (0, import_react58.useEffect)(() => {
+    setInForm(!!buttonRef.current?.form);
   }, []);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const input6 = inputRef.current;
     if (!input6 || input6.checked === checked) return;
     setNativeChecked(input6, checked);
@@ -4584,7 +4740,7 @@ var Switch = /* @__PURE__ */ (0, import_react56.forwardRef)(function Switch2({
 });
 // src/components/Table/Table.tsx
-var import_react57 = require("react");
+var import_react59 = require("react");
 var import_icons21 = require("@bestow-ui/icons");
 // src/components/Table/Table.css.ts
@@ -4608,9 +4764,9 @@ var table = "l3ploy1";
 // src/components/Table/Table.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var TableSizeContext = /* @__PURE__ */ (0, import_react57.createContext)("md");
-var TableSectionContext = /* @__PURE__ */ (0, import_react57.createContext)("body");
-var Table = /* @__PURE__ */ (0, import_react57.forwardRef)(function Table2({
+var TableSizeContext = /* @__PURE__ */ (0, import_react59.createContext)("md");
+var TableSectionContext = /* @__PURE__ */ (0, import_react59.createContext)("body");
+var Table = /* @__PURE__ */ (0, import_react59.forwardRef)(function Table2({
   size = "md",
   striped: striped2,
   stickyHeader: stickyHeader2,
@@ -4622,7 +4778,7 @@ var Table = /* @__PURE__ */ (0, import_react57.forwardRef)(function Table2({
   children,
   ...rest
 }, ref) {
-  const captionId = (0, import_react57.useId)();
+  const captionId = (0, import_react59.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "div",
     {
@@ -4648,27 +4804,27 @@ var Table = /* @__PURE__ */ (0, import_react57.forwardRef)(function Table2({
     }
   ) });
 });
-var TableHeader = /* @__PURE__ */ (0, import_react57.forwardRef)(
+var TableHeader = /* @__PURE__ */ (0, import_react59.forwardRef)(
   function TableHeader2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("thead", { ref, className: cx(header9, className), ...rest }) });
   }
 );
-var TableBody = /* @__PURE__ */ (0, import_react57.forwardRef)(
+var TableBody = /* @__PURE__ */ (0, import_react59.forwardRef)(
   function TableBody2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("tbody", { ref, className: cx(body4, className), ...rest }) });
   }
 );
-var TableFooter = /* @__PURE__ */ (0, import_react57.forwardRef)(
+var TableFooter = /* @__PURE__ */ (0, import_react59.forwardRef)(
   function TableFooter2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("tfoot", { ref, className: cx(footer4, className), ...rest }) });
   }
 );
-var TableRow = /* @__PURE__ */ (0, import_react57.forwardRef)(function TableRow2({ selected, className, ...rest }, ref) {
+var TableRow = /* @__PURE__ */ (0, import_react59.forwardRef)(function TableRow2({ selected, className, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("tr", { ref, className: cx(row4, className), "data-state": selected ? "selected" : void 0, ...rest });
 });
-var TableHead = /* @__PURE__ */ (0, import_react57.forwardRef)(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
-  const size = (0, import_react57.useContext)(TableSizeContext);
-  const section = (0, import_react57.useContext)(TableSectionContext);
+var TableHead = /* @__PURE__ */ (0, import_react59.forwardRef)(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
+  const size = (0, import_react59.useContext)(TableSizeContext);
+  const section = (0, import_react59.useContext)(TableSectionContext);
   const sortable = onSort !== void 0;
   const direction = sortDirection ?? "none";
   const SortIcon = direction === "descending" ? import_icons21.ArrowDownIcon : import_icons21.ArrowUpIcon;
@@ -4691,9 +4847,9 @@ var TableHead = /* @__PURE__ */ (0, import_react57.forwardRef)(function TableHea
     }
   );
 });
-var TableCell = /* @__PURE__ */ (0, import_react57.forwardRef)(function TableCell2({ align, className, ...rest }, ref) {
-  const size = (0, import_react57.useContext)(TableSizeContext);
-  const section = (0, import_react57.useContext)(TableSectionContext);
+var TableCell = /* @__PURE__ */ (0, import_react59.forwardRef)(function TableCell2({ align, className, ...rest }, ref) {
+  const size = (0, import_react59.useContext)(TableSizeContext);
+  const section = (0, import_react59.useContext)(TableSectionContext);
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "td",
     {
@@ -4703,7 +4859,7 @@ var TableCell = /* @__PURE__ */ (0, import_react57.forwardRef)(function TableCel
     }
   );
 });
-var TableEmpty = /* @__PURE__ */ (0, import_react57.forwardRef)(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
+var TableEmpty = /* @__PURE__ */ (0, import_react59.forwardRef)(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableCell, { ref, colSpan, className: cx(emptyCell, className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: emptyContent, children }) }) });
 });
 function TableSkeleton({ rows = 5, columns: columns2 }) {
@@ -4711,18 +4867,18 @@ function TableSkeleton({ rows = 5, columns: columns2 }) {
 }
 // src/components/Table/useTableSelection.ts
-var import_react58 = require("react");
+var import_react60 = require("react");
 function useTableSelection(initial = []) {
-  const [selected, setSelected] = (0, import_react58.useState)(initial);
-  const isSelected = (0, import_react58.useCallback)((id) => selected.includes(id), [selected]);
-  const toggle3 = (0, import_react58.useCallback)((id, checked) => {
+  const [selected, setSelected] = (0, import_react60.useState)(initial);
+  const isSelected = (0, import_react60.useCallback)((id) => selected.includes(id), [selected]);
+  const toggle3 = (0, import_react60.useCallback)((id, checked) => {
     setSelected((prev) => {
       const on = checked ?? !prev.includes(id);
       if (on) return prev.includes(id) ? prev : [...prev, id];
       return prev.filter((value4) => value4 !== id);
     });
   }, []);
-  const clear2 = (0, import_react58.useCallback)(() => setSelected([]), []);
+  const clear2 = (0, import_react60.useCallback)(() => setSelected([]), []);
   const selectAllProps = (pageIds) => {
     const all2 = pageIds.length > 0 && pageIds.every((id) => selected.includes(id));
     const some = pageIds.some((id) => selected.includes(id));
@@ -4743,7 +4899,7 @@ function useTableSelection(initial = []) {
 // src/components/Tabs/Tabs.tsx
 var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
-var import_react59 = require("react");
+var import_react61 = require("react");
 // src/components/Tabs/Tabs.css.ts
 var import_createRuntimeFn30 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -4754,25 +4910,25 @@ var trigger3 = /* @__PURE__ */ (0, import_createRuntimeFn30.createRuntimeFn)({ d
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var TabsStyleContext = /* @__PURE__ */ (0, import_react59.createContext)({ variant: "line", size: "md" });
-var Tabs = /* @__PURE__ */ (0, import_react59.forwardRef)(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
+var TabsStyleContext = /* @__PURE__ */ (0, import_react61.createContext)({ variant: "line", size: "md" });
+var Tabs = /* @__PURE__ */ (0, import_react61.forwardRef)(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
   const controlled = "value" in props ? { value: props.value ?? "" } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixTabs.Root, { ref, className: cx(root15, className), ...props, ...controlled }) });
 });
-var TabsList = /* @__PURE__ */ (0, import_react59.forwardRef)(function TabsList2({ className, ...rest }, ref) {
-  const { variant } = (0, import_react59.useContext)(TabsStyleContext);
+var TabsList = /* @__PURE__ */ (0, import_react61.forwardRef)(function TabsList2({ className, ...rest }, ref) {
+  const { variant } = (0, import_react61.useContext)(TabsStyleContext);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixTabs.List, { ref, className: cx(list6({ variant }), className), ...rest });
 });
-var TabsTrigger = /* @__PURE__ */ (0, import_react59.forwardRef)(function TabsTrigger2({ className, ...rest }, ref) {
-  const { variant, size } = (0, import_react59.useContext)(TabsStyleContext);
+var TabsTrigger = /* @__PURE__ */ (0, import_react61.forwardRef)(function TabsTrigger2({ className, ...rest }, ref) {
+  const { variant, size } = (0, import_react61.useContext)(TabsStyleContext);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
 });
-var TabsContent = /* @__PURE__ */ (0, import_react59.forwardRef)(function TabsContent2({ className, ...rest }, ref) {
+var TabsContent = /* @__PURE__ */ (0, import_react61.forwardRef)(function TabsContent2({ className, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
 });
 // src/components/Textarea/Textarea.tsx
-var import_react60 = require("react");
+var import_react62 = require("react");
 // src/components/Textarea/Textarea.css.ts
 var import_createRuntimeFn31 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -4784,7 +4940,7 @@ var textarea = /* @__PURE__ */ (0, import_createRuntimeFn31.createRuntimeFn)({ d
 // src/components/Textarea/Textarea.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var Textarea = /* @__PURE__ */ (0, import_react60.forwardRef)(function Textarea2({
+var Textarea = /* @__PURE__ */ (0, import_react62.forwardRef)(function Textarea2({
   label: label7,
   helperText: helperText3,
   error,
@@ -4805,13 +4961,13 @@ var Textarea = /* @__PURE__ */ (0, import_react60.forwardRef)(function Textarea2
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = (0, import_react60.useId)();
+  const generatedId = (0, import_react62.useId)();
   const textareaId = id ?? generatedId;
   const helperId = helperText3 ? `${textareaId}-helper` : void 0;
-  const innerRef = (0, import_react60.useRef)(null);
-  const [uncontrolledLength, setUncontrolledLength] = (0, import_react60.useState)(() => String(defaultValue ?? "").length);
+  const innerRef = (0, import_react62.useRef)(null);
+  const [uncontrolledLength, setUncontrolledLength] = (0, import_react62.useState)(() => String(defaultValue ?? "").length);
   const length = value4 !== void 0 ? String(value4).length : uncontrolledLength;
-  const fitHeight = (0, import_react60.useCallback)(() => {
+  const fitHeight = (0, import_react62.useCallback)(() => {
     const el = innerRef.current;
     if (!autoResize || !el) return;
     el.style.height = "auto";
@@ -4819,6 +4975,10 @@ var Textarea = /* @__PURE__ */ (0, import_react60.forwardRef)(function Textarea2
     el.style.height = `${el.scrollHeight + borders}px`;
   }, [autoResize]);
   useIsomorphicLayoutEffect(fitHeight, [fitHeight, value4]);
+  useFormReset(innerRef, () => {
+    if (value4 === void 0) setUncontrolledLength(String(defaultValue ?? "").length);
+    setTimeout(fitHeight);
+  });
   const handleChange = (event) => {
     if (value4 === void 0) setUncontrolledLength(event.target.value.length);
     fitHeight();
@@ -4860,7 +5020,7 @@ var Textarea = /* @__PURE__ */ (0, import_react60.forwardRef)(function Textarea2
 // src/components/Toast/Toast.tsx
 var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
-var import_react61 = require("react");
+var import_react63 = require("react");
 var import_icons22 = require("@bestow-ui/icons");
 // src/components/Toast/Toast.css.ts
@@ -4875,24 +5035,24 @@ var viewport2 = "_1g11zvx0";
 // src/components/Toast/Toast.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var REMOVE_DELAY = 500;
-var ToastContext = /* @__PURE__ */ (0, import_react61.createContext)(null);
+var ToastContext = /* @__PURE__ */ (0, import_react63.createContext)(null);
 function ToastProvider({ children, duration = 5e3, label: labelProp }) {
   const m = useMessages();
   const label7 = labelProp ?? m.notifications ?? "\uC54C\uB9BC";
-  const [toasts, setToasts] = (0, import_react61.useState)([]);
-  const nextId = (0, import_react61.useRef)(0);
+  const [toasts, setToasts] = (0, import_react63.useState)([]);
+  const nextId = (0, import_react63.useRef)(0);
   const portal2 = usePortalProps();
-  const toast2 = (0, import_react61.useCallback)((options) => {
+  const toast2 = (0, import_react63.useCallback)((options) => {
     const id = nextId.current++;
     setToasts((prev) => [...prev, { ...options, id, open: true }]);
     return id;
   }, []);
-  const dismiss = (0, import_react61.useCallback)((id) => {
+  const dismiss = (0, import_react63.useCallback)((id) => {
     const isTarget = (t) => id === void 0 || t.id === id;
     setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
     setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
   }, []);
-  const value4 = (0, import_react61.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
+  const value4 = (0, import_react63.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ToastContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(RadixToast.Provider, { duration, label: label7, swipeDirection: "right", children: [
     children,
     toasts.map(({ id, open, title: title6, description: description9, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
@@ -4917,7 +5077,7 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
   ] }) });
 }
 function useToast() {
-  const context = (0, import_react61.useContext)(ToastContext);
+  const context = (0, import_react63.useContext)(ToastContext);
   if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
   return context;
 }
@@ -4966,7 +5126,7 @@ function Tooltip({
 }
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-var import_react62 = require("react");
+var import_react64 = require("react");
 // src/components/VerificationCodeInput/VerificationCodeInput.css.ts
 var input5 = "ea01812";
@@ -4978,7 +5138,7 @@ var timer = "ea01814";
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var formatTime = (seconds) => `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
-var VerificationCodeInput = /* @__PURE__ */ (0, import_react62.forwardRef)(
+var VerificationCodeInput = /* @__PURE__ */ (0, import_react64.forwardRef)(
   function VerificationCodeInput2(props, ref) {
     const {
       length = 6,
@@ -5005,23 +5165,23 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react62.forwardRef)(
     const label7 = 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 = (0, import_react62.useId)();
+    const generatedId = (0, import_react64.useId)();
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
     const statusId = `${inputId}-status`;
-    const inputRef = (0, import_react62.useRef)(null);
+    const inputRef = (0, import_react64.useRef)(null);
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = (0, import_react62.useState)(defaultValue ?? "");
+    const [innerValue, setInnerValue] = (0, import_react64.useState)(defaultValue ?? "");
     const code = (isControlled ? value4 ?? "" : innerValue).slice(0, length);
-    const [focused, setFocused] = (0, import_react62.useState)(false);
-    const [endAt, setEndAt] = (0, import_react62.useState)(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
-    const [remaining, setRemaining] = (0, import_react62.useState)(expiresIn ?? 0);
+    const [focused, setFocused] = (0, import_react64.useState)(false);
+    const [endAt, setEndAt] = (0, import_react64.useState)(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
+    const [remaining, setRemaining] = (0, import_react64.useState)(expiresIn ?? 0);
     const expired = expiresIn !== void 0 && remaining <= 0;
-    const onExpireRef = (0, import_react62.useRef)(onExpire);
-    (0, import_react62.useEffect)(() => {
+    const onExpireRef = (0, import_react64.useRef)(onExpire);
+    (0, import_react64.useEffect)(() => {
       onExpireRef.current = onExpire;
     });
-    (0, import_react62.useEffect)(() => {
+    (0, import_react64.useEffect)(() => {
       if (endAt === null) return;
       const tick = () => {
         const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
@@ -5035,6 +5195,12 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react62.forwardRef)(
       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);