@bestow-ui/react 1.3.0 → 1.5.0

package/dist/index.cjs

@@ -50,6 +50,7 @@ __export(src_exports, {
   Checkbox: () => Checkbox,
   Combobox: () => Combobox,
   DatePicker: () => DatePicker,
+  DateRangePicker: () => DateRangePicker,
   DescriptionList: () => DescriptionList,
   Divider: () => Divider,
   Drawer: () => Drawer,
@@ -116,6 +117,7 @@ __export(src_exports, {
   contrastRatio: () => contrastRatio,
   createIntentColors: () => createIntentColors,
   createTheme: () => createTheme,
+  dateRangePresets: () => dateRangePresets,
   en: () => en,
   focusField: () => focusField,
   formatBusinessNumber: () => formatBusinessNumber,
@@ -126,6 +128,8 @@ __export(src_exports, {
   isValidBusinessNumber: () => isValidBusinessNumber,
   kakaoPostcodeProvider: () => kakaoPostcodeProvider,
   parseISODate: () => parseISODate,
+  presetRange: () => presetRange,
+  strongInputBorders: () => strongInputBorders,
   themeClass: () => themeClass,
   toISODate: () => toISODate,
   useMessages: () => useMessages,
@@ -139,7 +143,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/theme/contract.css.ts
 var themeClass = { light: "tkagtb0", dark: "tkagtb1" };
-var vars = { space: { "0": "var(--bestow-space-0)", "1": "var(--bestow-space-1)", "2": "var(--bestow-space-2)", "3": "var(--bestow-space-3)", "4": "var(--bestow-space-4)", "5": "var(--bestow-space-5)", "6": "var(--bestow-space-6)", "8": "var(--bestow-space-8)", "10": "var(--bestow-space-10)", "12": "var(--bestow-space-12)", "16": "var(--bestow-space-16)" }, radius: { none: "var(--bestow-radius-none)", sm: "var(--bestow-radius-sm)", md: "var(--bestow-radius-md)", lg: "var(--bestow-radius-lg)", xl: "var(--bestow-radius-xl)", full: "var(--bestow-radius-full)" }, font: { family: { sans: "var(--bestow-font-family-sans)", mono: "var(--bestow-font-family-mono)" }, size: { xs: "var(--bestow-font-size-xs)", sm: "var(--bestow-font-size-sm)", md: "var(--bestow-font-size-md)", lg: "var(--bestow-font-size-lg)", xl: "var(--bestow-font-size-xl)", "2xl": "var(--bestow-font-size-2xl)", "3xl": "var(--bestow-font-size-3xl)", "4xl": "var(--bestow-font-size-4xl)" }, weight: { regular: "var(--bestow-font-weight-regular)", medium: "var(--bestow-font-weight-medium)", semibold: "var(--bestow-font-weight-semibold)", bold: "var(--bestow-font-weight-bold)" }, lineHeight: { tight: "var(--bestow-font-line-height-tight)", normal: "var(--bestow-font-line-height-normal)", relaxed: "var(--bestow-font-line-height-relaxed)" } }, duration: { fast: "var(--bestow-duration-fast)", normal: "var(--bestow-duration-normal)", slow: "var(--bestow-duration-slow)" }, zIndex: { overlay: "var(--bestow-z-index-overlay)", modal: "var(--bestow-z-index-modal)", dropdown: "var(--bestow-z-index-dropdown)", toast: "var(--bestow-z-index-toast)", tooltip: "var(--bestow-z-index-tooltip)" }, color: { bg: { "default": "var(--bestow-color-bg-default)", subtle: "var(--bestow-color-bg-subtle)", muted: "var(--bestow-color-bg-muted)", inverse: "var(--bestow-color-bg-inverse)", overlay: "var(--bestow-color-bg-overlay)" }, fg: { "default": "var(--bestow-color-fg-default)", muted: "var(--bestow-color-fg-muted)", subtle: "var(--bestow-color-fg-subtle)", inverse: "var(--bestow-color-fg-inverse)" }, border: { "default": "var(--bestow-color-border-default)", strong: "var(--bestow-color-border-strong)", focus: "var(--bestow-color-border-focus)" }, primary: { solid: "var(--bestow-color-primary-solid)", solidHover: "var(--bestow-color-primary-solid-hover)", contrast: "var(--bestow-color-primary-contrast)", subtle: "var(--bestow-color-primary-subtle)", subtleHover: "var(--bestow-color-primary-subtle-hover)", text: "var(--bestow-color-primary-text)" }, neutral: { solid: "var(--bestow-color-neutral-solid)", solidHover: "var(--bestow-color-neutral-solid-hover)", contrast: "var(--bestow-color-neutral-contrast)", subtle: "var(--bestow-color-neutral-subtle)", subtleHover: "var(--bestow-color-neutral-subtle-hover)", text: "var(--bestow-color-neutral-text)" }, danger: { solid: "var(--bestow-color-danger-solid)", solidHover: "var(--bestow-color-danger-solid-hover)", contrast: "var(--bestow-color-danger-contrast)", subtle: "var(--bestow-color-danger-subtle)", subtleHover: "var(--bestow-color-danger-subtle-hover)", text: "var(--bestow-color-danger-text)" }, success: { solid: "var(--bestow-color-success-solid)", solidHover: "var(--bestow-color-success-solid-hover)", contrast: "var(--bestow-color-success-contrast)", subtle: "var(--bestow-color-success-subtle)", subtleHover: "var(--bestow-color-success-subtle-hover)", text: "var(--bestow-color-success-text)" }, warning: { solid: "var(--bestow-color-warning-solid)", solidHover: "var(--bestow-color-warning-solid-hover)", contrast: "var(--bestow-color-warning-contrast)", subtle: "var(--bestow-color-warning-subtle)", subtleHover: "var(--bestow-color-warning-subtle-hover)", text: "var(--bestow-color-warning-text)" } }, shadow: { sm: "var(--bestow-shadow-sm)", md: "var(--bestow-shadow-md)", lg: "var(--bestow-shadow-lg)" } };
+var vars = { space: { "0": "var(--bestow-space-0)", "1": "var(--bestow-space-1)", "2": "var(--bestow-space-2)", "3": "var(--bestow-space-3)", "4": "var(--bestow-space-4)", "5": "var(--bestow-space-5)", "6": "var(--bestow-space-6)", "8": "var(--bestow-space-8)", "10": "var(--bestow-space-10)", "12": "var(--bestow-space-12)", "16": "var(--bestow-space-16)" }, radius: { none: "var(--bestow-radius-none)", sm: "var(--bestow-radius-sm)", md: "var(--bestow-radius-md)", lg: "var(--bestow-radius-lg)", xl: "var(--bestow-radius-xl)", full: "var(--bestow-radius-full)" }, font: { family: { sans: "var(--bestow-font-family-sans)", mono: "var(--bestow-font-family-mono)" }, size: { xs: "var(--bestow-font-size-xs)", sm: "var(--bestow-font-size-sm)", md: "var(--bestow-font-size-md)", lg: "var(--bestow-font-size-lg)", xl: "var(--bestow-font-size-xl)", "2xl": "var(--bestow-font-size-2xl)", "3xl": "var(--bestow-font-size-3xl)", "4xl": "var(--bestow-font-size-4xl)" }, weight: { regular: "var(--bestow-font-weight-regular)", medium: "var(--bestow-font-weight-medium)", semibold: "var(--bestow-font-weight-semibold)", bold: "var(--bestow-font-weight-bold)" }, lineHeight: { tight: "var(--bestow-font-line-height-tight)", normal: "var(--bestow-font-line-height-normal)", relaxed: "var(--bestow-font-line-height-relaxed)" } }, duration: { fast: "var(--bestow-duration-fast)", normal: "var(--bestow-duration-normal)", slow: "var(--bestow-duration-slow)" }, zIndex: { overlay: "var(--bestow-z-index-overlay)", modal: "var(--bestow-z-index-modal)", dropdown: "var(--bestow-z-index-dropdown)", toast: "var(--bestow-z-index-toast)", tooltip: "var(--bestow-z-index-tooltip)" }, color: { bg: { "default": "var(--bestow-color-bg-default)", subtle: "var(--bestow-color-bg-subtle)", muted: "var(--bestow-color-bg-muted)", inverse: "var(--bestow-color-bg-inverse)", overlay: "var(--bestow-color-bg-overlay)" }, fg: { "default": "var(--bestow-color-fg-default)", muted: "var(--bestow-color-fg-muted)", subtle: "var(--bestow-color-fg-subtle)", inverse: "var(--bestow-color-fg-inverse)" }, border: { "default": "var(--bestow-color-border-default)", strong: "var(--bestow-color-border-strong)", focus: "var(--bestow-color-border-focus)", input: "var(--bestow-color-border-input)", inputHover: "var(--bestow-color-border-input-hover)", control: "var(--bestow-color-border-control)" }, primary: { solid: "var(--bestow-color-primary-solid)", solidHover: "var(--bestow-color-primary-solid-hover)", contrast: "var(--bestow-color-primary-contrast)", subtle: "var(--bestow-color-primary-subtle)", subtleHover: "var(--bestow-color-primary-subtle-hover)", text: "var(--bestow-color-primary-text)" }, neutral: { solid: "var(--bestow-color-neutral-solid)", solidHover: "var(--bestow-color-neutral-solid-hover)", contrast: "var(--bestow-color-neutral-contrast)", subtle: "var(--bestow-color-neutral-subtle)", subtleHover: "var(--bestow-color-neutral-subtle-hover)", text: "var(--bestow-color-neutral-text)" }, danger: { solid: "var(--bestow-color-danger-solid)", solidHover: "var(--bestow-color-danger-solid-hover)", contrast: "var(--bestow-color-danger-contrast)", subtle: "var(--bestow-color-danger-subtle)", subtleHover: "var(--bestow-color-danger-subtle-hover)", text: "var(--bestow-color-danger-text)" }, success: { solid: "var(--bestow-color-success-solid)", solidHover: "var(--bestow-color-success-solid-hover)", contrast: "var(--bestow-color-success-contrast)", subtle: "var(--bestow-color-success-subtle)", subtleHover: "var(--bestow-color-success-subtle-hover)", text: "var(--bestow-color-success-text)" }, warning: { solid: "var(--bestow-color-warning-solid)", solidHover: "var(--bestow-color-warning-solid-hover)", contrast: "var(--bestow-color-warning-contrast)", subtle: "var(--bestow-color-warning-subtle)", subtleHover: "var(--bestow-color-warning-subtle-hover)", text: "var(--bestow-color-warning-text)" } }, shadow: { sm: "var(--bestow-shadow-sm)", md: "var(--bestow-shadow-md)", lg: "var(--bestow-shadow-lg)" } };
 
 // src/theme/color.ts
 var import_tokens = require("@bestow-ui/tokens");
@@ -319,6 +323,16 @@ function themeToStyle(theme, mode) {
   return Object.keys(map).length ? (0, import_dynamic.assignInlineVars)(map) : void 0;
 }
 
+// src/theme/presets.ts
+var strongInputBorders = /* @__PURE__ */ Object.freeze({
+  // 라이트: gray600 / gray700 — 흰 배경 5.18:1, bg.subtle(gray50) 4.91:1
+  // 체크 컨트롤: gray600 — 흰 배경 5.18:1
+  light: { color: { border: { input: "#666e76", inputHover: "#495057", control: "#666e76" } } },
+  // 다크: gray500 / gray300 — gray600 은 bg.subtle(gray900) 위에서 2.98:1 이라 한 단계 밝게. bg.default 8.57:1, bg.subtle 7.43:1
+  // 체크 컨트롤: gray500 — 다크 기본값(border.strong)과 같다(이미 8.57:1)
+  dark: { color: { border: { input: "#adb5bd", inputHover: "#dee2e6", control: "#adb5bd" } } }
+});
+
 // src/i18n/en.ts
 var WEEKDAYS_LONG = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 var MONTHS = [
@@ -362,6 +376,9 @@ var en = {
   fileTooLarge: (name, maxSize) => `${name}: files must be ${maxSize} or smaller.`,
   fileTypeNotAllowed: (name) => `${name}: this file type is not allowed.`,
   fileTooMany: (maxFiles) => `You can upload up to ${maxFiles} files.`,
+  dateRangeStart: "Start date",
+  dateRangeEnd: "End date",
+  dateRangePresets: "Quick select",
   errorSummaryTitle: (count2) => `There ${count2 === 1 ? "is 1 problem" : `are ${count2} problems`} with your answers`,
   rangeStart: "minimum",
   rangeEnd: "maximum",
@@ -632,6 +649,20 @@ var DescriptionList = /* @__PURE__ */ (0, import_react3.forwardRef)(
   }
 );
 
+// src/components/DateRangePicker/presets.ts
+var dateRangePresets = [
+  { label: "\uC624\uB298", days: 0 },
+  { label: "1\uC8FC\uC77C", days: 7 },
+  { label: "1\uAC1C\uC6D4", months: 1 },
+  { label: "3\uAC1C\uC6D4", months: 3 }
+];
+function presetRange(preset, today) {
+  const end2 = parseISODate(today);
+  if (!end2) return { start: "", end: "" };
+  const start = preset.months !== void 0 ? addMonths(end2, -preset.months) : addDays(end2, -(preset.days ?? 0));
+  return { start: toISODate(start), end: today };
+}
+
 // src/components/Divider/Divider.tsx
 var import_react4 = require("react");
 
@@ -1680,7 +1711,7 @@ var AmountInput = /* @__PURE__ */ (0, import_react24.forwardRef)(
       return digits;
     };
     const toRaw = (amount) => amount === null || amount === void 0 ? "" : String(Math.floor(Math.abs(amount)));
-    const field3 = useFormattedInput({
+    const field4 = useFormattedInput({
       isControlled: "value" in props,
       value: toRaw(value4),
       defaultValue: toRaw(defaultValue),
@@ -1690,7 +1721,7 @@ var AmountInput = /* @__PURE__ */ (0, import_react24.forwardRef)(
       isMeaningful: isDigit,
       inputRef
     });
-    const reading = showKoreanAmount && field3.raw !== "" ? formatKoreanAmount(Number(field3.raw), unit2) : null;
+    const reading = showKoreanAmount && field4.raw !== "" ? formatKoreanAmount(Number(field4.raw), unit2) : null;
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       TextField,
       {
@@ -1698,10 +1729,10 @@ var AmountInput = /* @__PURE__ */ (0, import_react24.forwardRef)(
         label: label7,
         placeholder,
         inputMode: "numeric",
-        value: field3.display,
-        onChange: field3.onChange,
+        value: field4.display,
+        onChange: field4.onChange,
         onKeyDown: (event) => {
-          field3.onKeyDown(event);
+          field4.onKeyDown(event);
           onKeyDown?.(event);
         },
         endAdornment: unit2,
@@ -1812,10 +1843,10 @@ var separator = "_18t8ztt4";
 
 // src/components/Breadcrumb/Breadcrumb.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var Breadcrumb = /* @__PURE__ */ (0, import_react27.forwardRef)(function Breadcrumb2({ items: items2, linkAs, separator: separator3, "aria-label": ariaLabelProp, className, ...rest }, ref) {
+var Breadcrumb = /* @__PURE__ */ (0, import_react27.forwardRef)(function Breadcrumb2({ items: items2, linkAs, separator: separator4, "aria-label": ariaLabelProp, className, ...rest }, ref) {
   const m = useMessages();
   const ariaLabel = ariaLabelProp ?? m.breadcrumb ?? "\uC774\uB3D9 \uACBD\uB85C";
-  const sep = separator3 ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons8.ChevronRightIcon, { size: 14 });
+  const sep = separator4 ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons8.ChevronRightIcon, { size: 14 });
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ol", { className: list2, children: items2.map((item10, index) => {
     const isCurrent = index === items2.length - 1;
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { className: item4, children: [
@@ -1852,7 +1883,7 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react28.forwardRef)(
     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 field3 = useFormattedInput({
+    const field4 = useFormattedInput({
       isControlled: "value" in props,
       value: value4,
       defaultValue,
@@ -1862,8 +1893,8 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react28.forwardRef)(
       isMeaningful: isDigit2,
       inputRef
     });
-    const complete = field3.raw.length === 10;
-    const autoInvalid = validate && field3.raw.length > 0 && (complete ? !isValidBusinessNumber(field3.raw) : touched);
+    const complete = field4.raw.length === 10;
+    const autoInvalid = validate && field4.raw.length > 0 && (complete ? !isValidBusinessNumber(field4.raw) : touched);
     const showAuto = autoInvalid && error === void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       TextField,
@@ -1872,10 +1903,10 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react28.forwardRef)(
         label: label7,
         placeholder,
         inputMode: "numeric",
-        value: field3.display,
-        onChange: field3.onChange,
+        value: field4.display,
+        onChange: field4.onChange,
         onKeyDown: (event) => {
-          field3.onKeyDown(event);
+          field4.onKeyDown(event);
           onKeyDown?.(event);
         },
         onBlur: (event) => {
@@ -2110,6 +2141,7 @@ 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) {
   const {
@@ -2235,6 +2267,14 @@ var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2
     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)(() => {
+    if (!noResults) return;
+    const timer2 = setTimeout(() => setAnnouncedFor(query), NO_RESULTS_ANNOUNCE_DELAY);
+    return () => clearTimeout(timer2);
+  }, [noResults, query]);
+  const announceNoResults = noResults && announcedFor === query;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
     label7 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { id: labelId, htmlFor: inputId, className: label2, children: [
       label7,
@@ -2364,10 +2404,14 @@ var Combobox = /* @__PURE__ */ (0, import_react32.forwardRef)(function Combobox2
                 );
               })
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: empty, role: "status", children: emptyMessage })
+          ) : (
+            // 스크린리더 알림은 아래의 항상 있는 status 영역이 맡는다 (여기는 화면 표시만)
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: empty, children: emptyMessage })
+          )
         }
       ) })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { role: "status", className: visuallyHidden, children: announceNoResults ? emptyMessage : "" }),
     name && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { type: "hidden", name, value: selectedValue ?? "" }),
     helperText3 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
@@ -2490,7 +2534,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(
       lastEmitted.current = iso;
       onValueChange?.(iso);
     };
-    const field3 = useFormattedInput({
+    const field4 = useFormattedInput({
       isControlled: false,
       value: void 0,
       defaultValue: (isControlled ? value4 : defaultValue)?.replace(/\D/g, ""),
@@ -2503,8 +2547,8 @@ var DatePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(
       isMeaningful: isDigit3,
       inputRef
     });
-    const textIso = toIso(field3.raw);
-    const { setRaw } = field3;
+    const textIso = toIso(field4.raw);
+    const { setRaw } = field4;
     (0, import_react34.useEffect)(() => {
       if (!isControlled) return;
       const next = value4 ?? "";
@@ -2516,8 +2560,8 @@ var DatePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(
       setRaw(next.replace(/\D/g, ""));
     }, [value4]);
     const date = parseISODate(textIso);
-    const complete = field3.raw.length === 8;
-    const autoError = complete ? !date ? invalidText : isUnavailable(date) ? unavailableText : null : touched && field3.raw.length > 0 ? incompleteText : null;
+    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 selectedIso = date && !isUnavailable(date) ? textIso : "";
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
@@ -2530,9 +2574,9 @@ var DatePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(
           placeholder,
           inputMode: "numeric",
           autoComplete: "off",
-          value: field3.display,
-          onChange: field3.onChange,
-          onKeyDown: field3.onKeyDown,
+          value: field4.display,
+          onChange: field4.onChange,
+          onKeyDown: field4.onKeyDown,
           onBlur: () => setTouched(true),
           error: error ?? autoError !== null,
           helperText: showAuto ? autoError : helperText3,
@@ -2576,6 +2620,129 @@ var DatePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(
   }
 );
 
+// src/components/DateRangePicker/DateRangePicker.tsx
+var import_react35 = require("react");
+
+// src/components/DateRangePicker/DateRangePicker.css.ts
+var field2 = "_17277dh3";
+var fields = "_17277dh2";
+var fieldset3 = "_17277dh0";
+var legend3 = "_17277dh1";
+var presets = "_17277dh5";
+var separator2 = "_17277dh4";
+
+// src/components/DateRangePicker/DateRangePicker.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var DateRangePicker = /* @__PURE__ */ (0, import_react35.forwardRef)(
+  function DateRangePicker2(props, ref) {
+    const {
+      value: value4,
+      defaultValue,
+      onValueChange,
+      label: label7,
+      startLabel: startLabelProp,
+      endLabel: endLabelProp,
+      presets: presets2,
+      min,
+      max,
+      isDateDisabled,
+      isHoliday,
+      today,
+      helperText: helperText3,
+      error,
+      required,
+      disabled,
+      startName,
+      endName,
+      id,
+      className
+    } = props;
+    const m = useMessages();
+    const generatedId = (0, import_react35.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 range3 = isControlled ? value4 ?? { start: "", end: "" } : inner;
+    const update = (next) => {
+      if (next.start === range3.start && next.end === range3.end) return;
+      if (!isControlled) setInner(next);
+      onValueChange?.(next);
+    };
+    const todayIso = () => today ?? toISODate(/* @__PURE__ */ new Date());
+    const startLabel = startLabelProp ?? m.dateRangeStart ?? "\uC2DC\uC791\uC77C";
+    const endLabel = endLabelProp ?? m.dateRangeEnd ?? "\uC885\uB8CC\uC77C";
+    const common = { isDateDisabled, isHoliday, today, disabled, required, fullWidth: true };
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      "fieldset",
+      {
+        ref,
+        id,
+        className: cx(fieldset3, className),
+        "aria-describedby": helperId,
+        "data-invalid": error || void 0,
+        children: [
+          label7 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("legend", { className: legend3, children: [
+            label7,
+            required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: fields, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: field2, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              DatePicker,
+              {
+                ...common,
+                id: `${baseId}-start`,
+                label: startLabel,
+                value: range3.start,
+                onValueChange: (start) => update({ ...range3, start }),
+                min,
+                max: range3.end || max,
+                name: startName,
+                error: error || void 0
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: separator2, "aria-hidden": true, children: "~" }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: field2, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              DatePicker,
+              {
+                ...common,
+                id: `${baseId}-end`,
+                label: endLabel,
+                value: range3.end,
+                onValueChange: (end2) => update({ ...range3, end: end2 }),
+                min: range3.start || min,
+                max,
+                name: endName,
+                error: error || void 0
+              }
+            ) })
+          ] }),
+          presets2 && presets2.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { role: "group", "aria-label": m.dateRangePresets ?? "\uBE60\uB978 \uC120\uD0DD", className: presets, children: presets2.map((preset) => {
+            const target = isClient ? presetRange(preset, todayIso()) : null;
+            const pressed = !!target && target.start === range3.start && target.end === range3.end;
+            return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: pressed ? "soft" : "outline",
+                color: pressed ? "primary" : "neutral",
+                "aria-pressed": pressed,
+                disabled,
+                onClick: () => update(presetRange(preset, todayIso())),
+                children: preset.label
+              },
+              preset.label
+            );
+          }) }),
+          helperText3 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+        ]
+      }
+    );
+  }
+);
+
 // src/components/Drawer/Drawer.tsx
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_icons13 = require("@bestow-ui/icons");
@@ -2593,7 +2760,7 @@ var overlay2 = "nmobyv0";
 var title4 = "nmobyvv";
 
 // src/components/Drawer/Drawer.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Drawer({
   open,
   defaultOpen,
@@ -2612,11 +2779,11 @@ function Drawer({
   const portal2 = usePortalProps();
   const m = useMessages();
   const focus = useReturnFocus(Boolean(trigger4));
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
-    trigger4 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog2.Trigger, { asChild: true, children: trigger4 }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Dialog2.Portal, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger4 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Dialog2.Trigger, { asChild: true, children: trigger4 }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Dialog2.Portal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         Dialog2.Content,
         {
           className: cx(portal2.className, content8({ side, size }), className),
@@ -2627,15 +2794,15 @@ function Drawer({
           onCloseAutoFocus: focus.onCloseAutoFocus,
           ...description8 ? {} : { "aria-describedby": void 0 },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: header7, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: headings2, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog2.Title, { className: title4, children: title6 }),
-                description8 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog2.Description, { className: description4, children: description8 })
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: header7, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: headings2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Dialog2.Title, { className: title4, children: title6 }),
+                description8 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Dialog2.Description, { className: description4, children: description8 })
               ] }),
-              !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { "aria-label": m.close ?? "\uB2EB\uAE30", size: "sm", className: closeButton4, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons13.XIcon, {}) }) })
+              !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton, { "aria-label": m.close ?? "\uB2EB\uAE30", size: "sm", className: closeButton4, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons13.XIcon, {}) }) })
             ] }),
-            children && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: body3, children }),
-            footer6 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: footer3, children: footer6 })
+            children && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: body3, children }),
+            footer6 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: footer3, children: footer6 })
           ]
         }
       )
@@ -2645,7 +2812,7 @@ function Drawer({
 var DrawerClose = Dialog2.Close;
 
 // src/components/ErrorSummary/ErrorSummary.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/ErrorSummary/ErrorSummary.css.ts
 var link3 = "_1cdophv2";
@@ -2653,17 +2820,17 @@ var list3 = "_1cdophv1";
 var root9 = "_1cdophv0";
 
 // src/components/ErrorSummary/ErrorSummary.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var ErrorSummary = /* @__PURE__ */ (0, import_react35.forwardRef)(function ErrorSummary2({ errors: errors2, title: title6, focusKey, className, ...rest }, ref) {
+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) {
   const m = useMessages();
-  const titleId = (0, import_react35.useId)();
-  const rootRef = (0, import_react35.useRef)(null);
+  const titleId = (0, import_react36.useId)();
+  const rootRef = (0, import_react36.useRef)(null);
   const hasErrors = errors2.length > 0;
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (hasErrors) rootRef.current?.focus();
   }, [focusKey, hasErrors]);
   if (!hasErrors) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
       ref: mergeRefs(ref, rootRef),
@@ -2671,12 +2838,12 @@ var ErrorSummary = /* @__PURE__ */ (0, import_react35.forwardRef)(function Error
       "aria-labelledby": titleId,
       className: cx(root9, className),
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         Alert,
         {
           color: "danger",
-          title: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { id: titleId, children: title6 ?? m.errorSummaryTitle?.(errors2.length) ?? `\uC785\uB825\uD55C \uB0B4\uC6A9\uC5D0 \uACE0\uCE60 \uACF3\uC774 ${errors2.length}\uAC1C \uC788\uC5B4\uC694` }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: list3, children: errors2.map((error) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          title: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { id: titleId, children: title6 ?? m.errorSummaryTitle?.(errors2.length) ?? `\uC785\uB825\uD55C \uB0B4\uC6A9\uC5D0 \uACE0\uCE60 \uACF3\uC774 ${errors2.length}\uAC1C \uC788\uC5B4\uC694` }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { className: list3, children: errors2.map((error) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "a",
             {
               href: `#${error.id}`,
@@ -2694,7 +2861,7 @@ var ErrorSummary = /* @__PURE__ */ (0, import_react35.forwardRef)(function Error
 });
 
 // src/components/FileUpload/FileUpload.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_icons14 = require("@bestow-ui/icons");
 
 // src/components/FileUpload/FileUpload.css.ts
@@ -2710,7 +2877,8 @@ var list4 = "r2jefr4";
 var root10 = "r2jefr0";
 
 // src/components/FileUpload/FileUpload.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("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`;
@@ -2726,7 +2894,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_react36.forwardRef)(function FileUpload2(props, ref) {
+var FileUpload = /* @__PURE__ */ (0, import_react37.forwardRef)(function FileUpload2(props, ref) {
   const {
     value: value4,
     defaultValue,
@@ -2747,20 +2915,22 @@ var FileUpload = /* @__PURE__ */ (0, import_react36.forwardRef)(function FileUpl
   } = props;
   const m = useMessages();
   const isControlled = "value" in props;
-  const [innerFiles, setInnerFiles] = (0, import_react36.useState)(defaultValue ?? []);
+  const [innerFiles, setInnerFiles] = (0, import_react37.useState)(defaultValue ?? []);
   const files = isControlled ? value4 ?? NO_FILES : innerFiles;
-  const [rejections, setRejections] = (0, import_react36.useState)([]);
-  const [announcement, setAnnouncement] = (0, import_react36.useState)("");
-  const [dragging, setDragging] = (0, import_react36.useState)(false);
-  const generatedId = (0, import_react36.useId)();
+  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 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_react36.useRef)(null);
-  const selectButtonRef = (0, import_react36.useRef)(null);
-  const removeButtonRefs = (0, import_react36.useRef)([]);
-  const focusAfterRemove = (0, import_react36.useRef)(null);
+  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 selectLabel = m.fileSelect ?? "\uD30C\uC77C \uC120\uD0DD";
   const reasonText = (rejection) => {
     const fileName2 = rejection.file.name;
@@ -2769,10 +2939,16 @@ var FileUpload = /* @__PURE__ */ (0, import_react36.forwardRef)(function FileUpl
     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;
@@ -2793,22 +2969,22 @@ var FileUpload = /* @__PURE__ */ (0, import_react36.forwardRef)(function FileUpl
     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);
   };
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (focusAfterRemove.current === null) return;
     const target = focusAfterRemove.current;
     focusAfterRemove.current = null;
     (target >= 0 ? removeButtonRefs.current[target] : selectButtonRef.current)?.focus();
   }, [files]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const input6 = inputRef.current;
     if (!name || !input6 || typeof DataTransfer === "undefined") return;
     try {
@@ -2823,12 +2999,12 @@ var FileUpload = /* @__PURE__ */ (0, import_react36.forwardRef)(function FileUpl
     event.preventDefault();
     setDragging(over);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref, className: cx(field, root10, className), children: [
-    label7 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { id: labelId, className: label2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref, className: cx(field, root10, className), children: [
+    label7 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { id: labelId, className: label2, children: [
       label7,
-      required && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "div",
       {
         role: "group",
@@ -2848,8 +3024,8 @@ var FileUpload = /* @__PURE__ */ (0, import_react36.forwardRef)(function FileUpl
           if (!disabled) addFiles(Array.from(event.dataTransfer.files));
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: dropIcon, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons14.UploadIcon, { size: 24 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: dropIcon, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons14.UploadIcon, { size: 24 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Button,
             {
               ref: selectButtonRef,
@@ -2862,8 +3038,8 @@ var FileUpload = /* @__PURE__ */ (0, import_react36.forwardRef)(function FileUpl
               children: selectLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: dropHint, children: m.fileDropHint ?? "\uB610\uB294 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uC73C\uC138\uC694" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: dropHint, children: m.fileDropHint ?? "\uB610\uB294 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uC73C\uC138\uC694" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "input",
             {
               ref: inputRef,
@@ -2886,11 +3062,11 @@ var FileUpload = /* @__PURE__ */ (0, import_react36.forwardRef)(function FileUpl
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { "aria-label": m.fileList ?? "\uC120\uD0DD\uD55C \uD30C\uC77C", className: list4, children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { className: item6, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: fileIcon, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons14.FileIcon, { size: 16 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: fileName, children: file.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: fileSize, children: formatSize(file.size) }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { "aria-label": m.fileList ?? "\uC120\uD0DD\uD55C \uD30C\uC77C", className: list4, children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: item6, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: fileIcon, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons14.FileIcon, { size: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: fileName, children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { id: `${baseId}-size-${index}`, className: fileSize, children: formatSize(file.size) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         IconButton,
         {
           ref: (node) => {
@@ -2898,22 +3074,23 @@ var FileUpload = /* @__PURE__ */ (0, import_react36.forwardRef)(function FileUpl
           },
           size: "sm",
           "aria-label": m.fileRemove?.(file.name) ?? `${file.name} \uC0AD\uC81C`,
+          "aria-describedby": `${baseId}-size-${index}`,
           disabled,
           onClick: () => removeAt(index),
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons14.XIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons14.XIcon, {})
         }
       )
     ] }, `${file.name}-${file.size}-${file.lastModified}`)) }),
-    rejections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { id: errorsId, className: errors, children: [...new Set(rejections.map(reasonText))].map((text3) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { children: text3 }, text3)) }),
-    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { role: "status", className: visuallyHidden, children: announcement })
+    rejections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { id: errorsId, className: errors, children: [...new Set(rejections.map(reasonText))].map((text3) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { children: text3 }, text3)) }),
+    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { role: "status", className: visuallyHidden, children: announcement })
   ] });
 });
 
 // src/components/DropdownMenu/DropdownMenu.tsx
 var RadixMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
 var import_icons15 = require("@bestow-ui/icons");
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/components/DropdownMenu/DropdownMenu.css.ts
 var content9 = "_1d7ahux0";
@@ -2924,20 +3101,20 @@ var indicatorInner = "_1d7ahux8";
 var item7 = "_1d7ahux1";
 var label3 = "_1d7ahux5";
 var radioDot = "_1d7ahux9";
-var separator2 = "_1d7ahux6";
+var separator3 = "_1d7ahux6";
 var shortcut = "_1d7ahux4";
 var subChevron = "_1d7ahuxb";
 var subTrigger = "_1d7ahuxa";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+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_react37.forwardRef)(
+var DropdownMenuContent = /* @__PURE__ */ (0, import_react38.forwardRef)(
   function DropdownMenuContent2({ className, style, side = "bottom", align = "start", sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
     const portal2 = usePortalProps();
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       RadixMenu.Content,
       {
         ref,
@@ -2952,56 +3129,56 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react37.forwardRef)(
     ) });
   }
 );
-var DropdownMenuItem = /* @__PURE__ */ (0, import_react37.forwardRef)(
+var DropdownMenuItem = /* @__PURE__ */ (0, import_react38.forwardRef)(
   function DropdownMenuItem2({ icon: icon7, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(RadixMenu.Item, { ref, className: cx(item7, color === "danger" && danger, className), ...rest, children: [
-      icon7 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: icon5, "aria-hidden": true, children: icon7 }),
+    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 }),
       children,
-      shortcut2 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
+      shortcut2 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
     ] });
   }
 );
-var DropdownMenuLabel = /* @__PURE__ */ (0, import_react37.forwardRef)(
+var DropdownMenuLabel = /* @__PURE__ */ (0, import_react38.forwardRef)(
   function DropdownMenuLabel2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Label, { ref, className: cx(label3, className), ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixMenu.Label, { ref, className: cx(label3, className), ...rest });
   }
 );
-var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react37.forwardRef)(
+var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react38.forwardRef)(
   function DropdownMenuSeparator2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Separator, { ref, className: cx(separator2, className), ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixMenu.Separator, { ref, className: cx(separator3, className), ...rest });
   }
 );
-var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react37.forwardRef)(
+var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react38.forwardRef)(
   function DropdownMenuCheckboxItem2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(RadixMenu.CheckboxItem, { ref, className: cx(item7, className), ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: indicator2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.ItemIndicator, { className: indicatorInner, children: rest.checked === "indeterminate" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons15.MinusIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons15.CheckIcon, { size: 16 }) }) }),
+    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 }) }) }),
       children
     ] });
   }
 );
 var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
-var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react37.forwardRef)(
+var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react38.forwardRef)(
   function DropdownMenuRadioItem2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(RadixMenu.RadioItem, { ref, className: cx(item7, className), ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: indicator2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.ItemIndicator, { className: indicatorInner, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: radioDot }) }) }),
+    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 }) }) }),
       children
     ] });
   }
 );
 var DropdownMenuSub = RadixMenu.Sub;
-var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react37.forwardRef)(
+var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)(
   function DropdownMenuSubTrigger2({ icon: icon7, className, children, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(RadixMenu.SubTrigger, { ref, className: cx(item7, subTrigger, className), ...rest, children: [
-      icon7 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: icon5, "aria-hidden": true, children: icon7 }),
+    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 }),
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: subChevron, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons15.ChevronRightIcon, { size: 16 }) })
+      /* @__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_react37.forwardRef)(
+var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react38.forwardRef)(
   function DropdownMenuSubContent2({ className, style, sideOffset = 4, alignOffset = -5, collisionPadding = 8, ...rest }, ref) {
     const portal2 = usePortalProps();
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       RadixMenu.SubContent,
       {
         ref,
@@ -3017,7 +3194,7 @@ var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react37.forwardRef)(
 );
 
 // src/components/NumberInput/NumberInput.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_icons16 = require("@bestow-ui/icons");
 
 // src/components/NumberInput/NumberInput.css.ts
@@ -3028,12 +3205,12 @@ var stepper = /* @__PURE__ */ (0, import_createRuntimeFn19.createRuntimeFn)({ de
 var unit = "_1vq2qhv2";
 
 // src/components/NumberInput/NumberInput.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var MAX_DIGITS2 = 15;
 var isMeaningful = (char) => /[\d.-]/.test(char);
 var decimalsOf = (n) => Number.isFinite(n) ? String(n).split(".")[1]?.length ?? 0 : 0;
 var parse = (raw) => /\d/.test(raw) ? Number(raw) : null;
-var NumberInput = /* @__PURE__ */ (0, import_react38.forwardRef)(
+var NumberInput = /* @__PURE__ */ (0, import_react39.forwardRef)(
   function NumberInput2(props, ref) {
     const {
       value: value4,
@@ -3059,8 +3236,8 @@ var NumberInput = /* @__PURE__ */ (0, import_react38.forwardRef)(
     } = props;
     const isControlled = "value" in props;
     const m = useMessages();
-    const inputRef = (0, import_react38.useRef)(null);
-    const generatedId = (0, import_react38.useId)();
+    const inputRef = (0, import_react39.useRef)(null);
+    const generatedId = (0, import_react39.useId)();
     const inputId = id ?? generatedId;
     const precision = Math.max(0, precisionProp ?? decimalsOf(step2));
     const allowNegative = min === void 0 || min < 0;
@@ -3080,13 +3257,13 @@ var NumberInput = /* @__PURE__ */ (0, import_react38.forwardRef)(
       const [, sign = "", int = "", rest2 = ""] = raw.match(/^(-?)(\d*)(.*)$/) ?? [];
       return `${sign}${int ? Number(int).toLocaleString("ko-KR") : ""}${rest2}`;
     };
-    const lastEmitted = (0, import_react38.useRef)(parse(toRaw(isControlled ? value4 : defaultValue)));
+    const lastEmitted = (0, import_react39.useRef)(parse(toRaw(isControlled ? value4 : defaultValue)));
     const emit = (next) => {
       if (next === lastEmitted.current) return;
       lastEmitted.current = next;
       onValueChange?.(next);
     };
-    const field3 = useFormattedInput({
+    const field4 = useFormattedInput({
       isControlled: false,
       value: void 0,
       defaultValue: toRaw(isControlled ? value4 : defaultValue),
@@ -3096,17 +3273,20 @@ var NumberInput = /* @__PURE__ */ (0, import_react38.forwardRef)(
       isMeaningful,
       inputRef
     });
-    const { setRaw } = field3;
-    (0, import_react38.useEffect)(() => {
+    const { setRaw } = field4;
+    (0, import_react39.useEffect)(() => {
       if (!isControlled) return;
       const next = value4 ?? null;
       lastEmitted.current = next;
-      if (parse(field3.raw) !== next) setRaw(toRaw(next));
+      if (parse(field4.raw) !== next) setRaw(toRaw(next));
     }, [value4]);
-    const current2 = parse(field3.raw);
-    const setValue = (next) => {
+    const current2 = parse(field4.raw);
+    const valueText = (n) => `${format2(toRaw(n))}${unit2 ?? ""}`;
+    const [announcement, setAnnouncement] = (0, import_react39.useState)("");
+    const setValue = (next, announce = true) => {
       setRaw(toRaw(next));
       emit(next);
+      if (announce) setAnnouncement(valueText(next));
     };
     const stepBy = (delta) => {
       if (disabled || readOnly) return;
@@ -3133,10 +3313,10 @@ var NumberInput = /* @__PURE__ */ (0, import_react38.forwardRef)(
         event.preventDefault();
         setValue(max);
       } else {
-        field3.onKeyDown(event);
+        field4.onKeyDown(event);
       }
     };
-    const stepper2 = (direction) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    const stepper2 = (direction) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       IconButton,
       {
         size: "sm",
@@ -3147,11 +3327,11 @@ var NumberInput = /* @__PURE__ */ (0, import_react38.forwardRef)(
         onMouseDown: (event) => event.preventDefault(),
         onClick: () => stepBy(direction * step2),
         className: stepper({ size }),
-        children: direction < 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons16.MinusIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons16.PlusIcon, {})
+        children: direction < 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons16.MinusIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons16.PlusIcon, {})
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         TextField,
         {
           ref: mergeRefs(ref, inputRef),
@@ -3162,35 +3342,40 @@ var NumberInput = /* @__PURE__ */ (0, import_react38.forwardRef)(
           "aria-valuenow": current2 ?? void 0,
           "aria-valuemin": min,
           "aria-valuemax": max,
-          "aria-valuetext": current2 === null ? void 0 : `${field3.display}${unit2 ?? ""}`,
-          value: field3.display,
-          onChange: field3.onChange,
+          "aria-valuetext": current2 === null ? void 0 : valueText(current2),
+          value: field4.display,
+          onChange: (event) => {
+            setAnnouncement("");
+            field4.onChange(event);
+          },
           onKeyDown: handleKeyDown,
           onBlur: (event) => {
-            if (current2 !== null && clamp(current2) !== current2) setValue(clamp(current2));
-            else if (current2 === null && field3.raw !== "") setRaw("");
+            if (current2 !== null && clamp(current2) !== current2) setValue(clamp(current2), false);
+            else if (current2 === null && field4.raw !== "") setRaw("");
+            setAnnouncement("");
             onBlur?.(event);
           },
           size,
           disabled,
           readOnly,
           startAdornment: hideStepper ? void 0 : stepper2(-1),
-          endAdornment: unit2 || !hideStepper ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: end, children: [
-            unit2 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: unit, children: unit2 }),
+          endAdornment: unit2 || !hideStepper ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: end, children: [
+            unit2 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: unit, children: unit2 }),
             !hideStepper && stepper2(1)
           ] }) : void 0,
           className: cx(input4, className),
           ...rest
         }
       ),
-      name && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) })
+      name && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-live": "assertive", "aria-atomic": "true", className: visuallyHidden, children: announcement })
     ] });
   }
 );
 
 // src/components/Pagination/Pagination.tsx
 var import_icons17 = require("@bestow-ui/icons");
-var import_react39 = require("react");
+var import_react40 = require("react");
 
 // src/components/Pagination/getPaginationItems.ts
 var range = (start, end2) => end2 < start ? [] : Array.from({ length: end2 - start + 1 }, (_, i) => start + i);
@@ -3223,8 +3408,8 @@ var item8 = /* @__PURE__ */ (0, import_createRuntimeFn20.createRuntimeFn)({ defa
 var list5 = "_1iraoak0";
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var Pagination = /* @__PURE__ */ (0, import_react39.forwardRef)(function Pagination2({
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Pagination = /* @__PURE__ */ (0, import_react40.forwardRef)(function Pagination2({
   totalPages,
   page: pageProp,
   defaultPage = 1,
@@ -3237,7 +3422,7 @@ var Pagination = /* @__PURE__ */ (0, import_react39.forwardRef)(function Paginat
   "aria-label": ariaLabelProp,
   ...rest
 }, ref) {
-  const [uncontrolledPage, setUncontrolledPage] = (0, import_react39.useState)(defaultPage);
+  const [uncontrolledPage, setUncontrolledPage] = (0, import_react40.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`);
@@ -3249,8 +3434,8 @@ var Pagination = /* @__PURE__ */ (0, import_react39.forwardRef)(function Paginat
     onPageChange?.(next);
   };
   const itemClass = item8({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("ul", { className: list5, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("ul", { className: list5, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "button",
       {
         type: "button",
@@ -3258,11 +3443,11 @@ var Pagination = /* @__PURE__ */ (0, import_react39.forwardRef)(function Paginat
         "aria-label": getItemLabel("previous", page - 1),
         disabled: page <= 1,
         onClick: () => goTo(page - 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons17.ChevronLeftIcon, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons17.ChevronLeftIcon, { size: 16 })
       }
     ) }),
     getPaginationItems(page, totalPages, siblingCount, boundaryCount).map(
-      (item10) => typeof item10 === "number" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      (item10) => typeof item10 === "number" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "button",
         {
           type: "button",
@@ -3272,9 +3457,9 @@ var Pagination = /* @__PURE__ */ (0, import_react39.forwardRef)(function Paginat
           onClick: () => goTo(item10),
           children: item10
         }
-      ) }, item10) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item10)
+      ) }, item10) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item10)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "button",
       {
         type: "button",
@@ -3282,21 +3467,21 @@ var Pagination = /* @__PURE__ */ (0, import_react39.forwardRef)(function Paginat
         "aria-label": getItemLabel("next", page + 1),
         disabled: page >= totalPages,
         onClick: () => goTo(page + 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons17.ChevronRightIcon, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons17.ChevronRightIcon, { size: 16 })
       }
     ) })
   ] }) });
 });
 
 // src/components/PhoneNumberInput/PhoneNumberInput.tsx
-var import_react40 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_react41 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var sanitize3 = (input6) => {
   const digits = input6.replace(/\D/g, "");
   return digits.slice(0, phoneNumberMaxDigits(digits));
 };
 var isDigit4 = (char) => /\d/.test(char);
-var PhoneNumberInput = /* @__PURE__ */ (0, import_react40.forwardRef)(
+var PhoneNumberInput = /* @__PURE__ */ (0, import_react41.forwardRef)(
   function PhoneNumberInput2(props, ref) {
     const {
       value: value4,
@@ -3307,10 +3492,10 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react40.forwardRef)(
       onKeyDown,
       ...rest
     } = props;
-    const inputRef = (0, import_react40.useRef)(null);
+    const inputRef = (0, import_react41.useRef)(null);
     const m = useMessages();
     const label7 = labelProp ?? m.phoneNumber ?? "\uD734\uB300\uD3F0 \uBC88\uD638";
-    const field3 = useFormattedInput({
+    const field4 = useFormattedInput({
       isControlled: "value" in props,
       value: value4,
       defaultValue,
@@ -3320,7 +3505,7 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react40.forwardRef)(
       isMeaningful: isDigit4,
       inputRef
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       TextField,
       {
         ref: mergeRefs(ref, inputRef),
@@ -3329,10 +3514,10 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react40.forwardRef)(
         type: "tel",
         inputMode: "tel",
         autoComplete: "tel-national",
-        value: field3.display,
-        onChange: field3.onChange,
+        value: field4.display,
+        onChange: field4.onChange,
         onKeyDown: (event) => {
-          field3.onKeyDown(event);
+          field4.onKeyDown(event);
           onKeyDown?.(event);
         },
         ...rest
@@ -3342,7 +3527,7 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react40.forwardRef)(
 );
 
 // src/components/RadioGroup/RadioGroup.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/components/RadioGroup/RadioGroup.css.ts
 var import_createRuntimeFn21 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -3355,8 +3540,8 @@ var radio = /* @__PURE__ */ (0, import_createRuntimeFn21.createRuntimeFn)({ defa
 var text = "_1w9iwjma";
 
 // src/components/RadioGroup/RadioGroup.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var RadioGroup2 = /* @__PURE__ */ (0, import_react41.forwardRef)(function RadioGroup3(props, ref) {
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var RadioGroup2 = /* @__PURE__ */ (0, import_react42.forwardRef)(function RadioGroup3(props, ref) {
   const {
     options,
     value: value4,
@@ -3375,9 +3560,9 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react41.forwardRef)(function RadioG
     className
   } = props;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react41.useState)(defaultValue ?? "");
+  const [innerValue, setInnerValue] = (0, import_react42.useState)(defaultValue ?? "");
   const current2 = isControlled ? value4 ?? "" : innerValue;
-  const generatedId = (0, import_react41.useId)();
+  const generatedId = (0, import_react42.useId)();
   const baseId = id ?? generatedId;
   const labelId = label7 ? `${baseId}-label` : void 0;
   const helperId = helperText3 ? `${baseId}-helper` : void 0;
@@ -3388,12 +3573,12 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react41.forwardRef)(function RadioG
     if (!isControlled) setInnerValue(next);
     onValueChange?.(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx(field, className), children: [
-    label7 && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { id: labelId, className: cx(label2, groupLabel), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cx(field, className), children: [
+    label7 && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { id: labelId, className: cx(label2, groupLabel), children: [
       label7,
-      required && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "div",
       {
         ref,
@@ -3411,8 +3596,8 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react41.forwardRef)(function RadioG
           const descriptionId = option2.description ? `${itemId}-description` : void 0;
           const itemDisabled = disabled || option2.disabled;
           const checked = option2.value === current2;
-          return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               "input",
               {
                 type: "radio",
@@ -3429,20 +3614,20 @@ var RadioGroup2 = /* @__PURE__ */ (0, import_react41.forwardRef)(function RadioG
                 className: radio({ size })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: text, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { htmlFor: itemId, className: labelText, children: option2.label }),
-              option2.description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { id: descriptionId, className: description5, children: option2.description })
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: text, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { htmlFor: itemId, className: labelText, children: option2.label }),
+              option2.description && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { id: descriptionId, className: description5, children: option2.description })
             ] })
           ] }, option2.value);
         })
       }
     ),
-    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/components/SegmentedControl/SegmentedControl.css.ts
 var import_createRuntimeFn22 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -3451,9 +3636,9 @@ var item9 = /* @__PURE__ */ (0, import_createRuntimeFn22.createRuntimeFn)({ defa
 var root11 = /* @__PURE__ */ (0, import_createRuntimeFn22.createRuntimeFn)({ defaultClassName: "_1h65mmo0", variantClassNames: { fullWidth: { true: "_1h65mmo1" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var NEXT_KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
-var SegmentedControl = /* @__PURE__ */ (0, import_react42.forwardRef)(
+var SegmentedControl = /* @__PURE__ */ (0, import_react43.forwardRef)(
   function SegmentedControl2(props, ref) {
     const {
       options,
@@ -3470,11 +3655,11 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react42.forwardRef)(
       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 labelId = label7 ? `${id ?? generatedId}-label` : void 0;
-    const itemRefs = (0, import_react42.useRef)([]);
+    const itemRefs = (0, import_react43.useRef)([]);
     const isEnabled = (index) => !disabled && !options[index]?.disabled;
     const select = (index) => {
       const next = options[index].value;
@@ -3505,7 +3690,7 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react42.forwardRef)(
       itemRefs.current[target]?.focus();
       select(target);
     };
-    const group = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    const group = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "div",
       {
         ref,
@@ -3518,7 +3703,7 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react42.forwardRef)(
         children: [
           options.map((option2, index) => {
             const checked = index === checkedIndex;
-            return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
               "button",
               {
                 ref: (node) => {
@@ -3535,20 +3720,20 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react42.forwardRef)(
                 onClick: () => select(index),
                 onKeyDown: (event) => handleKeyDown(event, index),
                 children: [
-                  option2.icon && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": true, className: icon6, children: option2.icon }),
+                  option2.icon && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "aria-hidden": true, className: icon6, children: option2.icon }),
                   option2.label
                 ]
               },
               option2.value
             );
           }),
-          name && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "hidden", name, value: current2 })
+          name && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("input", { type: "hidden", name, value: current2 })
         ]
       }
     );
     if (!label7) return group;
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cx(field, className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { id: labelId, className: label2, children: label7 }),
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx(field, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { id: labelId, className: label2, children: label7 }),
       group
     ] });
   }
@@ -3556,10 +3741,10 @@ var SegmentedControl = /* @__PURE__ */ (0, import_react42.forwardRef)(
 
 // src/components/Select/Select.tsx
 var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_icons18 = require("@bestow-ui/icons");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var Select = /* @__PURE__ */ (0, import_react43.forwardRef)(function Select2(props, ref) {
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var Select = /* @__PURE__ */ (0, import_react44.forwardRef)(function Select2(props, ref) {
   const {
     options,
     value: value4,
@@ -3579,16 +3764,16 @@ var Select = /* @__PURE__ */ (0, import_react43.forwardRef)(function Select2(pro
     className
   } = props;
   const isControlled = "value" in props;
-  const generatedId = (0, import_react43.useId)();
+  const generatedId = (0, import_react44.useId)();
   const triggerId = id ?? generatedId;
   const helperId = helperText3 ? `${triggerId}-helper` : void 0;
   const portal2 = usePortalProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label7 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { htmlFor: triggerId, className: label2, children: [
+  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: [
       label7,
-      required && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       RadixSelect.Root,
       {
         value: isControlled ? value4 ?? "" : void 0,
@@ -3598,7 +3783,7 @@ var Select = /* @__PURE__ */ (0, import_react43.forwardRef)(function Select2(pro
         required,
         name,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
             RadixSelect.Trigger,
             {
               ref,
@@ -3609,12 +3794,12 @@ var Select = /* @__PURE__ */ (0, import_react43.forwardRef)(function Select2(pro
               "data-invalid": error || void 0,
               className: cx(root5({ size, fullWidth }), trigger2, className),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: value2, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadixSelect.Value, { placeholder }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadixSelect.Icon, { className: icon4, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons18.ChevronDownIcon, { size: 16 }) })
+                /* @__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_runtime41.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             RadixSelect.Content,
             {
               position: "popper",
@@ -3622,15 +3807,15 @@ var Select = /* @__PURE__ */ (0, import_react43.forwardRef)(function Select2(pro
               collisionPadding: 8,
               className: cx(portal2.className, content5),
               style: portal2.style,
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                 RadixSelect.Item,
                 {
                   value: option2.value,
                   disabled: option2.disabled,
                   className: item5,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadixSelect.ItemText, { children: option2.label }),
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons18.CheckIcon, { size: 16 }) })
+                    /* @__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 }) })
                   ]
                 },
                 option2.value
@@ -3640,19 +3825,19 @@ var Select = /* @__PURE__ */ (0, import_react43.forwardRef)(function Select2(pro
         ]
       }
     ),
-    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
 
 // src/components/SkipLink/SkipLink.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/components/SkipLink/SkipLink.css.ts
 var skipLink = "_1t9jaar0";
 
 // src/components/SkipLink/SkipLink.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var SkipLink = /* @__PURE__ */ (0, import_react44.forwardRef)(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var SkipLink = /* @__PURE__ */ (0, import_react45.forwardRef)(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
   const m = useMessages();
   const handleClick = (event) => {
     onClick?.(event);
@@ -3664,16 +3849,16 @@ var SkipLink = /* @__PURE__ */ (0, import_react44.forwardRef)(function SkipLink2
     target.focus();
     target.scrollIntoView?.({ block: "start" });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime43.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_react45 = require("react");
+var import_react46 = require("react");
 
 // src/components/Slider/Slider.css.ts
 var import_createRuntimeFn23 = require("@vanilla-extract/recipes/createRuntimeFn");
-var field2 = "_126mzjm0";
+var field3 = "_126mzjm0";
 var header8 = "_126mzjm1";
 var helperText2 = "_126mzjm4";
 var label4 = "_126mzjm2";
@@ -3684,8 +3869,8 @@ var track2 = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ def
 var value3 = "_126mzjm3";
 
 // src/components/Slider/Slider.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var Slider = /* @__PURE__ */ (0, import_react45.forwardRef)(function Slider2(props, ref) {
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Slider = /* @__PURE__ */ (0, import_react46.forwardRef)(function Slider2(props, ref) {
   const {
     value: value4,
     defaultValue,
@@ -3706,12 +3891,12 @@ var Slider = /* @__PURE__ */ (0, import_react45.forwardRef)(function Slider2(pro
   } = props;
   const m = useMessages();
   const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
-  const generatedId = (0, import_react45.useId)();
+  const generatedId = (0, import_react46.useId)();
   const baseId = id ?? generatedId;
   const labelId = `${baseId}-label`;
   const helperId = `${baseId}-helper`;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react45.useState)(defaultValue ?? [min]);
+  const [innerValue, setInnerValue] = (0, import_react46.useState)(defaultValue ?? [min]);
   const current2 = isControlled ? value4 ?? [min] : innerValue;
   const isRange = current2.length > 1;
   const handleChange = (next) => {
@@ -3719,12 +3904,12 @@ var Slider = /* @__PURE__ */ (0, import_react45.forwardRef)(function Slider2(pro
     onValueChange?.(next);
   };
   const valueText = current2.map(formatValue).join(" \u2013 ");
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx(field2, className), children: [
-    (label7 || showValue) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: header8, children: [
-      label7 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { id: labelId, className: label4, children: label7 }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: value3, "aria-hidden": true, children: valueText })
+  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 })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       RadixSlider.Root,
       {
         ref,
@@ -3737,10 +3922,10 @@ var Slider = /* @__PURE__ */ (0, import_react45.forwardRef)(function Slider2(pro
         className: root12({ size }),
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixSlider.Track, { className: track2({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixSlider.Range, { className: range2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RadixSlider.Track, { className: track2({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RadixSlider.Range, { className: range2 }) }),
           current2.map((thumbValue, index) => {
             const thumbLabelId = `${baseId}-thumb-${index}`;
-            return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               RadixSlider.Thumb,
               {
                 className: thumb({ size }),
@@ -3755,16 +3940,16 @@ var Slider = /* @__PURE__ */ (0, import_react45.forwardRef)(function Slider2(pro
         ]
       }
     ),
-    isRange && current2.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
+    isRange && current2.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
       label7 ? "" : ariaLabel ? `${ariaLabel} ` : "",
       thumbLabels[index] ?? `${index + 1}`
     ] }, index)),
-    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { id: helperId, className: helperText2, children: helperText3 })
+    helperText3 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { id: helperId, className: helperText2, children: helperText3 })
   ] });
 });
 
 // src/components/Stepper/Stepper.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_icons19 = require("@bestow-ui/icons");
 
 // src/components/Stepper/Stepper.css.ts
@@ -3777,10 +3962,10 @@ var step = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defau
 var text2 = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "kervhma", variantClassNames: { orientation: { horizontal: "kervhmb", vertical: "kervhmc" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/Stepper/Stepper.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var Stepper = /* @__PURE__ */ (0, import_react46.forwardRef)(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
+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) {
   const m = useMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "ol",
     {
       ref,
@@ -3789,24 +3974,24 @@ var Stepper = /* @__PURE__ */ (0, import_react46.forwardRef)(function Stepper2({
       ...rest,
       children: steps.map((step2, index) => {
         const status = index < current2 ? "complete" : index === current2 ? "current" : "upcoming";
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           "li",
           {
             className: step({ orientation }),
             "data-status": status,
             "aria-current": status === "current" ? "step" : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: indicator3({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons19.CheckIcon, { size: 16, strokeWidth: 2.5 }) : index + 1 }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: text2({ orientation }), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: label5({ status }), 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: [
                   step2.label,
-                  status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: visuallyHidden, children: [
+                  status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: visuallyHidden, children: [
                     " (",
                     m.stepCompleted ?? "\uC644\uB8CC",
                     ")"
                   ] })
                 ] }),
-                step2.description && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: description6, children: step2.description })
+                step2.description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: description6, children: step2.description })
               ] })
             ]
           },
@@ -3819,7 +4004,7 @@ var Stepper = /* @__PURE__ */ (0, import_react46.forwardRef)(function Stepper2({
 
 // src/components/Switch/Switch.tsx
 var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/components/Switch/Switch.css.ts
 var import_createRuntimeFn25 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -3829,12 +4014,12 @@ var thumb2 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ def
 var track3 = /* @__PURE__ */ (0, import_createRuntimeFn25.createRuntimeFn)({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var Switch = /* @__PURE__ */ (0, import_react47.forwardRef)(function Switch2({ label: label7, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
-  const generatedId = (0, import_react47.useId)();
+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)();
   const switchId = id ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: cx(root14({ size }), className), "data-disabled": disabled || void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  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,
       {
         ref,
@@ -3843,15 +4028,15 @@ var Switch = /* @__PURE__ */ (0, import_react47.forwardRef)(function Switch2({ l
         "aria-label": ariaLabel,
         className: track3({ size }),
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixSwitch.Thumb, { className: thumb2({ size }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RadixSwitch.Thumb, { className: thumb2({ size }) })
       }
     ),
-    label7 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { htmlFor: switchId, className: label6, children: label7 })
+    label7 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { htmlFor: switchId, className: label6, children: label7 })
   ] });
 });
 
 // src/components/Table/Table.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_icons20 = require("@bestow-ui/icons");
 
 // src/components/Table/Table.css.ts
@@ -3874,10 +4059,10 @@ var striped = "l3ploy6";
 var table = "l3ploy1";
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var TableSizeContext = /* @__PURE__ */ (0, import_react48.createContext)("md");
-var TableSectionContext = /* @__PURE__ */ (0, import_react48.createContext)("body");
-var Table = /* @__PURE__ */ (0, import_react48.forwardRef)(function Table2({
+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({
   size = "md",
   striped: striped2,
   stickyHeader: stickyHeader2,
@@ -3889,8 +4074,8 @@ var Table = /* @__PURE__ */ (0, import_react48.forwardRef)(function Table2({
   children,
   ...rest
 }, ref) {
-  const captionId = (0, import_react48.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  const captionId = (0, import_react49.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "div",
     {
       className: cx(container, containerClassName),
@@ -3899,7 +4084,7 @@ var Table = /* @__PURE__ */ (0, import_react48.forwardRef)(function Table2({
       role: "region",
       "aria-labelledby": caption2 ? captionId : void 0,
       "aria-label": caption2 ? void 0 : ariaLabel,
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
         "table",
         {
           ref,
@@ -3907,7 +4092,7 @@ var Table = /* @__PURE__ */ (0, import_react48.forwardRef)(function Table2({
           "aria-label": caption2 ? void 0 : ariaLabel,
           ...rest,
           children: [
-            caption2 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("caption", { id: captionId, className: caption, children: caption2 }),
+            caption2 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("caption", { id: captionId, className: caption, children: caption2 }),
             children
           ]
         }
@@ -3915,31 +4100,31 @@ var Table = /* @__PURE__ */ (0, import_react48.forwardRef)(function Table2({
     }
   ) });
 });
-var TableHeader = /* @__PURE__ */ (0, import_react48.forwardRef)(
+var TableHeader = /* @__PURE__ */ (0, import_react49.forwardRef)(
   function TableHeader2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("thead", { ref, className: cx(header9, className), ...rest }) });
+    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 }) });
   }
 );
-var TableBody = /* @__PURE__ */ (0, import_react48.forwardRef)(
+var TableBody = /* @__PURE__ */ (0, import_react49.forwardRef)(
   function TableBody2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("tbody", { ref, className: cx(body4, className), ...rest }) });
+    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 }) });
   }
 );
-var TableFooter = /* @__PURE__ */ (0, import_react48.forwardRef)(
+var TableFooter = /* @__PURE__ */ (0, import_react49.forwardRef)(
   function TableFooter2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("tfoot", { ref, className: cx(footer4, className), ...rest }) });
+    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 }) });
   }
 );
-var TableRow = /* @__PURE__ */ (0, import_react48.forwardRef)(function TableRow2({ selected, className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...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 TableHead = /* @__PURE__ */ (0, import_react48.forwardRef)(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
-  const size = (0, import_react48.useContext)(TableSizeContext);
-  const section = (0, import_react48.useContext)(TableSectionContext);
+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);
   const sortable = onSort !== void 0;
   const direction = sortDirection ?? "none";
   const SortIcon = direction === "descending" ? import_icons20.ArrowDownIcon : import_icons20.ArrowUpIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "th",
     {
       ref,
@@ -3951,17 +4136,17 @@ var TableHead = /* @__PURE__ */ (0, import_react48.forwardRef)(function TableHea
         className
       ),
       ...rest,
-      children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("button", { type: "button", className: sortButton, onClick: onSort, children: [
+      children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("button", { type: "button", className: sortButton, onClick: onSort, children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
       ] }) : children
     }
   );
 });
-var TableCell = /* @__PURE__ */ (0, import_react48.forwardRef)(function TableCell2({ align, className, ...rest }, ref) {
-  const size = (0, import_react48.useContext)(TableSizeContext);
-  const section = (0, import_react48.useContext)(TableSectionContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+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)(
     "td",
     {
       ref,
@@ -3970,26 +4155,26 @@ var TableCell = /* @__PURE__ */ (0, import_react48.forwardRef)(function TableCel
     }
   );
 });
-var TableEmpty = /* @__PURE__ */ (0, import_react48.forwardRef)(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableCell, { ref, colSpan, className: cx(emptyCell, className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: emptyContent, children }) }) });
+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 }) }) });
 });
 function TableSkeleton({ rows = 5, columns }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: Array.from({ length: rows }, (_, row5) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableRow, { "aria-hidden": true, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Skeleton, { width: column === 0 ? "60%" : "80%" }) }, column)) }, row5)) });
+  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)) });
 }
 
 // src/components/Table/useTableSelection.ts
-var import_react49 = require("react");
+var import_react50 = require("react");
 function useTableSelection(initial = []) {
-  const [selected, setSelected] = (0, import_react49.useState)(initial);
-  const isSelected = (0, import_react49.useCallback)((id) => selected.includes(id), [selected]);
-  const toggle3 = (0, import_react49.useCallback)((id, checked) => {
+  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) => {
     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_react49.useCallback)(() => setSelected([]), []);
+  const clear2 = (0, import_react50.useCallback)(() => setSelected([]), []);
   const selectAllProps = (pageIds) => {
     const all2 = pageIds.length > 0 && pageIds.every((id) => selected.includes(id));
     const some = pageIds.some((id) => selected.includes(id));
@@ -4010,7 +4195,7 @@ function useTableSelection(initial = []) {
 
 // src/components/Tabs/Tabs.tsx
 var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // src/components/Tabs/Tabs.css.ts
 var import_createRuntimeFn27 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -4020,26 +4205,26 @@ 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"]] });
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var TabsStyleContext = /* @__PURE__ */ (0, import_react50.createContext)({ variant: "line", size: "md" });
-var Tabs = /* @__PURE__ */ (0, import_react50.forwardRef)(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
+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) {
   const controlled = "value" in props ? { value: props.value ?? "" } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RadixTabs.Root, { ref, className: cx(root15, className), ...props, ...controlled }) });
+  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 }) });
 });
-var TabsList = /* @__PURE__ */ (0, import_react50.forwardRef)(function TabsList2({ className, ...rest }, ref) {
-  const { variant } = (0, import_react50.useContext)(TabsStyleContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RadixTabs.List, { ref, className: cx(list6({ variant }), className), ...rest });
+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 TabsTrigger = /* @__PURE__ */ (0, import_react50.forwardRef)(function TabsTrigger2({ className, ...rest }, ref) {
-  const { variant, size } = (0, import_react50.useContext)(TabsStyleContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), 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 TabsContent = /* @__PURE__ */ (0, import_react50.forwardRef)(function TabsContent2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RadixTabs.Content, { ref, className: cx(content10, 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 });
 });
 
 // src/components/Textarea/Textarea.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 
 // src/components/Textarea/Textarea.css.ts
 var import_createRuntimeFn28 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -4050,8 +4235,8 @@ 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: [] });
 
 // src/components/Textarea/Textarea.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var Textarea = /* @__PURE__ */ (0, import_react51.forwardRef)(function Textarea2({
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Textarea = /* @__PURE__ */ (0, import_react52.forwardRef)(function Textarea2({
   label: label7,
   helperText: helperText3,
   error,
@@ -4072,13 +4257,13 @@ var Textarea = /* @__PURE__ */ (0, import_react51.forwardRef)(function Textarea2
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = (0, import_react51.useId)();
+  const generatedId = (0, import_react52.useId)();
   const textareaId = id ?? generatedId;
   const helperId = helperText3 ? `${textareaId}-helper` : void 0;
-  const innerRef = (0, import_react51.useRef)(null);
-  const [uncontrolledLength, setUncontrolledLength] = (0, import_react51.useState)(() => String(defaultValue ?? "").length);
+  const innerRef = (0, import_react52.useRef)(null);
+  const [uncontrolledLength, setUncontrolledLength] = (0, import_react52.useState)(() => String(defaultValue ?? "").length);
   const length = value4 !== void 0 ? String(value4).length : uncontrolledLength;
-  const fitHeight = (0, import_react51.useCallback)(() => {
+  const fitHeight = (0, import_react52.useCallback)(() => {
     const el = innerRef.current;
     if (!autoResize || !el) return;
     el.style.height = "auto";
@@ -4091,12 +4276,12 @@ var Textarea = /* @__PURE__ */ (0, import_react51.forwardRef)(function Textarea2
     fitHeight();
     onChange?.(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label7 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { htmlFor: textareaId, className: label2, children: [
+  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: [
       label7,
-      required && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "textarea",
       {
         ref: mergeRefs(innerRef, ref),
@@ -4118,16 +4303,16 @@ var Textarea = /* @__PURE__ */ (0, import_react51.forwardRef)(function Textarea2
         ...rest
       }
     ),
-    (helperText3 || showCount) && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: footer5, children: [
-      helperText3 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
-      showCount && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
+    (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 })
     ] })
   ] });
 });
 
 // src/components/Toast/Toast.tsx
 var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_icons21 = require("@bestow-ui/icons");
 
 // src/components/Toast/Toast.css.ts
@@ -4140,29 +4325,29 @@ var toast = /* @__PURE__ */ (0, import_createRuntimeFn29.createRuntimeFn)({ defa
 var viewport2 = "_1g11zvx0";
 
 // src/components/Toast/Toast.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var REMOVE_DELAY = 500;
-var ToastContext = /* @__PURE__ */ (0, import_react52.createContext)(null);
+var ToastContext = /* @__PURE__ */ (0, import_react53.createContext)(null);
 function ToastProvider({ children, duration = 5e3, label: labelProp }) {
   const m = useMessages();
   const label7 = labelProp ?? m.notifications ?? "\uC54C\uB9BC";
-  const [toasts, setToasts] = (0, import_react52.useState)([]);
-  const nextId = (0, import_react52.useRef)(0);
+  const [toasts, setToasts] = (0, import_react53.useState)([]);
+  const nextId = (0, import_react53.useRef)(0);
   const portal2 = usePortalProps();
-  const toast2 = (0, import_react52.useCallback)((options) => {
+  const toast2 = (0, import_react53.useCallback)((options) => {
     const id = nextId.current++;
     setToasts((prev) => [...prev, { ...options, id, open: true }]);
     return id;
   }, []);
-  const dismiss = (0, import_react52.useCallback)((id) => {
+  const dismiss = (0, import_react53.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_react52.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToastContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(RadixToast.Provider, { duration, label: label7, swipeDirection: "right", children: [
+  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: [
     children,
-    toasts.map(({ id, open, title: title6, description: description8, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    toasts.map(({ id, open, title: title6, description: description8, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       RadixToast.Root,
       {
         open,
@@ -4172,19 +4357,19 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
         },
         className: toast({ color }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixToast.Title, { className: title5, children: title6 }),
-          description8 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixToast.Description, { className: description7, children: description8 }),
-          action3 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons21.XIcon, { size: 16 }) })
+          /* @__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 }) })
         ]
       },
       id
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
   ] }) });
 }
 function useToast() {
-  const context = (0, import_react52.useContext)(ToastContext);
+  const context = (0, import_react53.useContext)(ToastContext);
   if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
   return context;
 }
@@ -4197,7 +4382,7 @@ var arrow2 = "z7rufs1";
 var content11 = "z7rufs0";
 
 // src/components/Tooltip/Tooltip.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function Tooltip({
   content: content12,
   children,
@@ -4212,9 +4397,9 @@ function Tooltip({
 }) {
   const portal2 = usePortalProps();
   if (disabled || content12 == null || content12 === "") return children;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  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)(
       RadixTooltip.Content,
       {
         side,
@@ -4225,7 +4410,7 @@ function Tooltip({
         style: portal2.style,
         children: [
           content12,
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
         ]
       }
     ) })
@@ -4233,7 +4418,7 @@ function Tooltip({
 }
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/components/VerificationCodeInput/VerificationCodeInput.css.ts
 var input5 = "ea01812";
@@ -4243,9 +4428,9 @@ var slots = "ea01811";
 var timer = "ea01814";
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = 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_react53.forwardRef)(
+var VerificationCodeInput = /* @__PURE__ */ (0, import_react54.forwardRef)(
   function VerificationCodeInput2(props, ref) {
     const {
       length = 6,
@@ -4272,23 +4457,23 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react53.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_react53.useId)();
+    const generatedId = (0, import_react54.useId)();
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
     const statusId = `${inputId}-status`;
-    const inputRef = (0, import_react53.useRef)(null);
+    const inputRef = (0, import_react54.useRef)(null);
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = (0, import_react53.useState)(defaultValue ?? "");
+    const [innerValue, setInnerValue] = (0, import_react54.useState)(defaultValue ?? "");
     const code = (isControlled ? value4 ?? "" : innerValue).slice(0, length);
-    const [focused, setFocused] = (0, import_react53.useState)(false);
-    const [endAt, setEndAt] = (0, import_react53.useState)(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
-    const [remaining, setRemaining] = (0, import_react53.useState)(expiresIn ?? 0);
+    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 expired = expiresIn !== void 0 && remaining <= 0;
-    const onExpireRef = (0, import_react53.useRef)(onExpire);
-    (0, import_react53.useEffect)(() => {
+    const onExpireRef = (0, import_react54.useRef)(onExpire);
+    (0, import_react54.useEffect)(() => {
       onExpireRef.current = onExpire;
     });
-    (0, import_react53.useEffect)(() => {
+    (0, import_react54.useEffect)(() => {
       if (endAt === null) return;
       const tick = () => {
         const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
@@ -4323,17 +4508,17 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react53.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_runtime51.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
       "div",
       {
         className: cx(field, className),
         "data-invalid": error || void 0,
         "data-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("label", { htmlFor: inputId, className: label2, children: label7 }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: row4, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: slots, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__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)(
                 "input",
                 {
                   ref: mergeRefs(ref, inputRef),
@@ -4353,7 +4538,7 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react53.forwardRef)(
                   className: input5
                 }
               ),
-              Array.from({ length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              Array.from({ length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                 "div",
                 {
                   className: slot,
@@ -4364,12 +4549,12 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react53.forwardRef)(
                 index
               ))
             ] }),
-            expiresIn !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { role: "timer", className: timer, children: formatTime(remaining) }),
-            onResend && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
+            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 })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { id: helperId, className: helperText({ error }), children: description8 }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
-          name && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("input", { type: "hidden", name, value: code })
+          /* @__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 })
         ]
       }
     );
@@ -4396,6 +4581,7 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react53.forwardRef)(
   Checkbox,
   Combobox,
   DatePicker,
+  DateRangePicker,
   DescriptionList,
   Divider,
   Drawer,
@@ -4462,6 +4648,7 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react53.forwardRef)(
   contrastRatio,
   createIntentColors,
   createTheme,
+  dateRangePresets,
   en,
   focusField,
   formatBusinessNumber,
@@ -4472,6 +4659,8 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react53.forwardRef)(
   isValidBusinessNumber,
   kakaoPostcodeProvider,
   parseISODate,
+  presetRange,
+  strongInputBorders,
   themeClass,
   toISODate,
   useMessages,