@bestow-ui/react 1.5.0 → 1.6.1

package/dist/index.cjs

@@ -76,6 +76,7 @@ __export(src_exports, {
   LocaleProvider: () => LocaleProvider,
   Modal: () => Modal,
   ModalClose: () => ModalClose,
+  NativeSelect: () => NativeSelect,
   NumberInput: () => NumberInput,
   Pagination: () => Pagination,
   PhoneNumberInput: () => PhoneNumberInput,
@@ -113,19 +114,19 @@ __export(src_exports, {
   Typography: () => Typography,
   VerificationCodeInput: () => VerificationCodeInput,
   VisuallyHidden: () => VisuallyHidden,
-  composeExtraAddress: () => composeExtraAddress,
+  composeExtraAddress: () => import_korean_utils.composeExtraAddress,
   contrastRatio: () => contrastRatio,
   createIntentColors: () => createIntentColors,
   createTheme: () => createTheme,
   dateRangePresets: () => dateRangePresets,
   en: () => en,
   focusField: () => focusField,
-  formatBusinessNumber: () => formatBusinessNumber,
-  formatKoreanAmount: () => formatKoreanAmount,
-  formatKoreanDate: () => formatKoreanDate,
-  formatPhoneNumber: () => formatPhoneNumber,
+  formatBusinessNumber: () => import_korean_utils2.formatBusinessNumber,
+  formatKoreanAmount: () => import_korean_utils2.formatKoreanAmount,
+  formatKoreanDate: () => import_korean_utils2.formatKoreanDate,
+  formatPhoneNumber: () => import_korean_utils2.formatPhoneNumber,
   hasAllRequiredAgreements: () => hasAllRequiredAgreements,
-  isValidBusinessNumber: () => isValidBusinessNumber,
+  isValidBusinessNumber: () => import_korean_utils2.isValidBusinessNumber,
   kakaoPostcodeProvider: () => kakaoPostcodeProvider,
   parseISODate: () => parseISODate,
   presetRange: () => presetRange,
@@ -423,62 +424,8 @@ var en = {
   dateIncomplete: "Enter the date as YYYY-MM-DD."
 };
 
-// src/utils/koreanFormat.ts
-var onlyDigits = (input6) => input6.replace(/\D/g, "");
-function phoneNumberMaxDigits(digits) {
-  if (digits.startsWith("02")) return 10;
-  if (/^1[568]/.test(digits)) return 8;
-  return 11;
-}
-function formatPhoneNumber(input6) {
-  const d = onlyDigits(input6).slice(0, phoneNumberMaxDigits(onlyDigits(input6)));
-  if (d.startsWith("02")) {
-    if (d.length <= 2) return d;
-    if (d.length <= 5) return `${d.slice(0, 2)}-${d.slice(2)}`;
-    if (d.length <= 9) return `${d.slice(0, 2)}-${d.slice(2, 5)}-${d.slice(5)}`;
-    return `${d.slice(0, 2)}-${d.slice(2, 6)}-${d.slice(6)}`;
-  }
-  if (/^1[568]/.test(d)) {
-    return d.length <= 4 ? d : `${d.slice(0, 4)}-${d.slice(4)}`;
-  }
-  if (d.length <= 3) return d;
-  if (d.length <= 6) return `${d.slice(0, 3)}-${d.slice(3)}`;
-  if (d.length <= 10) return `${d.slice(0, 3)}-${d.slice(3, 6)}-${d.slice(6)}`;
-  return `${d.slice(0, 3)}-${d.slice(3, 7)}-${d.slice(7)}`;
-}
-function formatBusinessNumber(input6) {
-  const d = onlyDigits(input6).slice(0, 10);
-  if (d.length <= 3) return d;
-  if (d.length <= 5) return `${d.slice(0, 3)}-${d.slice(3)}`;
-  return `${d.slice(0, 3)}-${d.slice(3, 5)}-${d.slice(5)}`;
-}
-function isValidBusinessNumber(input6) {
-  const d = onlyDigits(input6);
-  if (d.length !== 10) return false;
-  const weights = [1, 3, 7, 1, 3, 7, 1, 3, 5];
-  const digits = [...d].map(Number);
-  let sum = weights.reduce((acc, w, i) => acc + w * digits[i], 0);
-  sum += Math.floor(digits[8] * 5 / 10);
-  return (10 - sum % 10) % 10 === digits[9];
-}
-function formatKoreanAmount(amount, unit2 = "\uC6D0") {
-  const n = Math.floor(Math.abs(amount));
-  if (n === 0) return `0${unit2}`;
-  const units = [
-    { value: 1e12, label: "\uC870" },
-    { value: 1e8, label: "\uC5B5" },
-    { value: 1e4, label: "\uB9CC" },
-    { value: 1, label: "" }
-  ];
-  let rest = n;
-  const parts = [];
-  for (const u of units) {
-    const q = Math.floor(rest / u.value);
-    rest %= u.value;
-    if (q > 0) parts.push(`${q.toLocaleString("ko-KR")}${u.label}`);
-  }
-  return `${amount < 0 ? "-" : ""}${parts.join(" ")}${unit2}`;
-}
+// src/shared.ts
+var import_korean_utils2 = require("@bestow-ui/korean-utils");
 
 // src/utils/date.ts
 var pad = (n) => String(n).padStart(2, "0");
@@ -516,13 +463,9 @@ function getCalendarWeeks(year, month) {
   const start = addDays(first, -first.getDay());
   return Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_2, day2) => addDays(start, week * 7 + day2)));
 }
-var KOREAN_WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
-function formatKoreanDate(date, withWeekday = true) {
-  const base = `${date.getFullYear()}\uB144 ${date.getMonth() + 1}\uC6D4 ${date.getDate()}\uC77C`;
-  return withWeekday ? `${base} ${KOREAN_WEEKDAYS[date.getDay()]}\uC694\uC77C` : base;
-}
 
 // src/components/AddressInput/addressProviders.ts
+var import_korean_utils = require("@bestow-ui/korean-utils");
 var KAKAO_POSTCODE_SRC = "https://t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
 var loading = null;
 function loadKakaoPostcode() {
@@ -546,13 +489,6 @@ function loadKakaoPostcode() {
   }));
   return loading;
 }
-function composeExtraAddress(data) {
-  if (data.userSelectedType !== "R") return "";
-  const parts = [];
-  if (data.bname && /[동로가]$/.test(data.bname)) parts.push(data.bname);
-  if (data.buildingName && data.apartment === "Y") parts.push(data.buildingName);
-  return parts.length ? ` (${parts.join(", ")})` : "";
-}
 var kakaoPostcodeProvider = async (container2, onSelect) => {
   const Postcode = await loadKakaoPostcode();
   new Postcode({
@@ -560,7 +496,7 @@ var kakaoPostcodeProvider = async (container2, onSelect) => {
     height: "100%",
     oncomplete: (data) => {
       const address = data.userSelectedType === "R" ? data.roadAddress : data.jibunAddress || data.autoJibunAddress || "";
-      onSelect({ zonecode: data.zonecode, address, extraAddress: composeExtraAddress(data) });
+      onSelect({ zonecode: data.zonecode, address, extraAddress: (0, import_korean_utils.composeExtraAddress)(data) });
     }
   }).embed(container2);
 };
@@ -1582,7 +1518,7 @@ var Alert = /* @__PURE__ */ (0, import_react21.forwardRef)(function Alert2({
   variant,
   color = "primary",
   title: title6,
-  icon: icon7,
+  icon: icon8,
   action: action3,
   onClose,
   closeLabel: closeLabelProp,
@@ -1593,7 +1529,7 @@ var Alert = /* @__PURE__ */ (0, import_react21.forwardRef)(function Alert2({
   const m = useMessages();
   const closeLabel = closeLabelProp ?? m.close ?? "\uB2EB\uAE30";
   const DefaultIcon = defaultIcons[color];
-  const iconNode = icon7 === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DefaultIcon, { size: 18 }) : icon7;
+  const iconNode = icon8 === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DefaultIcon, { size: 18 }) : icon8;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref, className: cx(alert({ variant, color }), className), ...rest, children: [
     iconNode !== false && iconNode !== null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: icon3, "aria-hidden": true, children: iconNode }),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: content4, children: [
@@ -1607,6 +1543,7 @@ var Alert = /* @__PURE__ */ (0, import_react21.forwardRef)(function Alert2({
 
 // src/components/AmountInput/AmountInput.tsx
 var import_react24 = require("react");
+var import_korean_utils3 = require("@bestow-ui/korean-utils");
 
 // src/utils/useFormattedInput.ts
 var import_react23 = require("react");
@@ -1721,7 +1658,7 @@ var AmountInput = /* @__PURE__ */ (0, import_react24.forwardRef)(
       isMeaningful: isDigit,
       inputRef
     });
-    const reading = showKoreanAmount && field4.raw !== "" ? formatKoreanAmount(Number(field4.raw), unit2) : null;
+    const reading = showKoreanAmount && field4.raw !== "" ? (0, import_korean_utils3.formatKoreanAmount)(Number(field4.raw), unit2) : null;
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       TextField,
       {
@@ -1857,11 +1794,26 @@ var Breadcrumb = /* @__PURE__ */ (0, import_react27.forwardRef)(function Breadcr
 });
 
 // src/components/BusinessNumberInput/BusinessNumberInput.tsx
+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,
@@ -1877,60 +1829,65 @@ 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,
       defaultValue,
-      onValueChange: (digits) => onValueChange?.(digits, digits.length === 10 ? isValidBusinessNumber(digits) : null),
+      onValueChange: (digits) => onValueChange?.(digits, digits.length === 10 ? (0, import_korean_utils4.isValidBusinessNumber)(digits) : null),
       sanitize,
-      format: formatBusinessNumber,
+      format: import_korean_utils4.formatBusinessNumber,
       isMeaningful: isDigit2,
       inputRef
     });
     const complete = field4.raw.length === 10;
-    const autoInvalid = validate && field4.raw.length > 0 && (complete ? !isValidBusinessNumber(field4.raw) : touched);
+    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
@@ -1938,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");
@@ -1946,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,
     {
@@ -1973,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,
@@ -1991,12 +1948,12 @@ var Calendar = /* @__PURE__ */ (0, import_react31.forwardRef)(function Calendar2
   const m = useMessages();
   const prevMonthLabel = prevMonthLabelProp ?? m.previousMonth ?? "\uC774\uC804 \uB2EC";
   const nextMonthLabel = nextMonthLabelProp ?? m.nextMonth ?? "\uB2E4\uC74C \uB2EC";
-  const weekdaysShort = m.weekdaysShort ?? KOREAN_WEEKDAYS;
-  const weekdaysLong = m.weekdaysLong ?? KOREAN_WEEKDAYS.map((name) => `${name}\uC694\uC77C`);
-  const headingId = (0, import_react31.useId)();
-  const gridRef = (0, import_react31.useRef)(null);
+  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_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);
@@ -2008,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();
@@ -2026,7 +1983,7 @@ var Calendar = /* @__PURE__ */ (0, import_react31.forwardRef)(function Calendar2
     moveFocus.current = true;
     setFocused(clamp(date));
   };
-  const select = (date) => {
+  const select2 = (date) => {
     if (isDisabled(date)) return;
     const iso = toISODate(date);
     if (!isControlled) setInnerValue(iso);
@@ -2109,7 +2066,7 @@ var Calendar = /* @__PURE__ */ (0, import_react31.forwardRef)(function Calendar2
             "aria-label": label7,
             "aria-current": isToday ? "date" : void 0,
             "aria-disabled": disabled || void 0,
-            onClick: () => select(date),
+            onClick: () => select2(date),
             onFocus: () => !isSameDay(date, focused) && setFocused(date),
             children: date.getDate()
           }
@@ -2121,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
@@ -2141,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,
@@ -2171,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;
@@ -2213,7 +2169,7 @@ var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2
     if (query === "" && selectedValue) clearSelection();
     reset();
   };
-  const select = (option2) => {
+  const select2 = (option2) => {
     if (option2.disabled) return;
     if (!isControlled) setInnerValue(option2.value);
     if (option2.value !== selectedValue) onValueChange?.(option2.value);
@@ -2247,7 +2203,7 @@ var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2
         if (open) {
           event.preventDefault();
           const option2 = filtered[activeIndex];
-          if (option2) select(option2);
+          if (option2) select2(option2);
           else close2();
         }
         break;
@@ -2262,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;
@@ -2393,7 +2349,7 @@ var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2
                       className: item5,
                       onMouseDown: (event) => event.preventDefault(),
                       onMouseMove: () => !option2.disabled && setActiveIndex(index),
-                      onClick: () => select(option2),
+                      onClick: () => select2(option2),
                       children: [
                         option2.label,
                         isSelected && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: itemIndicator, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons10.CheckIcon, { size: 16 }) })
@@ -2418,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";
@@ -2454,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)(
@@ -2488,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,
@@ -2514,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)}` : "";
@@ -2549,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;
@@ -2563,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)(
@@ -2615,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";
@@ -2633,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,
@@ -2658,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;
@@ -2812,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";
@@ -2821,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;
@@ -2861,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
@@ -2894,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,
@@ -2915,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;
@@ -2978,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 {
@@ -3090,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";
@@ -3111,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)(
@@ -3129,26 +3087,26 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react38.forwardRef)(
     ) });
   }
 );
-var DropdownMenuItem = /* @__PURE__ */ (0, import_react38.forwardRef)(
-  function DropdownMenuItem2({ icon: icon7, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
+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: [
-      icon7 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: icon5, "aria-hidden": true, children: icon7 }),
+      icon8 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: icon5, "aria-hidden": true, children: icon8 }),
       children,
       shortcut2 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
     ] });
   }
 );
-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 }) }) }),
@@ -3157,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 }) }) }),
@@ -3166,16 +3124,16 @@ var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react38.forwardRef)(
   }
 );
 var DropdownMenuSub = RadixMenu.Sub;
-var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)(
-  function DropdownMenuSubTrigger2({ icon: icon7, className, children, ...rest }, ref) {
+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: [
-      icon7 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: icon5, "aria-hidden": true, children: icon7 }),
+      icon8 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: icon5, "aria-hidden": true, children: icon8 }),
       children,
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: subChevron, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons15.ChevronRightIcon, { size: 16 }) })
     ] });
   }
 );
-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)(
@@ -3194,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
@@ -3210,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,
@@ -3236,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;
@@ -3257,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;
@@ -3274,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;
@@ -3282,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);
@@ -3375,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);
@@ -3409,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,
@@ -3422,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`);
@@ -3474,14 +3432,15 @@ 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) => {
   const digits = input6.replace(/\D/g, "");
-  return digits.slice(0, phoneNumberMaxDigits(digits));
+  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,
@@ -3492,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({
@@ -3501,7 +3460,7 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react41.forwardRef)(
       defaultValue,
       onValueChange,
       sanitize: sanitize3,
-      format: formatPhoneNumber,
+      format: import_korean_utils6.formatPhoneNumber,
       isMeaningful: isDigit4,
       inputRef
     });
@@ -3527,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");
@@ -3541,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,
@@ -3560,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;
@@ -3627,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");
@@ -3638,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,
@@ -3655,13 +3614,13 @@ 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 select = (index) => {
+    const select2 = (index) => {
       const next = options[index].value;
       if (next === current2) return;
       if (!isControlled) setInnerValue(next);
@@ -3688,7 +3647,7 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react43.forwardRef)(
       if (target < 0) return;
       event.preventDefault();
       itemRefs.current[target]?.focus();
-      select(target);
+      select2(target);
     };
     const group = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "div",
@@ -3717,7 +3676,7 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react43.forwardRef)(
                 "data-state": checked ? "checked" : "unchecked",
                 "data-disabled": isEnabled(index) ? void 0 : "",
                 className: item9({ size, fullWidth }),
-                onClick: () => select(index),
+                onClick: () => select2(index),
                 onKeyDown: (event) => handleKeyDown(event, index),
                 children: [
                   option2.icon && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "aria-hidden": true, className: icon6, children: option2.icon }),
@@ -3739,12 +3698,91 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react43.forwardRef)(
   }
 );
 
-// src/components/Select/Select.tsx
-var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
-var import_react44 = require("react");
+// src/components/NativeSelect/NativeSelect.tsx
+var import_react45 = require("react");
 var import_icons18 = require("@bestow-ui/icons");
+
+// src/components/NativeSelect/NativeSelect.css.ts
+var import_createRuntimeFn23 = require("@vanilla-extract/recipes/createRuntimeFn");
+var icon7 = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ defaultClassName: "_5silym5", variantClassNames: { size: { sm: "_5silym6", md: "_5silym7", lg: "_5silym8" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var select = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ defaultClassName: "_5silym1", variantClassNames: { size: { sm: "_5silym2", md: "_5silym3", lg: "_5silym4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var wrapper = "_5silym0";
+
+// src/components/NativeSelect/NativeSelect.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var Select = /* @__PURE__ */ (0, import_react44.forwardRef)(function Select2(props, ref) {
+var NativeSelect = /* @__PURE__ */ (0, import_react45.forwardRef)(function NativeSelect2({
+  options,
+  onValueChange,
+  onChange,
+  placeholder,
+  label: label7,
+  helperText: helperText3,
+  error,
+  size,
+  fullWidth,
+  required,
+  disabled,
+  id,
+  value: value4,
+  defaultValue,
+  className,
+  children,
+  "aria-describedby": ariaDescribedBy,
+  ...rest
+}, ref) {
+  const generatedId = (0, import_react45.useId)();
+  const selectId = id ?? generatedId;
+  const helperId = helperText3 ? `${selectId}-helper` : void 0;
+  const handleChange = (event) => {
+    onChange?.(event);
+    onValueChange?.(event.target.value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label7 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { htmlFor: selectId, className: label2, children: [
+      label7,
+      required && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      "span",
+      {
+        className: cx(root5({ size, fullWidth }), wrapper),
+        "data-invalid": error || void 0,
+        "data-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+            "select",
+            {
+              ref,
+              id: selectId,
+              value: value4,
+              defaultValue: value4 === void 0 && defaultValue === void 0 && placeholder !== void 0 ? "" : defaultValue,
+              onChange: handleChange,
+              required,
+              disabled,
+              "aria-invalid": error || void 0,
+              "aria-describedby": cx(helperId, ariaDescribedBy) || void 0,
+              className: cx(select({ size }), className),
+              ...rest,
+              children: [
+                placeholder !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "", disabled: true, children: placeholder }),
+                options ? options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: option2.value, disabled: option2.disabled, children: option2.label }, option2.value)) : children
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_icons18.ChevronDownIcon, { size: 16, className: icon7({ size }) })
+        ]
+      }
+    ),
+    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+  ] });
+});
+
+// src/components/Select/Select.tsx
+var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
+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_react46.forwardRef)(function Select2(props, ref) {
   const {
     options,
     value: value4,
@@ -3764,16 +3802,16 @@ var Select = /* @__PURE__ */ (0, import_react44.forwardRef)(function Select2(pro
     className
   } = props;
   const isControlled = "value" in props;
-  const generatedId = (0, import_react44.useId)();
+  const generatedId = (0, import_react46.useId)();
   const triggerId = id ?? generatedId;
   const helperId = helperText3 ? `${triggerId}-helper` : void 0;
   const portal2 = usePortalProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label7 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { htmlFor: triggerId, className: label2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label7 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("label", { htmlFor: triggerId, className: label2, children: [
       label7,
-      required && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       RadixSelect.Root,
       {
         value: isControlled ? value4 ?? "" : void 0,
@@ -3783,7 +3821,7 @@ var Select = /* @__PURE__ */ (0, import_react44.forwardRef)(function Select2(pro
         required,
         name,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
             RadixSelect.Trigger,
             {
               ref,
@@ -3794,12 +3832,12 @@ var Select = /* @__PURE__ */ (0, import_react44.forwardRef)(function Select2(pro
               "data-invalid": error || void 0,
               className: cx(root5({ size, fullWidth }), trigger2, className),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: value2, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixSelect.Value, { placeholder }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixSelect.Icon, { className: icon4, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_icons18.ChevronDownIcon, { size: 16 }) })
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: value2, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixSelect.Value, { placeholder }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixSelect.Icon, { className: icon4, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons19.ChevronDownIcon, { size: 16 }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             RadixSelect.Content,
             {
               position: "popper",
@@ -3807,15 +3845,15 @@ var Select = /* @__PURE__ */ (0, import_react44.forwardRef)(function Select2(pro
               collisionPadding: 8,
               className: cx(portal2.className, content5),
               style: portal2.style,
-              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
                 RadixSelect.Item,
                 {
                   value: option2.value,
                   disabled: option2.disabled,
                   className: item5,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixSelect.ItemText, { children: option2.label }),
-                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_icons18.CheckIcon, { size: 16 }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixSelect.ItemText, { children: option2.label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons19.CheckIcon, { size: 16 }) })
                   ]
                 },
                 option2.value
@@ -3825,19 +3863,19 @@ var Select = /* @__PURE__ */ (0, import_react44.forwardRef)(function Select2(pro
         ]
       }
     ),
-    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
 
 // src/components/SkipLink/SkipLink.tsx
-var import_react45 = require("react");
+var import_react47 = require("react");
 
 // src/components/SkipLink/SkipLink.css.ts
 var skipLink = "_1t9jaar0";
 
 // src/components/SkipLink/SkipLink.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var SkipLink = /* @__PURE__ */ (0, import_react45.forwardRef)(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var SkipLink = /* @__PURE__ */ (0, import_react47.forwardRef)(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
   const m = useMessages();
   const handleClick = (event) => {
     onClick?.(event);
@@ -3849,28 +3887,28 @@ var SkipLink = /* @__PURE__ */ (0, import_react45.forwardRef)(function SkipLink2
     target.focus();
     target.scrollIntoView?.({ block: "start" });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("a", { ref, href, className: cx(skipLink, className), onClick: handleClick, ...rest, children: children ?? m.skipToContent ?? "\uBCF8\uBB38 \uBC14\uB85C\uAC00\uAE30" });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("a", { ref, href, className: cx(skipLink, className), onClick: handleClick, ...rest, children: children ?? m.skipToContent ?? "\uBCF8\uBB38 \uBC14\uB85C\uAC00\uAE30" });
 });
 
 // src/components/Slider/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"), 1);
-var import_react46 = require("react");
+var import_react48 = require("react");
 
 // src/components/Slider/Slider.css.ts
-var import_createRuntimeFn23 = require("@vanilla-extract/recipes/createRuntimeFn");
+var import_createRuntimeFn24 = require("@vanilla-extract/recipes/createRuntimeFn");
 var field3 = "_126mzjm0";
 var header8 = "_126mzjm1";
 var helperText2 = "_126mzjm4";
 var label4 = "_126mzjm2";
 var range2 = "_126mzjmb";
-var root12 = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ defaultClassName: "_126mzjm5", variantClassNames: { size: { sm: "_126mzjm6", md: "_126mzjm7" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var thumb = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ defaultClassName: "_126mzjmc", variantClassNames: { size: { sm: "_126mzjmd", md: "_126mzjme" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var track2 = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ defaultClassName: "_126mzjm8", variantClassNames: { size: { sm: "_126mzjm9", md: "_126mzjma" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var root12 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "_126mzjm5", variantClassNames: { size: { sm: "_126mzjm6", md: "_126mzjm7" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var thumb = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "_126mzjmc", variantClassNames: { size: { sm: "_126mzjmd", md: "_126mzjme" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var track2 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "_126mzjm8", variantClassNames: { size: { sm: "_126mzjm9", md: "_126mzjma" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var value3 = "_126mzjm3";
 
 // src/components/Slider/Slider.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var Slider = /* @__PURE__ */ (0, import_react46.forwardRef)(function Slider2(props, ref) {
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var Slider = /* @__PURE__ */ (0, import_react48.forwardRef)(function Slider2(props, ref) {
   const {
     value: value4,
     defaultValue,
@@ -3891,12 +3929,12 @@ var Slider = /* @__PURE__ */ (0, import_react46.forwardRef)(function Slider2(pro
   } = props;
   const m = useMessages();
   const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
-  const generatedId = (0, import_react46.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_react46.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) => {
@@ -3904,12 +3942,12 @@ var Slider = /* @__PURE__ */ (0, import_react46.forwardRef)(function Slider2(pro
     onValueChange?.(next);
   };
   const valueText = current2.map(formatValue).join(" \u2013 ");
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cx(field3, className), children: [
-    (label7 || showValue) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: header8, children: [
-      label7 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { id: labelId, className: label4, children: label7 }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: value3, "aria-hidden": true, children: valueText })
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cx(field3, className), children: [
+    (label7 || showValue) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: header8, children: [
+      label7 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { id: labelId, className: label4, children: label7 }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: value3, "aria-hidden": true, children: valueText })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       RadixSlider.Root,
       {
         ref,
@@ -3922,10 +3960,10 @@ var Slider = /* @__PURE__ */ (0, import_react46.forwardRef)(function Slider2(pro
         className: root12({ size }),
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RadixSlider.Track, { className: track2({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RadixSlider.Range, { className: range2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixSlider.Track, { className: track2({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixSlider.Range, { className: range2 }) }),
           current2.map((thumbValue, index) => {
             const thumbLabelId = `${baseId}-thumb-${index}`;
-            return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               RadixSlider.Thumb,
               {
                 className: thumb({ size }),
@@ -3940,32 +3978,32 @@ var Slider = /* @__PURE__ */ (0, import_react46.forwardRef)(function Slider2(pro
         ]
       }
     ),
-    isRange && current2.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
+    isRange && current2.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
       label7 ? "" : ariaLabel ? `${ariaLabel} ` : "",
       thumbLabels[index] ?? `${index + 1}`
     ] }, index)),
-    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { id: helperId, className: helperText2, children: helperText3 })
+    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { id: helperId, className: helperText2, children: helperText3 })
   ] });
 });
 
 // src/components/Stepper/Stepper.tsx
-var import_react47 = require("react");
-var import_icons19 = require("@bestow-ui/icons");
+var import_react49 = require("react");
+var import_icons20 = require("@bestow-ui/icons");
 
 // src/components/Stepper/Stepper.css.ts
-var import_createRuntimeFn24 = require("@vanilla-extract/recipes/createRuntimeFn");
+var import_createRuntimeFn25 = require("@vanilla-extract/recipes/createRuntimeFn");
 var description6 = "kervhmh";
-var indicator3 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "kervhm6", variantClassNames: { status: { complete: "kervhm7", current: "kervhm8", upcoming: "kervhm9" } }, defaultVariants: {}, compoundVariants: [] });
-var label5 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "kervhmd", variantClassNames: { status: { complete: "kervhme", current: "kervhmf", upcoming: "kervhmg" } }, defaultVariants: {}, compoundVariants: [] });
-var root13 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "kervhm0", variantClassNames: { orientation: { horizontal: "kervhm1", vertical: "kervhm2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
-var step = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "kervhm3", variantClassNames: { orientation: { horizontal: "kervhm4", vertical: "kervhm5" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
-var text2 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "kervhma", variantClassNames: { orientation: { horizontal: "kervhmb", vertical: "kervhmc" } }, defaultVariants: {}, compoundVariants: [] });
+var indicator3 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "kervhm6", variantClassNames: { status: { complete: "kervhm7", current: "kervhm8", upcoming: "kervhm9" } }, defaultVariants: {}, compoundVariants: [] });
+var label5 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "kervhmd", variantClassNames: { status: { complete: "kervhme", current: "kervhmf", upcoming: "kervhmg" } }, defaultVariants: {}, compoundVariants: [] });
+var root13 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "kervhm0", variantClassNames: { orientation: { horizontal: "kervhm1", vertical: "kervhm2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
+var step = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "kervhm3", variantClassNames: { orientation: { horizontal: "kervhm4", vertical: "kervhm5" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
+var text2 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "kervhma", variantClassNames: { orientation: { horizontal: "kervhmb", vertical: "kervhmc" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/Stepper/Stepper.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var Stepper = /* @__PURE__ */ (0, import_react47.forwardRef)(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
+var import_jsx_runtime46 = require("react/jsx-runtime");
+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_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "ol",
     {
       ref,
@@ -3974,24 +4012,24 @@ var Stepper = /* @__PURE__ */ (0, import_react47.forwardRef)(function Stepper2({
       ...rest,
       children: steps.map((step2, index) => {
         const status = index < current2 ? "complete" : index === current2 ? "current" : "upcoming";
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           "li",
           {
             className: step({ orientation }),
             "data-status": status,
             "aria-current": status === "current" ? "step" : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: indicator3({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons19.CheckIcon, { size: 16, strokeWidth: 2.5 }) : index + 1 }),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: text2({ orientation }), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: label5({ status }), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: indicator3({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons20.CheckIcon, { size: 16, strokeWidth: 2.5 }) : index + 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: text2({ orientation }), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: label5({ status }), children: [
                   step2.label,
-                  status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: visuallyHidden, children: [
+                  status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: visuallyHidden, children: [
                     " (",
                     m.stepCompleted ?? "\uC644\uB8CC",
                     ")"
                   ] })
                 ] }),
-                step2.description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: description6, children: step2.description })
+                step2.description && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: description6, children: step2.description })
               ] })
             ]
           },
@@ -4003,47 +4041,120 @@ var Stepper = /* @__PURE__ */ (0, import_react47.forwardRef)(function Stepper2({
 });
 
 // src/components/Switch/Switch.tsx
-var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
-var import_react48 = require("react");
+var import_react50 = require("react");
 
 // src/components/Switch/Switch.css.ts
-var import_createRuntimeFn25 = require("@vanilla-extract/recipes/createRuntimeFn");
-var label6 = "o33ul29";
-var root14 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var thumb2 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var track3 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var import_createRuntimeFn26 = require("@vanilla-extract/recipes/createRuntimeFn");
+var bubbleInput = /* @__PURE__ */ (0, import_createRuntimeFn26.createRuntimeFn)({ defaultClassName: "o33ul29", variantClassNames: { size: { sm: "o33ul2a", md: "o33ul2b" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var label6 = "o33ul2c";
+var root14 = /* @__PURE__ */ (0, import_createRuntimeFn26.createRuntimeFn)({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var thumb2 = /* @__PURE__ */ (0, import_createRuntimeFn26.createRuntimeFn)({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var track3 = /* @__PURE__ */ (0, import_createRuntimeFn26.createRuntimeFn)({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var Switch = /* @__PURE__ */ (0, import_react48.forwardRef)(function Switch2({ label: label7, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
-  const generatedId = (0, import_react48.useId)();
+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_react50.forwardRef)(function Switch2({
+  label: label7,
+  size,
+  id,
+  className,
+  disabled,
+  required,
+  name,
+  value: value4 = "on",
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  "aria-label": ariaLabel
+}, ref) {
+  const generatedId = (0, import_react50.useId)();
   const switchId = id ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: cx(root14({ size }), className), "data-disabled": disabled || void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-      RadixSwitch.Root,
+  const [uncontrolled, setUncontrolled] = (0, import_react50.useState)(defaultChecked ?? false);
+  const isControlled = checkedProp !== void 0;
+  const checked = isControlled ? checkedProp : uncontrolled;
+  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_react50.useRef)(setChecked);
+  setCheckedRef.current = setChecked;
+  (0, import_react50.useEffect)(() => {
+    const form = buttonRef.current?.form;
+    setInForm(!!form);
+    if (!form) return;
+    const initial = checked;
+    const onReset = () => setCheckedRef.current(initial);
+    form.addEventListener("reset", onReset);
+    return () => form.removeEventListener("reset", onReset);
+  }, []);
+  (0, import_react50.useEffect)(() => {
+    const input6 = inputRef.current;
+    if (!input6 || input6.checked === checked) return;
+    setNativeChecked(input6, checked);
+    if (userToggled.current) input6.dispatchEvent(new Event("click", { bubbles: true }));
+    userToggled.current = false;
+  }, [checked]);
+  const handleClick = (event) => {
+    userToggled.current = true;
+    setChecked(!checked);
+    if (inForm) event.stopPropagation();
+  };
+  const state = checked ? "checked" : "unchecked";
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: cx(root14({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "button",
       {
-        ref,
+        ref: mergeRefs(ref, buttonRef),
+        type: "button",
+        role: "switch",
         id: switchId,
-        disabled,
+        "aria-checked": checked,
+        "aria-required": required,
         "aria-label": ariaLabel,
+        "data-state": state,
+        "data-disabled": disabled ? "" : void 0,
+        disabled,
+        value: value4,
         className: track3({ size }),
-        ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RadixSwitch.Thumb, { className: thumb2({ size }) })
+        onClick: handleClick,
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: thumb2({ size }), "data-state": state, "data-disabled": disabled ? "" : void 0 })
       }
     ),
-    label7 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { htmlFor: switchId, className: label6, children: label7 })
+    inForm && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        "aria-hidden": true,
+        tabIndex: -1,
+        defaultChecked: checked,
+        required,
+        disabled,
+        name,
+        value: value4,
+        className: bubbleInput({ size })
+      }
+    ),
+    label7 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("label", { htmlFor: switchId, className: label6, children: label7 })
   ] });
 });
 
 // src/components/Table/Table.tsx
-var import_react49 = require("react");
-var import_icons20 = require("@bestow-ui/icons");
+var import_react51 = require("react");
+var import_icons21 = require("@bestow-ui/icons");
 
 // src/components/Table/Table.css.ts
-var import_createRuntimeFn26 = require("@vanilla-extract/recipes/createRuntimeFn");
+var import_createRuntimeFn27 = require("@vanilla-extract/recipes/createRuntimeFn");
 var body4 = "l3ploy5";
 var caption = "l3ploy2";
-var cell2 = /* @__PURE__ */ (0, import_createRuntimeFn26.createRuntimeFn)({ defaultClassName: "l3ploy9", variantClassNames: { size: { sm: "l3ploya", md: "l3ployb" }, align: { left: "l3ployc", center: "l3ployd", right: "l3ploye" } }, defaultVariants: { size: "md", align: "left" }, compoundVariants: [] });
+var cell2 = /* @__PURE__ */ (0, import_createRuntimeFn27.createRuntimeFn)({ defaultClassName: "l3ploy9", variantClassNames: { size: { sm: "l3ploya", md: "l3ployb" }, align: { left: "l3ployc", center: "l3ployd", right: "l3ploye" } }, defaultVariants: { size: "md", align: "left" }, compoundVariants: [] });
 var container = "l3ploy0";
 var emptyCell = "l3ployj";
 var emptyContent = "l3ployk";
@@ -4059,10 +4170,10 @@ var striped = "l3ploy6";
 var table = "l3ploy1";
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var TableSizeContext = /* @__PURE__ */ (0, import_react49.createContext)("md");
-var TableSectionContext = /* @__PURE__ */ (0, import_react49.createContext)("body");
-var Table = /* @__PURE__ */ (0, import_react49.forwardRef)(function Table2({
+var import_jsx_runtime48 = require("react/jsx-runtime");
+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,
@@ -4074,8 +4185,8 @@ var Table = /* @__PURE__ */ (0, import_react49.forwardRef)(function Table2({
   children,
   ...rest
 }, ref) {
-  const captionId = (0, import_react49.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  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",
     {
       className: cx(container, containerClassName),
@@ -4084,7 +4195,7 @@ var Table = /* @__PURE__ */ (0, import_react49.forwardRef)(function Table2({
       role: "region",
       "aria-labelledby": caption2 ? captionId : void 0,
       "aria-label": caption2 ? void 0 : ariaLabel,
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
         "table",
         {
           ref,
@@ -4092,7 +4203,7 @@ var Table = /* @__PURE__ */ (0, import_react49.forwardRef)(function Table2({
           "aria-label": caption2 ? void 0 : ariaLabel,
           ...rest,
           children: [
-            caption2 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("caption", { id: captionId, className: caption, children: caption2 }),
+            caption2 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("caption", { id: captionId, className: caption, children: caption2 }),
             children
           ]
         }
@@ -4100,31 +4211,31 @@ var Table = /* @__PURE__ */ (0, import_react49.forwardRef)(function Table2({
     }
   ) });
 });
-var TableHeader = /* @__PURE__ */ (0, import_react49.forwardRef)(
+var TableHeader = /* @__PURE__ */ (0, import_react51.forwardRef)(
   function TableHeader2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("thead", { ref, className: cx(header9, className), ...rest }) });
+    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_react49.forwardRef)(
+var TableBody = /* @__PURE__ */ (0, import_react51.forwardRef)(
   function TableBody2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("tbody", { ref, className: cx(body4, className), ...rest }) });
+    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_react49.forwardRef)(
+var TableFooter = /* @__PURE__ */ (0, import_react51.forwardRef)(
   function TableFooter2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("tfoot", { ref, className: cx(footer4, className), ...rest }) });
+    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_react49.forwardRef)(function TableRow2({ selected, className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...rest });
+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_react49.forwardRef)(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
-  const size = (0, import_react49.useContext)(TableSizeContext);
-  const section = (0, import_react49.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_icons20.ArrowDownIcon : import_icons20.ArrowUpIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  const SortIcon = direction === "descending" ? import_icons21.ArrowDownIcon : import_icons21.ArrowUpIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "th",
     {
       ref,
@@ -4136,17 +4247,17 @@ var TableHead = /* @__PURE__ */ (0, import_react49.forwardRef)(function TableHea
         className
       ),
       ...rest,
-      children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("button", { type: "button", className: sortButton, onClick: onSort, children: [
+      children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("button", { type: "button", className: sortButton, onClick: onSort, children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
       ] }) : children
     }
   );
 });
-var TableCell = /* @__PURE__ */ (0, import_react49.forwardRef)(function TableCell2({ align, className, ...rest }, ref) {
-  const size = (0, import_react49.useContext)(TableSizeContext);
-  const section = (0, import_react49.useContext)(TableSectionContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+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",
     {
       ref,
@@ -4155,26 +4266,26 @@ var TableCell = /* @__PURE__ */ (0, import_react49.forwardRef)(function TableCel
     }
   );
 });
-var TableEmpty = /* @__PURE__ */ (0, import_react49.forwardRef)(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { ref, colSpan, className: cx(emptyCell, className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: emptyContent, children }) }) });
+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 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: Array.from({ length: rows }, (_, row5) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { "aria-hidden": true, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Skeleton, { width: column === 0 ? "60%" : "80%" }) }, column)) }, row5)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: Array.from({ length: rows }, (_, row5) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { "aria-hidden": true, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Skeleton, { width: column === 0 ? "60%" : "80%" }) }, column)) }, row5)) });
 }
 
 // src/components/Table/useTableSelection.ts
-var import_react50 = require("react");
+var import_react52 = require("react");
 function useTableSelection(initial = []) {
-  const [selected, setSelected] = (0, import_react50.useState)(initial);
-  const isSelected = (0, import_react50.useCallback)((id) => selected.includes(id), [selected]);
-  const toggle3 = (0, import_react50.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_react50.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));
@@ -4195,48 +4306,48 @@ function useTableSelection(initial = []) {
 
 // src/components/Tabs/Tabs.tsx
 var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
-var import_react51 = require("react");
+var import_react53 = require("react");
 
 // src/components/Tabs/Tabs.css.ts
-var import_createRuntimeFn27 = require("@vanilla-extract/recipes/createRuntimeFn");
+var import_createRuntimeFn28 = require("@vanilla-extract/recipes/createRuntimeFn");
 var content10 = "fvhbtdb";
-var list6 = /* @__PURE__ */ (0, import_createRuntimeFn27.createRuntimeFn)({ defaultClassName: "fvhbtd1", variantClassNames: { variant: { line: "fvhbtd2", soft: "fvhbtd3" } }, defaultVariants: { variant: "line" }, compoundVariants: [] });
+var list6 = /* @__PURE__ */ (0, import_createRuntimeFn28.createRuntimeFn)({ defaultClassName: "fvhbtd1", variantClassNames: { variant: { line: "fvhbtd2", soft: "fvhbtd3" } }, defaultVariants: { variant: "line" }, compoundVariants: [] });
 var root15 = "fvhbtd0";
-var trigger3 = /* @__PURE__ */ (0, import_createRuntimeFn27.createRuntimeFn)({ defaultClassName: "fvhbtd4", variantClassNames: { variant: { line: "fvhbtd5", soft: "fvhbtd6" }, size: { sm: "fvhbtd7", md: "fvhbtd8" } }, defaultVariants: { variant: "line", size: "md" }, compoundVariants: [[{ variant: "soft", size: "sm" }, "fvhbtd9"], [{ variant: "soft", size: "md" }, "fvhbtda"]] });
+var trigger3 = /* @__PURE__ */ (0, import_createRuntimeFn28.createRuntimeFn)({ defaultClassName: "fvhbtd4", variantClassNames: { variant: { line: "fvhbtd5", soft: "fvhbtd6" }, size: { sm: "fvhbtd7", md: "fvhbtd8" } }, defaultVariants: { variant: "line", size: "md" }, compoundVariants: [[{ variant: "soft", size: "sm" }, "fvhbtd9"], [{ variant: "soft", size: "md" }, "fvhbtda"]] });
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var TabsStyleContext = /* @__PURE__ */ (0, import_react51.createContext)({ variant: "line", size: "md" });
-var Tabs = /* @__PURE__ */ (0, import_react51.forwardRef)(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
+var import_jsx_runtime49 = require("react/jsx-runtime");
+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_runtime48.jsx)(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RadixTabs.Root, { ref, className: cx(root15, className), ...props, ...controlled }) });
+  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_react51.forwardRef)(function TabsList2({ className, ...rest }, ref) {
-  const { variant } = (0, import_react51.useContext)(TabsStyleContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RadixTabs.List, { ref, className: cx(list6({ variant }), className), ...rest });
+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_react51.forwardRef)(function TabsTrigger2({ className, ...rest }, ref) {
-  const { variant, size } = (0, import_react51.useContext)(TabsStyleContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
+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_react51.forwardRef)(function TabsContent2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
+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_react52 = require("react");
+var import_react54 = require("react");
 
 // src/components/Textarea/Textarea.css.ts
-var import_createRuntimeFn28 = require("@vanilla-extract/recipes/createRuntimeFn");
+var import_createRuntimeFn29 = require("@vanilla-extract/recipes/createRuntimeFn");
 var count = "_1koawa9";
 var countOver = "_1koawaa";
 var defaultWidth = "_1koawa7";
 var footer5 = "_1koawa8";
-var textarea = /* @__PURE__ */ (0, import_createRuntimeFn28.createRuntimeFn)({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
+var textarea = /* @__PURE__ */ (0, import_createRuntimeFn29.createRuntimeFn)({ 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
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var Textarea = /* @__PURE__ */ (0, import_react52.forwardRef)(function Textarea2({
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var Textarea = /* @__PURE__ */ (0, import_react54.forwardRef)(function Textarea2({
   label: label7,
   helperText: helperText3,
   error,
@@ -4257,13 +4368,13 @@ var Textarea = /* @__PURE__ */ (0, import_react52.forwardRef)(function Textarea2
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = (0, import_react52.useId)();
+  const generatedId = (0, import_react54.useId)();
   const textareaId = id ?? generatedId;
   const helperId = helperText3 ? `${textareaId}-helper` : void 0;
-  const innerRef = (0, import_react52.useRef)(null);
-  const [uncontrolledLength, setUncontrolledLength] = (0, import_react52.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_react52.useCallback)(() => {
+  const fitHeight = (0, import_react54.useCallback)(() => {
     const el = innerRef.current;
     if (!autoResize || !el) return;
     el.style.height = "auto";
@@ -4276,12 +4387,12 @@ var Textarea = /* @__PURE__ */ (0, import_react52.forwardRef)(function Textarea2
     fitHeight();
     onChange?.(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label7 && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("label", { htmlFor: textareaId, className: label2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label7 && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("label", { htmlFor: textareaId, className: label2, children: [
       label7,
-      required && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "textarea",
       {
         ref: mergeRefs(innerRef, ref),
@@ -4303,51 +4414,51 @@ var Textarea = /* @__PURE__ */ (0, import_react52.forwardRef)(function Textarea2
         ...rest
       }
     ),
-    (helperText3 || showCount) && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: footer5, children: [
-      helperText3 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
-      showCount && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
+    (helperText3 || showCount) && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: footer5, children: [
+      helperText3 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
+      showCount && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
     ] })
   ] });
 });
 
 // src/components/Toast/Toast.tsx
 var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
-var import_react53 = require("react");
-var import_icons21 = require("@bestow-ui/icons");
+var import_react55 = require("react");
+var import_icons22 = require("@bestow-ui/icons");
 
 // src/components/Toast/Toast.css.ts
-var import_createRuntimeFn29 = require("@vanilla-extract/recipes/createRuntimeFn");
+var import_createRuntimeFn30 = require("@vanilla-extract/recipes/createRuntimeFn");
 var action2 = "_1g11zvx9";
 var close = "_1g11zvxa";
 var description7 = "_1g11zvx8";
 var title5 = "_1g11zvx7";
-var toast = /* @__PURE__ */ (0, import_createRuntimeFn29.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { color: { primary: "_1g11zvx2", neutral: "_1g11zvx3", success: "_1g11zvx4", warning: "_1g11zvx5", danger: "_1g11zvx6" } }, defaultVariants: { color: "neutral" }, compoundVariants: [] });
+var toast = /* @__PURE__ */ (0, import_createRuntimeFn30.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { color: { primary: "_1g11zvx2", neutral: "_1g11zvx3", success: "_1g11zvx4", warning: "_1g11zvx5", danger: "_1g11zvx6" } }, defaultVariants: { color: "neutral" }, compoundVariants: [] });
 var viewport2 = "_1g11zvx0";
 
 // src/components/Toast/Toast.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var REMOVE_DELAY = 500;
-var ToastContext = /* @__PURE__ */ (0, import_react53.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_react53.useState)([]);
-  const nextId = (0, import_react53.useRef)(0);
+  const [toasts, setToasts] = (0, import_react55.useState)([]);
+  const nextId = (0, import_react55.useRef)(0);
   const portal2 = usePortalProps();
-  const toast2 = (0, import_react53.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_react53.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_react53.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ToastContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(RadixToast.Provider, { duration, label: label7, swipeDirection: "right", children: [
+  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_runtime50.jsxs)(
+    toasts.map(({ id, open, title: title6, description: description8, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
       RadixToast.Root,
       {
         open,
@@ -4357,19 +4468,19 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
         },
         className: toast({ color }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixToast.Title, { className: title5, children: title6 }),
-          description8 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixToast.Description, { className: description7, children: description8 }),
-          action3 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons21.XIcon, { size: 16 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadixToast.Title, { className: title5, children: title6 }),
+          description8 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadixToast.Description, { className: description7, children: description8 }),
+          action3 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons22.XIcon, { size: 16 }) })
         ]
       },
       id
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
   ] }) });
 }
 function useToast() {
-  const context = (0, import_react53.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;
 }
@@ -4382,7 +4493,7 @@ var arrow2 = "z7rufs1";
 var content11 = "z7rufs0";
 
 // src/components/Tooltip/Tooltip.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Tooltip({
   content: content12,
   children,
@@ -4397,9 +4508,9 @@ function Tooltip({
 }) {
   const portal2 = usePortalProps();
   if (disabled || content12 == null || content12 === "") return children;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
       RadixTooltip.Content,
       {
         side,
@@ -4410,7 +4521,7 @@ function Tooltip({
         style: portal2.style,
         children: [
           content12,
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
         ]
       }
     ) })
@@ -4418,7 +4529,7 @@ function Tooltip({
 }
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-var import_react54 = require("react");
+var import_react56 = require("react");
 
 // src/components/VerificationCodeInput/VerificationCodeInput.css.ts
 var input5 = "ea01812";
@@ -4428,9 +4539,9 @@ var slots = "ea01811";
 var timer = "ea01814";
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+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_react54.forwardRef)(
+var VerificationCodeInput = /* @__PURE__ */ (0, import_react56.forwardRef)(
   function VerificationCodeInput2(props, ref) {
     const {
       length = 6,
@@ -4457,23 +4568,23 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react54.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_react54.useId)();
+    const generatedId = (0, import_react56.useId)();
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
     const statusId = `${inputId}-status`;
-    const inputRef = (0, import_react54.useRef)(null);
+    const inputRef = (0, import_react56.useRef)(null);
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = (0, import_react54.useState)(defaultValue ?? "");
+    const [innerValue, setInnerValue] = (0, import_react56.useState)(defaultValue ?? "");
     const code = (isControlled ? value4 ?? "" : innerValue).slice(0, length);
-    const [focused, setFocused] = (0, import_react54.useState)(false);
-    const [endAt, setEndAt] = (0, import_react54.useState)(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
-    const [remaining, setRemaining] = (0, import_react54.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_react54.useRef)(onExpire);
-    (0, import_react54.useEffect)(() => {
+    const onExpireRef = (0, import_react56.useRef)(onExpire);
+    (0, import_react56.useEffect)(() => {
       onExpireRef.current = onExpire;
     });
-    (0, import_react54.useEffect)(() => {
+    (0, import_react56.useEffect)(() => {
       if (endAt === null) return;
       const tick = () => {
         const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
@@ -4508,17 +4619,17 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react54.forwardRef)(
     };
     const description8 = helperText3 ?? m.verificationCodeHint?.(length, type) ?? `${length}\uC790\uB9AC ${type === "numeric" ? "\uC22B\uC790" : "\uBB38\uC790"}\uB97C \uC785\uB825\uD558\uC138\uC694.`;
     const activeIndex = Math.min(code.length, length - 1);
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
       "div",
       {
         className: cx(field, className),
         "data-invalid": error || void 0,
         "data-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("label", { htmlFor: inputId, className: label2, children: label7 }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: row4, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: slots, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("label", { htmlFor: inputId, className: label2, children: label7 }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: row4, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: slots, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                 "input",
                 {
                   ref: mergeRefs(ref, inputRef),
@@ -4538,7 +4649,7 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react54.forwardRef)(
                   className: input5
                 }
               ),
-              Array.from({ length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              Array.from({ length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                 "div",
                 {
                   className: slot,
@@ -4549,12 +4660,12 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react54.forwardRef)(
                 index
               ))
             ] }),
-            expiresIn !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { role: "timer", className: timer, children: formatTime(remaining) }),
-            onResend && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
+            expiresIn !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { role: "timer", className: timer, children: formatTime(remaining) }),
+            onResend && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { id: helperId, className: helperText({ error }), children: description8 }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
-          name && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("input", { type: "hidden", name, value: code })
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { id: helperId, className: helperText({ error }), children: description8 }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
+          name && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("input", { type: "hidden", name, value: code })
         ]
       }
     );
@@ -4607,6 +4718,7 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react54.forwardRef)(
   LocaleProvider,
   Modal,
   ModalClose,
+  NativeSelect,
   NumberInput,
   Pagination,
   PhoneNumberInput,