@bestow-ui/react 1.6.0 → 1.6.1

package/dist/index.cjs

@@ -1794,12 +1794,26 @@ var Breadcrumb = /* @__PURE__ */ (0, import_react27.forwardRef)(function Breadcr
 });
 
 // src/components/BusinessNumberInput/BusinessNumberInput.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_korean_utils4 = require("@bestow-ui/korean-utils");
+
+// src/utils/useDelayedAnnouncement.ts
+var import_react28 = require("react");
+var ANNOUNCE_DELAY = 800;
+function useDelayedAnnouncement(message, delay = ANNOUNCE_DELAY) {
+  const [announced, setAnnounced] = (0, import_react28.useState)("");
+  (0, import_react28.useEffect)(() => {
+    const timer2 = setTimeout(() => setAnnounced(message), message ? delay : 0);
+    return () => clearTimeout(timer2);
+  }, [message, delay]);
+  return message && announced === message ? message : "";
+}
+
+// src/components/BusinessNumberInput/BusinessNumberInput.tsx
 var import_jsx_runtime26 = 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_react28.forwardRef)(
+var BusinessNumberInput = /* @__PURE__ */ (0, import_react29.forwardRef)(
   function BusinessNumberInput2(props, ref) {
     const {
       value: value4,
@@ -1815,12 +1829,12 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react28.forwardRef)(
       onKeyDown,
       ...rest
     } = props;
-    const inputRef = (0, import_react28.useRef)(null);
+    const inputRef = (0, import_react29.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_react28.useState)(false);
+    const [touched, setTouched] = (0, import_react29.useState)(false);
     const field4 = useFormattedInput({
       isControlled: "value" in props,
       value: value4,
@@ -1834,42 +1848,46 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react28.forwardRef)(
     const complete = field4.raw.length === 10;
     const autoInvalid = validate && field4.raw.length > 0 && (complete ? !(0, import_korean_utils4.isValidBusinessNumber)(field4.raw) : touched);
     const showAuto = autoInvalid && error === void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      TextField,
-      {
-        ref: mergeRefs(ref, inputRef),
-        label: label7,
-        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__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        TextField,
+        {
+          ref: mergeRefs(ref, inputRef),
+          label: label7,
+          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__ */ (0, import_jsx_runtime26.jsx)("span", { role: "status", className: visuallyHidden, children: announcement })
+    ] });
   }
 );
 
 // src/components/Calendar/Calendar.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_icons9 = require("@bestow-ui/icons");
 var import_korean_utils5 = require("@bestow-ui/korean-utils");
 
 // src/utils/useIsClient.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 var subscribeNothing = () => () => {
 };
 function useIsClient() {
-  return (0, import_react29.useSyncExternalStore)(
+  return (0, import_react30.useSyncExternalStore)(
     subscribeNothing,
     () => true,
     () => false
@@ -1877,7 +1895,7 @@ function useIsClient() {
 }
 
 // src/components/IconButton/IconButton.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/IconButton/IconButton.css.ts
 var import_createRuntimeFn17 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -1885,7 +1903,7 @@ var iconButton = /* @__PURE__ */ (0, import_createRuntimeFn17.createRuntimeFn)({
 
 // src/components/IconButton/IconButton.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var IconButton = /* @__PURE__ */ (0, import_react30.forwardRef)(function IconButton2({ variant = "ghost", color = "neutral", size, loading: loading2, className, children, ...rest }, ref) {
+var IconButton = /* @__PURE__ */ (0, import_react31.forwardRef)(function IconButton2({ variant = "ghost", color = "neutral", size, loading: loading2, className, children, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Button,
     {
@@ -1912,7 +1930,7 @@ var weekday = "_1qyq67b4";
 
 // src/components/Calendar/Calendar.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var Calendar = /* @__PURE__ */ (0, import_react31.forwardRef)(function Calendar2(props, ref) {
+var Calendar = /* @__PURE__ */ (0, import_react32.forwardRef)(function Calendar2(props, ref) {
   const {
     value: value4,
     defaultValue,
@@ -1932,10 +1950,10 @@ var Calendar = /* @__PURE__ */ (0, import_react31.forwardRef)(function Calendar2
   const nextMonthLabel = nextMonthLabelProp ?? m.nextMonth ?? "\uB2E4\uC74C \uB2EC";
   const weekdaysShort = m.weekdaysShort ?? import_korean_utils5.KOREAN_WEEKDAYS;
   const weekdaysLong = m.weekdaysLong ?? import_korean_utils5.KOREAN_WEEKDAYS.map((name) => `${name}\uC694\uC77C`);
-  const headingId = (0, import_react31.useId)();
-  const gridRef = (0, import_react31.useRef)(null);
+  const headingId = (0, import_react32.useId)();
+  const gridRef = (0, import_react32.useRef)(null);
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react31.useState)(defaultValue ?? "");
+  const [innerValue, setInnerValue] = (0, import_react32.useState)(defaultValue ?? "");
   const selected = parseISODate(isControlled ? value4 : innerValue);
   const isClient = useIsClient();
   const today = parseISODate(todayProp) ?? (isClient ? /* @__PURE__ */ new Date() : null);
@@ -1947,16 +1965,16 @@ var Calendar = /* @__PURE__ */ (0, import_react31.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_react31.useState)(null);
+  const [focusedState, setFocused] = (0, import_react32.useState)(null);
   const base = selected ?? today;
   const focused = focusedState ?? (base ? clamp(base) : null);
-  const moveFocus = (0, import_react31.useRef)(initialFocus ?? false);
+  const moveFocus = (0, import_react32.useRef)(initialFocus ?? false);
   const selectedIso = selected ? toISODate(selected) : "";
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const date = parseISODate(selectedIso);
     if (date) setFocused((prev) => isSameDay(prev, date) ? prev : date);
   }, [selectedIso]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!moveFocus.current || !focused) return;
     moveFocus.current = false;
     gridRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
@@ -2060,7 +2078,7 @@ var Calendar = /* @__PURE__ */ (0, import_react31.forwardRef)(function Calendar2
 
 // src/components/Combobox/Combobox.tsx
 var Popover = __toESM(require("@radix-ui/react-popover"), 1);
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_icons10 = require("@bestow-ui/icons");
 
 // src/components/Select/Select.css.ts
@@ -2080,9 +2098,8 @@ var toggle2 = "c2pbq71 c2pbq70";
 
 // src/components/Combobox/Combobox.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var NO_RESULTS_ANNOUNCE_DELAY = 800;
 var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
-var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2(props, ref) {
+var Combobox = /* @__PURE__ */ (0, import_react33.forwardRef)(function Combobox2(props, ref) {
   const {
     options,
     value: value4,
@@ -2110,23 +2127,23 @@ var Combobox = /* @__PURE__ */ (0, import_react32.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_react32.useId)();
+  const generatedId = (0, import_react33.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_react32.useRef)(null);
-  const anchorRef = (0, import_react32.useRef)(null);
+  const inputRef = (0, import_react33.useRef)(null);
+  const anchorRef = (0, import_react33.useRef)(null);
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react32.useState)(defaultValue);
+  const [innerValue, setInnerValue] = (0, import_react33.useState)(defaultValue);
   const selectedValue = isControlled ? value4 : innerValue;
   const selectedOption = options.find((o) => o.value === selectedValue);
-  const [open, setOpen] = (0, import_react32.useState)(false);
-  const [query, setQuery] = (0, import_react32.useState)(null);
-  const [activeIndex, setActiveIndex] = (0, import_react32.useState)(-1);
-  const filtered = (0, import_react32.useMemo)(() => query ? options.filter((o) => filter(o, query)) : options, [options, filter, query]);
+  const [open, setOpen] = (0, import_react33.useState)(false);
+  const [query, setQuery] = (0, import_react33.useState)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react33.useState)(-1);
+  const filtered = (0, import_react33.useMemo)(() => query ? options.filter((o) => filter(o, query)) : options, [options, filter, query]);
   const inputText = query ?? 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;
@@ -2201,16 +2218,16 @@ var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2
         break;
     }
   };
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.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_react32.useState)(void 0);
-  (0, import_react32.useEffect)(() => {
+  const [announcedFor, setAnnouncedFor] = (0, import_react33.useState)(void 0);
+  (0, import_react33.useEffect)(() => {
     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;
@@ -2357,13 +2374,13 @@ var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2
 });
 
 // src/components/DatePicker/DatePicker.tsx
-var import_react34 = require("react");
+var import_react35 = 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_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/Popover/Popover.css.ts
 var arrow = "_1j99p8x4";
@@ -2393,7 +2410,7 @@ function Popover2({
 }) {
   const portal2 = usePortalProps();
   const m = useMessages();
-  const titleId = (0, import_react33.useId)();
+  const titleId = (0, import_react34.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixPopover.Trigger, { asChild: true, children }),
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixPopover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
@@ -2427,7 +2444,7 @@ var import_jsx_runtime31 = 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_react34.forwardRef)(
+var DatePicker = /* @__PURE__ */ (0, import_react35.forwardRef)(
   function DatePicker2(props, ref) {
     const {
       value: value4,
@@ -2453,17 +2470,17 @@ var DatePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(
       id,
       className
     } = props;
-    const inputRef = (0, import_react34.useRef)(null);
+    const inputRef = (0, import_react35.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_react34.useState)(false);
-    const [touched, setTouched] = (0, import_react34.useState)(false);
+    const [open, setOpen] = (0, import_react35.useState)(false);
+    const [touched, setTouched] = (0, import_react35.useState)(false);
     const isControlled = "value" in props;
-    const lastEmitted = (0, import_react34.useRef)(isControlled ? value4 ?? "" : defaultValue ?? "");
+    const lastEmitted = (0, import_react35.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)}` : "";
@@ -2488,7 +2505,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(
     });
     const textIso = toIso(field4.raw);
     const { setRaw } = field4;
-    (0, import_react34.useEffect)(() => {
+    (0, import_react35.useEffect)(() => {
       if (!isControlled) return;
       const next = value4 ?? "";
       lastEmitted.current = next;
@@ -2502,6 +2519,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(
     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__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
@@ -2554,13 +2572,14 @@ var DatePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(
           )
         }
       ),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { role: "status", className: visuallyHidden, children: announcement }),
       name && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("input", { type: "hidden", name, value: selectedIso })
     ] });
   }
 );
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/DateRangePicker/DateRangePicker.css.ts
 var field2 = "_17277dh3";
@@ -2572,7 +2591,7 @@ var separator2 = "_17277dh4";
 
 // src/components/DateRangePicker/DateRangePicker.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var DateRangePicker = /* @__PURE__ */ (0, import_react35.forwardRef)(
+var DateRangePicker = /* @__PURE__ */ (0, import_react36.forwardRef)(
   function DateRangePicker2(props, ref) {
     const {
       value: value4,
@@ -2597,12 +2616,12 @@ var DateRangePicker = /* @__PURE__ */ (0, import_react35.forwardRef)(
       className
     } = props;
     const m = useMessages();
-    const generatedId = (0, import_react35.useId)();
+    const generatedId = (0, import_react36.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_react35.useState)(defaultValue ?? { start: "", end: "" });
+    const [inner, setInner] = (0, import_react36.useState)(defaultValue ?? { start: "", end: "" });
     const range3 = isControlled ? value4 ?? { start: "", end: "" } : inner;
     const update = (next) => {
       if (next.start === range3.start && next.end === range3.end) return;
@@ -2751,7 +2770,7 @@ function Drawer({
 var DrawerClose = Dialog2.Close;
 
 // src/components/ErrorSummary/ErrorSummary.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/ErrorSummary/ErrorSummary.css.ts
 var link3 = "_1cdophv2";
@@ -2760,12 +2779,12 @@ var root9 = "_1cdophv0";
 
 // src/components/ErrorSummary/ErrorSummary.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var ErrorSummary = /* @__PURE__ */ (0, import_react36.forwardRef)(function ErrorSummary2({ errors: errors2, title: title6, focusKey, className, ...rest }, ref) {
+var ErrorSummary = /* @__PURE__ */ (0, import_react37.forwardRef)(function ErrorSummary2({ errors: errors2, title: title6, focusKey, className, ...rest }, ref) {
   const m = useMessages();
-  const titleId = (0, import_react36.useId)();
-  const rootRef = (0, import_react36.useRef)(null);
+  const titleId = (0, import_react37.useId)();
+  const rootRef = (0, import_react37.useRef)(null);
   const hasErrors = errors2.length > 0;
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (hasErrors) rootRef.current?.focus();
   }, [focusKey, hasErrors]);
   if (!hasErrors) return null;
@@ -2800,7 +2819,7 @@ var ErrorSummary = /* @__PURE__ */ (0, import_react36.forwardRef)(function Error
 });
 
 // src/components/FileUpload/FileUpload.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_icons14 = require("@bestow-ui/icons");
 
 // src/components/FileUpload/FileUpload.css.ts
@@ -2833,7 +2852,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_react37.forwardRef)(function FileUpload2(props, ref) {
+var FileUpload = /* @__PURE__ */ (0, import_react38.forwardRef)(function FileUpload2(props, ref) {
   const {
     value: value4,
     defaultValue,
@@ -2854,22 +2873,22 @@ var FileUpload = /* @__PURE__ */ (0, import_react37.forwardRef)(function FileUpl
   } = props;
   const m = useMessages();
   const isControlled = "value" in props;
-  const [innerFiles, setInnerFiles] = (0, import_react37.useState)(defaultValue ?? []);
+  const [innerFiles, setInnerFiles] = (0, import_react38.useState)(defaultValue ?? []);
   const files = isControlled ? value4 ?? NO_FILES : innerFiles;
-  const [rejections, setRejections] = (0, import_react37.useState)([]);
-  const [announcement, setAnnouncement] = (0, import_react37.useState)("");
-  const [dragging, setDragging] = (0, import_react37.useState)(false);
-  const generatedId = (0, import_react37.useId)();
+  const [rejections, setRejections] = (0, import_react38.useState)([]);
+  const [announcement, setAnnouncement] = (0, import_react38.useState)("");
+  const [dragging, setDragging] = (0, import_react38.useState)(false);
+  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 errorsId = rejections.length > 0 ? `${baseId}-errors` : void 0;
-  const inputRef = (0, import_react37.useRef)(null);
-  const selectButtonRef = (0, import_react37.useRef)(null);
-  const removeButtonRefs = (0, import_react37.useRef)([]);
-  const focusAfterRemove = (0, import_react37.useRef)(null);
-  const announceTimer = (0, import_react37.useRef)(void 0);
-  (0, import_react37.useEffect)(() => () => clearTimeout(announceTimer.current), []);
+  const inputRef = (0, import_react38.useRef)(null);
+  const selectButtonRef = (0, import_react38.useRef)(null);
+  const removeButtonRefs = (0, import_react38.useRef)([]);
+  const focusAfterRemove = (0, import_react38.useRef)(null);
+  const announceTimer = (0, import_react38.useRef)(void 0);
+  (0, import_react38.useEffect)(() => () => clearTimeout(announceTimer.current), []);
   const selectLabel = m.fileSelect ?? "\uD30C\uC77C \uC120\uD0DD";
   const reasonText = (rejection) => {
     const fileName2 = rejection.file.name;
@@ -2917,13 +2936,13 @@ var FileUpload = /* @__PURE__ */ (0, import_react37.forwardRef)(function FileUpl
     setRejections([]);
     commit(next, m.fileRemoved?.(removed.name) ?? `${removed.name} \uC0AD\uC81C\uB428`, REMOVED_ANNOUNCE_DELAY);
   };
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (focusAfterRemove.current === null) return;
     const target = focusAfterRemove.current;
     focusAfterRemove.current = null;
     (target >= 0 ? removeButtonRefs.current[target] : selectButtonRef.current)?.focus();
   }, [files]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const input6 = inputRef.current;
     if (!name || !input6 || typeof DataTransfer === "undefined") return;
     try {
@@ -3029,7 +3048,7 @@ var FileUpload = /* @__PURE__ */ (0, import_react37.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_react38 = require("react");
+var import_react39 = require("react");
 
 // src/components/DropdownMenu/DropdownMenu.css.ts
 var content9 = "_1d7ahux0";
@@ -3050,7 +3069,7 @@ var import_jsx_runtime36 = require("react/jsx-runtime");
 var DropdownMenu = RadixMenu.Root;
 var DropdownMenuTrigger = RadixMenu.Trigger;
 var DropdownMenuGroup = RadixMenu.Group;
-var DropdownMenuContent = /* @__PURE__ */ (0, import_react38.forwardRef)(
+var DropdownMenuContent = /* @__PURE__ */ (0, import_react39.forwardRef)(
   function DropdownMenuContent2({ className, style, side = "bottom", align = "start", sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
     const portal2 = usePortalProps();
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -3068,7 +3087,7 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react38.forwardRef)(
     ) });
   }
 );
-var DropdownMenuItem = /* @__PURE__ */ (0, import_react38.forwardRef)(
+var DropdownMenuItem = /* @__PURE__ */ (0, import_react39.forwardRef)(
   function DropdownMenuItem2({ icon: icon8, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(RadixMenu.Item, { ref, className: cx(item7, color === "danger" && danger, className), ...rest, children: [
       icon8 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: icon5, "aria-hidden": true, children: icon8 }),
@@ -3077,17 +3096,17 @@ var DropdownMenuItem = /* @__PURE__ */ (0, import_react38.forwardRef)(
     ] });
   }
 );
-var DropdownMenuLabel = /* @__PURE__ */ (0, import_react38.forwardRef)(
+var DropdownMenuLabel = /* @__PURE__ */ (0, import_react39.forwardRef)(
   function DropdownMenuLabel2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixMenu.Label, { ref, className: cx(label3, className), ...rest });
   }
 );
-var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react38.forwardRef)(
+var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react39.forwardRef)(
   function DropdownMenuSeparator2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixMenu.Separator, { ref, className: cx(separator3, className), ...rest });
   }
 );
-var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react38.forwardRef)(
+var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react39.forwardRef)(
   function DropdownMenuCheckboxItem2({ className, children, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(RadixMenu.CheckboxItem, { ref, className: cx(item7, className), ...rest, children: [
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: indicator2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixMenu.ItemIndicator, { className: indicatorInner, children: rest.checked === "indeterminate" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons15.MinusIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons15.CheckIcon, { size: 16 }) }) }),
@@ -3096,7 +3115,7 @@ var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react38.forwardRef)(
   }
 );
 var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
-var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react38.forwardRef)(
+var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react39.forwardRef)(
   function DropdownMenuRadioItem2({ className, children, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(RadixMenu.RadioItem, { ref, className: cx(item7, className), ...rest, children: [
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: indicator2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixMenu.ItemIndicator, { className: indicatorInner, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: radioDot }) }) }),
@@ -3105,7 +3124,7 @@ var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react38.forwardRef)(
   }
 );
 var DropdownMenuSub = RadixMenu.Sub;
-var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)(
+var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react39.forwardRef)(
   function DropdownMenuSubTrigger2({ icon: icon8, className, children, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(RadixMenu.SubTrigger, { ref, className: cx(item7, subTrigger, className), ...rest, children: [
       icon8 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: icon5, "aria-hidden": true, children: icon8 }),
@@ -3114,7 +3133,7 @@ var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)(
     ] });
   }
 );
-var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react38.forwardRef)(
+var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react39.forwardRef)(
   function DropdownMenuSubContent2({ className, style, sideOffset = 4, alignOffset = -5, collisionPadding = 8, ...rest }, ref) {
     const portal2 = usePortalProps();
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -3133,7 +3152,7 @@ var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react38.forwardRef)(
 );
 
 // src/components/NumberInput/NumberInput.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_icons16 = require("@bestow-ui/icons");
 
 // src/components/NumberInput/NumberInput.css.ts
@@ -3149,7 +3168,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_react39.forwardRef)(
+var NumberInput = /* @__PURE__ */ (0, import_react40.forwardRef)(
   function NumberInput2(props, ref) {
     const {
       value: value4,
@@ -3175,8 +3194,8 @@ var NumberInput = /* @__PURE__ */ (0, import_react39.forwardRef)(
     } = props;
     const isControlled = "value" in props;
     const m = useMessages();
-    const inputRef = (0, import_react39.useRef)(null);
-    const generatedId = (0, import_react39.useId)();
+    const inputRef = (0, import_react40.useRef)(null);
+    const generatedId = (0, import_react40.useId)();
     const inputId = id ?? generatedId;
     const precision = Math.max(0, precisionProp ?? decimalsOf(step2));
     const allowNegative = min === void 0 || min < 0;
@@ -3196,7 +3215,7 @@ var NumberInput = /* @__PURE__ */ (0, import_react39.forwardRef)(
       const [, sign = "", int = "", rest2 = ""] = raw.match(/^(-?)(\d*)(.*)$/) ?? [];
       return `${sign}${int ? Number(int).toLocaleString("ko-KR") : ""}${rest2}`;
     };
-    const lastEmitted = (0, import_react39.useRef)(parse(toRaw(isControlled ? value4 : defaultValue)));
+    const lastEmitted = (0, import_react40.useRef)(parse(toRaw(isControlled ? value4 : defaultValue)));
     const emit = (next) => {
       if (next === lastEmitted.current) return;
       lastEmitted.current = next;
@@ -3213,7 +3232,7 @@ var NumberInput = /* @__PURE__ */ (0, import_react39.forwardRef)(
       inputRef
     });
     const { setRaw } = field4;
-    (0, import_react39.useEffect)(() => {
+    (0, import_react40.useEffect)(() => {
       if (!isControlled) return;
       const next = value4 ?? null;
       lastEmitted.current = next;
@@ -3221,7 +3240,7 @@ var NumberInput = /* @__PURE__ */ (0, import_react39.forwardRef)(
     }, [value4]);
     const current2 = parse(field4.raw);
     const valueText = (n) => `${format2(toRaw(n))}${unit2 ?? ""}`;
-    const [announcement, setAnnouncement] = (0, import_react39.useState)("");
+    const [announcement, setAnnouncement] = (0, import_react40.useState)("");
     const setValue = (next, announce = true) => {
       setRaw(toRaw(next));
       emit(next);
@@ -3314,7 +3333,7 @@ var NumberInput = /* @__PURE__ */ (0, import_react39.forwardRef)(
 
 // src/components/Pagination/Pagination.tsx
 var import_icons17 = require("@bestow-ui/icons");
-var import_react40 = require("react");
+var import_react41 = require("react");
 
 // src/components/Pagination/getPaginationItems.ts
 var range = (start, end2) => end2 < start ? [] : Array.from({ length: end2 - start + 1 }, (_, i) => start + i);
@@ -3348,7 +3367,7 @@ var list5 = "_1iraoak0";
 
 // src/components/Pagination/Pagination.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var Pagination = /* @__PURE__ */ (0, import_react40.forwardRef)(function Pagination2({
+var Pagination = /* @__PURE__ */ (0, import_react41.forwardRef)(function Pagination2({
   totalPages,
   page: pageProp,
   defaultPage = 1,
@@ -3361,7 +3380,7 @@ var Pagination = /* @__PURE__ */ (0, import_react40.forwardRef)(function Paginat
   "aria-label": ariaLabelProp,
   ...rest
 }, ref) {
-  const [uncontrolledPage, setUncontrolledPage] = (0, import_react40.useState)(defaultPage);
+  const [uncontrolledPage, setUncontrolledPage] = (0, import_react41.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`);
@@ -3413,7 +3432,7 @@ var Pagination = /* @__PURE__ */ (0, import_react40.forwardRef)(function Paginat
 });
 
 // src/components/PhoneNumberInput/PhoneNumberInput.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_korean_utils6 = require("@bestow-ui/korean-utils");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var sanitize3 = (input6) => {
@@ -3421,7 +3440,7 @@ var sanitize3 = (input6) => {
   return digits.slice(0, (0, import_korean_utils6.phoneNumberMaxDigits)(digits));
 };
 var isDigit4 = (char) => /\d/.test(char);
-var PhoneNumberInput = /* @__PURE__ */ (0, import_react41.forwardRef)(
+var PhoneNumberInput = /* @__PURE__ */ (0, import_react42.forwardRef)(
   function PhoneNumberInput2(props, ref) {
     const {
       value: value4,
@@ -3432,7 +3451,7 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react41.forwardRef)(
       onKeyDown,
       ...rest
     } = props;
-    const inputRef = (0, import_react41.useRef)(null);
+    const inputRef = (0, import_react42.useRef)(null);
     const m = useMessages();
     const label7 = labelProp ?? m.phoneNumber ?? "\uD734\uB300\uD3F0 \uBC88\uD638";
     const field4 = useFormattedInput({
@@ -3467,7 +3486,7 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react41.forwardRef)(
 );
 
 // src/components/RadioGroup/RadioGroup.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/components/RadioGroup/RadioGroup.css.ts
 var import_createRuntimeFn21 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -3481,7 +3500,7 @@ var text = "_1w9iwjma";
 
 // src/components/RadioGroup/RadioGroup.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var RadioGroup2 = /* @__PURE__ */ (0, import_react42.forwardRef)(function RadioGroup3(props, ref) {
+var RadioGroup2 = /* @__PURE__ */ (0, import_react43.forwardRef)(function RadioGroup3(props, ref) {
   const {
     options,
     value: value4,
@@ -3500,9 +3519,9 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react42.forwardRef)(function RadioG
     className
   } = props;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react42.useState)(defaultValue ?? "");
+  const [innerValue, setInnerValue] = (0, import_react43.useState)(defaultValue ?? "");
   const current2 = isControlled ? value4 ?? "" : innerValue;
-  const generatedId = (0, import_react42.useId)();
+  const generatedId = (0, import_react43.useId)();
   const baseId = id ?? generatedId;
   const labelId = label7 ? `${baseId}-label` : void 0;
   const helperId = helperText3 ? `${baseId}-helper` : void 0;
@@ -3567,7 +3586,7 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react42.forwardRef)(function RadioG
 });
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 
 // src/components/SegmentedControl/SegmentedControl.css.ts
 var import_createRuntimeFn22 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -3578,7 +3597,7 @@ var root11 = /* @__PURE__ */ (0, import_createRuntimeFn22.createRuntimeFn)({ def
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var NEXT_KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
-var SegmentedControl = /* @__PURE__ */ (0, import_react43.forwardRef)(
+var SegmentedControl = /* @__PURE__ */ (0, import_react44.forwardRef)(
   function SegmentedControl2(props, ref) {
     const {
       options,
@@ -3595,11 +3614,11 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react43.forwardRef)(
       className
     } = props;
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = (0, import_react43.useState)(defaultValue ?? "");
+    const [innerValue, setInnerValue] = (0, import_react44.useState)(defaultValue ?? "");
     const current2 = isControlled ? value4 ?? "" : innerValue;
-    const generatedId = (0, import_react43.useId)();
+    const generatedId = (0, import_react44.useId)();
     const labelId = label7 ? `${id ?? generatedId}-label` : void 0;
-    const itemRefs = (0, import_react43.useRef)([]);
+    const itemRefs = (0, import_react44.useRef)([]);
     const isEnabled = (index) => !disabled && !options[index]?.disabled;
     const select2 = (index) => {
       const next = options[index].value;
@@ -3680,7 +3699,7 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react43.forwardRef)(
 );
 
 // src/components/NativeSelect/NativeSelect.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_icons18 = require("@bestow-ui/icons");
 
 // src/components/NativeSelect/NativeSelect.css.ts
@@ -3691,7 +3710,7 @@ var wrapper = "_5silym0";
 
 // src/components/NativeSelect/NativeSelect.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var NativeSelect = /* @__PURE__ */ (0, import_react44.forwardRef)(function NativeSelect2({
+var NativeSelect = /* @__PURE__ */ (0, import_react45.forwardRef)(function NativeSelect2({
   options,
   onValueChange,
   onChange,
@@ -3711,7 +3730,7 @@ var NativeSelect = /* @__PURE__ */ (0, import_react44.forwardRef)(function Nativ
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = (0, import_react44.useId)();
+  const generatedId = (0, import_react45.useId)();
   const selectId = id ?? generatedId;
   const helperId = helperText3 ? `${selectId}-helper` : void 0;
   const handleChange = (event) => {
@@ -3760,10 +3779,10 @@ var NativeSelect = /* @__PURE__ */ (0, import_react44.forwardRef)(function Nativ
 
 // src/components/Select/Select.tsx
 var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_icons19 = require("@bestow-ui/icons");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var Select = /* @__PURE__ */ (0, import_react45.forwardRef)(function Select2(props, ref) {
+var Select = /* @__PURE__ */ (0, import_react46.forwardRef)(function Select2(props, ref) {
   const {
     options,
     value: value4,
@@ -3783,7 +3802,7 @@ var Select = /* @__PURE__ */ (0, import_react45.forwardRef)(function Select2(pro
     className
   } = props;
   const isControlled = "value" in props;
-  const generatedId = (0, import_react45.useId)();
+  const generatedId = (0, import_react46.useId)();
   const triggerId = id ?? generatedId;
   const helperId = helperText3 ? `${triggerId}-helper` : void 0;
   const portal2 = usePortalProps();
@@ -3849,14 +3868,14 @@ var Select = /* @__PURE__ */ (0, import_react45.forwardRef)(function Select2(pro
 });
 
 // src/components/SkipLink/SkipLink.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 
 // src/components/SkipLink/SkipLink.css.ts
 var skipLink = "_1t9jaar0";
 
 // src/components/SkipLink/SkipLink.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var SkipLink = /* @__PURE__ */ (0, import_react46.forwardRef)(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
+var SkipLink = /* @__PURE__ */ (0, import_react47.forwardRef)(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
   const m = useMessages();
   const handleClick = (event) => {
     onClick?.(event);
@@ -3873,7 +3892,7 @@ var SkipLink = /* @__PURE__ */ (0, import_react46.forwardRef)(function SkipLink2
 
 // src/components/Slider/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"), 1);
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/components/Slider/Slider.css.ts
 var import_createRuntimeFn24 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -3889,7 +3908,7 @@ var value3 = "_126mzjm3";
 
 // src/components/Slider/Slider.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var Slider = /* @__PURE__ */ (0, import_react47.forwardRef)(function Slider2(props, ref) {
+var Slider = /* @__PURE__ */ (0, import_react48.forwardRef)(function Slider2(props, ref) {
   const {
     value: value4,
     defaultValue,
@@ -3910,12 +3929,12 @@ var Slider = /* @__PURE__ */ (0, import_react47.forwardRef)(function Slider2(pro
   } = props;
   const m = useMessages();
   const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
-  const generatedId = (0, import_react47.useId)();
+  const generatedId = (0, import_react48.useId)();
   const baseId = id ?? generatedId;
   const labelId = `${baseId}-label`;
   const helperId = `${baseId}-helper`;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react47.useState)(defaultValue ?? [min]);
+  const [innerValue, setInnerValue] = (0, import_react48.useState)(defaultValue ?? [min]);
   const current2 = isControlled ? value4 ?? [min] : innerValue;
   const isRange = current2.length > 1;
   const handleChange = (next) => {
@@ -3968,7 +3987,7 @@ var Slider = /* @__PURE__ */ (0, import_react47.forwardRef)(function Slider2(pro
 });
 
 // src/components/Stepper/Stepper.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_icons20 = require("@bestow-ui/icons");
 
 // src/components/Stepper/Stepper.css.ts
@@ -3982,7 +4001,7 @@ var text2 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defa
 
 // src/components/Stepper/Stepper.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var Stepper = /* @__PURE__ */ (0, import_react48.forwardRef)(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
+var Stepper = /* @__PURE__ */ (0, import_react49.forwardRef)(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
   const m = useMessages();
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "ol",
@@ -4022,7 +4041,7 @@ var Stepper = /* @__PURE__ */ (0, import_react48.forwardRef)(function Stepper2({
 });
 
 // src/components/Switch/Switch.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/components/Switch/Switch.css.ts
 var import_createRuntimeFn26 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -4037,7 +4056,7 @@ var import_jsx_runtime47 = require("react/jsx-runtime");
 function setNativeChecked(input6, checked) {
   Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "checked")?.set?.call(input6, checked);
 }
-var Switch = /* @__PURE__ */ (0, import_react49.forwardRef)(function Switch2({
+var Switch = /* @__PURE__ */ (0, import_react50.forwardRef)(function Switch2({
   label: label7,
   size,
   id,
@@ -4051,22 +4070,22 @@ var Switch = /* @__PURE__ */ (0, import_react49.forwardRef)(function Switch2({
   onCheckedChange,
   "aria-label": ariaLabel
 }, ref) {
-  const generatedId = (0, import_react49.useId)();
+  const generatedId = (0, import_react50.useId)();
   const switchId = id ?? generatedId;
-  const [uncontrolled, setUncontrolled] = (0, import_react49.useState)(defaultChecked ?? false);
+  const [uncontrolled, setUncontrolled] = (0, import_react50.useState)(defaultChecked ?? false);
   const isControlled = checkedProp !== void 0;
   const checked = isControlled ? checkedProp : uncontrolled;
-  const buttonRef = (0, import_react49.useRef)(null);
-  const inputRef = (0, import_react49.useRef)(null);
-  const [inForm, setInForm] = (0, import_react49.useState)(true);
-  const userToggled = (0, import_react49.useRef)(false);
+  const buttonRef = (0, import_react50.useRef)(null);
+  const inputRef = (0, import_react50.useRef)(null);
+  const [inForm, setInForm] = (0, import_react50.useState)(true);
+  const userToggled = (0, import_react50.useRef)(false);
   const setChecked = (next) => {
     if (!isControlled) setUncontrolled(next);
     if (next !== checked) onCheckedChange?.(next);
   };
-  const setCheckedRef = (0, import_react49.useRef)(setChecked);
+  const setCheckedRef = (0, import_react50.useRef)(setChecked);
   setCheckedRef.current = setChecked;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     const form = buttonRef.current?.form;
     setInForm(!!form);
     if (!form) return;
@@ -4075,7 +4094,7 @@ var Switch = /* @__PURE__ */ (0, import_react49.forwardRef)(function Switch2({
     form.addEventListener("reset", onReset);
     return () => form.removeEventListener("reset", onReset);
   }, []);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     const input6 = inputRef.current;
     if (!input6 || input6.checked === checked) return;
     setNativeChecked(input6, checked);
@@ -4128,7 +4147,7 @@ var Switch = /* @__PURE__ */ (0, import_react49.forwardRef)(function Switch2({
 });
 
 // src/components/Table/Table.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_icons21 = require("@bestow-ui/icons");
 
 // src/components/Table/Table.css.ts
@@ -4152,9 +4171,9 @@ var table = "l3ploy1";
 
 // src/components/Table/Table.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var TableSizeContext = /* @__PURE__ */ (0, import_react50.createContext)("md");
-var TableSectionContext = /* @__PURE__ */ (0, import_react50.createContext)("body");
-var Table = /* @__PURE__ */ (0, import_react50.forwardRef)(function Table2({
+var TableSizeContext = /* @__PURE__ */ (0, import_react51.createContext)("md");
+var TableSectionContext = /* @__PURE__ */ (0, import_react51.createContext)("body");
+var Table = /* @__PURE__ */ (0, import_react51.forwardRef)(function Table2({
   size = "md",
   striped: striped2,
   stickyHeader: stickyHeader2,
@@ -4166,7 +4185,7 @@ var Table = /* @__PURE__ */ (0, import_react50.forwardRef)(function Table2({
   children,
   ...rest
 }, ref) {
-  const captionId = (0, import_react50.useId)();
+  const captionId = (0, import_react51.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
@@ -4192,27 +4211,27 @@ var Table = /* @__PURE__ */ (0, import_react50.forwardRef)(function Table2({
     }
   ) });
 });
-var TableHeader = /* @__PURE__ */ (0, import_react50.forwardRef)(
+var TableHeader = /* @__PURE__ */ (0, import_react51.forwardRef)(
   function TableHeader2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("thead", { ref, className: cx(header9, className), ...rest }) });
   }
 );
-var TableBody = /* @__PURE__ */ (0, import_react50.forwardRef)(
+var TableBody = /* @__PURE__ */ (0, import_react51.forwardRef)(
   function TableBody2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tbody", { ref, className: cx(body4, className), ...rest }) });
   }
 );
-var TableFooter = /* @__PURE__ */ (0, import_react50.forwardRef)(
+var TableFooter = /* @__PURE__ */ (0, import_react51.forwardRef)(
   function TableFooter2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tfoot", { ref, className: cx(footer4, className), ...rest }) });
   }
 );
-var TableRow = /* @__PURE__ */ (0, import_react50.forwardRef)(function TableRow2({ selected, className, ...rest }, ref) {
+var TableRow = /* @__PURE__ */ (0, import_react51.forwardRef)(function TableRow2({ selected, className, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...rest });
 });
-var TableHead = /* @__PURE__ */ (0, import_react50.forwardRef)(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
-  const size = (0, import_react50.useContext)(TableSizeContext);
-  const section = (0, import_react50.useContext)(TableSectionContext);
+var TableHead = /* @__PURE__ */ (0, import_react51.forwardRef)(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
+  const size = (0, import_react51.useContext)(TableSizeContext);
+  const section = (0, import_react51.useContext)(TableSectionContext);
   const sortable = onSort !== void 0;
   const direction = sortDirection ?? "none";
   const SortIcon = direction === "descending" ? import_icons21.ArrowDownIcon : import_icons21.ArrowUpIcon;
@@ -4235,9 +4254,9 @@ var TableHead = /* @__PURE__ */ (0, import_react50.forwardRef)(function TableHea
     }
   );
 });
-var TableCell = /* @__PURE__ */ (0, import_react50.forwardRef)(function TableCell2({ align, className, ...rest }, ref) {
-  const size = (0, import_react50.useContext)(TableSizeContext);
-  const section = (0, import_react50.useContext)(TableSectionContext);
+var TableCell = /* @__PURE__ */ (0, import_react51.forwardRef)(function TableCell2({ align, className, ...rest }, ref) {
+  const size = (0, import_react51.useContext)(TableSizeContext);
+  const section = (0, import_react51.useContext)(TableSectionContext);
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "td",
     {
@@ -4247,7 +4266,7 @@ var TableCell = /* @__PURE__ */ (0, import_react50.forwardRef)(function TableCel
     }
   );
 });
-var TableEmpty = /* @__PURE__ */ (0, import_react50.forwardRef)(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
+var TableEmpty = /* @__PURE__ */ (0, import_react51.forwardRef)(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { ref, colSpan, className: cx(emptyCell, className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: emptyContent, children }) }) });
 });
 function TableSkeleton({ rows = 5, columns }) {
@@ -4255,18 +4274,18 @@ function TableSkeleton({ rows = 5, columns }) {
 }
 
 // src/components/Table/useTableSelection.ts
-var import_react51 = require("react");
+var import_react52 = require("react");
 function useTableSelection(initial = []) {
-  const [selected, setSelected] = (0, import_react51.useState)(initial);
-  const isSelected = (0, import_react51.useCallback)((id) => selected.includes(id), [selected]);
-  const toggle3 = (0, import_react51.useCallback)((id, checked) => {
+  const [selected, setSelected] = (0, import_react52.useState)(initial);
+  const isSelected = (0, import_react52.useCallback)((id) => selected.includes(id), [selected]);
+  const toggle3 = (0, import_react52.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_react51.useCallback)(() => setSelected([]), []);
+  const clear2 = (0, import_react52.useCallback)(() => setSelected([]), []);
   const selectAllProps = (pageIds) => {
     const all2 = pageIds.length > 0 && pageIds.every((id) => selected.includes(id));
     const some = pageIds.some((id) => selected.includes(id));
@@ -4287,7 +4306,7 @@ function useTableSelection(initial = []) {
 
 // src/components/Tabs/Tabs.tsx
 var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
-var import_react52 = require("react");
+var import_react53 = require("react");
 
 // src/components/Tabs/Tabs.css.ts
 var import_createRuntimeFn28 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -4298,25 +4317,25 @@ var trigger3 = /* @__PURE__ */ (0, import_createRuntimeFn28.createRuntimeFn)({ d
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var TabsStyleContext = /* @__PURE__ */ (0, import_react52.createContext)({ variant: "line", size: "md" });
-var Tabs = /* @__PURE__ */ (0, import_react52.forwardRef)(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
+var TabsStyleContext = /* @__PURE__ */ (0, import_react53.createContext)({ variant: "line", size: "md" });
+var Tabs = /* @__PURE__ */ (0, import_react53.forwardRef)(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
   const controlled = "value" in props ? { value: props.value ?? "" } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixTabs.Root, { ref, className: cx(root15, className), ...props, ...controlled }) });
 });
-var TabsList = /* @__PURE__ */ (0, import_react52.forwardRef)(function TabsList2({ className, ...rest }, ref) {
-  const { variant } = (0, import_react52.useContext)(TabsStyleContext);
+var TabsList = /* @__PURE__ */ (0, import_react53.forwardRef)(function TabsList2({ className, ...rest }, ref) {
+  const { variant } = (0, import_react53.useContext)(TabsStyleContext);
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixTabs.List, { ref, className: cx(list6({ variant }), className), ...rest });
 });
-var TabsTrigger = /* @__PURE__ */ (0, import_react52.forwardRef)(function TabsTrigger2({ className, ...rest }, ref) {
-  const { variant, size } = (0, import_react52.useContext)(TabsStyleContext);
+var TabsTrigger = /* @__PURE__ */ (0, import_react53.forwardRef)(function TabsTrigger2({ className, ...rest }, ref) {
+  const { variant, size } = (0, import_react53.useContext)(TabsStyleContext);
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
 });
-var TabsContent = /* @__PURE__ */ (0, import_react52.forwardRef)(function TabsContent2({ className, ...rest }, ref) {
+var TabsContent = /* @__PURE__ */ (0, import_react53.forwardRef)(function TabsContent2({ className, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
 });
 
 // src/components/Textarea/Textarea.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/components/Textarea/Textarea.css.ts
 var import_createRuntimeFn29 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -4328,7 +4347,7 @@ var textarea = /* @__PURE__ */ (0, import_createRuntimeFn29.createRuntimeFn)({ d
 
 // src/components/Textarea/Textarea.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var Textarea = /* @__PURE__ */ (0, import_react53.forwardRef)(function Textarea2({
+var Textarea = /* @__PURE__ */ (0, import_react54.forwardRef)(function Textarea2({
   label: label7,
   helperText: helperText3,
   error,
@@ -4349,13 +4368,13 @@ var Textarea = /* @__PURE__ */ (0, import_react53.forwardRef)(function Textarea2
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = (0, import_react53.useId)();
+  const generatedId = (0, import_react54.useId)();
   const textareaId = id ?? generatedId;
   const helperId = helperText3 ? `${textareaId}-helper` : void 0;
-  const innerRef = (0, import_react53.useRef)(null);
-  const [uncontrolledLength, setUncontrolledLength] = (0, import_react53.useState)(() => String(defaultValue ?? "").length);
+  const innerRef = (0, import_react54.useRef)(null);
+  const [uncontrolledLength, setUncontrolledLength] = (0, import_react54.useState)(() => String(defaultValue ?? "").length);
   const length = value4 !== void 0 ? String(value4).length : uncontrolledLength;
-  const fitHeight = (0, import_react53.useCallback)(() => {
+  const fitHeight = (0, import_react54.useCallback)(() => {
     const el = innerRef.current;
     if (!autoResize || !el) return;
     el.style.height = "auto";
@@ -4404,7 +4423,7 @@ var Textarea = /* @__PURE__ */ (0, import_react53.forwardRef)(function Textarea2
 
 // src/components/Toast/Toast.tsx
 var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_icons22 = require("@bestow-ui/icons");
 
 // src/components/Toast/Toast.css.ts
@@ -4419,24 +4438,24 @@ var viewport2 = "_1g11zvx0";
 // src/components/Toast/Toast.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var REMOVE_DELAY = 500;
-var ToastContext = /* @__PURE__ */ (0, import_react54.createContext)(null);
+var ToastContext = /* @__PURE__ */ (0, import_react55.createContext)(null);
 function ToastProvider({ children, duration = 5e3, label: labelProp }) {
   const m = useMessages();
   const label7 = labelProp ?? m.notifications ?? "\uC54C\uB9BC";
-  const [toasts, setToasts] = (0, import_react54.useState)([]);
-  const nextId = (0, import_react54.useRef)(0);
+  const [toasts, setToasts] = (0, import_react55.useState)([]);
+  const nextId = (0, import_react55.useRef)(0);
   const portal2 = usePortalProps();
-  const toast2 = (0, import_react54.useCallback)((options) => {
+  const toast2 = (0, import_react55.useCallback)((options) => {
     const id = nextId.current++;
     setToasts((prev) => [...prev, { ...options, id, open: true }]);
     return id;
   }, []);
-  const dismiss = (0, import_react54.useCallback)((id) => {
+  const dismiss = (0, import_react55.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_react54.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
+  const value4 = (0, import_react55.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ToastContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(RadixToast.Provider, { duration, label: label7, swipeDirection: "right", children: [
     children,
     toasts.map(({ id, open, title: title6, description: description8, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
@@ -4461,7 +4480,7 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
   ] }) });
 }
 function useToast() {
-  const context = (0, import_react54.useContext)(ToastContext);
+  const context = (0, import_react55.useContext)(ToastContext);
   if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
   return context;
 }
@@ -4510,7 +4529,7 @@ function Tooltip({
 }
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 
 // src/components/VerificationCodeInput/VerificationCodeInput.css.ts
 var input5 = "ea01812";
@@ -4522,7 +4541,7 @@ var timer = "ea01814";
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
 var import_jsx_runtime53 = 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_react55.forwardRef)(
+var VerificationCodeInput = /* @__PURE__ */ (0, import_react56.forwardRef)(
   function VerificationCodeInput2(props, ref) {
     const {
       length = 6,
@@ -4549,23 +4568,23 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react55.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_react55.useId)();
+    const generatedId = (0, import_react56.useId)();
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
     const statusId = `${inputId}-status`;
-    const inputRef = (0, import_react55.useRef)(null);
+    const inputRef = (0, import_react56.useRef)(null);
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = (0, import_react55.useState)(defaultValue ?? "");
+    const [innerValue, setInnerValue] = (0, import_react56.useState)(defaultValue ?? "");
     const code = (isControlled ? value4 ?? "" : innerValue).slice(0, length);
-    const [focused, setFocused] = (0, import_react55.useState)(false);
-    const [endAt, setEndAt] = (0, import_react55.useState)(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
-    const [remaining, setRemaining] = (0, import_react55.useState)(expiresIn ?? 0);
+    const [focused, setFocused] = (0, import_react56.useState)(false);
+    const [endAt, setEndAt] = (0, import_react56.useState)(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
+    const [remaining, setRemaining] = (0, import_react56.useState)(expiresIn ?? 0);
     const expired = expiresIn !== void 0 && remaining <= 0;
-    const onExpireRef = (0, import_react55.useRef)(onExpire);
-    (0, import_react55.useEffect)(() => {
+    const onExpireRef = (0, import_react56.useRef)(onExpire);
+    (0, import_react56.useEffect)(() => {
       onExpireRef.current = onExpire;
     });
-    (0, import_react55.useEffect)(() => {
+    (0, import_react56.useEffect)(() => {
       if (endAt === null) return;
       const tick = () => {
         const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));