@bestow-ui/react 1.4.0 → 1.6.0

package/dist/client.js

@@ -1,29 +1,23 @@
 "use client";
 import {
-  KOREAN_WEEKDAYS,
   Skeleton,
   addDays,
   addMonths,
   compareDays,
   cx,
   focusField,
-  formatBusinessNumber,
-  formatKoreanAmount,
-  formatPhoneNumber,
   getCalendarWeeks,
   isSameDay,
   isSameMonth,
-  isValidBusinessNumber,
   kakaoPostcodeProvider,
   mergeThemes,
   parseISODate,
-  phoneNumberMaxDigits,
   presetRange,
   themeClass,
   themeToStyle,
   toISODate,
   visuallyHidden
-} from "./chunk-TIFI6ZQU.js";
+} from "./chunk-NKLDAXUR.js";
 
 // src/theme/ThemeProvider.tsx
 import { createContext, forwardRef, useContext, useMemo } from "react";
@@ -735,7 +729,7 @@ var Alert = /* @__PURE__ */ forwardRef10(function Alert2({
   variant,
   color = "primary",
   title: title6,
-  icon: icon6,
+  icon: icon7,
   action: action3,
   onClose,
   closeLabel: closeLabelProp,
@@ -746,7 +740,7 @@ var Alert = /* @__PURE__ */ forwardRef10(function Alert2({
   const m = useMessages();
   const closeLabel = closeLabelProp ?? m.close ?? "\uB2EB\uAE30";
   const DefaultIcon = defaultIcons[color];
-  const iconNode = icon6 === void 0 ? /* @__PURE__ */ jsx12(DefaultIcon, { size: 18 }) : icon6;
+  const iconNode = icon7 === void 0 ? /* @__PURE__ */ jsx12(DefaultIcon, { size: 18 }) : icon7;
   return /* @__PURE__ */ jsxs10("div", { ref, className: cx(alert({ variant, color }), className), ...rest, children: [
     iconNode !== false && iconNode !== null && /* @__PURE__ */ jsx12("span", { className: icon2, "aria-hidden": true, children: iconNode }),
     /* @__PURE__ */ jsxs10("div", { className: content4, children: [
@@ -760,6 +754,7 @@ var Alert = /* @__PURE__ */ forwardRef10(function Alert2({
 
 // src/components/AmountInput/AmountInput.tsx
 import { forwardRef as forwardRef11, useRef as useRef5 } from "react";
+import { formatKoreanAmount } from "@bestow-ui/korean-utils";
 
 // src/utils/useFormattedInput.ts
 import { useRef as useRef4, useState as useState3 } from "react";
@@ -1011,6 +1006,7 @@ var Breadcrumb = /* @__PURE__ */ forwardRef14(function Breadcrumb2({ items: item
 
 // src/components/BusinessNumberInput/BusinessNumberInput.tsx
 import { forwardRef as forwardRef15, useRef as useRef6, useState as useState4 } from "react";
+import { formatBusinessNumber, isValidBusinessNumber } from "@bestow-ui/korean-utils";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var sanitize = (input6) => input6.replace(/\D/g, "").slice(0, 10);
 var isDigit2 = (char) => /\d/.test(char);
@@ -1077,6 +1073,7 @@ var BusinessNumberInput = /* @__PURE__ */ forwardRef15(
 // src/components/Calendar/Calendar.tsx
 import { forwardRef as forwardRef17, useEffect as useEffect4, useId as useId4, useRef as useRef7, useState as useState5 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2 } from "@bestow-ui/icons";
+import { KOREAN_WEEKDAYS } from "@bestow-ui/korean-utils";
 
 // src/utils/useIsClient.ts
 import { useSyncExternalStore } from "react";
@@ -1179,7 +1176,7 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
     moveFocus.current = true;
     setFocused(clamp(date));
   };
-  const select = (date) => {
+  const select2 = (date) => {
     if (isDisabled(date)) return;
     const iso = toISODate(date);
     if (!isControlled) setInnerValue(iso);
@@ -1262,7 +1259,7 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
             "aria-label": label6,
             "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()
           }
@@ -1301,6 +1298,7 @@ var toggle2 = "c2pbq71 c2pbq70";
 
 // src/components/Combobox/Combobox.tsx
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var NO_RESULTS_ANNOUNCE_DELAY = 800;
 var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
 var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
   const {
@@ -1372,7 +1370,7 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
     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);
@@ -1406,7 +1404,7 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
         if (open) {
           event.preventDefault();
           const option2 = filtered[activeIndex];
-          if (option2) select(option2);
+          if (option2) select2(option2);
           else close2();
         }
         break;
@@ -1426,6 +1424,14 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
     document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: "nearest" });
   }, [open, activeIndex]);
   const hasOptions = filtered.length > 0;
+  const noResults = open && !disabled && !hasOptions;
+  const [announcedFor, setAnnouncedFor] = useState6(void 0);
+  useEffect5(() => {
+    if (!noResults) return;
+    const timer2 = setTimeout(() => setAnnouncedFor(query), NO_RESULTS_ANNOUNCE_DELAY);
+    return () => clearTimeout(timer2);
+  }, [noResults, query]);
+  const announceNoResults = noResults && announcedFor === query;
   return /* @__PURE__ */ jsxs16("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
     label6 && /* @__PURE__ */ jsxs16("label", { id: labelId, htmlFor: inputId, className: label, children: [
       label6,
@@ -1544,7 +1550,7 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
                       className: item4,
                       onMouseDown: (event) => event.preventDefault(),
                       onMouseMove: () => !option2.disabled && setActiveIndex(index),
-                      onClick: () => select(option2),
+                      onClick: () => select2(option2),
                       children: [
                         option2.label,
                         isSelected && /* @__PURE__ */ jsx20("span", { className: itemIndicator, "aria-hidden": true, children: /* @__PURE__ */ jsx20(CheckIcon, { size: 16 }) })
@@ -1555,10 +1561,14 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
                 );
               })
             }
-          ) : /* @__PURE__ */ jsx20("div", { className: empty, role: "status", children: emptyMessage })
+          ) : (
+            // 스크린리더 알림은 아래의 항상 있는 status 영역이 맡는다 (여기는 화면 표시만)
+            /* @__PURE__ */ jsx20("div", { className: empty, children: emptyMessage })
+          )
         }
       ) })
     ] }),
+    /* @__PURE__ */ jsx20("span", { role: "status", className: visuallyHidden, children: announceNoResults ? emptyMessage : "" }),
     name && /* @__PURE__ */ jsx20("input", { type: "hidden", name, value: selectedValue ?? "" }),
     helperText3 && /* @__PURE__ */ jsx20("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
@@ -2025,6 +2035,7 @@ var root8 = "r2jefr0";
 
 // src/components/FileUpload/FileUpload.tsx
 import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+var REMOVED_ANNOUNCE_DELAY = 500;
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(bytes < 10 * 1024 ? 1 : 0)} KB`;
@@ -2075,6 +2086,8 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
   const selectButtonRef = useRef11(null);
   const removeButtonRefs = useRef11([]);
   const focusAfterRemove = useRef11(null);
+  const announceTimer = useRef11(void 0);
+  useEffect8(() => () => clearTimeout(announceTimer.current), []);
   const selectLabel = m.fileSelect ?? "\uD30C\uC77C \uC120\uD0DD";
   const reasonText = (rejection) => {
     const fileName2 = rejection.file.name;
@@ -2083,10 +2096,16 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
     if (rejection.reason === "type") return m.fileTypeNotAllowed?.(fileName2) ?? `${fileName2}: \uC62C\uB9B4 \uC218 \uC5C6\uB294 \uD615\uC2DD\uC774\uC5D0\uC694.`;
     return m.fileTooMany?.(maxFiles ?? 0) ?? `\uD30C\uC77C\uC740 ${maxFiles}\uAC1C\uAE4C\uC9C0 \uC62C\uB9B4 \uC218 \uC788\uC5B4\uC694.`;
   };
-  const commit = (next, message) => {
+  const announce = (message, delay = 0) => {
+    clearTimeout(announceTimer.current);
+    if (delay === 0) return setAnnouncement(message);
+    setAnnouncement("");
+    announceTimer.current = setTimeout(() => setAnnouncement(message), delay);
+  };
+  const commit = (next, message, delay = 0) => {
     if (!isControlled) setInnerFiles(next);
     onValueChange?.(next);
-    setAnnouncement(message);
+    announce(message, delay);
   };
   const addFiles = (incoming) => {
     if (disabled || incoming.length === 0) return;
@@ -2107,14 +2126,14 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
     const summary = m.filesSelected?.(next.length) ?? `\uD30C\uC77C ${next.length}\uAC1C \uC120\uD0DD\uB428`;
     const errors2 = [...new Set(rejected.map(reasonText))].join(" ");
     if (accepted.length > 0) commit(next, [summary, errors2].filter(Boolean).join(" "));
-    else setAnnouncement(errors2);
+    else announce(errors2);
   };
   const removeAt = (index) => {
     const removed = files[index];
     const next = files.filter((_, i) => i !== index);
     focusAfterRemove.current = Math.min(index, next.length - 1);
     setRejections([]);
-    commit(next, m.fileRemoved?.(removed.name) ?? `${removed.name} \uC0AD\uC81C\uB428`);
+    commit(next, m.fileRemoved?.(removed.name) ?? `${removed.name} \uC0AD\uC81C\uB428`, REMOVED_ANNOUNCE_DELAY);
   };
   useEffect8(() => {
     if (focusAfterRemove.current === null) return;
@@ -2203,7 +2222,7 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
     files.length > 0 && /* @__PURE__ */ jsx26("ul", { "aria-label": m.fileList ?? "\uC120\uD0DD\uD55C \uD30C\uC77C", className: list4, children: files.map((file, index) => /* @__PURE__ */ jsxs21("li", { className: item5, children: [
       /* @__PURE__ */ jsx26("span", { className: fileIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx26(FileIcon, { size: 16 }) }),
       /* @__PURE__ */ jsx26("span", { className: fileName, children: file.name }),
-      /* @__PURE__ */ jsx26("span", { className: fileSize, children: formatSize(file.size) }),
+      /* @__PURE__ */ jsx26("span", { id: `${baseId}-size-${index}`, className: fileSize, children: formatSize(file.size) }),
       /* @__PURE__ */ jsx26(
         IconButton,
         {
@@ -2212,6 +2231,7 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
           },
           size: "sm",
           "aria-label": m.fileRemove?.(file.name) ?? `${file.name} \uC0AD\uC81C`,
+          "aria-describedby": `${baseId}-size-${index}`,
           disabled,
           onClick: () => removeAt(index),
           children: /* @__PURE__ */ jsx26(XIcon6, {})
@@ -2267,9 +2287,9 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef23(
   }
 );
 var DropdownMenuItem = /* @__PURE__ */ forwardRef23(
-  function DropdownMenuItem2({ icon: icon6, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
+  function DropdownMenuItem2({ icon: icon7, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
     return /* @__PURE__ */ jsxs22(RadixMenu.Item, { ref, className: cx(item6, color === "danger" && danger, className), ...rest, children: [
-      icon6 && /* @__PURE__ */ jsx27("span", { className: icon4, "aria-hidden": true, children: icon6 }),
+      icon7 && /* @__PURE__ */ jsx27("span", { className: icon4, "aria-hidden": true, children: icon7 }),
       children,
       shortcut2 && /* @__PURE__ */ jsx27("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
     ] });
@@ -2304,9 +2324,9 @@ var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef23(
 );
 var DropdownMenuSub = RadixMenu.Sub;
 var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef23(
-  function DropdownMenuSubTrigger2({ icon: icon6, className, children, ...rest }, ref) {
+  function DropdownMenuSubTrigger2({ icon: icon7, className, children, ...rest }, ref) {
     return /* @__PURE__ */ jsxs22(RadixMenu.SubTrigger, { ref, className: cx(item6, subTrigger, className), ...rest, children: [
-      icon6 && /* @__PURE__ */ jsx27("span", { className: icon4, "aria-hidden": true, children: icon6 }),
+      icon7 && /* @__PURE__ */ jsx27("span", { className: icon4, "aria-hidden": true, children: icon7 }),
       children,
       /* @__PURE__ */ jsx27("span", { className: subChevron, "aria-hidden": true, children: /* @__PURE__ */ jsx27(ChevronRightIcon3, { size: 16 }) })
     ] });
@@ -2331,7 +2351,7 @@ var DropdownMenuSubContent = /* @__PURE__ */ forwardRef23(
 );
 
 // src/components/NumberInput/NumberInput.tsx
-import { forwardRef as forwardRef24, useEffect as useEffect9, useId as useId10, useRef as useRef12 } from "react";
+import { forwardRef as forwardRef24, useEffect as useEffect9, useId as useId10, useRef as useRef12, useState as useState10 } from "react";
 import { MinusIcon as MinusIcon2, PlusIcon } from "@bestow-ui/icons";
 
 // src/components/NumberInput/NumberInput.css.ts
@@ -2418,9 +2438,12 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
       if (parse(field4.raw) !== next) setRaw(toRaw(next));
     }, [value3]);
     const current2 = parse(field4.raw);
-    const setValue = (next) => {
+    const valueText = (n) => `${format2(toRaw(n))}${unit2 ?? ""}`;
+    const [announcement, setAnnouncement] = useState10("");
+    const setValue = (next, announce = true) => {
       setRaw(toRaw(next));
       emit(next);
+      if (announce) setAnnouncement(valueText(next));
     };
     const stepBy = (delta) => {
       if (disabled || readOnly) return;
@@ -2476,13 +2499,17 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
           "aria-valuenow": current2 ?? void 0,
           "aria-valuemin": min,
           "aria-valuemax": max,
-          "aria-valuetext": current2 === null ? void 0 : `${field4.display}${unit2 ?? ""}`,
+          "aria-valuetext": current2 === null ? void 0 : valueText(current2),
           value: field4.display,
-          onChange: field4.onChange,
+          onChange: (event) => {
+            setAnnouncement("");
+            field4.onChange(event);
+          },
           onKeyDown: handleKeyDown,
           onBlur: (event) => {
-            if (current2 !== null && clamp(current2) !== current2) setValue(clamp(current2));
+            if (current2 !== null && clamp(current2) !== current2) setValue(clamp(current2), false);
             else if (current2 === null && field4.raw !== "") setRaw("");
+            setAnnouncement("");
             onBlur?.(event);
           },
           size,
@@ -2497,14 +2524,15 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
           ...rest
         }
       ),
-      name && /* @__PURE__ */ jsx28("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) })
+      name && /* @__PURE__ */ jsx28("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) }),
+      /* @__PURE__ */ jsx28("span", { "aria-live": "assertive", "aria-atomic": "true", className: visuallyHidden, children: announcement })
     ] });
   }
 );
 
 // src/components/Pagination/Pagination.tsx
 import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon4 } from "@bestow-ui/icons";
-import { forwardRef as forwardRef25, useState as useState10 } from "react";
+import { forwardRef as forwardRef25, useState as useState11 } from "react";
 
 // src/components/Pagination/getPaginationItems.ts
 var range = (start, end2) => end2 < start ? [] : Array.from({ length: end2 - start + 1 }, (_, i) => start + i);
@@ -2551,7 +2579,7 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
   "aria-label": ariaLabelProp,
   ...rest
 }, ref) {
-  const [uncontrolledPage, setUncontrolledPage] = useState10(defaultPage);
+  const [uncontrolledPage, setUncontrolledPage] = useState11(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`);
@@ -2604,6 +2632,7 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
 
 // src/components/PhoneNumberInput/PhoneNumberInput.tsx
 import { forwardRef as forwardRef26, useRef as useRef13 } from "react";
+import { formatPhoneNumber, phoneNumberMaxDigits } from "@bestow-ui/korean-utils";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var sanitize3 = (input6) => {
   const digits = input6.replace(/\D/g, "");
@@ -2656,7 +2685,7 @@ var PhoneNumberInput = /* @__PURE__ */ forwardRef26(
 );
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { forwardRef as forwardRef27, useId as useId11, useState as useState11 } from "react";
+import { forwardRef as forwardRef27, useId as useId11, useState as useState12 } from "react";
 
 // src/components/RadioGroup/RadioGroup.css.ts
 import { createRuntimeFn as _7a46813 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -2689,7 +2718,7 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
     className
   } = props;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState11(defaultValue ?? "");
+  const [innerValue, setInnerValue] = useState12(defaultValue ?? "");
   const current2 = isControlled ? value3 ?? "" : innerValue;
   const generatedId = useId11();
   const baseId = id ?? generatedId;
@@ -2756,7 +2785,7 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
 });
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { forwardRef as forwardRef28, useId as useId12, useRef as useRef14, useState as useState12 } from "react";
+import { forwardRef as forwardRef28, useId as useId12, useRef as useRef14, useState as useState13 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.css.ts
 import { createRuntimeFn as _7a46814 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -2784,13 +2813,13 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
       className
     } = props;
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = useState12(defaultValue ?? "");
+    const [innerValue, setInnerValue] = useState13(defaultValue ?? "");
     const current2 = isControlled ? value3 ?? "" : innerValue;
     const generatedId = useId12();
     const labelId = label6 ? `${id ?? generatedId}-label` : void 0;
     const itemRefs = useRef14([]);
     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);
@@ -2817,7 +2846,7 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
       if (target < 0) return;
       event.preventDefault();
       itemRefs.current[target]?.focus();
-      select(target);
+      select2(target);
     };
     const group = /* @__PURE__ */ jsxs26(
       "div",
@@ -2846,7 +2875,7 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
                 "data-state": checked ? "checked" : "unchecked",
                 "data-disabled": isEnabled(index) ? void 0 : "",
                 className: item8({ size, fullWidth }),
-                onClick: () => select(index),
+                onClick: () => select2(index),
                 onKeyDown: (event) => handleKeyDown(event, index),
                 children: [
                   option2.icon && /* @__PURE__ */ jsx32("span", { "aria-hidden": true, className: icon5, children: option2.icon }),
@@ -2868,12 +2897,91 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
   }
 );
 
-// src/components/Select/Select.tsx
-import * as RadixSelect from "@radix-ui/react-select";
+// src/components/NativeSelect/NativeSelect.tsx
 import { forwardRef as forwardRef29, useId as useId13 } from "react";
-import { CheckIcon as CheckIcon3, ChevronDownIcon as ChevronDownIcon4 } from "@bestow-ui/icons";
+import { ChevronDownIcon as ChevronDownIcon4 } from "@bestow-ui/icons";
+
+// src/components/NativeSelect/NativeSelect.css.ts
+import { createRuntimeFn as _7a46815 } from "@vanilla-extract/recipes/createRuntimeFn";
+var icon6 = /* @__PURE__ */ _7a46815({ defaultClassName: "_5silym5", variantClassNames: { size: { sm: "_5silym6", md: "_5silym7", lg: "_5silym8" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var select = /* @__PURE__ */ _7a46815({ defaultClassName: "_5silym1", variantClassNames: { size: { sm: "_5silym2", md: "_5silym3", lg: "_5silym4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var wrapper = "_5silym0";
+
+// src/components/NativeSelect/NativeSelect.tsx
 import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
-var Select = /* @__PURE__ */ forwardRef29(function Select2(props, ref) {
+var NativeSelect = /* @__PURE__ */ forwardRef29(function NativeSelect2({
+  options,
+  onValueChange,
+  onChange,
+  placeholder,
+  label: label6,
+  helperText: helperText3,
+  error,
+  size,
+  fullWidth,
+  required,
+  disabled,
+  id,
+  value: value3,
+  defaultValue,
+  className,
+  children,
+  "aria-describedby": ariaDescribedBy,
+  ...rest
+}, ref) {
+  const generatedId = useId13();
+  const selectId = id ?? generatedId;
+  const helperId = helperText3 ? `${selectId}-helper` : void 0;
+  const handleChange = (event) => {
+    onChange?.(event);
+    onValueChange?.(event.target.value);
+  };
+  return /* @__PURE__ */ jsxs27("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs27("label", { htmlFor: selectId, className: label, children: [
+      label6,
+      required && /* @__PURE__ */ jsx33("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs27(
+      "span",
+      {
+        className: cx(root3({ size, fullWidth }), wrapper),
+        "data-invalid": error || void 0,
+        "data-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ jsxs27(
+            "select",
+            {
+              ref,
+              id: selectId,
+              value: value3,
+              defaultValue: value3 === 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__ */ jsx33("option", { value: "", disabled: true, children: placeholder }),
+                options ? options.map((option2) => /* @__PURE__ */ jsx33("option", { value: option2.value, disabled: option2.disabled, children: option2.label }, option2.value)) : children
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx33(ChevronDownIcon4, { size: 16, className: icon6({ size }) })
+        ]
+      }
+    ),
+    helperText3 && /* @__PURE__ */ jsx33("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+  ] });
+});
+
+// src/components/Select/Select.tsx
+import * as RadixSelect from "@radix-ui/react-select";
+import { forwardRef as forwardRef30, useId as useId14 } from "react";
+import { CheckIcon as CheckIcon3, ChevronDownIcon as ChevronDownIcon5 } from "@bestow-ui/icons";
+import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
+var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
   const {
     options,
     value: value3,
@@ -2893,16 +3001,16 @@ var Select = /* @__PURE__ */ forwardRef29(function Select2(props, ref) {
     className
   } = props;
   const isControlled = "value" in props;
-  const generatedId = useId13();
+  const generatedId = useId14();
   const triggerId = id ?? generatedId;
   const helperId = helperText3 ? `${triggerId}-helper` : void 0;
   const portal2 = usePortalProps();
-  return /* @__PURE__ */ jsxs27("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs27("label", { htmlFor: triggerId, className: label, children: [
+  return /* @__PURE__ */ jsxs28("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs28("label", { htmlFor: triggerId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx33("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx34("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs27(
+    /* @__PURE__ */ jsxs28(
       RadixSelect.Root,
       {
         value: isControlled ? value3 ?? "" : void 0,
@@ -2912,7 +3020,7 @@ var Select = /* @__PURE__ */ forwardRef29(function Select2(props, ref) {
         required,
         name,
         children: [
-          /* @__PURE__ */ jsxs27(
+          /* @__PURE__ */ jsxs28(
             RadixSelect.Trigger,
             {
               ref,
@@ -2923,12 +3031,12 @@ var Select = /* @__PURE__ */ forwardRef29(function Select2(props, ref) {
               "data-invalid": error || void 0,
               className: cx(root3({ size, fullWidth }), trigger2, className),
               children: [
-                /* @__PURE__ */ jsx33("span", { className: value, children: /* @__PURE__ */ jsx33(RadixSelect.Value, { placeholder }) }),
-                /* @__PURE__ */ jsx33(RadixSelect.Icon, { className: icon3, children: /* @__PURE__ */ jsx33(ChevronDownIcon4, { size: 16 }) })
+                /* @__PURE__ */ jsx34("span", { className: value, children: /* @__PURE__ */ jsx34(RadixSelect.Value, { placeholder }) }),
+                /* @__PURE__ */ jsx34(RadixSelect.Icon, { className: icon3, children: /* @__PURE__ */ jsx34(ChevronDownIcon5, { size: 16 }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx33(RadixSelect.Portal, { children: /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(RadixSelect.Portal, { children: /* @__PURE__ */ jsx34(
             RadixSelect.Content,
             {
               position: "popper",
@@ -2936,15 +3044,15 @@ var Select = /* @__PURE__ */ forwardRef29(function Select2(props, ref) {
               collisionPadding: 8,
               className: cx(portal2.className, content5),
               style: portal2.style,
-              children: /* @__PURE__ */ jsx33(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ jsxs27(
+              children: /* @__PURE__ */ jsx34(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ jsxs28(
                 RadixSelect.Item,
                 {
                   value: option2.value,
                   disabled: option2.disabled,
                   className: item4,
                   children: [
-                    /* @__PURE__ */ jsx33(RadixSelect.ItemText, { children: option2.label }),
-                    /* @__PURE__ */ jsx33(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx33(CheckIcon3, { size: 16 }) })
+                    /* @__PURE__ */ jsx34(RadixSelect.ItemText, { children: option2.label }),
+                    /* @__PURE__ */ jsx34(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx34(CheckIcon3, { size: 16 }) })
                   ]
                 },
                 option2.value
@@ -2954,19 +3062,19 @@ var Select = /* @__PURE__ */ forwardRef29(function Select2(props, ref) {
         ]
       }
     ),
-    helperText3 && /* @__PURE__ */ jsx33("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    helperText3 && /* @__PURE__ */ jsx34("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
 
 // src/components/SkipLink/SkipLink.tsx
-import { forwardRef as forwardRef30 } from "react";
+import { forwardRef as forwardRef31 } from "react";
 
 // src/components/SkipLink/SkipLink.css.ts
 var skipLink = "_1t9jaar0";
 
 // src/components/SkipLink/SkipLink.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
-var SkipLink = /* @__PURE__ */ forwardRef30(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
+import { jsx as jsx35 } from "react/jsx-runtime";
+var SkipLink = /* @__PURE__ */ forwardRef31(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
   const m = useMessages();
   const handleClick = (event) => {
     onClick?.(event);
@@ -2978,28 +3086,28 @@ var SkipLink = /* @__PURE__ */ forwardRef30(function SkipLink2({ href = "#main",
     target.focus();
     target.scrollIntoView?.({ block: "start" });
   };
-  return /* @__PURE__ */ jsx34("a", { ref, href, className: cx(skipLink, className), onClick: handleClick, ...rest, children: children ?? m.skipToContent ?? "\uBCF8\uBB38 \uBC14\uB85C\uAC00\uAE30" });
+  return /* @__PURE__ */ jsx35("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
 import * as RadixSlider from "@radix-ui/react-slider";
-import { forwardRef as forwardRef31, useId as useId14, useState as useState13 } from "react";
+import { forwardRef as forwardRef32, useId as useId15, useState as useState14 } from "react";
 
 // src/components/Slider/Slider.css.ts
-import { createRuntimeFn as _7a46815 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46816 } from "@vanilla-extract/recipes/createRuntimeFn";
 var field3 = "_126mzjm0";
 var header6 = "_126mzjm1";
 var helperText2 = "_126mzjm4";
 var label3 = "_126mzjm2";
 var range2 = "_126mzjmb";
-var root10 = /* @__PURE__ */ _7a46815({ defaultClassName: "_126mzjm5", variantClassNames: { size: { sm: "_126mzjm6", md: "_126mzjm7" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var thumb = /* @__PURE__ */ _7a46815({ defaultClassName: "_126mzjmc", variantClassNames: { size: { sm: "_126mzjmd", md: "_126mzjme" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var track = /* @__PURE__ */ _7a46815({ defaultClassName: "_126mzjm8", variantClassNames: { size: { sm: "_126mzjm9", md: "_126mzjma" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var root10 = /* @__PURE__ */ _7a46816({ defaultClassName: "_126mzjm5", variantClassNames: { size: { sm: "_126mzjm6", md: "_126mzjm7" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var thumb = /* @__PURE__ */ _7a46816({ defaultClassName: "_126mzjmc", variantClassNames: { size: { sm: "_126mzjmd", md: "_126mzjme" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var track = /* @__PURE__ */ _7a46816({ defaultClassName: "_126mzjm8", variantClassNames: { size: { sm: "_126mzjm9", md: "_126mzjma" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var value2 = "_126mzjm3";
 
 // src/components/Slider/Slider.tsx
-import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
-var Slider = /* @__PURE__ */ forwardRef31(function Slider2(props, ref) {
+import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
   const {
     value: value3,
     defaultValue,
@@ -3020,12 +3128,12 @@ var Slider = /* @__PURE__ */ forwardRef31(function Slider2(props, ref) {
   } = props;
   const m = useMessages();
   const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
-  const generatedId = useId14();
+  const generatedId = useId15();
   const baseId = id ?? generatedId;
   const labelId = `${baseId}-label`;
   const helperId = `${baseId}-helper`;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState13(defaultValue ?? [min]);
+  const [innerValue, setInnerValue] = useState14(defaultValue ?? [min]);
   const current2 = isControlled ? value3 ?? [min] : innerValue;
   const isRange = current2.length > 1;
   const handleChange = (next) => {
@@ -3033,12 +3141,12 @@ var Slider = /* @__PURE__ */ forwardRef31(function Slider2(props, ref) {
     onValueChange?.(next);
   };
   const valueText = current2.map(formatValue).join(" \u2013 ");
-  return /* @__PURE__ */ jsxs28("div", { className: cx(field3, className), children: [
-    (label6 || showValue) && /* @__PURE__ */ jsxs28("div", { className: header6, children: [
-      label6 && /* @__PURE__ */ jsx35("span", { id: labelId, className: label3, children: label6 }),
-      showValue && /* @__PURE__ */ jsx35("span", { className: value2, "aria-hidden": true, children: valueText })
+  return /* @__PURE__ */ jsxs29("div", { className: cx(field3, className), children: [
+    (label6 || showValue) && /* @__PURE__ */ jsxs29("div", { className: header6, children: [
+      label6 && /* @__PURE__ */ jsx36("span", { id: labelId, className: label3, children: label6 }),
+      showValue && /* @__PURE__ */ jsx36("span", { className: value2, "aria-hidden": true, children: valueText })
     ] }),
-    /* @__PURE__ */ jsxs28(
+    /* @__PURE__ */ jsxs29(
       RadixSlider.Root,
       {
         ref,
@@ -3051,10 +3159,10 @@ var Slider = /* @__PURE__ */ forwardRef31(function Slider2(props, ref) {
         className: root10({ size }),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx35(RadixSlider.Track, { className: track({ size }), children: /* @__PURE__ */ jsx35(RadixSlider.Range, { className: range2 }) }),
+          /* @__PURE__ */ jsx36(RadixSlider.Track, { className: track({ size }), children: /* @__PURE__ */ jsx36(RadixSlider.Range, { className: range2 }) }),
           current2.map((thumbValue, index) => {
             const thumbLabelId = `${baseId}-thumb-${index}`;
-            return /* @__PURE__ */ jsx35(
+            return /* @__PURE__ */ jsx36(
               RadixSlider.Thumb,
               {
                 className: thumb({ size }),
@@ -3069,32 +3177,32 @@ var Slider = /* @__PURE__ */ forwardRef31(function Slider2(props, ref) {
         ]
       }
     ),
-    isRange && current2.map((_, index) => /* @__PURE__ */ jsxs28("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
+    isRange && current2.map((_, index) => /* @__PURE__ */ jsxs29("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
       label6 ? "" : ariaLabel ? `${ariaLabel} ` : "",
       thumbLabels[index] ?? `${index + 1}`
     ] }, index)),
-    helperText3 && /* @__PURE__ */ jsx35("span", { id: helperId, className: helperText2, children: helperText3 })
+    helperText3 && /* @__PURE__ */ jsx36("span", { id: helperId, className: helperText2, children: helperText3 })
   ] });
 });
 
 // src/components/Stepper/Stepper.tsx
-import { forwardRef as forwardRef32 } from "react";
+import { forwardRef as forwardRef33 } from "react";
 import { CheckIcon as CheckIcon4 } from "@bestow-ui/icons";
 
 // src/components/Stepper/Stepper.css.ts
-import { createRuntimeFn as _7a46816 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46817 } from "@vanilla-extract/recipes/createRuntimeFn";
 var description5 = "kervhmh";
-var indicator2 = /* @__PURE__ */ _7a46816({ defaultClassName: "kervhm6", variantClassNames: { status: { complete: "kervhm7", current: "kervhm8", upcoming: "kervhm9" } }, defaultVariants: {}, compoundVariants: [] });
-var label4 = /* @__PURE__ */ _7a46816({ defaultClassName: "kervhmd", variantClassNames: { status: { complete: "kervhme", current: "kervhmf", upcoming: "kervhmg" } }, defaultVariants: {}, compoundVariants: [] });
-var root11 = /* @__PURE__ */ _7a46816({ defaultClassName: "kervhm0", variantClassNames: { orientation: { horizontal: "kervhm1", vertical: "kervhm2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
-var step = /* @__PURE__ */ _7a46816({ defaultClassName: "kervhm3", variantClassNames: { orientation: { horizontal: "kervhm4", vertical: "kervhm5" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
-var text2 = /* @__PURE__ */ _7a46816({ defaultClassName: "kervhma", variantClassNames: { orientation: { horizontal: "kervhmb", vertical: "kervhmc" } }, defaultVariants: {}, compoundVariants: [] });
+var indicator2 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhm6", variantClassNames: { status: { complete: "kervhm7", current: "kervhm8", upcoming: "kervhm9" } }, defaultVariants: {}, compoundVariants: [] });
+var label4 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhmd", variantClassNames: { status: { complete: "kervhme", current: "kervhmf", upcoming: "kervhmg" } }, defaultVariants: {}, compoundVariants: [] });
+var root11 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhm0", variantClassNames: { orientation: { horizontal: "kervhm1", vertical: "kervhm2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
+var step = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhm3", variantClassNames: { orientation: { horizontal: "kervhm4", vertical: "kervhm5" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
+var text2 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhma", variantClassNames: { orientation: { horizontal: "kervhmb", vertical: "kervhmc" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/Stepper/Stepper.tsx
-import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
-var Stepper = /* @__PURE__ */ forwardRef32(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
+import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+var Stepper = /* @__PURE__ */ forwardRef33(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
   const m = useMessages();
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "ol",
     {
       ref,
@@ -3103,24 +3211,24 @@ var Stepper = /* @__PURE__ */ forwardRef32(function Stepper2({ steps, current: c
       ...rest,
       children: steps.map((step2, index) => {
         const status = index < current2 ? "complete" : index === current2 ? "current" : "upcoming";
-        return /* @__PURE__ */ jsxs29(
+        return /* @__PURE__ */ jsxs30(
           "li",
           {
             className: step({ orientation }),
             "data-status": status,
             "aria-current": status === "current" ? "step" : void 0,
             children: [
-              /* @__PURE__ */ jsx36("span", { className: indicator2({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ jsx36(CheckIcon4, { size: 16, strokeWidth: 2.5 }) : index + 1 }),
-              /* @__PURE__ */ jsxs29("span", { className: text2({ orientation }), children: [
-                /* @__PURE__ */ jsxs29("span", { className: label4({ status }), children: [
+              /* @__PURE__ */ jsx37("span", { className: indicator2({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ jsx37(CheckIcon4, { size: 16, strokeWidth: 2.5 }) : index + 1 }),
+              /* @__PURE__ */ jsxs30("span", { className: text2({ orientation }), children: [
+                /* @__PURE__ */ jsxs30("span", { className: label4({ status }), children: [
                   step2.label,
-                  status === "complete" && /* @__PURE__ */ jsxs29("span", { className: visuallyHidden, children: [
+                  status === "complete" && /* @__PURE__ */ jsxs30("span", { className: visuallyHidden, children: [
                     " (",
                     m.stepCompleted ?? "\uC644\uB8CC",
                     ")"
                   ] })
                 ] }),
-                step2.description && /* @__PURE__ */ jsx36("span", { className: description5, children: step2.description })
+                step2.description && /* @__PURE__ */ jsx37("span", { className: description5, children: step2.description })
               ] })
             ]
           },
@@ -3132,52 +3240,125 @@ var Stepper = /* @__PURE__ */ forwardRef32(function Stepper2({ steps, current: c
 });
 
 // src/components/Switch/Switch.tsx
-import * as RadixSwitch from "@radix-ui/react-switch";
-import { forwardRef as forwardRef33, useId as useId15 } from "react";
+import { forwardRef as forwardRef34, useEffect as useEffect10, useId as useId16, useRef as useRef15, useState as useState15 } from "react";
 
 // src/components/Switch/Switch.css.ts
-import { createRuntimeFn as _7a46817 } from "@vanilla-extract/recipes/createRuntimeFn";
-var label5 = "o33ul29";
-var root12 = /* @__PURE__ */ _7a46817({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var thumb2 = /* @__PURE__ */ _7a46817({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var track2 = /* @__PURE__ */ _7a46817({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+import { createRuntimeFn as _7a46818 } from "@vanilla-extract/recipes/createRuntimeFn";
+var bubbleInput = /* @__PURE__ */ _7a46818({ defaultClassName: "o33ul29", variantClassNames: { size: { sm: "o33ul2a", md: "o33ul2b" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var label5 = "o33ul2c";
+var root12 = /* @__PURE__ */ _7a46818({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var thumb2 = /* @__PURE__ */ _7a46818({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var track2 = /* @__PURE__ */ _7a46818({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/Switch/Switch.tsx
-import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
-var Switch = /* @__PURE__ */ forwardRef33(function Switch2({ label: label6, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
-  const generatedId = useId15();
+import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
+function setNativeChecked(input6, checked) {
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "checked")?.set?.call(input6, checked);
+}
+var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
+  label: label6,
+  size,
+  id,
+  className,
+  disabled,
+  required,
+  name,
+  value: value3 = "on",
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  "aria-label": ariaLabel
+}, ref) {
+  const generatedId = useId16();
   const switchId = id ?? generatedId;
-  return /* @__PURE__ */ jsxs30("span", { className: cx(root12({ size }), className), "data-disabled": disabled || void 0, children: [
-    /* @__PURE__ */ jsx37(
-      RadixSwitch.Root,
+  const [uncontrolled, setUncontrolled] = useState15(defaultChecked ?? false);
+  const isControlled = checkedProp !== void 0;
+  const checked = isControlled ? checkedProp : uncontrolled;
+  const buttonRef = useRef15(null);
+  const inputRef = useRef15(null);
+  const [inForm, setInForm] = useState15(true);
+  const userToggled = useRef15(false);
+  const setChecked = (next) => {
+    if (!isControlled) setUncontrolled(next);
+    if (next !== checked) onCheckedChange?.(next);
+  };
+  const setCheckedRef = useRef15(setChecked);
+  setCheckedRef.current = setChecked;
+  useEffect10(() => {
+    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);
+  }, []);
+  useEffect10(() => {
+    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__ */ jsxs31("span", { className: cx(root12({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsx38(
+      "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: value3,
         className: track2({ size }),
-        ...rest,
-        children: /* @__PURE__ */ jsx37(RadixSwitch.Thumb, { className: thumb2({ size }) })
+        onClick: handleClick,
+        children: /* @__PURE__ */ jsx38("span", { className: thumb2({ size }), "data-state": state, "data-disabled": disabled ? "" : void 0 })
+      }
+    ),
+    inForm && /* @__PURE__ */ jsx38(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        "aria-hidden": true,
+        tabIndex: -1,
+        defaultChecked: checked,
+        required,
+        disabled,
+        name,
+        value: value3,
+        className: bubbleInput({ size })
       }
     ),
-    label6 && /* @__PURE__ */ jsx37("label", { htmlFor: switchId, className: label5, children: label6 })
+    label6 && /* @__PURE__ */ jsx38("label", { htmlFor: switchId, className: label5, children: label6 })
   ] });
 });
 
 // src/components/Table/Table.tsx
 import {
   createContext as createContext3,
-  forwardRef as forwardRef34,
+  forwardRef as forwardRef35,
   useContext as useContext3,
-  useId as useId16
+  useId as useId17
 } from "react";
 import { ArrowDownIcon, ArrowUpIcon } from "@bestow-ui/icons";
 
 // src/components/Table/Table.css.ts
-import { createRuntimeFn as _7a46818 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46819 } from "@vanilla-extract/recipes/createRuntimeFn";
 var body3 = "l3ploy5";
 var caption = "l3ploy2";
-var cell2 = /* @__PURE__ */ _7a46818({ defaultClassName: "l3ploy9", variantClassNames: { size: { sm: "l3ploya", md: "l3ployb" }, align: { left: "l3ployc", center: "l3ployd", right: "l3ploye" } }, defaultVariants: { size: "md", align: "left" }, compoundVariants: [] });
+var cell2 = /* @__PURE__ */ _7a46819({ 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";
@@ -3193,10 +3374,10 @@ var striped = "l3ploy6";
 var table = "l3ploy1";
 
 // src/components/Table/Table.tsx
-import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
 var TableSizeContext = /* @__PURE__ */ createContext3("md");
 var TableSectionContext = /* @__PURE__ */ createContext3("body");
-var Table = /* @__PURE__ */ forwardRef34(function Table2({
+var Table = /* @__PURE__ */ forwardRef35(function Table2({
   size = "md",
   striped: striped2,
   stickyHeader: stickyHeader2,
@@ -3208,8 +3389,8 @@ var Table = /* @__PURE__ */ forwardRef34(function Table2({
   children,
   ...rest
 }, ref) {
-  const captionId = useId16();
-  return /* @__PURE__ */ jsx38(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx38(
+  const captionId = useId17();
+  return /* @__PURE__ */ jsx39(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx39(
     "div",
     {
       className: cx(container, containerClassName),
@@ -3218,7 +3399,7 @@ var Table = /* @__PURE__ */ forwardRef34(function Table2({
       role: "region",
       "aria-labelledby": caption2 ? captionId : void 0,
       "aria-label": caption2 ? void 0 : ariaLabel,
-      children: /* @__PURE__ */ jsxs31(
+      children: /* @__PURE__ */ jsxs32(
         "table",
         {
           ref,
@@ -3226,7 +3407,7 @@ var Table = /* @__PURE__ */ forwardRef34(function Table2({
           "aria-label": caption2 ? void 0 : ariaLabel,
           ...rest,
           children: [
-            caption2 && /* @__PURE__ */ jsx38("caption", { id: captionId, className: caption, children: caption2 }),
+            caption2 && /* @__PURE__ */ jsx39("caption", { id: captionId, className: caption, children: caption2 }),
             children
           ]
         }
@@ -3234,31 +3415,31 @@ var Table = /* @__PURE__ */ forwardRef34(function Table2({
     }
   ) });
 });
-var TableHeader = /* @__PURE__ */ forwardRef34(
+var TableHeader = /* @__PURE__ */ forwardRef35(
   function TableHeader2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx38(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ jsx38("thead", { ref, className: cx(header7, className), ...rest }) });
+    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ jsx39("thead", { ref, className: cx(header7, className), ...rest }) });
   }
 );
-var TableBody = /* @__PURE__ */ forwardRef34(
+var TableBody = /* @__PURE__ */ forwardRef35(
   function TableBody2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx38(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx38("tbody", { ref, className: cx(body3, className), ...rest }) });
+    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx39("tbody", { ref, className: cx(body3, className), ...rest }) });
   }
 );
-var TableFooter = /* @__PURE__ */ forwardRef34(
+var TableFooter = /* @__PURE__ */ forwardRef35(
   function TableFooter2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx38(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx38("tfoot", { ref, className: cx(footer3, className), ...rest }) });
+    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx39("tfoot", { ref, className: cx(footer3, className), ...rest }) });
   }
 );
-var TableRow = /* @__PURE__ */ forwardRef34(function TableRow2({ selected, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx38("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...rest });
+var TableRow = /* @__PURE__ */ forwardRef35(function TableRow2({ selected, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx39("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...rest });
 });
-var TableHead = /* @__PURE__ */ forwardRef34(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
+var TableHead = /* @__PURE__ */ forwardRef35(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
   const size = useContext3(TableSizeContext);
   const section = useContext3(TableSectionContext);
   const sortable = onSort !== void 0;
   const direction = sortDirection ?? "none";
   const SortIcon = direction === "descending" ? ArrowDownIcon : ArrowUpIcon;
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "th",
     {
       ref,
@@ -3270,17 +3451,17 @@ var TableHead = /* @__PURE__ */ forwardRef34(function TableHead2({ align, sortDi
         className
       ),
       ...rest,
-      children: sortable ? /* @__PURE__ */ jsxs31("button", { type: "button", className: sortButton, onClick: onSort, children: [
+      children: sortable ? /* @__PURE__ */ jsxs32("button", { type: "button", className: sortButton, onClick: onSort, children: [
         children,
-        /* @__PURE__ */ jsx38(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
+        /* @__PURE__ */ jsx39(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
       ] }) : children
     }
   );
 });
-var TableCell = /* @__PURE__ */ forwardRef34(function TableCell2({ align, className, ...rest }, ref) {
+var TableCell = /* @__PURE__ */ forwardRef35(function TableCell2({ align, className, ...rest }, ref) {
   const size = useContext3(TableSizeContext);
   const section = useContext3(TableSectionContext);
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "td",
     {
       ref,
@@ -3289,17 +3470,17 @@ var TableCell = /* @__PURE__ */ forwardRef34(function TableCell2({ align, classN
     }
   );
 });
-var TableEmpty = /* @__PURE__ */ forwardRef34(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsx38(TableRow, { children: /* @__PURE__ */ jsx38(TableCell, { ref, colSpan, className: cx(emptyCell, className), ...rest, children: /* @__PURE__ */ jsx38("div", { className: emptyContent, children }) }) });
+var TableEmpty = /* @__PURE__ */ forwardRef35(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx39(TableRow, { children: /* @__PURE__ */ jsx39(TableCell, { ref, colSpan, className: cx(emptyCell, className), ...rest, children: /* @__PURE__ */ jsx39("div", { className: emptyContent, children }) }) });
 });
 function TableSkeleton({ rows = 5, columns }) {
-  return /* @__PURE__ */ jsx38(Fragment6, { children: Array.from({ length: rows }, (_, row5) => /* @__PURE__ */ jsx38(TableRow, { "aria-hidden": true, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ jsx38(TableCell, { children: /* @__PURE__ */ jsx38(Skeleton, { width: column === 0 ? "60%" : "80%" }) }, column)) }, row5)) });
+  return /* @__PURE__ */ jsx39(Fragment6, { children: Array.from({ length: rows }, (_, row5) => /* @__PURE__ */ jsx39(TableRow, { "aria-hidden": true, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ jsx39(TableCell, { children: /* @__PURE__ */ jsx39(Skeleton, { width: column === 0 ? "60%" : "80%" }) }, column)) }, row5)) });
 }
 
 // src/components/Table/useTableSelection.ts
-import { useCallback, useState as useState14 } from "react";
+import { useCallback, useState as useState16 } from "react";
 function useTableSelection(initial = []) {
-  const [selected, setSelected] = useState14(initial);
+  const [selected, setSelected] = useState16(initial);
   const isSelected = useCallback((id) => selected.includes(id), [selected]);
   const toggle3 = useCallback((id, checked) => {
     setSelected((prev) => {
@@ -3329,54 +3510,54 @@ function useTableSelection(initial = []) {
 
 // src/components/Tabs/Tabs.tsx
 import * as RadixTabs from "@radix-ui/react-tabs";
-import { createContext as createContext4, forwardRef as forwardRef35, useContext as useContext4 } from "react";
+import { createContext as createContext4, forwardRef as forwardRef36, useContext as useContext4 } from "react";
 
 // src/components/Tabs/Tabs.css.ts
-import { createRuntimeFn as _7a46819 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46820 } from "@vanilla-extract/recipes/createRuntimeFn";
 var content10 = "fvhbtdb";
-var list6 = /* @__PURE__ */ _7a46819({ defaultClassName: "fvhbtd1", variantClassNames: { variant: { line: "fvhbtd2", soft: "fvhbtd3" } }, defaultVariants: { variant: "line" }, compoundVariants: [] });
+var list6 = /* @__PURE__ */ _7a46820({ defaultClassName: "fvhbtd1", variantClassNames: { variant: { line: "fvhbtd2", soft: "fvhbtd3" } }, defaultVariants: { variant: "line" }, compoundVariants: [] });
 var root13 = "fvhbtd0";
-var trigger3 = /* @__PURE__ */ _7a46819({ 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__ */ _7a46820({ 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
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var TabsStyleContext = /* @__PURE__ */ createContext4({ variant: "line", size: "md" });
-var Tabs = /* @__PURE__ */ forwardRef35(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
+var Tabs = /* @__PURE__ */ forwardRef36(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
   const controlled = "value" in props ? { value: props.value ?? "" } : {};
-  return /* @__PURE__ */ jsx39(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx39(RadixTabs.Root, { ref, className: cx(root13, className), ...props, ...controlled }) });
+  return /* @__PURE__ */ jsx40(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx40(RadixTabs.Root, { ref, className: cx(root13, className), ...props, ...controlled }) });
 });
-var TabsList = /* @__PURE__ */ forwardRef35(function TabsList2({ className, ...rest }, ref) {
+var TabsList = /* @__PURE__ */ forwardRef36(function TabsList2({ className, ...rest }, ref) {
   const { variant } = useContext4(TabsStyleContext);
-  return /* @__PURE__ */ jsx39(RadixTabs.List, { ref, className: cx(list6({ variant }), className), ...rest });
+  return /* @__PURE__ */ jsx40(RadixTabs.List, { ref, className: cx(list6({ variant }), className), ...rest });
 });
-var TabsTrigger = /* @__PURE__ */ forwardRef35(function TabsTrigger2({ className, ...rest }, ref) {
+var TabsTrigger = /* @__PURE__ */ forwardRef36(function TabsTrigger2({ className, ...rest }, ref) {
   const { variant, size } = useContext4(TabsStyleContext);
-  return /* @__PURE__ */ jsx39(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
+  return /* @__PURE__ */ jsx40(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
 });
-var TabsContent = /* @__PURE__ */ forwardRef35(function TabsContent2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx39(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
+var TabsContent = /* @__PURE__ */ forwardRef36(function TabsContent2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx40(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
 });
 
 // src/components/Textarea/Textarea.tsx
 import {
-  forwardRef as forwardRef36,
+  forwardRef as forwardRef37,
   useCallback as useCallback2,
-  useId as useId17,
-  useRef as useRef15,
-  useState as useState15
+  useId as useId18,
+  useRef as useRef16,
+  useState as useState17
 } from "react";
 
 // src/components/Textarea/Textarea.css.ts
-import { createRuntimeFn as _7a46820 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46821 } from "@vanilla-extract/recipes/createRuntimeFn";
 var count = "_1koawa9";
 var countOver = "_1koawaa";
 var defaultWidth = "_1koawa7";
 var footer4 = "_1koawa8";
-var textarea = /* @__PURE__ */ _7a46820({ 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__ */ _7a46821({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
 
 // src/components/Textarea/Textarea.tsx
-import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
-var Textarea = /* @__PURE__ */ forwardRef36(function Textarea2({
+import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
   label: label6,
   helperText: helperText3,
   error,
@@ -3397,11 +3578,11 @@ var Textarea = /* @__PURE__ */ forwardRef36(function Textarea2({
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = useId17();
+  const generatedId = useId18();
   const textareaId = id ?? generatedId;
   const helperId = helperText3 ? `${textareaId}-helper` : void 0;
-  const innerRef = useRef15(null);
-  const [uncontrolledLength, setUncontrolledLength] = useState15(() => String(defaultValue ?? "").length);
+  const innerRef = useRef16(null);
+  const [uncontrolledLength, setUncontrolledLength] = useState17(() => String(defaultValue ?? "").length);
   const length = value3 !== void 0 ? String(value3).length : uncontrolledLength;
   const fitHeight = useCallback2(() => {
     const el = innerRef.current;
@@ -3416,12 +3597,12 @@ var Textarea = /* @__PURE__ */ forwardRef36(function Textarea2({
     fitHeight();
     onChange?.(event);
   };
-  return /* @__PURE__ */ jsxs32("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs32("label", { htmlFor: textareaId, className: label, children: [
+  return /* @__PURE__ */ jsxs33("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs33("label", { htmlFor: textareaId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx40("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx41("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsx40(
+    /* @__PURE__ */ jsx41(
       "textarea",
       {
         ref: mergeRefs(innerRef, ref),
@@ -3443,36 +3624,36 @@ var Textarea = /* @__PURE__ */ forwardRef36(function Textarea2({
         ...rest
       }
     ),
-    (helperText3 || showCount) && /* @__PURE__ */ jsxs32("div", { className: footer4, children: [
-      helperText3 && /* @__PURE__ */ jsx40("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
-      showCount && /* @__PURE__ */ jsx40("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
+    (helperText3 || showCount) && /* @__PURE__ */ jsxs33("div", { className: footer4, children: [
+      helperText3 && /* @__PURE__ */ jsx41("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
+      showCount && /* @__PURE__ */ jsx41("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
     ] })
   ] });
 });
 
 // src/components/Toast/Toast.tsx
 import * as RadixToast from "@radix-ui/react-toast";
-import { createContext as createContext5, useCallback as useCallback3, useContext as useContext5, useMemo as useMemo4, useRef as useRef16, useState as useState16 } from "react";
+import { createContext as createContext5, useCallback as useCallback3, useContext as useContext5, useMemo as useMemo4, useRef as useRef17, useState as useState18 } from "react";
 import { XIcon as XIcon7 } from "@bestow-ui/icons";
 
 // src/components/Toast/Toast.css.ts
-import { createRuntimeFn as _7a46821 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46822 } from "@vanilla-extract/recipes/createRuntimeFn";
 var action2 = "_1g11zvx9";
 var close = "_1g11zvxa";
 var description6 = "_1g11zvx8";
 var title5 = "_1g11zvx7";
-var toast = /* @__PURE__ */ _7a46821({ defaultClassName: "_1g11zvx1", variantClassNames: { color: { primary: "_1g11zvx2", neutral: "_1g11zvx3", success: "_1g11zvx4", warning: "_1g11zvx5", danger: "_1g11zvx6" } }, defaultVariants: { color: "neutral" }, compoundVariants: [] });
+var toast = /* @__PURE__ */ _7a46822({ 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
-import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
 var REMOVE_DELAY = 500;
 var ToastContext = /* @__PURE__ */ createContext5(null);
 function ToastProvider({ children, duration = 5e3, label: labelProp }) {
   const m = useMessages();
   const label6 = labelProp ?? m.notifications ?? "\uC54C\uB9BC";
-  const [toasts, setToasts] = useState16([]);
-  const nextId = useRef16(0);
+  const [toasts, setToasts] = useState18([]);
+  const nextId = useRef17(0);
   const portal2 = usePortalProps();
   const toast2 = useCallback3((options) => {
     const id = nextId.current++;
@@ -3485,9 +3666,9 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
     setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
   }, []);
   const value3 = useMemo4(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
-  return /* @__PURE__ */ jsx41(ToastContext.Provider, { value: value3, children: /* @__PURE__ */ jsxs33(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
+  return /* @__PURE__ */ jsx42(ToastContext.Provider, { value: value3, children: /* @__PURE__ */ jsxs34(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
     children,
-    toasts.map(({ id, open, title: title6, description: description7, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ jsxs33(
+    toasts.map(({ id, open, title: title6, description: description7, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ jsxs34(
       RadixToast.Root,
       {
         open,
@@ -3497,15 +3678,15 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
         },
         className: toast({ color }),
         children: [
-          /* @__PURE__ */ jsx41(RadixToast.Title, { className: title5, children: title6 }),
-          description7 && /* @__PURE__ */ jsx41(RadixToast.Description, { className: description6, children: description7 }),
-          action3 && /* @__PURE__ */ jsx41(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ jsx41(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
-          /* @__PURE__ */ jsx41(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx41(XIcon7, { size: 16 }) })
+          /* @__PURE__ */ jsx42(RadixToast.Title, { className: title5, children: title6 }),
+          description7 && /* @__PURE__ */ jsx42(RadixToast.Description, { className: description6, children: description7 }),
+          action3 && /* @__PURE__ */ jsx42(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ jsx42(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
+          /* @__PURE__ */ jsx42(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx42(XIcon7, { size: 16 }) })
         ]
       },
       id
     )),
-    /* @__PURE__ */ jsx41(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
+    /* @__PURE__ */ jsx42(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
   ] }) });
 }
 function useToast() {
@@ -3522,7 +3703,7 @@ var arrow2 = "z7rufs1";
 var content11 = "z7rufs0";
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
 function Tooltip({
   content: content12,
   children,
@@ -3537,9 +3718,9 @@ function Tooltip({
 }) {
   const portal2 = usePortalProps();
   if (disabled || content12 == null || content12 === "") return children;
-  return /* @__PURE__ */ jsx42(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs34(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx42(RadixTooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx42(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsx43(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs35(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx43(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx43(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs35(
       RadixTooltip.Content,
       {
         side,
@@ -3550,7 +3731,7 @@ function Tooltip({
         style: portal2.style,
         children: [
           content12,
-          /* @__PURE__ */ jsx42(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
+          /* @__PURE__ */ jsx43(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
         ]
       }
     ) })
@@ -3558,7 +3739,7 @@ function Tooltip({
 }
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-import { forwardRef as forwardRef37, useEffect as useEffect10, useId as useId18, useRef as useRef17, useState as useState17 } from "react";
+import { forwardRef as forwardRef38, useEffect as useEffect11, useId as useId19, useRef as useRef18, useState as useState19 } from "react";
 
 // src/components/VerificationCodeInput/VerificationCodeInput.css.ts
 var input5 = "ea01812";
@@ -3568,9 +3749,9 @@ var slots = "ea01811";
 var timer = "ea01814";
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
 var formatTime = (seconds) => `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
-var VerificationCodeInput = /* @__PURE__ */ forwardRef37(
+var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
   function VerificationCodeInput2(props, ref) {
     const {
       length = 6,
@@ -3597,23 +3778,23 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef37(
     const label6 = 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 = useId18();
+    const generatedId = useId19();
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
     const statusId = `${inputId}-status`;
-    const inputRef = useRef17(null);
+    const inputRef = useRef18(null);
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = useState17(defaultValue ?? "");
+    const [innerValue, setInnerValue] = useState19(defaultValue ?? "");
     const code = (isControlled ? value3 ?? "" : innerValue).slice(0, length);
-    const [focused, setFocused] = useState17(false);
-    const [endAt, setEndAt] = useState17(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
-    const [remaining, setRemaining] = useState17(expiresIn ?? 0);
+    const [focused, setFocused] = useState19(false);
+    const [endAt, setEndAt] = useState19(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
+    const [remaining, setRemaining] = useState19(expiresIn ?? 0);
     const expired = expiresIn !== void 0 && remaining <= 0;
-    const onExpireRef = useRef17(onExpire);
-    useEffect10(() => {
+    const onExpireRef = useRef18(onExpire);
+    useEffect11(() => {
       onExpireRef.current = onExpire;
     });
-    useEffect10(() => {
+    useEffect11(() => {
       if (endAt === null) return;
       const tick = () => {
         const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
@@ -3648,17 +3829,17 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef37(
     };
     const description7 = helperText3 ?? m.verificationCodeHint?.(length, type) ?? `${length}\uC790\uB9AC ${type === "numeric" ? "\uC22B\uC790" : "\uBB38\uC790"}\uB97C \uC785\uB825\uD558\uC138\uC694.`;
     const activeIndex = Math.min(code.length, length - 1);
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs36(
       "div",
       {
         className: cx(field, className),
         "data-invalid": error || void 0,
         "data-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ jsx43("label", { htmlFor: inputId, className: label, children: label6 }),
-          /* @__PURE__ */ jsxs35("div", { className: row4, children: [
-            /* @__PURE__ */ jsxs35("div", { className: slots, children: [
-              /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx44("label", { htmlFor: inputId, className: label, children: label6 }),
+          /* @__PURE__ */ jsxs36("div", { className: row4, children: [
+            /* @__PURE__ */ jsxs36("div", { className: slots, children: [
+              /* @__PURE__ */ jsx44(
                 "input",
                 {
                   ref: mergeRefs(ref, inputRef),
@@ -3678,7 +3859,7 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef37(
                   className: input5
                 }
               ),
-              Array.from({ length }, (_, index) => /* @__PURE__ */ jsx43(
+              Array.from({ length }, (_, index) => /* @__PURE__ */ jsx44(
                 "div",
                 {
                   className: slot,
@@ -3689,12 +3870,12 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef37(
                 index
               ))
             ] }),
-            expiresIn !== void 0 && /* @__PURE__ */ jsx43("span", { role: "timer", className: timer, children: formatTime(remaining) }),
-            onResend && /* @__PURE__ */ jsx43(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
+            expiresIn !== void 0 && /* @__PURE__ */ jsx44("span", { role: "timer", className: timer, children: formatTime(remaining) }),
+            onResend && /* @__PURE__ */ jsx44(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
           ] }),
-          /* @__PURE__ */ jsx43("p", { id: helperId, className: helperText({ error }), children: description7 }),
-          /* @__PURE__ */ jsx43("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
-          name && /* @__PURE__ */ jsx43("input", { type: "hidden", name, value: code })
+          /* @__PURE__ */ jsx44("p", { id: helperId, className: helperText({ error }), children: description7 }),
+          /* @__PURE__ */ jsx44("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
+          name && /* @__PURE__ */ jsx44("input", { type: "hidden", name, value: code })
         ]
       }
     );
@@ -3739,6 +3920,7 @@ export {
   LocaleProvider,
   Modal,
   ModalClose,
+  NativeSelect,
   NumberInput,
   Pagination,
   PhoneNumberInput,