@bestow-ui/react 1.6.0 → 1.6.1

package/dist/client.js

@@ -1005,9 +1005,23 @@ var Breadcrumb = /* @__PURE__ */ forwardRef14(function Breadcrumb2({ items: item
 });
 
 // src/components/BusinessNumberInput/BusinessNumberInput.tsx
-import { forwardRef as forwardRef15, useRef as useRef6, useState as useState4 } from "react";
+import { forwardRef as forwardRef15, useRef as useRef6, useState as useState5 } from "react";
 import { formatBusinessNumber, isValidBusinessNumber } from "@bestow-ui/korean-utils";
-import { jsx as jsx17 } from "react/jsx-runtime";
+
+// src/utils/useDelayedAnnouncement.ts
+import { useEffect as useEffect4, useState as useState4 } from "react";
+var ANNOUNCE_DELAY = 800;
+function useDelayedAnnouncement(message, delay = ANNOUNCE_DELAY) {
+  const [announced, setAnnounced] = useState4("");
+  useEffect4(() => {
+    const timer2 = setTimeout(() => setAnnounced(message), message ? delay : 0);
+    return () => clearTimeout(timer2);
+  }, [message, delay]);
+  return message && announced === message ? message : "";
+}
+
+// src/components/BusinessNumberInput/BusinessNumberInput.tsx
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var sanitize = (input6) => input6.replace(/\D/g, "").slice(0, 10);
 var isDigit2 = (char) => /\d/.test(char);
 var BusinessNumberInput = /* @__PURE__ */ forwardRef15(
@@ -1031,7 +1045,7 @@ var BusinessNumberInput = /* @__PURE__ */ forwardRef15(
     const invalidText = invalidTextProp ?? m.businessNumberInvalid ?? "\uC62C\uBC14\uB978 \uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638\uAC00 \uC544\uB2C8\uC5D0\uC694. \uBC88\uD638\uB97C \uB2E4\uC2DC \uD655\uC778\uD574 \uC8FC\uC138\uC694.";
     const label6 = labelProp ?? m.businessNumber ?? "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638";
     const incompleteText = m.businessNumberIncomplete ?? "10\uC790\uB9AC\uB97C \uBAA8\uB450 \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
-    const [touched, setTouched] = useState4(false);
+    const [touched, setTouched] = useState5(false);
     const field4 = useFormattedInput({
       isControlled: "value" in props,
       value: value3,
@@ -1045,33 +1059,37 @@ var BusinessNumberInput = /* @__PURE__ */ forwardRef15(
     const complete = field4.raw.length === 10;
     const autoInvalid = validate && field4.raw.length > 0 && (complete ? !isValidBusinessNumber(field4.raw) : touched);
     const showAuto = autoInvalid && error === void 0;
-    return /* @__PURE__ */ jsx17(
-      TextField,
-      {
-        ref: mergeRefs(ref, inputRef),
-        label: label6,
-        placeholder,
-        inputMode: "numeric",
-        value: field4.display,
-        onChange: field4.onChange,
-        onKeyDown: (event) => {
-          field4.onKeyDown(event);
-          onKeyDown?.(event);
-        },
-        onBlur: (event) => {
-          setTouched(true);
-          onBlur?.(event);
-        },
-        error: error ?? autoInvalid,
-        helperText: showAuto ? complete ? invalidText : incompleteText : helperText3,
-        ...rest
-      }
-    );
+    const announcement = useDelayedAnnouncement(showAuto && complete ? invalidText : "");
+    return /* @__PURE__ */ jsxs15(Fragment4, { children: [
+      /* @__PURE__ */ jsx17(
+        TextField,
+        {
+          ref: mergeRefs(ref, inputRef),
+          label: label6,
+          placeholder,
+          inputMode: "numeric",
+          value: field4.display,
+          onChange: field4.onChange,
+          onKeyDown: (event) => {
+            field4.onKeyDown(event);
+            onKeyDown?.(event);
+          },
+          onBlur: (event) => {
+            setTouched(true);
+            onBlur?.(event);
+          },
+          error: error ?? autoInvalid,
+          helperText: showAuto ? complete ? invalidText : incompleteText : helperText3,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsx17("span", { role: "status", className: visuallyHidden, children: announcement })
+    ] });
   }
 );
 
 // src/components/Calendar/Calendar.tsx
-import { forwardRef as forwardRef17, useEffect as useEffect4, useId as useId4, useRef as useRef7, useState as useState5 } from "react";
+import { forwardRef as forwardRef17, useEffect as useEffect5, useId as useId4, useRef as useRef7, useState as useState6 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2 } from "@bestow-ui/icons";
 import { KOREAN_WEEKDAYS } from "@bestow-ui/korean-utils";
 
@@ -1122,7 +1140,7 @@ var root6 = "_1qyq67b0";
 var weekday = "_1qyq67b4";
 
 // src/components/Calendar/Calendar.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   const {
     value: value3,
@@ -1146,7 +1164,7 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   const headingId = useId4();
   const gridRef = useRef7(null);
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState5(defaultValue ?? "");
+  const [innerValue, setInnerValue] = useState6(defaultValue ?? "");
   const selected = parseISODate(isControlled ? value3 : innerValue);
   const isClient = useIsClient();
   const today = parseISODate(todayProp) ?? (isClient ? /* @__PURE__ */ new Date() : null);
@@ -1158,16 +1176,16 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
     return date;
   };
   const isDisabled = (date) => minDate !== null && compareDays(date, minDate) < 0 || maxDate !== null && compareDays(date, maxDate) > 0 || !!isDateDisabled?.(date);
-  const [focusedState, setFocused] = useState5(null);
+  const [focusedState, setFocused] = useState6(null);
   const base = selected ?? today;
   const focused = focusedState ?? (base ? clamp(base) : null);
   const moveFocus = useRef7(initialFocus ?? false);
   const selectedIso = selected ? toISODate(selected) : "";
-  useEffect4(() => {
+  useEffect5(() => {
     const date = parseISODate(selectedIso);
     if (date) setFocused((prev) => isSameDay(prev, date) ? prev : date);
   }, [selectedIso]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!moveFocus.current || !focused) return;
     moveFocus.current = false;
     gridRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
@@ -1207,8 +1225,8 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   ) : [];
   const canPrev = !!visible && (!minDate || compareDays(new Date(visible.getFullYear(), visible.getMonth(), 0), minDate) >= 0);
   const canNext = !!visible && (!maxDate || compareDays(new Date(visible.getFullYear(), visible.getMonth() + 1, 1), maxDate) <= 0);
-  return /* @__PURE__ */ jsxs15("div", { ref, className: cx(root6, className), children: [
-    /* @__PURE__ */ jsxs15("div", { className: header3, children: [
+  return /* @__PURE__ */ jsxs16("div", { ref, className: cx(root6, className), children: [
+    /* @__PURE__ */ jsxs16("div", { className: header3, children: [
       /* @__PURE__ */ jsx19(
         IconButton,
         {
@@ -1231,7 +1249,7 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs15("table", { ref: gridRef, role: "grid", "aria-labelledby": headingId, className: grid, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsxs16("table", { ref: gridRef, role: "grid", "aria-labelledby": headingId, className: grid, onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsx19("tr", { children: weekdaysShort.map((name, index) => /* @__PURE__ */ jsx19("th", { scope: "col", abbr: weekdaysLong[index], className: weekday, "data-weekday": index, children: name }, index)) }) }),
       /* @__PURE__ */ jsx19("tbody", { children: weeks.map((week) => /* @__PURE__ */ jsx19("tr", { children: week.map((date) => {
         const iso = toISODate(date);
@@ -1273,11 +1291,11 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
 import * as Popover from "@radix-ui/react-popover";
 import {
   forwardRef as forwardRef18,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useId as useId5,
   useMemo as useMemo3,
   useRef as useRef8,
-  useState as useState6
+  useState as useState7
 } from "react";
 import { CheckIcon, ChevronDownIcon as ChevronDownIcon3, XIcon as XIcon3 } from "@bestow-ui/icons";
 
@@ -1297,8 +1315,7 @@ var empty = "c2pbq74";
 var toggle2 = "c2pbq71 c2pbq70";
 
 // src/components/Combobox/Combobox.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
-var NO_RESULTS_ANNOUNCE_DELAY = 800;
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
 var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
   const {
@@ -1338,12 +1355,12 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
   const inputRef = useRef8(null);
   const anchorRef = useRef8(null);
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState6(defaultValue);
+  const [innerValue, setInnerValue] = useState7(defaultValue);
   const selectedValue = isControlled ? value3 : innerValue;
   const selectedOption = options.find((o) => o.value === selectedValue);
-  const [open, setOpen] = useState6(false);
-  const [query, setQuery] = useState6(null);
-  const [activeIndex, setActiveIndex] = useState6(-1);
+  const [open, setOpen] = useState7(false);
+  const [query, setQuery] = useState7(null);
+  const [activeIndex, setActiveIndex] = useState7(-1);
   const filtered = useMemo3(() => query ? options.filter((o) => filter(o, query)) : options, [options, filter, query]);
   const inputText = query ?? selectedOption?.label ?? "";
   const firstEnabled = (list7, from = 0, step2 = 1) => {
@@ -1419,26 +1436,26 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
         break;
     }
   };
-  useEffect5(() => {
+  useEffect6(() => {
     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] = useState6(void 0);
-  useEffect5(() => {
+  const [announcedFor, setAnnouncedFor] = useState7(void 0);
+  useEffect6(() => {
     if (!noResults) return;
-    const timer2 = setTimeout(() => setAnnouncedFor(query), NO_RESULTS_ANNOUNCE_DELAY);
+    const timer2 = setTimeout(() => setAnnouncedFor(query), ANNOUNCE_DELAY);
     return () => clearTimeout(timer2);
   }, [noResults, query]);
   const announceNoResults = noResults && announcedFor === query;
-  return /* @__PURE__ */ jsxs16("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs16("label", { id: labelId, htmlFor: inputId, className: label, children: [
+  return /* @__PURE__ */ jsxs17("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs17("label", { id: labelId, htmlFor: inputId, className: label, children: [
       label6,
       required && /* @__PURE__ */ jsx20("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs16(Popover.Root, { open: open && !disabled, onOpenChange: (next) => next ? openList() : close2(), children: [
-      /* @__PURE__ */ jsx20(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs16(
+    /* @__PURE__ */ jsxs17(Popover.Root, { open: open && !disabled, onOpenChange: (next) => next ? openList() : close2(), children: [
+      /* @__PURE__ */ jsx20(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs17(
         "div",
         {
           ref: anchorRef,
@@ -1537,7 +1554,7 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
                 return (
                   // aria-activedescendant 패턴: 포커스·키보드는 입력창이 맡고 항목은 포커스를 받지 않는다 (WAI-ARIA combobox)
                   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
-                  /* @__PURE__ */ jsxs16(
+                  /* @__PURE__ */ jsxs17(
                     "div",
                     {
                       id: optionId(index),
@@ -1575,7 +1592,7 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
 });
 
 // src/components/DatePicker/DatePicker.tsx
-import { forwardRef as forwardRef19, useEffect as useEffect6, useRef as useRef9, useState as useState7 } from "react";
+import { forwardRef as forwardRef19, useEffect as useEffect7, useRef as useRef9, useState as useState8 } from "react";
 import { CalendarIcon } from "@bestow-ui/icons";
 
 // src/components/Popover/Popover.tsx
@@ -1591,7 +1608,7 @@ var header4 = "_1j99p8x1";
 var title3 = "_1j99p8x2";
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function Popover2({
   content: content12,
   children,
@@ -1612,9 +1629,9 @@ function Popover2({
   const portal2 = usePortalProps();
   const m = useMessages();
   const titleId = useId6();
-  return /* @__PURE__ */ jsxs17(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
+  return /* @__PURE__ */ jsxs18(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
     /* @__PURE__ */ jsx21(RadixPopover.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx21(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs17(
+    /* @__PURE__ */ jsx21(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs18(
       RadixPopover.Content,
       {
         side,
@@ -1627,7 +1644,7 @@ function Popover2({
         className: cx(portal2.className, content7, className),
         style: { ...portal2.style, ...style },
         children: [
-          (title6 || showClose) && /* @__PURE__ */ jsxs17("div", { className: header4, children: [
+          (title6 || showClose) && /* @__PURE__ */ jsxs18("div", { className: header4, children: [
             title6 && /* @__PURE__ */ jsx21("h2", { id: titleId, className: title3, children: title6 }),
             showClose && /* @__PURE__ */ jsx21(RadixPopover.Close, { className: closeButton3, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx21(XIcon4, { size: 16 }) })
           ] }),
@@ -1641,7 +1658,7 @@ function Popover2({
 var PopoverClose = RadixPopover.Close;
 
 // src/components/DatePicker/DatePicker.tsx
-import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var sanitize2 = (input6) => input6.replace(/\D/g, "").slice(0, 8);
 var format = (digits) => digits.length <= 4 ? digits : digits.length <= 6 ? `${digits.slice(0, 4)}-${digits.slice(4)}` : `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}`;
 var isDigit3 = (char) => /\d/.test(char);
@@ -1678,8 +1695,8 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
     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] = useState7(false);
-    const [touched, setTouched] = useState7(false);
+    const [open, setOpen] = useState8(false);
+    const [touched, setTouched] = useState8(false);
     const isControlled = "value" in props;
     const lastEmitted = useRef9(isControlled ? value3 ?? "" : defaultValue ?? "");
     const minDate = parseISODate(min);
@@ -1706,7 +1723,7 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
     });
     const textIso = toIso(field4.raw);
     const { setRaw } = field4;
-    useEffect6(() => {
+    useEffect7(() => {
       if (!isControlled) return;
       const next = value3 ?? "";
       lastEmitted.current = next;
@@ -1720,8 +1737,9 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
     const complete = field4.raw.length === 8;
     const autoError = complete ? !date ? invalidText : isUnavailable(date) ? unavailableText : null : touched && field4.raw.length > 0 ? incompleteText : null;
     const showAuto = autoError !== null && error === void 0;
+    const announcement = useDelayedAnnouncement(showAuto && complete ? autoError ?? "" : "");
     const selectedIso = date && !isUnavailable(date) ? textIso : "";
-    return /* @__PURE__ */ jsxs18(Fragment4, { children: [
+    return /* @__PURE__ */ jsxs19(Fragment5, { children: [
       /* @__PURE__ */ jsx22(
         TextField,
         {
@@ -1772,13 +1790,14 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
           )
         }
       ),
+      /* @__PURE__ */ jsx22("span", { role: "status", className: visuallyHidden, children: announcement }),
       name && /* @__PURE__ */ jsx22("input", { type: "hidden", name, value: selectedIso })
     ] });
   }
 );
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-import { forwardRef as forwardRef20, useId as useId7, useState as useState8 } from "react";
+import { forwardRef as forwardRef20, useId as useId7, useState as useState9 } from "react";
 
 // src/components/DateRangePicker/DateRangePicker.css.ts
 var field2 = "_17277dh3";
@@ -1789,7 +1808,7 @@ var presets = "_17277dh5";
 var separator2 = "_17277dh4";
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 var DateRangePicker = /* @__PURE__ */ forwardRef20(
   function DateRangePicker2(props, ref) {
     const {
@@ -1820,7 +1839,7 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
     const helperId = helperText3 ? `${baseId}-helper` : void 0;
     const isClient = useIsClient();
     const isControlled = "value" in props;
-    const [inner, setInner] = useState8(defaultValue ?? { start: "", end: "" });
+    const [inner, setInner] = useState9(defaultValue ?? { start: "", end: "" });
     const range3 = isControlled ? value3 ?? { start: "", end: "" } : inner;
     const update = (next) => {
       if (next.start === range3.start && next.end === range3.end) return;
@@ -1831,7 +1850,7 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
     const startLabel = startLabelProp ?? m.dateRangeStart ?? "\uC2DC\uC791\uC77C";
     const endLabel = endLabelProp ?? m.dateRangeEnd ?? "\uC885\uB8CC\uC77C";
     const common = { isDateDisabled, isHoliday, today, disabled, required, fullWidth: true };
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs20(
       "fieldset",
       {
         ref,
@@ -1840,11 +1859,11 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
         "aria-describedby": helperId,
         "data-invalid": error || void 0,
         children: [
-          label6 && /* @__PURE__ */ jsxs19("legend", { className: legend3, children: [
+          label6 && /* @__PURE__ */ jsxs20("legend", { className: legend3, children: [
             label6,
             required && /* @__PURE__ */ jsx23("span", { className: requiredMark, "aria-hidden": true, children: "*" })
           ] }),
-          /* @__PURE__ */ jsxs19("div", { className: fields, children: [
+          /* @__PURE__ */ jsxs20("div", { className: fields, children: [
             /* @__PURE__ */ jsx23("div", { className: field2, children: /* @__PURE__ */ jsx23(
               DatePicker,
               {
@@ -1917,7 +1936,7 @@ var overlay2 = "nmobyv0";
 var title4 = "nmobyvv";
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function Drawer({
   open,
   defaultOpen,
@@ -1936,11 +1955,11 @@ function Drawer({
   const portal2 = usePortalProps();
   const m = useMessages();
   const focus = useReturnFocus(Boolean(trigger4));
-  return /* @__PURE__ */ jsxs20(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
+  return /* @__PURE__ */ jsxs21(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
     trigger4 && /* @__PURE__ */ jsx24(Dialog2.Trigger, { asChild: true, children: trigger4 }),
-    /* @__PURE__ */ jsxs20(Dialog2.Portal, { children: [
+    /* @__PURE__ */ jsxs21(Dialog2.Portal, { children: [
       /* @__PURE__ */ jsx24(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
-      /* @__PURE__ */ jsxs20(
+      /* @__PURE__ */ jsxs21(
         Dialog2.Content,
         {
           className: cx(portal2.className, content8({ side, size }), className),
@@ -1951,8 +1970,8 @@ function Drawer({
           onCloseAutoFocus: focus.onCloseAutoFocus,
           ...description7 ? {} : { "aria-describedby": void 0 },
           children: [
-            /* @__PURE__ */ jsxs20("div", { className: header5, children: [
-              /* @__PURE__ */ jsxs20("div", { className: headings2, children: [
+            /* @__PURE__ */ jsxs21("div", { className: header5, children: [
+              /* @__PURE__ */ jsxs21("div", { className: headings2, children: [
                 /* @__PURE__ */ jsx24(Dialog2.Title, { className: title4, children: title6 }),
                 description7 && /* @__PURE__ */ jsx24(Dialog2.Description, { className: description3, children: description7 })
               ] }),
@@ -1969,7 +1988,7 @@ function Drawer({
 var DrawerClose = Dialog2.Close;
 
 // src/components/ErrorSummary/ErrorSummary.tsx
-import { forwardRef as forwardRef21, useEffect as useEffect7, useId as useId8, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef21, useEffect as useEffect8, useId as useId8, useRef as useRef10 } from "react";
 
 // src/components/ErrorSummary/ErrorSummary.css.ts
 var link3 = "_1cdophv2";
@@ -1983,7 +2002,7 @@ var ErrorSummary = /* @__PURE__ */ forwardRef21(function ErrorSummary2({ errors:
   const titleId = useId8();
   const rootRef = useRef10(null);
   const hasErrors = errors2.length > 0;
-  useEffect7(() => {
+  useEffect8(() => {
     if (hasErrors) rootRef.current?.focus();
   }, [focusKey, hasErrors]);
   if (!hasErrors) return null;
@@ -2018,7 +2037,7 @@ var ErrorSummary = /* @__PURE__ */ forwardRef21(function ErrorSummary2({ errors:
 });
 
 // src/components/FileUpload/FileUpload.tsx
-import { forwardRef as forwardRef22, useEffect as useEffect8, useId as useId9, useRef as useRef11, useState as useState9 } from "react";
+import { forwardRef as forwardRef22, useEffect as useEffect9, useId as useId9, useRef as useRef11, useState as useState10 } from "react";
 import { FileIcon, UploadIcon, XIcon as XIcon6 } from "@bestow-ui/icons";
 
 // src/components/FileUpload/FileUpload.css.ts
@@ -2034,7 +2053,7 @@ var list4 = "r2jefr4";
 var root8 = "r2jefr0";
 
 // src/components/FileUpload/FileUpload.tsx
-import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var REMOVED_ANNOUNCE_DELAY = 500;
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -2072,11 +2091,11 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
   } = props;
   const m = useMessages();
   const isControlled = "value" in props;
-  const [innerFiles, setInnerFiles] = useState9(defaultValue ?? []);
+  const [innerFiles, setInnerFiles] = useState10(defaultValue ?? []);
   const files = isControlled ? value3 ?? NO_FILES : innerFiles;
-  const [rejections, setRejections] = useState9([]);
-  const [announcement, setAnnouncement] = useState9("");
-  const [dragging, setDragging] = useState9(false);
+  const [rejections, setRejections] = useState10([]);
+  const [announcement, setAnnouncement] = useState10("");
+  const [dragging, setDragging] = useState10(false);
   const generatedId = useId9();
   const baseId = id ?? generatedId;
   const labelId = label6 ? `${baseId}-label` : void 0;
@@ -2087,7 +2106,7 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
   const removeButtonRefs = useRef11([]);
   const focusAfterRemove = useRef11(null);
   const announceTimer = useRef11(void 0);
-  useEffect8(() => () => clearTimeout(announceTimer.current), []);
+  useEffect9(() => () => clearTimeout(announceTimer.current), []);
   const selectLabel = m.fileSelect ?? "\uD30C\uC77C \uC120\uD0DD";
   const reasonText = (rejection) => {
     const fileName2 = rejection.file.name;
@@ -2135,13 +2154,13 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
     setRejections([]);
     commit(next, m.fileRemoved?.(removed.name) ?? `${removed.name} \uC0AD\uC81C\uB428`, REMOVED_ANNOUNCE_DELAY);
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if (focusAfterRemove.current === null) return;
     const target = focusAfterRemove.current;
     focusAfterRemove.current = null;
     (target >= 0 ? removeButtonRefs.current[target] : selectButtonRef.current)?.focus();
   }, [files]);
-  useEffect8(() => {
+  useEffect9(() => {
     const input6 = inputRef.current;
     if (!name || !input6 || typeof DataTransfer === "undefined") return;
     try {
@@ -2156,12 +2175,12 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
     event.preventDefault();
     setDragging(over);
   };
-  return /* @__PURE__ */ jsxs21("div", { ref, className: cx(field, root8, className), children: [
-    label6 && /* @__PURE__ */ jsxs21("span", { id: labelId, className: label, children: [
+  return /* @__PURE__ */ jsxs22("div", { ref, className: cx(field, root8, className), children: [
+    label6 && /* @__PURE__ */ jsxs22("span", { id: labelId, className: label, children: [
       label6,
       required && /* @__PURE__ */ jsx26("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsxs22(
       "div",
       {
         role: "group",
@@ -2219,7 +2238,7 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ jsx26("ul", { "aria-label": m.fileList ?? "\uC120\uD0DD\uD55C \uD30C\uC77C", className: list4, children: files.map((file, index) => /* @__PURE__ */ jsxs21("li", { className: item5, children: [
+    files.length > 0 && /* @__PURE__ */ jsx26("ul", { "aria-label": m.fileList ?? "\uC120\uD0DD\uD55C \uD30C\uC77C", className: list4, children: files.map((file, index) => /* @__PURE__ */ jsxs22("li", { className: item5, children: [
       /* @__PURE__ */ jsx26("span", { className: fileIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx26(FileIcon, { size: 16 }) }),
       /* @__PURE__ */ jsx26("span", { className: fileName, children: file.name }),
       /* @__PURE__ */ jsx26("span", { id: `${baseId}-size-${index}`, className: fileSize, children: formatSize(file.size) }),
@@ -2264,7 +2283,7 @@ var subChevron = "_1d7ahuxb";
 var subTrigger = "_1d7ahuxa";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 var DropdownMenu = RadixMenu.Root;
 var DropdownMenuTrigger = RadixMenu.Trigger;
 var DropdownMenuGroup = RadixMenu.Group;
@@ -2288,7 +2307,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef23(
 );
 var DropdownMenuItem = /* @__PURE__ */ forwardRef23(
   function DropdownMenuItem2({ icon: icon7, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs22(RadixMenu.Item, { ref, className: cx(item6, color === "danger" && danger, className), ...rest, children: [
+    return /* @__PURE__ */ jsxs23(RadixMenu.Item, { ref, className: cx(item6, color === "danger" && danger, className), ...rest, children: [
       icon7 && /* @__PURE__ */ jsx27("span", { className: icon4, "aria-hidden": true, children: icon7 }),
       children,
       shortcut2 && /* @__PURE__ */ jsx27("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
@@ -2307,7 +2326,7 @@ var DropdownMenuSeparator = /* @__PURE__ */ forwardRef23(
 );
 var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef23(
   function DropdownMenuCheckboxItem2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs22(RadixMenu.CheckboxItem, { ref, className: cx(item6, className), ...rest, children: [
+    return /* @__PURE__ */ jsxs23(RadixMenu.CheckboxItem, { ref, className: cx(item6, className), ...rest, children: [
       /* @__PURE__ */ jsx27("span", { className: indicator, "aria-hidden": true, children: /* @__PURE__ */ jsx27(RadixMenu.ItemIndicator, { className: indicatorInner, children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx27(MinusIcon, { size: 16 }) : /* @__PURE__ */ jsx27(CheckIcon2, { size: 16 }) }) }),
       children
     ] });
@@ -2316,7 +2335,7 @@ var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef23(
 var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
 var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef23(
   function DropdownMenuRadioItem2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs22(RadixMenu.RadioItem, { ref, className: cx(item6, className), ...rest, children: [
+    return /* @__PURE__ */ jsxs23(RadixMenu.RadioItem, { ref, className: cx(item6, className), ...rest, children: [
       /* @__PURE__ */ jsx27("span", { className: indicator, "aria-hidden": true, children: /* @__PURE__ */ jsx27(RadixMenu.ItemIndicator, { className: indicatorInner, children: /* @__PURE__ */ jsx27("span", { className: radioDot }) }) }),
       children
     ] });
@@ -2325,7 +2344,7 @@ var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef23(
 var DropdownMenuSub = RadixMenu.Sub;
 var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef23(
   function DropdownMenuSubTrigger2({ icon: icon7, className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs22(RadixMenu.SubTrigger, { ref, className: cx(item6, subTrigger, className), ...rest, children: [
+    return /* @__PURE__ */ jsxs23(RadixMenu.SubTrigger, { ref, className: cx(item6, subTrigger, className), ...rest, children: [
       icon7 && /* @__PURE__ */ jsx27("span", { className: icon4, "aria-hidden": true, children: icon7 }),
       children,
       /* @__PURE__ */ jsx27("span", { className: subChevron, "aria-hidden": true, children: /* @__PURE__ */ jsx27(ChevronRightIcon3, { size: 16 }) })
@@ -2351,7 +2370,7 @@ var DropdownMenuSubContent = /* @__PURE__ */ forwardRef23(
 );
 
 // src/components/NumberInput/NumberInput.tsx
-import { forwardRef as forwardRef24, useEffect as useEffect9, useId as useId10, useRef as useRef12, useState as useState10 } from "react";
+import { forwardRef as forwardRef24, useEffect as useEffect10, useId as useId10, useRef as useRef12, useState as useState11 } from "react";
 import { MinusIcon as MinusIcon2, PlusIcon } from "@bestow-ui/icons";
 
 // src/components/NumberInput/NumberInput.css.ts
@@ -2362,7 +2381,7 @@ var stepper = /* @__PURE__ */ _7a46811({ defaultClassName: "_1vq2qhv3", variantC
 var unit = "_1vq2qhv2";
 
 // src/components/NumberInput/NumberInput.tsx
-import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 var MAX_DIGITS2 = 15;
 var isMeaningful = (char) => /[\d.-]/.test(char);
 var decimalsOf = (n) => Number.isFinite(n) ? String(n).split(".")[1]?.length ?? 0 : 0;
@@ -2431,7 +2450,7 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
       inputRef
     });
     const { setRaw } = field4;
-    useEffect9(() => {
+    useEffect10(() => {
       if (!isControlled) return;
       const next = value3 ?? null;
       lastEmitted.current = next;
@@ -2439,7 +2458,7 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
     }, [value3]);
     const current2 = parse(field4.raw);
     const valueText = (n) => `${format2(toRaw(n))}${unit2 ?? ""}`;
-    const [announcement, setAnnouncement] = useState10("");
+    const [announcement, setAnnouncement] = useState11("");
     const setValue = (next, announce = true) => {
       setRaw(toRaw(next));
       emit(next);
@@ -2487,7 +2506,7 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
         children: direction < 0 ? /* @__PURE__ */ jsx28(MinusIcon2, {}) : /* @__PURE__ */ jsx28(PlusIcon, {})
       }
     );
-    return /* @__PURE__ */ jsxs23(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs24(Fragment6, { children: [
       /* @__PURE__ */ jsx28(
         TextField,
         {
@@ -2516,7 +2535,7 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
           disabled,
           readOnly,
           startAdornment: hideStepper ? void 0 : stepper2(-1),
-          endAdornment: unit2 || !hideStepper ? /* @__PURE__ */ jsxs23("span", { className: end, children: [
+          endAdornment: unit2 || !hideStepper ? /* @__PURE__ */ jsxs24("span", { className: end, children: [
             unit2 && /* @__PURE__ */ jsx28("span", { className: unit, children: unit2 }),
             !hideStepper && stepper2(1)
           ] }) : void 0,
@@ -2532,7 +2551,7 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
 
 // src/components/Pagination/Pagination.tsx
 import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon4 } from "@bestow-ui/icons";
-import { forwardRef as forwardRef25, useState as useState11 } from "react";
+import { forwardRef as forwardRef25, useState as useState12 } from "react";
 
 // src/components/Pagination/getPaginationItems.ts
 var range = (start, end2) => end2 < start ? [] : Array.from({ length: end2 - start + 1 }, (_, i) => start + i);
@@ -2565,7 +2584,7 @@ var item7 = /* @__PURE__ */ _7a46812({ defaultClassName: "_1iraoak1", variantCla
 var list5 = "_1iraoak0";
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
   totalPages,
   page: pageProp,
@@ -2579,7 +2598,7 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
   "aria-label": ariaLabelProp,
   ...rest
 }, ref) {
-  const [uncontrolledPage, setUncontrolledPage] = useState11(defaultPage);
+  const [uncontrolledPage, setUncontrolledPage] = useState12(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`);
@@ -2591,7 +2610,7 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
     onPageChange?.(next);
   };
   const itemClass = item7({ size });
-  return /* @__PURE__ */ jsx29("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsxs24("ul", { className: list5, children: [
+  return /* @__PURE__ */ jsx29("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsxs25("ul", { className: list5, children: [
     /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(
       "button",
       {
@@ -2685,7 +2704,7 @@ var PhoneNumberInput = /* @__PURE__ */ forwardRef26(
 );
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { forwardRef as forwardRef27, useId as useId11, useState as useState12 } from "react";
+import { forwardRef as forwardRef27, useId as useId11, useState as useState13 } from "react";
 
 // src/components/RadioGroup/RadioGroup.css.ts
 import { createRuntimeFn as _7a46813 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -2698,7 +2717,7 @@ var radio = /* @__PURE__ */ _7a46813({ defaultClassName: "_1w9iwjm7", variantCla
 var text = "_1w9iwjma";
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref) {
   const {
     options,
@@ -2718,7 +2737,7 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
     className
   } = props;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState12(defaultValue ?? "");
+  const [innerValue, setInnerValue] = useState13(defaultValue ?? "");
   const current2 = isControlled ? value3 ?? "" : innerValue;
   const generatedId = useId11();
   const baseId = id ?? generatedId;
@@ -2731,8 +2750,8 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
     if (!isControlled) setInnerValue(next);
     onValueChange?.(next);
   };
-  return /* @__PURE__ */ jsxs25("div", { className: cx(field, className), children: [
-    label6 && /* @__PURE__ */ jsxs25("span", { id: labelId, className: cx(label, groupLabel), children: [
+  return /* @__PURE__ */ jsxs26("div", { className: cx(field, className), children: [
+    label6 && /* @__PURE__ */ jsxs26("span", { id: labelId, className: cx(label, groupLabel), children: [
       label6,
       required && /* @__PURE__ */ jsx31("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
@@ -2754,7 +2773,7 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
           const descriptionId = option2.description ? `${itemId}-description` : void 0;
           const itemDisabled = disabled || option2.disabled;
           const checked = option2.value === current2;
-          return /* @__PURE__ */ jsxs25("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
+          return /* @__PURE__ */ jsxs26("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
             /* @__PURE__ */ jsx31(
               "input",
               {
@@ -2772,7 +2791,7 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
                 className: radio({ size })
               }
             ),
-            /* @__PURE__ */ jsxs25("span", { className: text, children: [
+            /* @__PURE__ */ jsxs26("span", { className: text, children: [
               /* @__PURE__ */ jsx31("label", { htmlFor: itemId, className: labelText, children: option2.label }),
               option2.description && /* @__PURE__ */ jsx31("span", { id: descriptionId, className: description4, children: option2.description })
             ] })
@@ -2785,7 +2804,7 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
 });
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { forwardRef as forwardRef28, useId as useId12, useRef as useRef14, useState as useState13 } from "react";
+import { forwardRef as forwardRef28, useId as useId12, useRef as useRef14, useState as useState14 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.css.ts
 import { createRuntimeFn as _7a46814 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -2794,7 +2813,7 @@ var item8 = /* @__PURE__ */ _7a46814({ defaultClassName: "_1h65mmo2", variantCla
 var root9 = /* @__PURE__ */ _7a46814({ defaultClassName: "_1h65mmo0", variantClassNames: { fullWidth: { true: "_1h65mmo1" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var NEXT_KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
 var SegmentedControl = /* @__PURE__ */ forwardRef28(
   function SegmentedControl2(props, ref) {
@@ -2813,7 +2832,7 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
       className
     } = props;
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = useState13(defaultValue ?? "");
+    const [innerValue, setInnerValue] = useState14(defaultValue ?? "");
     const current2 = isControlled ? value3 ?? "" : innerValue;
     const generatedId = useId12();
     const labelId = label6 ? `${id ?? generatedId}-label` : void 0;
@@ -2848,7 +2867,7 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
       itemRefs.current[target]?.focus();
       select2(target);
     };
-    const group = /* @__PURE__ */ jsxs26(
+    const group = /* @__PURE__ */ jsxs27(
       "div",
       {
         ref,
@@ -2861,7 +2880,7 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
         children: [
           options.map((option2, index) => {
             const checked = index === checkedIndex;
-            return /* @__PURE__ */ jsxs26(
+            return /* @__PURE__ */ jsxs27(
               "button",
               {
                 ref: (node) => {
@@ -2890,7 +2909,7 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
       }
     );
     if (!label6) return group;
-    return /* @__PURE__ */ jsxs26("div", { className: cx(field, className), children: [
+    return /* @__PURE__ */ jsxs27("div", { className: cx(field, className), children: [
       /* @__PURE__ */ jsx32("span", { id: labelId, className: label, children: label6 }),
       group
     ] });
@@ -2908,7 +2927,7 @@ var select = /* @__PURE__ */ _7a46815({ defaultClassName: "_5silym1", variantCla
 var wrapper = "_5silym0";
 
 // src/components/NativeSelect/NativeSelect.tsx
-import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var NativeSelect = /* @__PURE__ */ forwardRef29(function NativeSelect2({
   options,
   onValueChange,
@@ -2936,19 +2955,19 @@ var NativeSelect = /* @__PURE__ */ forwardRef29(function NativeSelect2({
     onChange?.(event);
     onValueChange?.(event.target.value);
   };
-  return /* @__PURE__ */ jsxs27("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs27("label", { htmlFor: selectId, className: label, children: [
+  return /* @__PURE__ */ jsxs28("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs28("label", { htmlFor: selectId, className: label, children: [
       label6,
       required && /* @__PURE__ */ jsx33("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs27(
+    /* @__PURE__ */ jsxs28(
       "span",
       {
         className: cx(root3({ size, fullWidth }), wrapper),
         "data-invalid": error || void 0,
         "data-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ jsxs27(
+          /* @__PURE__ */ jsxs28(
             "select",
             {
               ref,
@@ -2980,7 +2999,7 @@ var NativeSelect = /* @__PURE__ */ forwardRef29(function NativeSelect2({
 import * as RadixSelect from "@radix-ui/react-select";
 import { forwardRef as forwardRef30, useId as useId14 } from "react";
 import { CheckIcon as CheckIcon3, ChevronDownIcon as ChevronDownIcon5 } from "@bestow-ui/icons";
-import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
   const {
     options,
@@ -3005,12 +3024,12 @@ var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
   const triggerId = id ?? generatedId;
   const helperId = helperText3 ? `${triggerId}-helper` : void 0;
   const portal2 = usePortalProps();
-  return /* @__PURE__ */ jsxs28("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs28("label", { htmlFor: triggerId, className: label, children: [
+  return /* @__PURE__ */ jsxs29("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs29("label", { htmlFor: triggerId, className: label, children: [
       label6,
       required && /* @__PURE__ */ jsx34("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs28(
+    /* @__PURE__ */ jsxs29(
       RadixSelect.Root,
       {
         value: isControlled ? value3 ?? "" : void 0,
@@ -3020,7 +3039,7 @@ var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
         required,
         name,
         children: [
-          /* @__PURE__ */ jsxs28(
+          /* @__PURE__ */ jsxs29(
             RadixSelect.Trigger,
             {
               ref,
@@ -3044,7 +3063,7 @@ var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
               collisionPadding: 8,
               className: cx(portal2.className, content5),
               style: portal2.style,
-              children: /* @__PURE__ */ jsx34(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ jsxs28(
+              children: /* @__PURE__ */ jsx34(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ jsxs29(
                 RadixSelect.Item,
                 {
                   value: option2.value,
@@ -3091,7 +3110,7 @@ var SkipLink = /* @__PURE__ */ forwardRef31(function SkipLink2({ href = "#main",
 
 // src/components/Slider/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import { forwardRef as forwardRef32, useId as useId15, useState as useState14 } from "react";
+import { forwardRef as forwardRef32, useId as useId15, useState as useState15 } from "react";
 
 // src/components/Slider/Slider.css.ts
 import { createRuntimeFn as _7a46816 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -3106,7 +3125,7 @@ var track = /* @__PURE__ */ _7a46816({ defaultClassName: "_126mzjm8", variantCla
 var value2 = "_126mzjm3";
 
 // src/components/Slider/Slider.tsx
-import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
 var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
   const {
     value: value3,
@@ -3133,7 +3152,7 @@ var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
   const labelId = `${baseId}-label`;
   const helperId = `${baseId}-helper`;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState14(defaultValue ?? [min]);
+  const [innerValue, setInnerValue] = useState15(defaultValue ?? [min]);
   const current2 = isControlled ? value3 ?? [min] : innerValue;
   const isRange = current2.length > 1;
   const handleChange = (next) => {
@@ -3141,12 +3160,12 @@ var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
     onValueChange?.(next);
   };
   const valueText = current2.map(formatValue).join(" \u2013 ");
-  return /* @__PURE__ */ jsxs29("div", { className: cx(field3, className), children: [
-    (label6 || showValue) && /* @__PURE__ */ jsxs29("div", { className: header6, children: [
+  return /* @__PURE__ */ jsxs30("div", { className: cx(field3, className), children: [
+    (label6 || showValue) && /* @__PURE__ */ jsxs30("div", { className: header6, children: [
       label6 && /* @__PURE__ */ jsx36("span", { id: labelId, className: label3, children: label6 }),
       showValue && /* @__PURE__ */ jsx36("span", { className: value2, "aria-hidden": true, children: valueText })
     ] }),
-    /* @__PURE__ */ jsxs29(
+    /* @__PURE__ */ jsxs30(
       RadixSlider.Root,
       {
         ref,
@@ -3177,7 +3196,7 @@ var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
         ]
       }
     ),
-    isRange && current2.map((_, index) => /* @__PURE__ */ jsxs29("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
+    isRange && current2.map((_, index) => /* @__PURE__ */ jsxs30("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
       label6 ? "" : ariaLabel ? `${ariaLabel} ` : "",
       thumbLabels[index] ?? `${index + 1}`
     ] }, index)),
@@ -3199,7 +3218,7 @@ var step = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhm3", variantClassN
 var text2 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhma", variantClassNames: { orientation: { horizontal: "kervhmb", vertical: "kervhmc" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/Stepper/Stepper.tsx
-import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
 var Stepper = /* @__PURE__ */ forwardRef33(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
   const m = useMessages();
   return /* @__PURE__ */ jsx37(
@@ -3211,7 +3230,7 @@ var Stepper = /* @__PURE__ */ forwardRef33(function Stepper2({ steps, current: c
       ...rest,
       children: steps.map((step2, index) => {
         const status = index < current2 ? "complete" : index === current2 ? "current" : "upcoming";
-        return /* @__PURE__ */ jsxs30(
+        return /* @__PURE__ */ jsxs31(
           "li",
           {
             className: step({ orientation }),
@@ -3219,10 +3238,10 @@ var Stepper = /* @__PURE__ */ forwardRef33(function Stepper2({ steps, current: c
             "aria-current": status === "current" ? "step" : void 0,
             children: [
               /* @__PURE__ */ jsx37("span", { className: indicator2({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ jsx37(CheckIcon4, { size: 16, strokeWidth: 2.5 }) : index + 1 }),
-              /* @__PURE__ */ jsxs30("span", { className: text2({ orientation }), children: [
-                /* @__PURE__ */ jsxs30("span", { className: label4({ status }), children: [
+              /* @__PURE__ */ jsxs31("span", { className: text2({ orientation }), children: [
+                /* @__PURE__ */ jsxs31("span", { className: label4({ status }), children: [
                   step2.label,
-                  status === "complete" && /* @__PURE__ */ jsxs30("span", { className: visuallyHidden, children: [
+                  status === "complete" && /* @__PURE__ */ jsxs31("span", { className: visuallyHidden, children: [
                     " (",
                     m.stepCompleted ?? "\uC644\uB8CC",
                     ")"
@@ -3240,7 +3259,7 @@ var Stepper = /* @__PURE__ */ forwardRef33(function Stepper2({ steps, current: c
 });
 
 // src/components/Switch/Switch.tsx
-import { forwardRef as forwardRef34, useEffect as useEffect10, useId as useId16, useRef as useRef15, useState as useState15 } from "react";
+import { forwardRef as forwardRef34, useEffect as useEffect11, useId as useId16, useRef as useRef15, useState as useState16 } from "react";
 
 // src/components/Switch/Switch.css.ts
 import { createRuntimeFn as _7a46818 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -3251,7 +3270,7 @@ var thumb2 = /* @__PURE__ */ _7a46818({ defaultClassName: "o33ul26", variantClas
 var track2 = /* @__PURE__ */ _7a46818({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/Switch/Switch.tsx
-import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
 function setNativeChecked(input6, checked) {
   Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "checked")?.set?.call(input6, checked);
 }
@@ -3271,12 +3290,12 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
 }, ref) {
   const generatedId = useId16();
   const switchId = id ?? generatedId;
-  const [uncontrolled, setUncontrolled] = useState15(defaultChecked ?? false);
+  const [uncontrolled, setUncontrolled] = useState16(defaultChecked ?? false);
   const isControlled = checkedProp !== void 0;
   const checked = isControlled ? checkedProp : uncontrolled;
   const buttonRef = useRef15(null);
   const inputRef = useRef15(null);
-  const [inForm, setInForm] = useState15(true);
+  const [inForm, setInForm] = useState16(true);
   const userToggled = useRef15(false);
   const setChecked = (next) => {
     if (!isControlled) setUncontrolled(next);
@@ -3284,7 +3303,7 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
   };
   const setCheckedRef = useRef15(setChecked);
   setCheckedRef.current = setChecked;
-  useEffect10(() => {
+  useEffect11(() => {
     const form = buttonRef.current?.form;
     setInForm(!!form);
     if (!form) return;
@@ -3293,7 +3312,7 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
     form.addEventListener("reset", onReset);
     return () => form.removeEventListener("reset", onReset);
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     const input6 = inputRef.current;
     if (!input6 || input6.checked === checked) return;
     setNativeChecked(input6, checked);
@@ -3306,7 +3325,7 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
     if (inForm) event.stopPropagation();
   };
   const state = checked ? "checked" : "unchecked";
-  return /* @__PURE__ */ jsxs31("span", { className: cx(root12({ size }), className), "data-disabled": disabled || void 0, children: [
+  return /* @__PURE__ */ jsxs32("span", { className: cx(root12({ size }), className), "data-disabled": disabled || void 0, children: [
     /* @__PURE__ */ jsx38(
       "button",
       {
@@ -3374,7 +3393,7 @@ var striped = "l3ploy6";
 var table = "l3ploy1";
 
 // src/components/Table/Table.tsx
-import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
 var TableSizeContext = /* @__PURE__ */ createContext3("md");
 var TableSectionContext = /* @__PURE__ */ createContext3("body");
 var Table = /* @__PURE__ */ forwardRef35(function Table2({
@@ -3399,7 +3418,7 @@ var Table = /* @__PURE__ */ forwardRef35(function Table2({
       role: "region",
       "aria-labelledby": caption2 ? captionId : void 0,
       "aria-label": caption2 ? void 0 : ariaLabel,
-      children: /* @__PURE__ */ jsxs32(
+      children: /* @__PURE__ */ jsxs33(
         "table",
         {
           ref,
@@ -3451,7 +3470,7 @@ var TableHead = /* @__PURE__ */ forwardRef35(function TableHead2({ align, sortDi
         className
       ),
       ...rest,
-      children: sortable ? /* @__PURE__ */ jsxs32("button", { type: "button", className: sortButton, onClick: onSort, children: [
+      children: sortable ? /* @__PURE__ */ jsxs33("button", { type: "button", className: sortButton, onClick: onSort, children: [
         children,
         /* @__PURE__ */ jsx39(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
       ] }) : children
@@ -3474,13 +3493,13 @@ var TableEmpty = /* @__PURE__ */ forwardRef35(function TableEmpty2({ colSpan, cl
   return /* @__PURE__ */ jsx39(TableRow, { children: /* @__PURE__ */ jsx39(TableCell, { ref, colSpan, className: cx(emptyCell, className), ...rest, children: /* @__PURE__ */ jsx39("div", { className: emptyContent, children }) }) });
 });
 function TableSkeleton({ rows = 5, columns }) {
-  return /* @__PURE__ */ jsx39(Fragment6, { children: Array.from({ length: rows }, (_, row5) => /* @__PURE__ */ jsx39(TableRow, { "aria-hidden": true, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ jsx39(TableCell, { children: /* @__PURE__ */ jsx39(Skeleton, { width: column === 0 ? "60%" : "80%" }) }, column)) }, row5)) });
+  return /* @__PURE__ */ jsx39(Fragment7, { children: Array.from({ length: rows }, (_, row5) => /* @__PURE__ */ jsx39(TableRow, { "aria-hidden": true, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ jsx39(TableCell, { children: /* @__PURE__ */ jsx39(Skeleton, { width: column === 0 ? "60%" : "80%" }) }, column)) }, row5)) });
 }
 
 // src/components/Table/useTableSelection.ts
-import { useCallback, useState as useState16 } from "react";
+import { useCallback, useState as useState17 } from "react";
 function useTableSelection(initial = []) {
-  const [selected, setSelected] = useState16(initial);
+  const [selected, setSelected] = useState17(initial);
   const isSelected = useCallback((id) => selected.includes(id), [selected]);
   const toggle3 = useCallback((id, checked) => {
     setSelected((prev) => {
@@ -3544,7 +3563,7 @@ import {
   useCallback as useCallback2,
   useId as useId18,
   useRef as useRef16,
-  useState as useState17
+  useState as useState18
 } from "react";
 
 // src/components/Textarea/Textarea.css.ts
@@ -3556,7 +3575,7 @@ var footer4 = "_1koawa8";
 var textarea = /* @__PURE__ */ _7a46821({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
 
 // src/components/Textarea/Textarea.tsx
-import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
 var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
   label: label6,
   helperText: helperText3,
@@ -3582,7 +3601,7 @@ var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
   const textareaId = id ?? generatedId;
   const helperId = helperText3 ? `${textareaId}-helper` : void 0;
   const innerRef = useRef16(null);
-  const [uncontrolledLength, setUncontrolledLength] = useState17(() => String(defaultValue ?? "").length);
+  const [uncontrolledLength, setUncontrolledLength] = useState18(() => String(defaultValue ?? "").length);
   const length = value3 !== void 0 ? String(value3).length : uncontrolledLength;
   const fitHeight = useCallback2(() => {
     const el = innerRef.current;
@@ -3597,8 +3616,8 @@ var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
     fitHeight();
     onChange?.(event);
   };
-  return /* @__PURE__ */ jsxs33("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs33("label", { htmlFor: textareaId, className: label, children: [
+  return /* @__PURE__ */ jsxs34("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs34("label", { htmlFor: textareaId, className: label, children: [
       label6,
       required && /* @__PURE__ */ jsx41("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
@@ -3624,7 +3643,7 @@ var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
         ...rest
       }
     ),
-    (helperText3 || showCount) && /* @__PURE__ */ jsxs33("div", { className: footer4, children: [
+    (helperText3 || showCount) && /* @__PURE__ */ jsxs34("div", { className: footer4, children: [
       helperText3 && /* @__PURE__ */ jsx41("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
       showCount && /* @__PURE__ */ jsx41("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
     ] })
@@ -3633,7 +3652,7 @@ var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
 
 // src/components/Toast/Toast.tsx
 import * as RadixToast from "@radix-ui/react-toast";
-import { createContext as createContext5, useCallback as useCallback3, useContext as useContext5, useMemo as useMemo4, useRef as useRef17, useState as useState18 } from "react";
+import { createContext as createContext5, useCallback as useCallback3, useContext as useContext5, useMemo as useMemo4, useRef as useRef17, useState as useState19 } from "react";
 import { XIcon as XIcon7 } from "@bestow-ui/icons";
 
 // src/components/Toast/Toast.css.ts
@@ -3646,13 +3665,13 @@ var toast = /* @__PURE__ */ _7a46822({ defaultClassName: "_1g11zvx1", variantCla
 var viewport2 = "_1g11zvx0";
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
 var REMOVE_DELAY = 500;
 var ToastContext = /* @__PURE__ */ createContext5(null);
 function ToastProvider({ children, duration = 5e3, label: labelProp }) {
   const m = useMessages();
   const label6 = labelProp ?? m.notifications ?? "\uC54C\uB9BC";
-  const [toasts, setToasts] = useState18([]);
+  const [toasts, setToasts] = useState19([]);
   const nextId = useRef17(0);
   const portal2 = usePortalProps();
   const toast2 = useCallback3((options) => {
@@ -3666,9 +3685,9 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
     setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
   }, []);
   const value3 = useMemo4(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
-  return /* @__PURE__ */ jsx42(ToastContext.Provider, { value: value3, children: /* @__PURE__ */ jsxs34(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
+  return /* @__PURE__ */ jsx42(ToastContext.Provider, { value: value3, children: /* @__PURE__ */ jsxs35(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
     children,
-    toasts.map(({ id, open, title: title6, description: description7, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ jsxs34(
+    toasts.map(({ id, open, title: title6, description: description7, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ jsxs35(
       RadixToast.Root,
       {
         open,
@@ -3703,7 +3722,7 @@ var arrow2 = "z7rufs1";
 var content11 = "z7rufs0";
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
 function Tooltip({
   content: content12,
   children,
@@ -3718,9 +3737,9 @@ function Tooltip({
 }) {
   const portal2 = usePortalProps();
   if (disabled || content12 == null || content12 === "") return children;
-  return /* @__PURE__ */ jsx43(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs35(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
+  return /* @__PURE__ */ jsx43(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs36(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
     /* @__PURE__ */ jsx43(RadixTooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx43(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs35(
+    /* @__PURE__ */ jsx43(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs36(
       RadixTooltip.Content,
       {
         side,
@@ -3739,7 +3758,7 @@ function Tooltip({
 }
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-import { forwardRef as forwardRef38, useEffect as useEffect11, useId as useId19, useRef as useRef18, useState as useState19 } from "react";
+import { forwardRef as forwardRef38, useEffect as useEffect12, useId as useId19, useRef as useRef18, useState as useState20 } from "react";
 
 // src/components/VerificationCodeInput/VerificationCodeInput.css.ts
 var input5 = "ea01812";
@@ -3749,7 +3768,7 @@ var slots = "ea01811";
 var timer = "ea01814";
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
 var formatTime = (seconds) => `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
 var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
   function VerificationCodeInput2(props, ref) {
@@ -3784,17 +3803,17 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
     const statusId = `${inputId}-status`;
     const inputRef = useRef18(null);
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = useState19(defaultValue ?? "");
+    const [innerValue, setInnerValue] = useState20(defaultValue ?? "");
     const code = (isControlled ? value3 ?? "" : innerValue).slice(0, length);
-    const [focused, setFocused] = useState19(false);
-    const [endAt, setEndAt] = useState19(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
-    const [remaining, setRemaining] = useState19(expiresIn ?? 0);
+    const [focused, setFocused] = useState20(false);
+    const [endAt, setEndAt] = useState20(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
+    const [remaining, setRemaining] = useState20(expiresIn ?? 0);
     const expired = expiresIn !== void 0 && remaining <= 0;
     const onExpireRef = useRef18(onExpire);
-    useEffect11(() => {
+    useEffect12(() => {
       onExpireRef.current = onExpire;
     });
-    useEffect11(() => {
+    useEffect12(() => {
       if (endAt === null) return;
       const tick = () => {
         const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
@@ -3829,7 +3848,7 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
     };
     const description7 = helperText3 ?? m.verificationCodeHint?.(length, type) ?? `${length}\uC790\uB9AC ${type === "numeric" ? "\uC22B\uC790" : "\uBB38\uC790"}\uB97C \uC785\uB825\uD558\uC138\uC694.`;
     const activeIndex = Math.min(code.length, length - 1);
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs37(
       "div",
       {
         className: cx(field, className),
@@ -3837,8 +3856,8 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
         "data-disabled": disabled || void 0,
         children: [
           /* @__PURE__ */ jsx44("label", { htmlFor: inputId, className: label, children: label6 }),
-          /* @__PURE__ */ jsxs36("div", { className: row4, children: [
-            /* @__PURE__ */ jsxs36("div", { className: slots, children: [
+          /* @__PURE__ */ jsxs37("div", { className: row4, children: [
+            /* @__PURE__ */ jsxs37("div", { className: slots, children: [
               /* @__PURE__ */ jsx44(
                 "input",
                 {