npm - @bestow-ui/react - Versions diffs - 1.6.0 → 1.7.0 - Mend

@bestow-ui/react 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md +10 -5
package/dist/{chunk-NKLDAXUR.js → chunk-YYLDXZWR.js} +26 -5
package/dist/chunk-YYLDXZWR.js.map +1 -0
package/dist/client.js +885 -578
package/dist/client.js.map +1 -1
package/dist/index.cjs +1333 -863
package/dist/index.cjs.map +1 -1
package/dist/index.css +600 -116
package/dist/index.css.map +1 -1
package/dist/index.d.cts +237 -22
package/dist/index.d.ts +237 -22
package/dist/shared.js +210 -52
package/dist/shared.js.map +1 -1
package/package.json +3 -3
package/dist/chunk-NKLDAXUR.js.map +0 -1

package/dist/client.js CHANGED Viewed

@@ -3,49 +3,103 @@ import {
   Skeleton,
   addDays,
   addMonths,
+  adornment,
   compareDays,
   cx,
+  field,
+  fieldFullWidth,
   focusField,
   getCalendarWeeks,
+  helperText,
+  input,
   isSameDay,
   isSameMonth,
   kakaoPostcodeProvider,
+  label,
   mergeThemes,
   parseISODate,
   presetRange,
+  requiredMark,
+  root,
+  systemThemeClass,
   themeClass,
   themeToStyle,
   toISODate,
   visuallyHidden
-} from "./chunk-NKLDAXUR.js";
+} from "./chunk-YYLDXZWR.js";
 // src/theme/ThemeProvider.tsx
-import { createContext, forwardRef, useContext, useMemo } from "react";
+import { createContext, forwardRef, useContext, useId, useMemo } from "react";
 // src/theme/ThemeProvider.css.ts
 var portal = "sfyhlv0";
-var root = "sfyhlv1 sfyhlv0";
+var root2 = "sfyhlv1 sfyhlv0";
+// src/theme/useSystemTheme.ts
+import { useSyncExternalStore } from "react";
+var query = "(prefers-color-scheme: dark)";
+var getMediaQuery = () => typeof window !== "undefined" && window.matchMedia ? window.matchMedia(query) : void 0;
+function subscribe(onChange) {
+  const mql = getMediaQuery();
+  mql?.addEventListener("change", onChange);
+  return () => mql?.removeEventListener("change", onChange);
+}
+var noopSubscribe = () => () => {
+};
+var getSnapshot = () => getMediaQuery()?.matches ? "dark" : "light";
+var getLight = () => "light";
+var getServerSnapshot = () => null;
+function useSystemTheme(enabled) {
+  return useSyncExternalStore(
+    enabled ? subscribe : noopSubscribe,
+    enabled ? getSnapshot : getLight,
+    enabled ? getServerSnapshot : getLight
+  );
+}
 // src/theme/ThemeProvider.tsx
-import { jsx } from "react/jsx-runtime";
-var ThemeContext = /* @__PURE__ */ createContext({ theme: "light" });
+import { jsx, jsxs } from "react/jsx-runtime";
+var ThemeContext = /* @__PURE__ */ createContext({
+  mode: "light",
+  theme: "light",
+  pending: false
+});
+var declarations = (style) => (
+  // 값은 개발자가 준 테마지만 </style> 로 태그가 끝나지 않게 < 를 CSS 이스케이프로 바꾼다
+  Object.entries(style ?? {}).map(([name, value3]) => `${name}:${value3.replace(/</g, "\\3c ")}`).join(";")
+);
+function pendingOverridesCss(selector, theme) {
+  const light = declarations(themeToStyle(theme, "light"));
+  const dark = declarations(themeToStyle(theme, "dark"));
+  if (!light && !dark) return void 0;
+  return `${selector}{${light}}@media (prefers-color-scheme: dark){${selector}{${dark}}}`;
+}
 var ThemeProvider = /* @__PURE__ */ forwardRef(function ThemeProvider2({ theme: themeProp, overrides, className, style, children, ...rest }, ref) {
   const parent = useContext(ThemeContext);
-  const theme = themeProp ?? parent.theme;
+  const mode = themeProp ?? parent.mode;
+  const system = useSystemTheme(mode === "system");
+  const pending = mode === "system" && system === null;
+  const theme = mode === "system" ? system ?? "light" : mode;
   const merged = useMemo(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
   const value3 = useMemo(
-    () => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
-    [theme, merged]
+    () => ({ mode, theme, pending, overrides: merged, style: pending ? void 0 : themeToStyle(merged, theme) }),
+    [mode, theme, pending, merged]
   );
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: value3, children: /* @__PURE__ */ jsx(
+  const id = useId();
+  const pendingCss = pending && pendingOverridesCss(`.${systemThemeClass}[data-bestow-theme-id="${id}"]`, merged);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: value3, children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
-      "data-theme": theme,
-      className: cx(themeClass[theme], root, className),
+      "data-theme": pending ? "system" : theme,
+      "data-bestow-theme-id": pendingCss ? id : void 0,
+      className: cx(pending ? systemThemeClass : themeClass[theme], root2, className),
       style: value3.style ? { ...value3.style, ...style } : style,
       ...rest,
-      children
+      children: [
+        pendingCss && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: pendingCss } }),
+        children
+      ]
     }
   ) });
 });
@@ -53,8 +107,8 @@ function useTheme() {
   return useContext(ThemeContext).theme;
 }
 function usePortalProps() {
-  const { theme, style } = useContext(ThemeContext);
-  return { className: cx(themeClass[theme], portal), style };
+  const { theme, pending, style } = useContext(ThemeContext);
+  return { className: cx(pending ? systemThemeClass : themeClass[theme], portal), style };
 }
 // src/i18n/LocaleProvider.tsx
@@ -81,21 +135,21 @@ var content = "v58j0l5";
 var contentInner = "v58j0l6";
 var header = "v58j0l2";
 var item = "v58j0l1";
-var root2 = "v58j0l0";
+var root3 = "v58j0l0";
 var trigger = "v58j0l3";
 // src/components/Accordion/Accordion.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Accordion = /* @__PURE__ */ forwardRef2(function Accordion2({ className, ...props }, ref) {
   const { collapsible, ...multipleProps } = props;
   const typedProps = props.type === "multiple" ? multipleProps : { ...multipleProps, collapsible };
   const rootProps = "value" in props ? { ...typedProps, value: props.value ?? (props.type === "multiple" ? [] : "") } : typedProps;
-  return /* @__PURE__ */ jsx3(RadixAccordion.Root, { ref, className: cx(root2, className), ...rootProps });
+  return /* @__PURE__ */ jsx3(RadixAccordion.Root, { ref, className: cx(root3, className), ...rootProps });
 });
 var AccordionItem = /* @__PURE__ */ forwardRef2(function AccordionItem2({ title: title6, headingLevel = 3, className, children, ...rest }, ref) {
   const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ jsxs(RadixAccordion.Item, { ref, className: cx(item, className), ...rest, children: [
-    /* @__PURE__ */ jsx3(RadixAccordion.Header, { asChild: true, children: /* @__PURE__ */ jsx3(Heading, { className: header, children: /* @__PURE__ */ jsxs(RadixAccordion.Trigger, { className: trigger, children: [
+  return /* @__PURE__ */ jsxs2(RadixAccordion.Item, { ref, className: cx(item, className), ...rest, children: [
+    /* @__PURE__ */ jsx3(RadixAccordion.Header, { asChild: true, children: /* @__PURE__ */ jsx3(Heading, { className: header, children: /* @__PURE__ */ jsxs2(RadixAccordion.Trigger, { className: trigger, children: [
       title6,
       /* @__PURE__ */ jsx3(ChevronDownIcon, { size: 18, className: chevron })
     ] }) }) }),
@@ -104,7 +158,7 @@ var AccordionItem = /* @__PURE__ */ forwardRef2(function AccordionItem2({ title:
 });
 // src/components/AddressInput/AddressInput.tsx
-import { forwardRef as forwardRef7, useEffect, useId as useId2, useRef as useRef2, useState } from "react";
+import { forwardRef as forwardRef7, useEffect, useId as useId3, useRef as useRef2, useState } from "react";
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef4 } from "react";
@@ -118,12 +172,12 @@ import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntim
 var spinner = /* @__PURE__ */ _7a468({ defaultClassName: "_4b5tg40", variantClassNames: { color: { inherit: "_4b5tg41", primary: "_4b5tg42", neutral: "_4b5tg43", danger: "_4b5tg44" }, size: { sm: "_4b5tg45", md: "_4b5tg46", lg: "_4b5tg47" } }, defaultVariants: { color: "inherit", size: "md" }, compoundVariants: [] });
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var Spinner = /* @__PURE__ */ forwardRef3(function Spinner2({ size, color, label: labelProp, className, ...rest }, ref) {
   const m = useMessages();
   const label6 = labelProp ?? m.loading ?? "\uB85C\uB529 \uC911";
   const a11y = label6 ? { role: "status" } : { "aria-hidden": true };
-  return /* @__PURE__ */ jsxs2("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
+  return /* @__PURE__ */ jsxs3("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
     /* @__PURE__ */ jsx4(LoaderIcon, { size: "100%" }),
     label6 && /* @__PURE__ */ jsx4("span", { className: visuallyHidden, children: label6 })
   ] });
@@ -135,7 +189,7 @@ var button = /* @__PURE__ */ _7a4682({ defaultClassName: "xcekda6", variantClass
 var icon = "xcekdai";
 // src/components/Button/Button.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var Button = /* @__PURE__ */ forwardRef4(function Button2({
   variant,
   color,
@@ -158,7 +212,7 @@ var Button = /* @__PURE__ */ forwardRef4(function Button2({
     onClick?.(event);
   };
   const leading = loading ? /* @__PURE__ */ jsx5(Spinner, { size: "sm", label: "" }) : startIcon;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "button",
     {
       ref,
@@ -177,25 +231,14 @@ var Button = /* @__PURE__ */ forwardRef4(function Button2({
   );
 });
-// src/components/Input/Input.css.ts
-import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
-var adornment = "_19p5zvh6";
-var field = "_19p5zvh7";
-var fieldFullWidth = "_19p5zvh8";
-var helperText = /* @__PURE__ */ _7a4683({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
-var input = "_19p5zvh5";
-var label = "_19p5zvh9";
-var requiredMark = "_19p5zvha";
-var root3 = /* @__PURE__ */ _7a4683({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var Input = /* @__PURE__ */ forwardRef5(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
-      className: cx(root3({ size, fullWidth }), rootClassName),
+      className: cx(root({ size, fullWidth }), rootClassName),
       "data-invalid": invalid || void 0,
       "data-disabled": disabled || void 0,
       children: [
@@ -217,14 +260,14 @@ var Input = /* @__PURE__ */ forwardRef5(function Input2({ size, invalid, fullWid
 });
 // src/components/Input/TextField.tsx
-import { forwardRef as forwardRef6, useId } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { forwardRef as forwardRef6, useId as useId2 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var TextField = /* @__PURE__ */ forwardRef6(function TextField2({ label: label6, helperText: helperText3, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
-  const generatedId = useId();
+  const generatedId = useId2();
   const inputId = id ?? generatedId;
   const helperId = helperText3 ? `${inputId}-helper` : void 0;
-  return /* @__PURE__ */ jsxs5("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs5("label", { htmlFor: inputId, className: label, children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs6("label", { htmlFor: inputId, className: label, children: [
       label6,
       required && /* @__PURE__ */ jsx7("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
@@ -272,10 +315,10 @@ function useReturnFocus(hasTrigger, onCloseAutoFocus) {
 }
 // src/components/Modal/Modal.css.ts
-import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
 var body = "_1pdsmv0a";
 var closeButton = "_1pdsmv09";
-var content2 = /* @__PURE__ */ _7a4684({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var content2 = /* @__PURE__ */ _7a4683({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var description = "_1pdsmv08";
 var footer = "_1pdsmv0b";
 var header2 = "_1pdsmv05";
@@ -284,14 +327,14 @@ var overlay = "_1pdsmv00";
 var title = "_1pdsmv07";
 // src/components/Modal/Modal.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function Modal({
   open,
   defaultOpen,
   onOpenChange,
   trigger: trigger4,
   title: title6,
-  description: description7,
+  description: description8,
   children,
   footer: footer5,
   size,
@@ -303,11 +346,11 @@ function Modal({
   const portal2 = usePortalProps();
   const m = useMessages();
   const focus = useReturnFocus(Boolean(trigger4), onCloseAutoFocus);
-  return /* @__PURE__ */ jsxs6(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+  return /* @__PURE__ */ jsxs7(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
     trigger4 && /* @__PURE__ */ jsx8(Dialog.Trigger, { asChild: true, children: trigger4 }),
-    /* @__PURE__ */ jsxs6(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsxs7(Dialog.Portal, { children: [
       /* @__PURE__ */ jsx8(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
-      /* @__PURE__ */ jsxs6(
+      /* @__PURE__ */ jsxs7(
         Dialog.Content,
         {
           className: cx(portal2.className, content2({ size }), className),
@@ -315,12 +358,12 @@ function Modal({
           onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
           onOpenAutoFocus: focus.onOpenAutoFocus,
           onCloseAutoFocus: focus.onCloseAutoFocus,
-          ...description7 ? {} : { "aria-describedby": void 0 },
+          ...description8 ? {} : { "aria-describedby": void 0 },
           children: [
-            /* @__PURE__ */ jsxs6("div", { className: header2, children: [
-              /* @__PURE__ */ jsxs6("div", { className: headings, children: [
+            /* @__PURE__ */ jsxs7("div", { className: header2, children: [
+              /* @__PURE__ */ jsxs7("div", { className: headings, children: [
                 /* @__PURE__ */ jsx8(Dialog.Title, { className: title, children: title6 }),
-                description7 && /* @__PURE__ */ jsx8(Dialog.Description, { className: description, children: description7 })
+                description8 && /* @__PURE__ */ jsx8(Dialog.Description, { className: description, children: description8 })
               ] }),
               !hideCloseButton && /* @__PURE__ */ jsx8(Dialog.Close, { className: closeButton, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx8(XIcon, { size: 16 }) })
             ] }),
@@ -343,7 +386,7 @@ var searchStatus = "_16fi7uy5";
 var zonecode = "_16fi7uy3";
 // src/components/AddressInput/AddressInput.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var EMPTY = { zonecode: "", address: "", extraAddress: "", detail: "" };
 function SearchArea({
   provider,
@@ -374,7 +417,7 @@ function SearchArea({
       cleanup?.();
     };
   }, [provider]);
-  return /* @__PURE__ */ jsxs7("div", { className: searchArea, children: [
+  return /* @__PURE__ */ jsxs8("div", { className: searchArea, children: [
     /* @__PURE__ */ jsx9("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
     status !== "ready" && /* @__PURE__ */ jsx9("div", { className: searchStatus, role: "status", children: status === "loading" ? /* @__PURE__ */ jsx9(Spinner, { label: loadingText }) : loadErrorText })
   ] });
@@ -402,7 +445,7 @@ var AddressInput = /* @__PURE__ */ forwardRef7(
     const searchLabel = searchLabelProp ?? m.addressSearch ?? "\uC8FC\uC18C \uAC80\uC0C9";
     const detailPlaceholder = detailPlaceholderProp ?? m.detailAddressPlaceholder ?? "\uC0C1\uC138 \uC8FC\uC18C (\uB3D9\xB7\uD638\uC218 \uB4F1)";
     const loadErrorText = loadErrorTextProp ?? m.addressLoadError ?? "\uC8FC\uC18C \uAC80\uC0C9\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694. \uC7A0\uC2DC \uB4A4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694.";
-    const baseId = useId2();
+    const baseId = useId3();
     const helperId = helperText3 ? `${baseId}-helper` : void 0;
     const detailRef = useRef2(null);
     const selectedRef = useRef2(false);
@@ -430,12 +473,12 @@ var AddressInput = /* @__PURE__ */ forwardRef7(
       setOpen(false);
     };
     const fullAddress = `${current2.address}${current2.extraAddress ?? ""}`;
-    return /* @__PURE__ */ jsxs7("fieldset", { ref, className: cx(fieldset, className), disabled, "aria-describedby": helperId, children: [
-      /* @__PURE__ */ jsxs7("legend", { className: legend, children: [
+    return /* @__PURE__ */ jsxs8("fieldset", { ref, className: cx(fieldset, className), disabled, "aria-describedby": helperId, children: [
+      /* @__PURE__ */ jsxs8("legend", { className: legend, children: [
         label6,
         required && /* @__PURE__ */ jsx9("span", { className: requiredMark, "aria-hidden": true, children: "*" })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: row, children: [
+      /* @__PURE__ */ jsxs8("div", { className: row, children: [
         /* @__PURE__ */ jsx9(
           TextField,
           {
@@ -477,7 +520,7 @@ var AddressInput = /* @__PURE__ */ forwardRef7(
         }
       ),
       helperText3 && /* @__PURE__ */ jsx9("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
-      name && /* @__PURE__ */ jsxs7(Fragment, { children: [
+      name && /* @__PURE__ */ jsxs8(Fragment, { children: [
         /* @__PURE__ */ jsx9("input", { type: "hidden", name: `${name}[zonecode]`, value: current2.zonecode }),
         /* @__PURE__ */ jsx9("input", { type: "hidden", name: `${name}[address]`, value: fullAddress }),
         /* @__PURE__ */ jsx9("input", { type: "hidden", name: `${name}[detail]`, value: current2.detail })
@@ -511,7 +554,7 @@ var AddressInput = /* @__PURE__ */ forwardRef7(
 );
 // src/components/AgreementGroup/AgreementGroup.tsx
-import { forwardRef as forwardRef9, useId as useId3, useState as useState2 } from "react";
+import { forwardRef as forwardRef9, useId as useId4, useState as useState2 } from "react";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@bestow-ui/icons";
 // src/components/Checkbox/Checkbox.tsx
@@ -528,22 +571,22 @@ function mergeRefs(...refs) {
 }
 // src/components/Checkbox/Checkbox.css.ts
-import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
 var checkIcon = "_1y7mzsn8 _1y7mzsn7";
-var control = /* @__PURE__ */ _7a4685({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var control = /* @__PURE__ */ _7a4684({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
 var input2 = "_1y7mzsn6";
-var root4 = /* @__PURE__ */ _7a4685({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var root4 = /* @__PURE__ */ _7a4684({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var Checkbox = /* @__PURE__ */ forwardRef8(function Checkbox2({ label: label6, size, indeterminate = false, invalid, disabled, onChange, onCheckedChange, className, ...rest }, ref) {
   const innerRef = useRef3(null);
   useEffect2(() => {
     if (innerRef.current) innerRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  return /* @__PURE__ */ jsxs8("label", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
-    /* @__PURE__ */ jsxs8("span", { className: control({ size }), children: [
+  return /* @__PURE__ */ jsxs9("label", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsxs9("span", { className: control({ size }), children: [
       /* @__PURE__ */ jsx10(
         "input",
         {
@@ -589,11 +632,11 @@ var tag = "j3uxdc7";
 var toggle = "j3uxdc8";
 // src/components/AgreementGroup/AgreementGroup.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var AgreementGroup = /* @__PURE__ */ forwardRef9(
   function AgreementGroup2(props, ref) {
     const {
-      items: items2,
+      items: items3,
       value: value3,
       defaultValue,
       onValueChange,
@@ -616,7 +659,7 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
     const optionalText = optionalTextProp ?? m.optional ?? "\uC120\uD0DD";
     const showText = showTextProp ?? m.show ?? "\uBCF4\uAE30";
     const hideText = hideTextProp ?? m.hide ?? "\uC811\uAE30";
-    const baseId = useId3();
+    const baseId = useId4();
     const helperId = helperText3 ? `${baseId}-helper` : void 0;
     const isControlled = "value" in props;
     const [innerValue, setInnerValue] = useState2(defaultValue ?? []);
@@ -626,11 +669,11 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
       if (!isControlled) setInnerValue(next);
       onValueChange?.(next);
     };
-    const allValues = items2.map((item9) => item9.value);
+    const allValues = items3.map((item9) => item9.value);
     const agreedCount = allValues.filter((v) => agreed.includes(v)).length;
-    const allChecked = items2.length > 0 && agreedCount === items2.length;
+    const allChecked = items3.length > 0 && agreedCount === items3.length;
     const toggleItem = (itemValue, checked) => update(checked ? [...agreed.filter((v) => v !== itemValue), itemValue] : agreed.filter((v) => v !== itemValue));
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "fieldset",
       {
         ref,
@@ -641,7 +684,7 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
         "data-invalid": error || void 0,
         children: [
           label6 && /* @__PURE__ */ jsx11("legend", { className: legend2, children: label6 }),
-          /* @__PURE__ */ jsxs9("div", { className: box, children: [
+          /* @__PURE__ */ jsxs10("div", { className: box, children: [
             /* @__PURE__ */ jsx11("div", { className: all, children: /* @__PURE__ */ jsx11(
               Checkbox,
               {
@@ -651,13 +694,13 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
                 onChange: (event) => update(event.target.checked ? allValues : [])
               }
             ) }),
-            /* @__PURE__ */ jsx11("ul", { className: list, children: items2.map((item9) => {
+            /* @__PURE__ */ jsx11("ul", { className: list, children: items3.map((item9) => {
               const labelId = `${baseId}-${item9.value}-label`;
               const toggleTextId = `${baseId}-${item9.value}-toggle`;
               const contentId = `${baseId}-${item9.value}-content`;
               const isOpen = expanded.includes(item9.value);
-              return /* @__PURE__ */ jsxs9("li", { className: item2, children: [
-                /* @__PURE__ */ jsxs9("div", { className: row2, children: [
+              return /* @__PURE__ */ jsxs10("li", { className: item2, children: [
+                /* @__PURE__ */ jsxs10("div", { className: row2, children: [
                   /* @__PURE__ */ jsx11(
                     Checkbox,
                     {
@@ -665,14 +708,14 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
                       checked: agreed.includes(item9.value),
                       invalid: error && item9.required && !agreed.includes(item9.value),
                       onChange: (event) => toggleItem(item9.value, event.target.checked),
-                      label: /* @__PURE__ */ jsxs9("span", { id: labelId, children: [
+                      label: /* @__PURE__ */ jsxs10("span", { id: labelId, children: [
                         /* @__PURE__ */ jsx11("span", { className: tag, "data-required": item9.required || void 0, children: item9.required ? requiredText : optionalText }),
                         " ",
                         item9.label
                       ] })
                     }
                   ),
-                  item9.content && /* @__PURE__ */ jsxs9(
+                  item9.content && /* @__PURE__ */ jsxs10(
                     "button",
                     {
                       type: "button",
@@ -707,23 +750,24 @@ import { forwardRef as forwardRef10 } from "react";
 import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon as XIcon2 } from "@bestow-ui/icons";
 // src/components/Alert/Alert.css.ts
-import { createRuntimeFn as _7a4686 } from "@vanilla-extract/recipes/createRuntimeFn";
-var action = "bsmpc0j";
-var alert = /* @__PURE__ */ _7a4686({ defaultClassName: "bsmpc06", variantClassNames: { variant: { soft: "bsmpc07", outline: "bsmpc08", solid: "bsmpc09" }, color: { primary: "bsmpc0a", neutral: "bsmpc0b", danger: "bsmpc0c", success: "bsmpc0d", warning: "bsmpc0e" } }, defaultVariants: { variant: "soft", color: "primary" }, compoundVariants: [] });
-var closeButton2 = "bsmpc0k";
-var content4 = "bsmpc0g";
-var description2 = "bsmpc0i";
-var icon2 = "bsmpc0f";
-var title2 = "bsmpc0h";
+import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
+var action = "bsmpc0k";
+var alert = /* @__PURE__ */ _7a4685({ defaultClassName: "bsmpc06", variantClassNames: { variant: { soft: "bsmpc07", outline: "bsmpc08", solid: "bsmpc09" }, color: { primary: "bsmpc0a", neutral: "bsmpc0b", danger: "bsmpc0c", success: "bsmpc0d", warning: "bsmpc0e", info: "bsmpc0f" } }, defaultVariants: { variant: "soft", color: "primary" }, compoundVariants: [] });
+var closeButton2 = "bsmpc0l";
+var content4 = "bsmpc0h";
+var description2 = "bsmpc0j";
+var icon2 = "bsmpc0g";
+var title2 = "bsmpc0i";
 // src/components/Alert/Alert.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var defaultIcons = {
   primary: InfoIcon,
   neutral: InfoIcon,
   success: CircleCheckIcon,
   warning: TriangleAlertIcon,
-  danger: CircleAlertIcon
+  danger: CircleAlertIcon,
+  info: InfoIcon
 };
 var Alert = /* @__PURE__ */ forwardRef10(function Alert2({
   variant,
@@ -741,9 +785,9 @@ var Alert = /* @__PURE__ */ forwardRef10(function Alert2({
   const closeLabel = closeLabelProp ?? m.close ?? "\uB2EB\uAE30";
   const DefaultIcon = defaultIcons[color];
   const iconNode = icon7 === void 0 ? /* @__PURE__ */ jsx12(DefaultIcon, { size: 18 }) : icon7;
-  return /* @__PURE__ */ jsxs10("div", { ref, className: cx(alert({ variant, color }), className), ...rest, children: [
+  return /* @__PURE__ */ jsxs11("div", { ref, className: cx(alert({ variant, color }), className), ...rest, children: [
     iconNode !== false && iconNode !== null && /* @__PURE__ */ jsx12("span", { className: icon2, "aria-hidden": true, children: iconNode }),
-    /* @__PURE__ */ jsxs10("div", { className: content4, children: [
+    /* @__PURE__ */ jsxs11("div", { className: content4, children: [
       title6 && /* @__PURE__ */ jsx12("div", { className: title2, children: title6 }),
       children && /* @__PURE__ */ jsx12("div", { className: description2, children })
     ] }),
@@ -830,7 +874,7 @@ function useFormattedInput({
 var input3 = "_70qkav0";
 // src/components/AmountInput/AmountInput.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var MAX_DIGITS = 15;
 var isDigit = (char) => /\d/.test(char);
 var AmountInput = /* @__PURE__ */ forwardRef11(
@@ -884,7 +928,7 @@ var AmountInput = /* @__PURE__ */ forwardRef11(
           onKeyDown?.(event);
         },
         endAdornment: unit2,
-        helperText: reading && helperText3 ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+        helperText: reading && helperText3 ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
           reading,
           /* @__PURE__ */ jsx13("br", {}),
           helperText3
@@ -902,13 +946,13 @@ import { UserIcon } from "@bestow-ui/icons";
 import { forwardRef as forwardRef12 } from "react";
 // src/components/Avatar/Avatar.css.ts
-import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4686 } from "@vanilla-extract/recipes/createRuntimeFn";
 var fallback = "_1fd2kp27";
 var image = "_1fd2kp26";
-var root5 = /* @__PURE__ */ _7a4687({ defaultClassName: "_1fd2kp20", variantClassNames: { size: { sm: "_1fd2kp21", md: "_1fd2kp22", lg: "_1fd2kp23" }, shape: { circle: "_1fd2kp24", square: "_1fd2kp25" } }, defaultVariants: { size: "md", shape: "circle" }, compoundVariants: [] });
+var root5 = /* @__PURE__ */ _7a4686({ defaultClassName: "_1fd2kp20", variantClassNames: { size: { sm: "_1fd2kp21", md: "_1fd2kp22", lg: "_1fd2kp23" }, shape: { circle: "_1fd2kp24", square: "_1fd2kp25" } }, defaultVariants: { size: "md", shape: "circle" }, compoundVariants: [] });
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function getInitials(name) {
   const [a = "", b = ""] = name.trim().split(/\s+/);
   const first = (word) => Array.from(word)[0] ?? "";
@@ -918,7 +962,7 @@ var Avatar = /* @__PURE__ */ forwardRef12(function Avatar2({ src, alt, name, fal
   const label6 = alt ?? name;
   const a11y = label6 ? { role: "img", "aria-label": label6 } : { "aria-hidden": true };
   const initials = name ? getInitials(name) : "";
-  return /* @__PURE__ */ jsxs12(RadixAvatar.Root, { ref, className: cx(root5({ size, shape }), className), ...a11y, ...rest, children: [
+  return /* @__PURE__ */ jsxs13(RadixAvatar.Root, { ref, className: cx(root5({ size, shape }), className), ...a11y, ...rest, children: [
     src && /* @__PURE__ */ jsx14(RadixAvatar.Image, { src, alt: "", className: image }),
     /* @__PURE__ */ jsx14(RadixAvatar.Fallback, { className: fallback, children: fallback2 ?? (initials || /* @__PURE__ */ jsx14(UserIcon, { size: "60%" })) })
   ] });
@@ -934,12 +978,12 @@ import { forwardRef as forwardRef13 } from "react";
 import { ExternalLinkIcon } from "@bestow-ui/icons";
 // src/components/Link/Link.css.ts
-import { createRuntimeFn as _7a4688 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRuntimeFn";
 var externalIcon = "_1t4hlp6";
-var link = /* @__PURE__ */ _7a4688({ defaultClassName: "_1t4hlp0", variantClassNames: { color: { primary: "_1t4hlp1", neutral: "_1t4hlp2", inherit: "_1t4hlp3" }, underline: { always: "_1t4hlp4", hover: "_1t4hlp5" } }, defaultVariants: { color: "primary", underline: "always" }, compoundVariants: [] });
+var link = /* @__PURE__ */ _7a4687({ defaultClassName: "_1t4hlp0", variantClassNames: { color: { primary: "_1t4hlp1", neutral: "_1t4hlp2", inherit: "_1t4hlp3" }, underline: { always: "_1t4hlp4", hover: "_1t4hlp5" } }, defaultVariants: { color: "primary", underline: "always" }, compoundVariants: [] });
 // src/components/Link/Link.tsx
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var Link = /* @__PURE__ */ forwardRef13(function Link2({
   as: Component = "a",
   asChild,
@@ -962,7 +1006,7 @@ var Link = /* @__PURE__ */ forwardRef13(function Link2({
       /* @__PURE__ */ jsx15(Slot, { ref, className: linkClassName, ...{ target, rel, ...rest }, children })
     );
   }
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     Component,
     {
       ref,
@@ -972,7 +1016,7 @@ var Link = /* @__PURE__ */ forwardRef13(function Link2({
       ...rest,
       children: [
         children,
-        external && /* @__PURE__ */ jsxs13(Fragment3, { children: [
+        external && /* @__PURE__ */ jsxs14(Fragment3, { children: [
           " ",
           /* @__PURE__ */ jsx15(ExternalLinkIcon, { className: externalIcon }),
           /* @__PURE__ */ jsx15("span", { className: visuallyHidden, children: externalLabel })
@@ -990,14 +1034,14 @@ var list2 = "_18t8ztt0";
 var separator = "_18t8ztt4";
 // src/components/Breadcrumb/Breadcrumb.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
-var Breadcrumb = /* @__PURE__ */ forwardRef14(function Breadcrumb2({ items: items2, linkAs, separator: separator4, "aria-label": ariaLabelProp, className, ...rest }, ref) {
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+var Breadcrumb = /* @__PURE__ */ forwardRef14(function Breadcrumb2({ items: items3, linkAs, separator: separator5, "aria-label": ariaLabelProp, className, ...rest }, ref) {
   const m = useMessages();
   const ariaLabel = ariaLabelProp ?? m.breadcrumb ?? "\uC774\uB3D9 \uACBD\uB85C";
-  const sep = separator4 ?? /* @__PURE__ */ jsx16(ChevronRightIcon, { size: 14 });
-  return /* @__PURE__ */ jsx16("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsx16("ol", { className: list2, children: items2.map((item9, index) => {
-    const isCurrent = index === items2.length - 1;
-    return /* @__PURE__ */ jsxs14("li", { className: item3, children: [
+  const sep = separator5 ?? /* @__PURE__ */ jsx16(ChevronRightIcon, { size: 14 });
+  return /* @__PURE__ */ jsx16("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsx16("ol", { className: list2, children: items3.map((item9, index) => {
+    const isCurrent = index === items3.length - 1;
+    return /* @__PURE__ */ jsxs15("li", { className: item3, children: [
       index > 0 && /* @__PURE__ */ jsx16("span", { className: separator, "aria-hidden": true, children: sep }),
       isCurrent || item9.href === void 0 ? /* @__PURE__ */ jsx16("span", { className: isCurrent ? current : void 0, "aria-current": isCurrent ? "page" : void 0, children: item9.label }) : /* @__PURE__ */ jsx16(Link, { as: linkAs, href: item9.href, color: "neutral", underline: "hover", className: link2, children: item9.label })
     ] }, index);
@@ -1005,9 +1049,23 @@ var Breadcrumb = /* @__PURE__ */ forwardRef14(function Breadcrumb2({ items: item
 });
 // src/components/BusinessNumberInput/BusinessNumberInput.tsx
-import { forwardRef as forwardRef15, useRef as useRef6, useState as useState4 } from "react";
+import { forwardRef as forwardRef15, useRef as useRef6, useState as useState5 } from "react";
 import { formatBusinessNumber, isValidBusinessNumber } from "@bestow-ui/korean-utils";
-import { jsx as jsx17 } from "react/jsx-runtime";
+// src/utils/useDelayedAnnouncement.ts
+import { useEffect as useEffect4, useState as useState4 } from "react";
+var ANNOUNCE_DELAY = 800;
+function useDelayedAnnouncement(message, delay = ANNOUNCE_DELAY) {
+  const [announced, setAnnounced] = useState4("");
+  useEffect4(() => {
+    const timer2 = setTimeout(() => setAnnounced(message), message ? delay : 0);
+    return () => clearTimeout(timer2);
+  }, [message, delay]);
+  return message && announced === message ? message : "";
+}
+// src/components/BusinessNumberInput/BusinessNumberInput.tsx
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var sanitize = (input6) => input6.replace(/\D/g, "").slice(0, 10);
 var isDigit2 = (char) => /\d/.test(char);
 var BusinessNumberInput = /* @__PURE__ */ forwardRef15(
@@ -1031,7 +1089,7 @@ var BusinessNumberInput = /* @__PURE__ */ forwardRef15(
     const invalidText = invalidTextProp ?? m.businessNumberInvalid ?? "\uC62C\uBC14\uB978 \uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638\uAC00 \uC544\uB2C8\uC5D0\uC694. \uBC88\uD638\uB97C \uB2E4\uC2DC \uD655\uC778\uD574 \uC8FC\uC138\uC694.";
     const label6 = labelProp ?? m.businessNumber ?? "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638";
     const incompleteText = m.businessNumberIncomplete ?? "10\uC790\uB9AC\uB97C \uBAA8\uB450 \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
-    const [touched, setTouched] = useState4(false);
+    const [touched, setTouched] = useState5(false);
     const field4 = useFormattedInput({
       isControlled: "value" in props,
       value: value3,
@@ -1045,42 +1103,46 @@ var BusinessNumberInput = /* @__PURE__ */ forwardRef15(
     const complete = field4.raw.length === 10;
     const autoInvalid = validate && field4.raw.length > 0 && (complete ? !isValidBusinessNumber(field4.raw) : touched);
     const showAuto = autoInvalid && error === void 0;
-    return /* @__PURE__ */ jsx17(
-      TextField,
-      {
-        ref: mergeRefs(ref, inputRef),
-        label: label6,
-        placeholder,
-        inputMode: "numeric",
-        value: field4.display,
-        onChange: field4.onChange,
-        onKeyDown: (event) => {
-          field4.onKeyDown(event);
-          onKeyDown?.(event);
-        },
-        onBlur: (event) => {
-          setTouched(true);
-          onBlur?.(event);
-        },
-        error: error ?? autoInvalid,
-        helperText: showAuto ? complete ? invalidText : incompleteText : helperText3,
-        ...rest
-      }
-    );
+    const announcement = useDelayedAnnouncement(showAuto && complete ? invalidText : "");
+    return /* @__PURE__ */ jsxs16(Fragment4, { children: [
+      /* @__PURE__ */ jsx17(
+        TextField,
+        {
+          ref: mergeRefs(ref, inputRef),
+          label: label6,
+          placeholder,
+          inputMode: "numeric",
+          value: field4.display,
+          onChange: field4.onChange,
+          onKeyDown: (event) => {
+            field4.onKeyDown(event);
+            onKeyDown?.(event);
+          },
+          onBlur: (event) => {
+            setTouched(true);
+            onBlur?.(event);
+          },
+          error: error ?? autoInvalid,
+          helperText: showAuto ? complete ? invalidText : incompleteText : helperText3,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsx17("span", { role: "status", className: visuallyHidden, children: announcement })
+    ] });
   }
 );
 // src/components/Calendar/Calendar.tsx
-import { forwardRef as forwardRef17, useEffect as useEffect4, useId as useId4, useRef as useRef7, useState as useState5 } from "react";
+import { forwardRef as forwardRef17, useEffect as useEffect5, useId as useId5, useRef as useRef7, useState as useState6 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2 } from "@bestow-ui/icons";
 import { KOREAN_WEEKDAYS } from "@bestow-ui/korean-utils";
 // src/utils/useIsClient.ts
-import { useSyncExternalStore } from "react";
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
 var subscribeNothing = () => () => {
 };
 function useIsClient() {
-  return useSyncExternalStore(
+  return useSyncExternalStore2(
     subscribeNothing,
     () => true,
     () => false
@@ -1091,8 +1153,8 @@ function useIsClient() {
 import { forwardRef as forwardRef16 } from "react";
 // src/components/IconButton/IconButton.css.ts
-import { createRuntimeFn as _7a4689 } from "@vanilla-extract/recipes/createRuntimeFn";
-var iconButton = /* @__PURE__ */ _7a4689({ defaultClassName: "ip9et20", variantClassNames: { size: { sm: "ip9et21", md: "ip9et22", lg: "ip9et23" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+import { createRuntimeFn as _7a4688 } from "@vanilla-extract/recipes/createRuntimeFn";
+var iconButton = /* @__PURE__ */ _7a4688({ defaultClassName: "ip9et20", variantClassNames: { size: { sm: "ip9et21", md: "ip9et22", lg: "ip9et23" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 // src/components/IconButton/IconButton.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
@@ -1122,7 +1184,7 @@ var root6 = "_1qyq67b0";
 var weekday = "_1qyq67b4";
 // src/components/Calendar/Calendar.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   const {
     value: value3,
@@ -1143,10 +1205,10 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   const nextMonthLabel = nextMonthLabelProp ?? m.nextMonth ?? "\uB2E4\uC74C \uB2EC";
   const weekdaysShort = m.weekdaysShort ?? KOREAN_WEEKDAYS;
   const weekdaysLong = m.weekdaysLong ?? KOREAN_WEEKDAYS.map((name) => `${name}\uC694\uC77C`);
-  const headingId = useId4();
+  const headingId = useId5();
   const gridRef = useRef7(null);
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState5(defaultValue ?? "");
+  const [innerValue, setInnerValue] = useState6(defaultValue ?? "");
   const selected = parseISODate(isControlled ? value3 : innerValue);
   const isClient = useIsClient();
   const today = parseISODate(todayProp) ?? (isClient ? /* @__PURE__ */ new Date() : null);
@@ -1158,16 +1220,16 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
     return date;
   };
   const isDisabled = (date) => minDate !== null && compareDays(date, minDate) < 0 || maxDate !== null && compareDays(date, maxDate) > 0 || !!isDateDisabled?.(date);
-  const [focusedState, setFocused] = useState5(null);
+  const [focusedState, setFocused] = useState6(null);
   const base = selected ?? today;
   const focused = focusedState ?? (base ? clamp(base) : null);
   const moveFocus = useRef7(initialFocus ?? false);
   const selectedIso = selected ? toISODate(selected) : "";
-  useEffect4(() => {
+  useEffect5(() => {
     const date = parseISODate(selectedIso);
     if (date) setFocused((prev) => isSameDay(prev, date) ? prev : date);
   }, [selectedIso]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!moveFocus.current || !focused) return;
     moveFocus.current = false;
     gridRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
@@ -1207,8 +1269,8 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   ) : [];
   const canPrev = !!visible && (!minDate || compareDays(new Date(visible.getFullYear(), visible.getMonth(), 0), minDate) >= 0);
   const canNext = !!visible && (!maxDate || compareDays(new Date(visible.getFullYear(), visible.getMonth() + 1, 1), maxDate) <= 0);
-  return /* @__PURE__ */ jsxs15("div", { ref, className: cx(root6, className), children: [
-    /* @__PURE__ */ jsxs15("div", { className: header3, children: [
+  return /* @__PURE__ */ jsxs17("div", { ref, className: cx(root6, className), children: [
+    /* @__PURE__ */ jsxs17("div", { className: header3, children: [
       /* @__PURE__ */ jsx19(
         IconButton,
         {
@@ -1231,7 +1293,7 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs15("table", { ref: gridRef, role: "grid", "aria-labelledby": headingId, className: grid, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsxs17("table", { ref: gridRef, role: "grid", "aria-labelledby": headingId, className: grid, onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsx19("tr", { children: weekdaysShort.map((name, index) => /* @__PURE__ */ jsx19("th", { scope: "col", abbr: weekdaysLong[index], className: weekday, "data-weekday": index, children: name }, index)) }) }),
       /* @__PURE__ */ jsx19("tbody", { children: weeks.map((week) => /* @__PURE__ */ jsx19("tr", { children: week.map((date) => {
         const iso = toISODate(date);
@@ -1269,15 +1331,111 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   ] });
 });
+// src/components/CheckboxGroup/CheckboxGroup.tsx
+import { forwardRef as forwardRef18, useId as useId6, useState as useState7 } from "react";
+// src/components/CheckboxGroup/CheckboxGroup.css.ts
+import { createRuntimeFn as _7a4689 } from "@vanilla-extract/recipes/createRuntimeFn";
+var description3 = /* @__PURE__ */ _7a4689({ defaultClassName: "_1z0r6xj5", variantClassNames: { size: { sm: "_1z0r6xj6", md: "_1z0r6xj7" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var groupLabel = "_1z0r6xj0";
+var items = /* @__PURE__ */ _7a4689({ defaultClassName: "_1z0r6xj1", variantClassNames: { orientation: { vertical: "_1z0r6xj2", horizontal: "_1z0r6xj3" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
+var option = "_1z0r6xj4";
+// src/components/CheckboxGroup/CheckboxGroup.tsx
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+var CheckboxGroup = /* @__PURE__ */ forwardRef18(
+  function CheckboxGroup2(props, ref) {
+    const {
+      options,
+      value: value3,
+      defaultValue,
+      onValueChange,
+      label: label6,
+      helperText: helperText3,
+      error,
+      orientation,
+      size,
+      disabled,
+      required,
+      name,
+      id,
+      "aria-label": ariaLabel,
+      className
+    } = props;
+    const m = useMessages();
+    const isControlled = "value" in props;
+    const [innerValue, setInnerValue] = useState7(defaultValue ?? []);
+    const current2 = isControlled ? value3 ?? [] : innerValue;
+    const generatedId = useId6();
+    const baseId = id ?? generatedId;
+    const labelId = label6 ? `${baseId}-label` : void 0;
+    const helperId = helperText3 ? `${baseId}-helper` : void 0;
+    const toggle3 = (optionValue, checked) => {
+      const next = options.map((option3) => option3.value).filter((v) => v === optionValue ? checked : current2.includes(v));
+      if (!isControlled) setInnerValue(next);
+      onValueChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs18("div", { className: cx(field, className), children: [
+      label6 && /* @__PURE__ */ jsxs18("span", { id: labelId, className: cx(label, groupLabel), children: [
+        label6,
+        required && /* @__PURE__ */ jsxs18(Fragment5, { children: [
+          /* @__PURE__ */ jsx20("span", { className: requiredMark, "aria-hidden": true, children: "*" }),
+          " ",
+          /* @__PURE__ */ jsxs18("span", { className: visuallyHidden, children: [
+            "(",
+            m.required ?? "\uD544\uC218",
+            ")"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx20(
+        "div",
+        {
+          ref,
+          id: baseId,
+          role: "group",
+          "aria-label": ariaLabel,
+          "aria-labelledby": labelId,
+          "aria-describedby": helperId,
+          className: items({ orientation }),
+          children: options.map((option3) => {
+            const itemId = `${baseId}-${option3.value}`;
+            const descriptionId = option3.description ? `${itemId}-description` : void 0;
+            return /* @__PURE__ */ jsxs18("div", { className: option, children: [
+              /* @__PURE__ */ jsx20(
+                Checkbox,
+                {
+                  id: itemId,
+                  name,
+                  value: option3.value,
+                  label: option3.label,
+                  size,
+                  checked: current2.includes(option3.value),
+                  onCheckedChange: (checked) => toggle3(option3.value, checked),
+                  disabled: disabled || option3.disabled,
+                  invalid: error,
+                  "aria-describedby": descriptionId
+                }
+              ),
+              option3.description && /* @__PURE__ */ jsx20("span", { id: descriptionId, className: description3({ size }), children: option3.description })
+            ] }, option3.value);
+          })
+        }
+      ),
+      helperText3 && /* @__PURE__ */ jsx20("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    ] });
+  }
+);
 // src/components/Combobox/Combobox.tsx
 import * as Popover from "@radix-ui/react-popover";
 import {
-  forwardRef as forwardRef18,
-  useEffect as useEffect5,
-  useId as useId5,
+  forwardRef as forwardRef19,
+  useEffect as useEffect6,
+  useId as useId7,
   useMemo as useMemo3,
   useRef as useRef8,
-  useState as useState6
+  useState as useState8
 } from "react";
 import { CheckIcon, ChevronDownIcon as ChevronDownIcon3, XIcon as XIcon3 } from "@bestow-ui/icons";
@@ -1297,10 +1455,9 @@ var empty = "c2pbq74";
 var toggle2 = "c2pbq71 c2pbq70";
 // src/components/Combobox/Combobox.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
-var NO_RESULTS_ANNOUNCE_DELAY = 800;
-var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
-var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+var defaultFilter = (option3, query2) => option3.label.toLowerCase().includes(query2.trim().toLowerCase());
+var Combobox = /* @__PURE__ */ forwardRef19(function Combobox2(props, ref) {
   const {
     options,
     value: value3,
@@ -1328,7 +1485,7 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
   const emptyMessage = emptyMessageProp ?? m.noResults ?? "\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694";
   const toggleLabel = toggleLabelProp ?? m.openList ?? "\uBAA9\uB85D \uC5F4\uAE30";
   const clearLabel = clearLabelProp ?? m.clearSelection ?? "\uC120\uD0DD \uC9C0\uC6B0\uAE30";
-  const generatedId = useId5();
+  const generatedId = useId7();
   const inputId = id ?? generatedId;
   const labelId = `${inputId}-label`;
   const listId = `${inputId}-listbox`;
@@ -1338,14 +1495,14 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
   const inputRef = useRef8(null);
   const anchorRef = useRef8(null);
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState6(defaultValue);
+  const [innerValue, setInnerValue] = useState8(defaultValue);
   const selectedValue = isControlled ? value3 : innerValue;
   const selectedOption = options.find((o) => o.value === selectedValue);
-  const [open, setOpen] = useState6(false);
-  const [query, setQuery] = useState6(null);
-  const [activeIndex, setActiveIndex] = useState6(-1);
-  const filtered = useMemo3(() => query ? options.filter((o) => filter(o, query)) : options, [options, filter, query]);
-  const inputText = query ?? selectedOption?.label ?? "";
+  const [open, setOpen] = useState8(false);
+  const [query2, setQuery] = useState8(null);
+  const [activeIndex, setActiveIndex] = useState8(-1);
+  const filtered = useMemo3(() => query2 ? options.filter((o) => filter(o, query2)) : options, [options, filter, query2]);
+  const inputText = query2 ?? selectedOption?.label ?? "";
   const firstEnabled = (list7, from = 0, step2 = 1) => {
     for (let i = from; i >= 0 && i < list7.length; i += step2) if (!list7[i].disabled) return i;
     return -1;
@@ -1367,13 +1524,13 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
     if (selectedValue) onValueChange?.("");
   };
   const close2 = () => {
-    if (query === "" && selectedValue) clearSelection();
+    if (query2 === "" && selectedValue) clearSelection();
     reset();
   };
-  const select2 = (option2) => {
-    if (option2.disabled) return;
-    if (!isControlled) setInnerValue(option2.value);
-    if (option2.value !== selectedValue) onValueChange?.(option2.value);
+  const select2 = (option3) => {
+    if (option3.disabled) return;
+    if (!isControlled) setInnerValue(option3.value);
+    if (option3.value !== selectedValue) onValueChange?.(option3.value);
     reset();
   };
   const move = (step2) => {
@@ -1403,8 +1560,8 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
       case "Enter":
         if (open) {
           event.preventDefault();
-          const option2 = filtered[activeIndex];
-          if (option2) select2(option2);
+          const option3 = filtered[activeIndex];
+          if (option3) select2(option3);
           else close2();
         }
         break;
@@ -1419,34 +1576,34 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
         break;
     }
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (!open || activeIndex < 0) return;
     document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: "nearest" });
   }, [open, activeIndex]);
   const hasOptions = filtered.length > 0;
   const noResults = open && !disabled && !hasOptions;
-  const [announcedFor, setAnnouncedFor] = useState6(void 0);
-  useEffect5(() => {
+  const [announcedFor, setAnnouncedFor] = useState8(void 0);
+  useEffect6(() => {
     if (!noResults) return;
-    const timer2 = setTimeout(() => setAnnouncedFor(query), NO_RESULTS_ANNOUNCE_DELAY);
+    const timer2 = setTimeout(() => setAnnouncedFor(query2), ANNOUNCE_DELAY);
     return () => clearTimeout(timer2);
-  }, [noResults, query]);
-  const announceNoResults = noResults && announcedFor === query;
-  return /* @__PURE__ */ jsxs16("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs16("label", { id: labelId, htmlFor: inputId, className: label, children: [
+  }, [noResults, query2]);
+  const announceNoResults = noResults && announcedFor === query2;
+  return /* @__PURE__ */ jsxs19("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs19("label", { id: labelId, htmlFor: inputId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx20("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx21("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs16(Popover.Root, { open: open && !disabled, onOpenChange: (next) => next ? openList() : close2(), children: [
-      /* @__PURE__ */ jsx20(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs16(
+    /* @__PURE__ */ jsxs19(Popover.Root, { open: open && !disabled, onOpenChange: (next) => next ? openList() : close2(), children: [
+      /* @__PURE__ */ jsx21(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs19(
         "div",
         {
           ref: anchorRef,
-          className: cx(root3({ size, fullWidth }), className),
+          className: cx(root({ size, fullWidth }), className),
           "data-invalid": error || void 0,
           "data-disabled": disabled || void 0,
           children: [
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx21(
               "input",
               {
                 ref: mergeRefs(ref, inputRef),
@@ -1473,7 +1630,7 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
                 className: input
               }
             ),
-            clearable && selectedOption && !disabled && /* @__PURE__ */ jsx20(
+            clearable && selectedOption && !disabled && /* @__PURE__ */ jsx21(
               "button",
               {
                 type: "button",
@@ -1486,10 +1643,10 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
                   reset();
                   inputRef.current?.focus();
                 },
-                children: /* @__PURE__ */ jsx20(XIcon3, { size: 16 })
+                children: /* @__PURE__ */ jsx21(XIcon3, { size: 16 })
               }
             ),
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx21(
               "button",
               {
                 type: "button",
@@ -1504,13 +1661,13 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
                   else openList(options);
                   inputRef.current?.focus();
                 },
-                children: /* @__PURE__ */ jsx20(ChevronDownIcon3, { size: 16 })
+                children: /* @__PURE__ */ jsx21(ChevronDownIcon3, { size: 16 })
               }
             )
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx20(Popover.Portal, { children: /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx21(Popover.Portal, { children: /* @__PURE__ */ jsx21(
         Popover.Content,
         {
           role: "presentation",
@@ -1525,63 +1682,63 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
           onInteractOutside: (event) => {
             if (anchorRef.current?.contains(event.target)) event.preventDefault();
           },
-          children: hasOptions ? /* @__PURE__ */ jsx20(
+          children: hasOptions ? /* @__PURE__ */ jsx21(
             "div",
             {
               id: listId,
               role: "listbox",
               "aria-labelledby": label6 ? labelId : void 0,
               "aria-label": label6 ? void 0 : ariaLabel,
-              children: filtered.map((option2, index) => {
-                const isSelected = option2.value === selectedValue;
+              children: filtered.map((option3, index) => {
+                const isSelected = option3.value === selectedValue;
                 return (
                   // aria-activedescendant 패턴: 포커스·키보드는 입력창이 맡고 항목은 포커스를 받지 않는다 (WAI-ARIA combobox)
                   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
-                  /* @__PURE__ */ jsxs16(
+                  /* @__PURE__ */ jsxs19(
                     "div",
                     {
                       id: optionId(index),
                       role: "option",
                       "aria-selected": isSelected,
-                      "aria-disabled": option2.disabled || void 0,
+                      "aria-disabled": option3.disabled || void 0,
                       "data-highlighted": index === activeIndex ? "" : void 0,
                       "data-state": isSelected ? "checked" : "unchecked",
-                      "data-disabled": option2.disabled ? "" : void 0,
+                      "data-disabled": option3.disabled ? "" : void 0,
                       className: item4,
                       onMouseDown: (event) => event.preventDefault(),
-                      onMouseMove: () => !option2.disabled && setActiveIndex(index),
-                      onClick: () => select2(option2),
+                      onMouseMove: () => !option3.disabled && setActiveIndex(index),
+                      onClick: () => select2(option3),
                       children: [
-                        option2.label,
-                        isSelected && /* @__PURE__ */ jsx20("span", { className: itemIndicator, "aria-hidden": true, children: /* @__PURE__ */ jsx20(CheckIcon, { size: 16 }) })
+                        option3.label,
+                        isSelected && /* @__PURE__ */ jsx21("span", { className: itemIndicator, "aria-hidden": true, children: /* @__PURE__ */ jsx21(CheckIcon, { size: 16 }) })
                       ]
                     },
-                    option2.value
+                    option3.value
                   )
                 );
               })
             }
           ) : (
             // 스크린리더 알림은 아래의 항상 있는 status 영역이 맡는다 (여기는 화면 표시만)
-            /* @__PURE__ */ jsx20("div", { className: empty, children: emptyMessage })
+            /* @__PURE__ */ jsx21("div", { className: empty, children: emptyMessage })
           )
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx20("span", { role: "status", className: visuallyHidden, children: announceNoResults ? emptyMessage : "" }),
-    name && /* @__PURE__ */ jsx20("input", { type: "hidden", name, value: selectedValue ?? "" }),
-    helperText3 && /* @__PURE__ */ jsx20("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    /* @__PURE__ */ jsx21("span", { role: "status", className: visuallyHidden, children: announceNoResults ? emptyMessage : "" }),
+    name && /* @__PURE__ */ jsx21("input", { type: "hidden", name, value: selectedValue ?? "" }),
+    helperText3 && /* @__PURE__ */ jsx21("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
 // src/components/DatePicker/DatePicker.tsx
-import { forwardRef as forwardRef19, useEffect as useEffect6, useRef as useRef9, useState as useState7 } from "react";
+import { forwardRef as forwardRef20, useEffect as useEffect7, useRef as useRef9, useState as useState9 } from "react";
 import { CalendarIcon } from "@bestow-ui/icons";
 // src/components/Popover/Popover.tsx
 import * as RadixPopover from "@radix-ui/react-popover";
 import { XIcon as XIcon4 } from "@bestow-ui/icons";
-import { useId as useId6 } from "react";
+import { useId as useId8 } from "react";
 // src/components/Popover/Popover.css.ts
 var arrow = "_1j99p8x4";
@@ -1591,7 +1748,7 @@ var header4 = "_1j99p8x1";
 var title3 = "_1j99p8x2";
 // src/components/Popover/Popover.tsx
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function Popover2({
   content: content12,
   children,
@@ -1611,10 +1768,10 @@ function Popover2({
 }) {
   const portal2 = usePortalProps();
   const m = useMessages();
-  const titleId = useId6();
-  return /* @__PURE__ */ jsxs17(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
-    /* @__PURE__ */ jsx21(RadixPopover.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx21(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs17(
+  const titleId = useId8();
+  return /* @__PURE__ */ jsxs20(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
+    /* @__PURE__ */ jsx22(RadixPopover.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx22(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs20(
       RadixPopover.Content,
       {
         side,
@@ -1627,12 +1784,12 @@ function Popover2({
         className: cx(portal2.className, content7, className),
         style: { ...portal2.style, ...style },
         children: [
-          (title6 || showClose) && /* @__PURE__ */ jsxs17("div", { className: header4, children: [
-            title6 && /* @__PURE__ */ jsx21("h2", { id: titleId, className: title3, children: title6 }),
-            showClose && /* @__PURE__ */ jsx21(RadixPopover.Close, { className: closeButton3, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx21(XIcon4, { size: 16 }) })
+          (title6 || showClose) && /* @__PURE__ */ jsxs20("div", { className: header4, children: [
+            title6 && /* @__PURE__ */ jsx22("h2", { id: titleId, className: title3, children: title6 }),
+            showClose && /* @__PURE__ */ jsx22(RadixPopover.Close, { className: closeButton3, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx22(XIcon4, { size: 16 }) })
           ] }),
           content12,
-          showArrow && /* @__PURE__ */ jsx21(RadixPopover.Arrow, { className: arrow, width: 12, height: 6 })
+          showArrow && /* @__PURE__ */ jsx22(RadixPopover.Arrow, { className: arrow, width: 12, height: 6 })
         ]
       }
     ) })
@@ -1641,11 +1798,11 @@ function Popover2({
 var PopoverClose = RadixPopover.Close;
 // src/components/DatePicker/DatePicker.tsx
-import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 var sanitize2 = (input6) => input6.replace(/\D/g, "").slice(0, 8);
 var format = (digits) => digits.length <= 4 ? digits : digits.length <= 6 ? `${digits.slice(0, 4)}-${digits.slice(4)}` : `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}`;
 var isDigit3 = (char) => /\d/.test(char);
-var DatePicker = /* @__PURE__ */ forwardRef19(
+var DatePicker = /* @__PURE__ */ forwardRef20(
   function DatePicker2(props, ref) {
     const {
       value: value3,
@@ -1678,8 +1835,8 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
     const invalidText = invalidTextProp ?? m.dateInvalid ?? "\uC62C\uBC14\uB978 \uB0A0\uC9DC\uAC00 \uC544\uB2C8\uC5D0\uC694.";
     const unavailableText = unavailableTextProp ?? m.dateUnavailable ?? "\uACE0\uB97C \uC218 \uC5C6\uB294 \uB0A0\uC9DC\uC608\uC694.";
     const incompleteText = incompleteTextProp ?? m.dateIncomplete ?? "\uB0A0\uC9DC\uB97C YYYY-MM-DD \uD615\uC2DD\uC73C\uB85C \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
-    const [open, setOpen] = useState7(false);
-    const [touched, setTouched] = useState7(false);
+    const [open, setOpen] = useState9(false);
+    const [touched, setTouched] = useState9(false);
     const isControlled = "value" in props;
     const lastEmitted = useRef9(isControlled ? value3 ?? "" : defaultValue ?? "");
     const minDate = parseISODate(min);
@@ -1706,7 +1863,7 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
     });
     const textIso = toIso(field4.raw);
     const { setRaw } = field4;
-    useEffect6(() => {
+    useEffect7(() => {
       if (!isControlled) return;
       const next = value3 ?? "";
       lastEmitted.current = next;
@@ -1720,9 +1877,10 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
     const complete = field4.raw.length === 8;
     const autoError = complete ? !date ? invalidText : isUnavailable(date) ? unavailableText : null : touched && field4.raw.length > 0 ? incompleteText : null;
     const showAuto = autoError !== null && error === void 0;
+    const announcement = useDelayedAnnouncement(showAuto && complete ? autoError ?? "" : "");
     const selectedIso = date && !isUnavailable(date) ? textIso : "";
-    return /* @__PURE__ */ jsxs18(Fragment4, { children: [
-      /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsxs21(Fragment6, { children: [
+      /* @__PURE__ */ jsx23(
         TextField,
         {
           ref: mergeRefs(ref, inputRef),
@@ -1741,7 +1899,7 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
           disabled,
           fullWidth,
           rootClassName: className,
-          endAdornment: /* @__PURE__ */ jsx22(
+          endAdornment: /* @__PURE__ */ jsx23(
             Popover2,
             {
               open,
@@ -1750,7 +1908,7 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
               align: "end",
               "aria-label": m.calendar ?? "\uB2EC\uB825",
               onOpenAutoFocus: (event) => event.preventDefault(),
-              content: /* @__PURE__ */ jsx22(
+              content: /* @__PURE__ */ jsx23(
                 Calendar,
                 {
                   value: selectedIso,
@@ -1767,18 +1925,19 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
                   initialFocus: true
                 }
               ),
-              children: /* @__PURE__ */ jsx22(IconButton, { "aria-label": calendarLabel, size: "sm", disabled, children: /* @__PURE__ */ jsx22(CalendarIcon, {}) })
+              children: /* @__PURE__ */ jsx23(IconButton, { "aria-label": calendarLabel, size: "sm", disabled, children: /* @__PURE__ */ jsx23(CalendarIcon, {}) })
             }
           )
         }
       ),
-      name && /* @__PURE__ */ jsx22("input", { type: "hidden", name, value: selectedIso })
+      /* @__PURE__ */ jsx23("span", { role: "status", className: visuallyHidden, children: announcement }),
+      name && /* @__PURE__ */ jsx23("input", { type: "hidden", name, value: selectedIso })
     ] });
   }
 );
 // src/components/DateRangePicker/DateRangePicker.tsx
-import { forwardRef as forwardRef20, useId as useId7, useState as useState8 } from "react";
+import { forwardRef as forwardRef21, useId as useId9, useState as useState10 } from "react";
 // src/components/DateRangePicker/DateRangePicker.css.ts
 var field2 = "_17277dh3";
@@ -1789,8 +1948,8 @@ var presets = "_17277dh5";
 var separator2 = "_17277dh4";
 // src/components/DateRangePicker/DateRangePicker.tsx
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
-var DateRangePicker = /* @__PURE__ */ forwardRef20(
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+var DateRangePicker = /* @__PURE__ */ forwardRef21(
   function DateRangePicker2(props, ref) {
     const {
       value: value3,
@@ -1815,12 +1974,12 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
       className
     } = props;
     const m = useMessages();
-    const generatedId = useId7();
+    const generatedId = useId9();
     const baseId = id ?? generatedId;
     const helperId = helperText3 ? `${baseId}-helper` : void 0;
     const isClient = useIsClient();
     const isControlled = "value" in props;
-    const [inner, setInner] = useState8(defaultValue ?? { start: "", end: "" });
+    const [inner, setInner] = useState10(defaultValue ?? { start: "", end: "" });
     const range3 = isControlled ? value3 ?? { start: "", end: "" } : inner;
     const update = (next) => {
       if (next.start === range3.start && next.end === range3.end) return;
@@ -1831,7 +1990,7 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
     const startLabel = startLabelProp ?? m.dateRangeStart ?? "\uC2DC\uC791\uC77C";
     const endLabel = endLabelProp ?? m.dateRangeEnd ?? "\uC885\uB8CC\uC77C";
     const common = { isDateDisabled, isHoliday, today, disabled, required, fullWidth: true };
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs22(
       "fieldset",
       {
         ref,
@@ -1840,12 +1999,12 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
         "aria-describedby": helperId,
         "data-invalid": error || void 0,
         children: [
-          label6 && /* @__PURE__ */ jsxs19("legend", { className: legend3, children: [
+          label6 && /* @__PURE__ */ jsxs22("legend", { className: legend3, children: [
             label6,
-            required && /* @__PURE__ */ jsx23("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+            required && /* @__PURE__ */ jsx24("span", { className: requiredMark, "aria-hidden": true, children: "*" })
           ] }),
-          /* @__PURE__ */ jsxs19("div", { className: fields, children: [
-            /* @__PURE__ */ jsx23("div", { className: field2, children: /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsxs22("div", { className: fields, children: [
+            /* @__PURE__ */ jsx24("div", { className: field2, children: /* @__PURE__ */ jsx24(
               DatePicker,
               {
                 ...common,
@@ -1859,8 +2018,8 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
                 error: error || void 0
               }
             ) }),
-            /* @__PURE__ */ jsx23("span", { className: separator2, "aria-hidden": true, children: "~" }),
-            /* @__PURE__ */ jsx23("div", { className: field2, children: /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24("span", { className: separator2, "aria-hidden": true, children: "~" }),
+            /* @__PURE__ */ jsx24("div", { className: field2, children: /* @__PURE__ */ jsx24(
               DatePicker,
               {
                 ...common,
@@ -1875,10 +2034,10 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
               }
             ) })
           ] }),
-          presets2 && presets2.length > 0 && /* @__PURE__ */ jsx23("div", { role: "group", "aria-label": m.dateRangePresets ?? "\uBE60\uB978 \uC120\uD0DD", className: presets, children: presets2.map((preset) => {
+          presets2 && presets2.length > 0 && /* @__PURE__ */ jsx24("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__ */ jsx23(
+            return /* @__PURE__ */ jsx24(
               Button,
               {
                 type: "button",
@@ -1893,7 +2052,7 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
               preset.label
             );
           }) }),
-          helperText3 && /* @__PURE__ */ jsx23("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+          helperText3 && /* @__PURE__ */ jsx24("p", { id: helperId, className: helperText({ error }), children: helperText3 })
         ]
       }
     );
@@ -1909,7 +2068,7 @@ import { createRuntimeFn as _7a46810 } from "@vanilla-extract/recipes/createRunt
 var body2 = "nmobyvy";
 var closeButton4 = "nmobyvx";
 var content8 = /* @__PURE__ */ _7a46810({ defaultClassName: "nmobyv9", variantClassNames: { side: { right: "nmobyva", left: "nmobyvb", top: "nmobyvc", bottom: "nmobyvd" }, size: { sm: "nmobyve", md: "nmobyvf", lg: "nmobyvg" } }, defaultVariants: { side: "right", size: "md" }, compoundVariants: [[{ side: "right", size: "sm" }, "nmobyvh"], [{ side: "right", size: "md" }, "nmobyvi"], [{ side: "right", size: "lg" }, "nmobyvj"], [{ side: "left", size: "sm" }, "nmobyvk"], [{ side: "left", size: "md" }, "nmobyvl"], [{ side: "left", size: "lg" }, "nmobyvm"], [{ side: "top", size: "sm" }, "nmobyvn"], [{ side: "top", size: "md" }, "nmobyvo"], [{ side: "top", size: "lg" }, "nmobyvp"], [{ side: "bottom", size: "sm" }, "nmobyvq"], [{ side: "bottom", size: "md" }, "nmobyvr"], [{ side: "bottom", size: "lg" }, "nmobyvs"]] });
-var description3 = "nmobyvw";
+var description4 = "nmobyvw";
 var footer2 = "nmobyvz";
 var header5 = "nmobyvt";
 var headings2 = "nmobyvu";
@@ -1917,14 +2076,14 @@ var overlay2 = "nmobyv0";
 var title4 = "nmobyvv";
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 function Drawer({
   open,
   defaultOpen,
   onOpenChange,
   trigger: trigger4,
   title: title6,
-  description: description7,
+  description: description8,
   children,
   footer: footer5,
   side,
@@ -1936,11 +2095,11 @@ function Drawer({
   const portal2 = usePortalProps();
   const m = useMessages();
   const focus = useReturnFocus(Boolean(trigger4));
-  return /* @__PURE__ */ jsxs20(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
-    trigger4 && /* @__PURE__ */ jsx24(Dialog2.Trigger, { asChild: true, children: trigger4 }),
-    /* @__PURE__ */ jsxs20(Dialog2.Portal, { children: [
-      /* @__PURE__ */ jsx24(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
-      /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs23(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger4 && /* @__PURE__ */ jsx25(Dialog2.Trigger, { asChild: true, children: trigger4 }),
+    /* @__PURE__ */ jsxs23(Dialog2.Portal, { children: [
+      /* @__PURE__ */ jsx25(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
+      /* @__PURE__ */ jsxs23(
         Dialog2.Content,
         {
           className: cx(portal2.className, content8({ side, size }), className),
@@ -1949,17 +2108,17 @@ function Drawer({
           onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
           onOpenAutoFocus: focus.onOpenAutoFocus,
           onCloseAutoFocus: focus.onCloseAutoFocus,
-          ...description7 ? {} : { "aria-describedby": void 0 },
+          ...description8 ? {} : { "aria-describedby": void 0 },
           children: [
-            /* @__PURE__ */ jsxs20("div", { className: header5, children: [
-              /* @__PURE__ */ jsxs20("div", { className: headings2, children: [
-                /* @__PURE__ */ jsx24(Dialog2.Title, { className: title4, children: title6 }),
-                description7 && /* @__PURE__ */ jsx24(Dialog2.Description, { className: description3, children: description7 })
+            /* @__PURE__ */ jsxs23("div", { className: header5, children: [
+              /* @__PURE__ */ jsxs23("div", { className: headings2, children: [
+                /* @__PURE__ */ jsx25(Dialog2.Title, { className: title4, children: title6 }),
+                description8 && /* @__PURE__ */ jsx25(Dialog2.Description, { className: description4, children: description8 })
               ] }),
-              !hideCloseButton && /* @__PURE__ */ jsx24(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx24(IconButton, { "aria-label": m.close ?? "\uB2EB\uAE30", size: "sm", className: closeButton4, children: /* @__PURE__ */ jsx24(XIcon5, {}) }) })
+              !hideCloseButton && /* @__PURE__ */ jsx25(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx25(IconButton, { "aria-label": m.close ?? "\uB2EB\uAE30", size: "sm", className: closeButton4, children: /* @__PURE__ */ jsx25(XIcon5, {}) }) })
             ] }),
-            children && /* @__PURE__ */ jsx24("div", { className: body2, children }),
-            footer5 && /* @__PURE__ */ jsx24("div", { className: footer2, children: footer5 })
+            children && /* @__PURE__ */ jsx25("div", { className: body2, children }),
+            footer5 && /* @__PURE__ */ jsx25("div", { className: footer2, children: footer5 })
           ]
         }
       )
@@ -1969,7 +2128,7 @@ function Drawer({
 var DrawerClose = Dialog2.Close;
 // src/components/ErrorSummary/ErrorSummary.tsx
-import { forwardRef as forwardRef21, useEffect as useEffect7, useId as useId8, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef22, useEffect as useEffect8, useId as useId10, useRef as useRef10 } from "react";
 // src/components/ErrorSummary/ErrorSummary.css.ts
 var link3 = "_1cdophv2";
@@ -1977,17 +2136,17 @@ var list3 = "_1cdophv1";
 var root7 = "_1cdophv0";
 // src/components/ErrorSummary/ErrorSummary.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
-var ErrorSummary = /* @__PURE__ */ forwardRef21(function ErrorSummary2({ errors: errors2, title: title6, focusKey, className, ...rest }, ref) {
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ErrorSummary = /* @__PURE__ */ forwardRef22(function ErrorSummary2({ errors: errors2, title: title6, focusKey, className, ...rest }, ref) {
   const m = useMessages();
-  const titleId = useId8();
+  const titleId = useId10();
   const rootRef = useRef10(null);
   const hasErrors = errors2.length > 0;
-  useEffect7(() => {
+  useEffect8(() => {
     if (hasErrors) rootRef.current?.focus();
   }, [focusKey, hasErrors]);
   if (!hasErrors) return null;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       ref: mergeRefs(ref, rootRef),
@@ -1995,12 +2154,12 @@ var ErrorSummary = /* @__PURE__ */ forwardRef21(function ErrorSummary2({ errors:
       "aria-labelledby": titleId,
       className: cx(root7, className),
       ...rest,
-      children: /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsx26(
         Alert,
         {
           color: "danger",
-          title: /* @__PURE__ */ jsx25("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__ */ jsx25("ul", { className: list3, children: errors2.map((error) => /* @__PURE__ */ jsx25("li", { children: /* @__PURE__ */ jsx25(
+          title: /* @__PURE__ */ jsx26("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__ */ jsx26("ul", { className: list3, children: errors2.map((error) => /* @__PURE__ */ jsx26("li", { children: /* @__PURE__ */ jsx26(
             "a",
             {
               href: `#${error.id}`,
@@ -2018,7 +2177,7 @@ var ErrorSummary = /* @__PURE__ */ forwardRef21(function ErrorSummary2({ errors:
 });
 // src/components/FileUpload/FileUpload.tsx
-import { forwardRef as forwardRef22, useEffect as useEffect8, useId as useId9, useRef as useRef11, useState as useState9 } from "react";
+import { forwardRef as forwardRef23, useEffect as useEffect9, useId as useId11, useRef as useRef11, useState as useState11 } from "react";
 import { FileIcon, UploadIcon, XIcon as XIcon6 } from "@bestow-ui/icons";
 // src/components/FileUpload/FileUpload.css.ts
@@ -2034,7 +2193,7 @@ var list4 = "r2jefr4";
 var root8 = "r2jefr0";
 // src/components/FileUpload/FileUpload.tsx
-import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 var REMOVED_ANNOUNCE_DELAY = 500;
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -2051,7 +2210,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__ */ forwardRef22(function FileUpload2(props, ref) {
+var FileUpload = /* @__PURE__ */ forwardRef23(function FileUpload2(props, ref) {
   const {
     value: value3,
     defaultValue,
@@ -2072,12 +2231,12 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
   } = props;
   const m = useMessages();
   const isControlled = "value" in props;
-  const [innerFiles, setInnerFiles] = useState9(defaultValue ?? []);
+  const [innerFiles, setInnerFiles] = useState11(defaultValue ?? []);
   const files = isControlled ? value3 ?? NO_FILES : innerFiles;
-  const [rejections, setRejections] = useState9([]);
-  const [announcement, setAnnouncement] = useState9("");
-  const [dragging, setDragging] = useState9(false);
-  const generatedId = useId9();
+  const [rejections, setRejections] = useState11([]);
+  const [announcement, setAnnouncement] = useState11("");
+  const [dragging, setDragging] = useState11(false);
+  const generatedId = useId11();
   const baseId = id ?? generatedId;
   const labelId = label6 ? `${baseId}-label` : void 0;
   const helperId = helperText3 ? `${baseId}-helper` : void 0;
@@ -2087,7 +2246,7 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
   const removeButtonRefs = useRef11([]);
   const focusAfterRemove = useRef11(null);
   const announceTimer = useRef11(void 0);
-  useEffect8(() => () => clearTimeout(announceTimer.current), []);
+  useEffect9(() => () => clearTimeout(announceTimer.current), []);
   const selectLabel = m.fileSelect ?? "\uD30C\uC77C \uC120\uD0DD";
   const reasonText = (rejection) => {
     const fileName2 = rejection.file.name;
@@ -2135,13 +2294,13 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
     setRejections([]);
     commit(next, m.fileRemoved?.(removed.name) ?? `${removed.name} \uC0AD\uC81C\uB428`, REMOVED_ANNOUNCE_DELAY);
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if (focusAfterRemove.current === null) return;
     const target = focusAfterRemove.current;
     focusAfterRemove.current = null;
     (target >= 0 ? removeButtonRefs.current[target] : selectButtonRef.current)?.focus();
   }, [files]);
-  useEffect8(() => {
+  useEffect9(() => {
     const input6 = inputRef.current;
     if (!name || !input6 || typeof DataTransfer === "undefined") return;
     try {
@@ -2156,12 +2315,12 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
     event.preventDefault();
     setDragging(over);
   };
-  return /* @__PURE__ */ jsxs21("div", { ref, className: cx(field, root8, className), children: [
-    label6 && /* @__PURE__ */ jsxs21("span", { id: labelId, className: label, children: [
+  return /* @__PURE__ */ jsxs24("div", { ref, className: cx(field, root8, className), children: [
+    label6 && /* @__PURE__ */ jsxs24("span", { id: labelId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx26("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx27("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsxs24(
       "div",
       {
         role: "group",
@@ -2181,8 +2340,8 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
           if (!disabled) addFiles(Array.from(event.dataTransfer.files));
         },
         children: [
-          /* @__PURE__ */ jsx26("span", { className: dropIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx26(UploadIcon, { size: 24 }) }),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27("span", { className: dropIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx27(UploadIcon, { size: 24 }) }),
+          /* @__PURE__ */ jsx27(
             Button,
             {
               ref: selectButtonRef,
@@ -2195,8 +2354,8 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
               children: selectLabel
             }
           ),
-          /* @__PURE__ */ jsx26("span", { className: dropHint, children: m.fileDropHint ?? "\uB610\uB294 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uC73C\uC138\uC694" }),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27("span", { className: dropHint, children: m.fileDropHint ?? "\uB610\uB294 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uC73C\uC138\uC694" }),
+          /* @__PURE__ */ jsx27(
             "input",
             {
               ref: inputRef,
@@ -2219,11 +2378,11 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ jsx26("ul", { "aria-label": m.fileList ?? "\uC120\uD0DD\uD55C \uD30C\uC77C", className: list4, children: files.map((file, index) => /* @__PURE__ */ jsxs21("li", { className: item5, children: [
-      /* @__PURE__ */ jsx26("span", { className: fileIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx26(FileIcon, { size: 16 }) }),
-      /* @__PURE__ */ jsx26("span", { className: fileName, children: file.name }),
-      /* @__PURE__ */ jsx26("span", { id: `${baseId}-size-${index}`, className: fileSize, children: formatSize(file.size) }),
-      /* @__PURE__ */ jsx26(
+    files.length > 0 && /* @__PURE__ */ jsx27("ul", { "aria-label": m.fileList ?? "\uC120\uD0DD\uD55C \uD30C\uC77C", className: list4, children: files.map((file, index) => /* @__PURE__ */ jsxs24("li", { className: item5, children: [
+      /* @__PURE__ */ jsx27("span", { className: fileIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx27(FileIcon, { size: 16 }) }),
+      /* @__PURE__ */ jsx27("span", { className: fileName, children: file.name }),
+      /* @__PURE__ */ jsx27("span", { id: `${baseId}-size-${index}`, className: fileSize, children: formatSize(file.size) }),
+      /* @__PURE__ */ jsx27(
         IconButton,
         {
           ref: (node) => {
@@ -2234,20 +2393,20 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
           "aria-describedby": `${baseId}-size-${index}`,
           disabled,
           onClick: () => removeAt(index),
-          children: /* @__PURE__ */ jsx26(XIcon6, {})
+          children: /* @__PURE__ */ jsx27(XIcon6, {})
         }
       )
     ] }, `${file.name}-${file.size}-${file.lastModified}`)) }),
-    rejections.length > 0 && /* @__PURE__ */ jsx26("ul", { id: errorsId, className: errors, children: [...new Set(rejections.map(reasonText))].map((text3) => /* @__PURE__ */ jsx26("li", { children: text3 }, text3)) }),
-    helperText3 && /* @__PURE__ */ jsx26("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
-    /* @__PURE__ */ jsx26("div", { role: "status", className: visuallyHidden, children: announcement })
+    rejections.length > 0 && /* @__PURE__ */ jsx27("ul", { id: errorsId, className: errors, children: [...new Set(rejections.map(reasonText))].map((text3) => /* @__PURE__ */ jsx27("li", { children: text3 }, text3)) }),
+    helperText3 && /* @__PURE__ */ jsx27("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
+    /* @__PURE__ */ jsx27("div", { role: "status", className: visuallyHidden, children: announcement })
   ] });
 });
 // src/components/DropdownMenu/DropdownMenu.tsx
 import * as RadixMenu from "@radix-ui/react-dropdown-menu";
 import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon3, MinusIcon } from "@bestow-ui/icons";
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 // src/components/DropdownMenu/DropdownMenu.css.ts
 var content9 = "_1d7ahux0";
@@ -2264,14 +2423,14 @@ var subChevron = "_1d7ahuxb";
 var subTrigger = "_1d7ahuxa";
 // src/components/DropdownMenu/DropdownMenu.tsx
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 var DropdownMenu = RadixMenu.Root;
 var DropdownMenuTrigger = RadixMenu.Trigger;
 var DropdownMenuGroup = RadixMenu.Group;
-var DropdownMenuContent = /* @__PURE__ */ forwardRef23(
+var DropdownMenuContent = /* @__PURE__ */ forwardRef24(
   function DropdownMenuContent2({ className, style, side = "bottom", align = "start", sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
     const portal2 = usePortalProps();
-    return /* @__PURE__ */ jsx27(RadixMenu.Portal, { children: /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(RadixMenu.Portal, { children: /* @__PURE__ */ jsx28(
       RadixMenu.Content,
       {
         ref,
@@ -2286,56 +2445,56 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef23(
     ) });
   }
 );
-var DropdownMenuItem = /* @__PURE__ */ forwardRef23(
+var DropdownMenuItem = /* @__PURE__ */ forwardRef24(
   function DropdownMenuItem2({ icon: icon7, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs22(RadixMenu.Item, { ref, className: cx(item6, color === "danger" && danger, className), ...rest, children: [
-      icon7 && /* @__PURE__ */ jsx27("span", { className: icon4, "aria-hidden": true, children: icon7 }),
+    return /* @__PURE__ */ jsxs25(RadixMenu.Item, { ref, className: cx(item6, color === "danger" && danger, className), ...rest, children: [
+      icon7 && /* @__PURE__ */ jsx28("span", { className: icon4, "aria-hidden": true, children: icon7 }),
       children,
-      shortcut2 && /* @__PURE__ */ jsx27("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
+      shortcut2 && /* @__PURE__ */ jsx28("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
     ] });
   }
 );
-var DropdownMenuLabel = /* @__PURE__ */ forwardRef23(
+var DropdownMenuLabel = /* @__PURE__ */ forwardRef24(
   function DropdownMenuLabel2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx27(RadixMenu.Label, { ref, className: cx(label2, className), ...rest });
+    return /* @__PURE__ */ jsx28(RadixMenu.Label, { ref, className: cx(label2, className), ...rest });
   }
 );
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef23(
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef24(
   function DropdownMenuSeparator2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx27(RadixMenu.Separator, { ref, className: cx(separator3, className), ...rest });
+    return /* @__PURE__ */ jsx28(RadixMenu.Separator, { ref, className: cx(separator3, className), ...rest });
   }
 );
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef23(
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef24(
   function DropdownMenuCheckboxItem2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs22(RadixMenu.CheckboxItem, { ref, className: cx(item6, className), ...rest, children: [
-      /* @__PURE__ */ jsx27("span", { className: indicator, "aria-hidden": true, children: /* @__PURE__ */ jsx27(RadixMenu.ItemIndicator, { className: indicatorInner, children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx27(MinusIcon, { size: 16 }) : /* @__PURE__ */ jsx27(CheckIcon2, { size: 16 }) }) }),
+    return /* @__PURE__ */ jsxs25(RadixMenu.CheckboxItem, { ref, className: cx(item6, className), ...rest, children: [
+      /* @__PURE__ */ jsx28("span", { className: indicator, "aria-hidden": true, children: /* @__PURE__ */ jsx28(RadixMenu.ItemIndicator, { className: indicatorInner, children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx28(MinusIcon, { size: 16 }) : /* @__PURE__ */ jsx28(CheckIcon2, { size: 16 }) }) }),
       children
     ] });
   }
 );
 var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
-var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef23(
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef24(
   function DropdownMenuRadioItem2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs22(RadixMenu.RadioItem, { ref, className: cx(item6, className), ...rest, children: [
-      /* @__PURE__ */ jsx27("span", { className: indicator, "aria-hidden": true, children: /* @__PURE__ */ jsx27(RadixMenu.ItemIndicator, { className: indicatorInner, children: /* @__PURE__ */ jsx27("span", { className: radioDot }) }) }),
+    return /* @__PURE__ */ jsxs25(RadixMenu.RadioItem, { ref, className: cx(item6, className), ...rest, children: [
+      /* @__PURE__ */ jsx28("span", { className: indicator, "aria-hidden": true, children: /* @__PURE__ */ jsx28(RadixMenu.ItemIndicator, { className: indicatorInner, children: /* @__PURE__ */ jsx28("span", { className: radioDot }) }) }),
       children
     ] });
   }
 );
 var DropdownMenuSub = RadixMenu.Sub;
-var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef23(
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef24(
   function DropdownMenuSubTrigger2({ icon: icon7, className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs22(RadixMenu.SubTrigger, { ref, className: cx(item6, subTrigger, className), ...rest, children: [
-      icon7 && /* @__PURE__ */ jsx27("span", { className: icon4, "aria-hidden": true, children: icon7 }),
+    return /* @__PURE__ */ jsxs25(RadixMenu.SubTrigger, { ref, className: cx(item6, subTrigger, className), ...rest, children: [
+      icon7 && /* @__PURE__ */ jsx28("span", { className: icon4, "aria-hidden": true, children: icon7 }),
       children,
-      /* @__PURE__ */ jsx27("span", { className: subChevron, "aria-hidden": true, children: /* @__PURE__ */ jsx27(ChevronRightIcon3, { size: 16 }) })
+      /* @__PURE__ */ jsx28("span", { className: subChevron, "aria-hidden": true, children: /* @__PURE__ */ jsx28(ChevronRightIcon3, { size: 16 }) })
     ] });
   }
 );
-var DropdownMenuSubContent = /* @__PURE__ */ forwardRef23(
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef24(
   function DropdownMenuSubContent2({ className, style, sideOffset = 4, alignOffset = -5, collisionPadding = 8, ...rest }, ref) {
     const portal2 = usePortalProps();
-    return /* @__PURE__ */ jsx27(RadixMenu.Portal, { children: /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(RadixMenu.Portal, { children: /* @__PURE__ */ jsx28(
       RadixMenu.SubContent,
       {
         ref,
@@ -2351,7 +2510,7 @@ var DropdownMenuSubContent = /* @__PURE__ */ forwardRef23(
 );
 // src/components/NumberInput/NumberInput.tsx
-import { forwardRef as forwardRef24, useEffect as useEffect9, useId as useId10, useRef as useRef12, useState as useState10 } from "react";
+import { forwardRef as forwardRef25, useEffect as useEffect10, useId as useId12, useRef as useRef12, useState as useState12 } from "react";
 import { MinusIcon as MinusIcon2, PlusIcon } from "@bestow-ui/icons";
 // src/components/NumberInput/NumberInput.css.ts
@@ -2362,12 +2521,12 @@ var stepper = /* @__PURE__ */ _7a46811({ defaultClassName: "_1vq2qhv3", variantC
 var unit = "_1vq2qhv2";
 // src/components/NumberInput/NumberInput.tsx
-import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 var MAX_DIGITS2 = 15;
 var isMeaningful = (char) => /[\d.-]/.test(char);
 var decimalsOf = (n) => Number.isFinite(n) ? String(n).split(".")[1]?.length ?? 0 : 0;
 var parse = (raw) => /\d/.test(raw) ? Number(raw) : null;
-var NumberInput = /* @__PURE__ */ forwardRef24(
+var NumberInput = /* @__PURE__ */ forwardRef25(
   function NumberInput2(props, ref) {
     const {
       value: value3,
@@ -2394,7 +2553,7 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
     const isControlled = "value" in props;
     const m = useMessages();
     const inputRef = useRef12(null);
-    const generatedId = useId10();
+    const generatedId = useId12();
     const inputId = id ?? generatedId;
     const precision = Math.max(0, precisionProp ?? decimalsOf(step2));
     const allowNegative = min === void 0 || min < 0;
@@ -2431,7 +2590,7 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
       inputRef
     });
     const { setRaw } = field4;
-    useEffect9(() => {
+    useEffect10(() => {
       if (!isControlled) return;
       const next = value3 ?? null;
       lastEmitted.current = next;
@@ -2439,7 +2598,7 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
     }, [value3]);
     const current2 = parse(field4.raw);
     const valueText = (n) => `${format2(toRaw(n))}${unit2 ?? ""}`;
-    const [announcement, setAnnouncement] = useState10("");
+    const [announcement, setAnnouncement] = useState12("");
     const setValue = (next, announce = true) => {
       setRaw(toRaw(next));
       emit(next);
@@ -2473,7 +2632,7 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
         field4.onKeyDown(event);
       }
     };
-    const stepper2 = (direction) => /* @__PURE__ */ jsx28(
+    const stepper2 = (direction) => /* @__PURE__ */ jsx29(
       IconButton,
       {
         size: "sm",
@@ -2484,11 +2643,11 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
         onMouseDown: (event) => event.preventDefault(),
         onClick: () => stepBy(direction * step2),
         className: stepper({ size }),
-        children: direction < 0 ? /* @__PURE__ */ jsx28(MinusIcon2, {}) : /* @__PURE__ */ jsx28(PlusIcon, {})
+        children: direction < 0 ? /* @__PURE__ */ jsx29(MinusIcon2, {}) : /* @__PURE__ */ jsx29(PlusIcon, {})
       }
     );
-    return /* @__PURE__ */ jsxs23(Fragment5, { children: [
-      /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsxs26(Fragment7, { children: [
+      /* @__PURE__ */ jsx29(
         TextField,
         {
           ref: mergeRefs(ref, inputRef),
@@ -2516,23 +2675,23 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
           disabled,
           readOnly,
           startAdornment: hideStepper ? void 0 : stepper2(-1),
-          endAdornment: unit2 || !hideStepper ? /* @__PURE__ */ jsxs23("span", { className: end, children: [
-            unit2 && /* @__PURE__ */ jsx28("span", { className: unit, children: unit2 }),
+          endAdornment: unit2 || !hideStepper ? /* @__PURE__ */ jsxs26("span", { className: end, children: [
+            unit2 && /* @__PURE__ */ jsx29("span", { className: unit, children: unit2 }),
             !hideStepper && stepper2(1)
           ] }) : void 0,
           className: cx(input4, className),
           ...rest
         }
       ),
-      name && /* @__PURE__ */ jsx28("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) }),
-      /* @__PURE__ */ jsx28("span", { "aria-live": "assertive", "aria-atomic": "true", className: visuallyHidden, children: announcement })
+      name && /* @__PURE__ */ jsx29("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) }),
+      /* @__PURE__ */ jsx29("span", { "aria-live": "assertive", "aria-atomic": "true", className: visuallyHidden, children: announcement })
     ] });
   }
 );
 // src/components/Pagination/Pagination.tsx
 import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon4 } from "@bestow-ui/icons";
-import { forwardRef as forwardRef25, useState as useState11 } from "react";
+import { forwardRef as forwardRef26, useState as useState13 } from "react";
 // src/components/Pagination/getPaginationItems.ts
 var range = (start, end2) => end2 < start ? [] : Array.from({ length: end2 - start + 1 }, (_, i) => start + i);
@@ -2548,14 +2707,14 @@ function getPaginationItems(page, totalPages, siblingCount = 1, boundaryCount =
     Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
     endPages.length > 0 ? endPages[0] - 2 : totalPages - 1
   );
-  const items2 = [...startPages];
-  if (siblingsStart > boundaryCount + 2) items2.push("ellipsis-start");
-  else if (boundaryCount + 1 < totalPages - boundaryCount) items2.push(boundaryCount + 1);
-  items2.push(...range(siblingsStart, siblingsEnd));
-  if (siblingsEnd < totalPages - boundaryCount - 1) items2.push("ellipsis-end");
-  else if (totalPages - boundaryCount > boundaryCount) items2.push(totalPages - boundaryCount);
-  items2.push(...endPages);
-  return items2;
+  const items3 = [...startPages];
+  if (siblingsStart > boundaryCount + 2) items3.push("ellipsis-start");
+  else if (boundaryCount + 1 < totalPages - boundaryCount) items3.push(boundaryCount + 1);
+  items3.push(...range(siblingsStart, siblingsEnd));
+  if (siblingsEnd < totalPages - boundaryCount - 1) items3.push("ellipsis-end");
+  else if (totalPages - boundaryCount > boundaryCount) items3.push(totalPages - boundaryCount);
+  items3.push(...endPages);
+  return items3;
 }
 // src/components/Pagination/Pagination.css.ts
@@ -2565,8 +2724,8 @@ var item7 = /* @__PURE__ */ _7a46812({ defaultClassName: "_1iraoak1", variantCla
 var list5 = "_1iraoak0";
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
-var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
+import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
+var Pagination = /* @__PURE__ */ forwardRef26(function Pagination2({
   totalPages,
   page: pageProp,
   defaultPage = 1,
@@ -2579,7 +2738,7 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
   "aria-label": ariaLabelProp,
   ...rest
 }, ref) {
-  const [uncontrolledPage, setUncontrolledPage] = useState11(defaultPage);
+  const [uncontrolledPage, setUncontrolledPage] = useState13(defaultPage);
   const m = useMessages();
   const ariaLabel = ariaLabelProp ?? m.pagination ?? "\uD398\uC774\uC9C0 \uD0D0\uC0C9";
   const getItemLabel = getItemLabelProp ?? ((type, n) => type === "previous" ? m.paginationPrevious ?? "\uC774\uC804 \uD398\uC774\uC9C0" : type === "next" ? m.paginationNext ?? "\uB2E4\uC74C \uD398\uC774\uC9C0" : m.paginationPage?.(n) ?? `${n} \uD398\uC774\uC9C0`);
@@ -2591,8 +2750,8 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
     onPageChange?.(next);
   };
   const itemClass = item7({ size });
-  return /* @__PURE__ */ jsx29("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsxs24("ul", { className: list5, children: [
-    /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsxs27("ul", { className: list5, children: [
+    /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsx30(
       "button",
       {
         type: "button",
@@ -2600,11 +2759,11 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
         "aria-label": getItemLabel("previous", page - 1),
         disabled: page <= 1,
         onClick: () => goTo(page - 1),
-        children: /* @__PURE__ */ jsx29(ChevronLeftIcon2, { size: 16 })
+        children: /* @__PURE__ */ jsx30(ChevronLeftIcon2, { size: 16 })
       }
     ) }),
     getPaginationItems(page, totalPages, siblingCount, boundaryCount).map(
-      (item9) => typeof item9 === "number" ? /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(
+      (item9) => typeof item9 === "number" ? /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsx30(
         "button",
         {
           type: "button",
@@ -2614,9 +2773,9 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
           onClick: () => goTo(item9),
           children: item9
         }
-      ) }, item9) : /* @__PURE__ */ jsx29("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item9)
+      ) }, item9) : /* @__PURE__ */ jsx30("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item9)
     ),
-    /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsx30(
       "button",
       {
         type: "button",
@@ -2624,22 +2783,22 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
         "aria-label": getItemLabel("next", page + 1),
         disabled: page >= totalPages,
         onClick: () => goTo(page + 1),
-        children: /* @__PURE__ */ jsx29(ChevronRightIcon4, { size: 16 })
+        children: /* @__PURE__ */ jsx30(ChevronRightIcon4, { size: 16 })
       }
     ) })
   ] }) });
 });
 // src/components/PhoneNumberInput/PhoneNumberInput.tsx
-import { forwardRef as forwardRef26, useRef as useRef13 } from "react";
+import { forwardRef as forwardRef27, useRef as useRef13 } from "react";
 import { formatPhoneNumber, phoneNumberMaxDigits } from "@bestow-ui/korean-utils";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "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__ */ forwardRef26(
+var PhoneNumberInput = /* @__PURE__ */ forwardRef27(
   function PhoneNumberInput2(props, ref) {
     const {
       value: value3,
@@ -2663,7 +2822,7 @@ var PhoneNumberInput = /* @__PURE__ */ forwardRef26(
       isMeaningful: isDigit4,
       inputRef
     });
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       TextField,
       {
         ref: mergeRefs(ref, inputRef),
@@ -2685,21 +2844,21 @@ var PhoneNumberInput = /* @__PURE__ */ forwardRef26(
 );
 // src/components/RadioGroup/RadioGroup.tsx
-import { forwardRef as forwardRef27, useId as useId11, useState as useState12 } from "react";
+import { forwardRef as forwardRef28, useId as useId13, useState as useState14 } from "react";
 // src/components/RadioGroup/RadioGroup.css.ts
 import { createRuntimeFn as _7a46813 } from "@vanilla-extract/recipes/createRuntimeFn";
-var description4 = "_1w9iwjmc";
-var groupLabel = "_1w9iwjmd";
-var items = /* @__PURE__ */ _7a46813({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
+var description5 = "_1w9iwjmc";
+var groupLabel2 = "_1w9iwjmd";
+var items2 = /* @__PURE__ */ _7a46813({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
 var labelText = "_1w9iwjmb";
-var option = /* @__PURE__ */ _7a46813({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var option2 = /* @__PURE__ */ _7a46813({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var radio = /* @__PURE__ */ _7a46813({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var text = "_1w9iwjma";
 // src/components/RadioGroup/RadioGroup.tsx
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
-var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref) {
+import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
+var RadioGroup2 = /* @__PURE__ */ forwardRef28(function RadioGroup3(props, ref) {
   const {
     options,
     value: value3,
@@ -2718,9 +2877,9 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
     className
   } = props;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState12(defaultValue ?? "");
+  const [innerValue, setInnerValue] = useState14(defaultValue ?? "");
   const current2 = isControlled ? value3 ?? "" : innerValue;
-  const generatedId = useId11();
+  const generatedId = useId13();
   const baseId = id ?? generatedId;
   const labelId = label6 ? `${baseId}-label` : void 0;
   const helperId = helperText3 ? `${baseId}-helper` : void 0;
@@ -2731,12 +2890,12 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
     if (!isControlled) setInnerValue(next);
     onValueChange?.(next);
   };
-  return /* @__PURE__ */ jsxs25("div", { className: cx(field, className), children: [
-    label6 && /* @__PURE__ */ jsxs25("span", { id: labelId, className: cx(label, groupLabel), children: [
+  return /* @__PURE__ */ jsxs28("div", { className: cx(field, className), children: [
+    label6 && /* @__PURE__ */ jsxs28("span", { id: labelId, className: cx(label, groupLabel2), children: [
       label6,
-      required && /* @__PURE__ */ jsx31("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx32("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32(
       "div",
       {
         ref,
@@ -2748,23 +2907,23 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
         "aria-invalid": error || void 0,
         "aria-required": required || void 0,
         "data-disabled": disabled || void 0,
-        className: items({ orientation }),
-        children: options.map((option2) => {
-          const itemId = `${baseId}-${option2.value}`;
-          const descriptionId = option2.description ? `${itemId}-description` : void 0;
-          const itemDisabled = disabled || option2.disabled;
-          const checked = option2.value === current2;
-          return /* @__PURE__ */ jsxs25("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
-            /* @__PURE__ */ jsx31(
+        className: items2({ orientation }),
+        children: options.map((option3) => {
+          const itemId = `${baseId}-${option3.value}`;
+          const descriptionId = option3.description ? `${itemId}-description` : void 0;
+          const itemDisabled = disabled || option3.disabled;
+          const checked = option3.value === current2;
+          return /* @__PURE__ */ jsxs28("div", { className: option2({ size }), "data-disabled": itemDisabled || void 0, children: [
+            /* @__PURE__ */ jsx32(
               "input",
               {
                 type: "radio",
                 id: itemId,
                 name: groupName,
                 form: detachedForm,
-                value: option2.value,
+                value: option3.value,
                 checked,
-                onChange: () => handleChange(option2.value),
+                onChange: () => handleChange(option3.value),
                 disabled: itemDisabled,
                 required,
                 "aria-describedby": descriptionId,
@@ -2772,20 +2931,166 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
                 className: radio({ size })
               }
             ),
-            /* @__PURE__ */ jsxs25("span", { className: text, children: [
-              /* @__PURE__ */ jsx31("label", { htmlFor: itemId, className: labelText, children: option2.label }),
-              option2.description && /* @__PURE__ */ jsx31("span", { id: descriptionId, className: description4, children: option2.description })
+            /* @__PURE__ */ jsxs28("span", { className: text, children: [
+              /* @__PURE__ */ jsx32("label", { htmlFor: itemId, className: labelText, children: option3.label }),
+              option3.description && /* @__PURE__ */ jsx32("span", { id: descriptionId, className: description5, children: option3.description })
             ] })
-          ] }, option2.value);
+          ] }, option3.value);
         })
       }
     ),
-    helperText3 && /* @__PURE__ */ jsx31("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    helperText3 && /* @__PURE__ */ jsx32("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
+// src/components/ResidentNumberInput/ResidentNumberInput.tsx
+import { forwardRef as forwardRef29, useId as useId14, useRef as useRef14, useState as useState15 } from "react";
+import { isValidResidentNumber, parseResidentNumber } from "@bestow-ui/korean-utils";
+// src/components/ResidentNumberInput/ResidentNumberInput.css.ts
+var back = "_1llmfr72";
+var backOne = "_1llmfr73";
+var front = "_1llmfr71";
+var hiddenDigits = "_1llmfr75";
+var row3 = "_1llmfr70";
+var separator4 = "_1llmfr74";
+// src/components/ResidentNumberInput/ResidentNumberInput.tsx
+import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
+var onlyDigits = (input6) => input6.replace(/\D/g, "");
+var ResidentNumberInput = /* @__PURE__ */ forwardRef29(
+  function ResidentNumberInput2(props, ref) {
+    const {
+      value: value3,
+      defaultValue,
+      onValueChange,
+      digits = 13,
+      validate = true,
+      invalidText: invalidTextProp,
+      label: labelProp,
+      helperText: helperText3,
+      error,
+      required,
+      disabled,
+      size,
+      name,
+      id,
+      className,
+      onBlur
+    } = props;
+    const m = useMessages();
+    const label6 = labelProp ?? m.residentNumber ?? "\uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638";
+    const invalidText = invalidTextProp ?? m.residentNumberInvalid ?? "\uC62C\uBC14\uB978 \uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638\uAC00 \uC544\uB2C8\uC5D0\uC694. \uC0DD\uB144\uC6D4\uC77C\uACFC \uB4B7\uC790\uB9AC \uCCAB \uC22B\uC790\uB97C \uD655\uC778\uD574 \uC8FC\uC138\uC694.";
+    const incompleteText = m.residentNumberIncomplete?.(digits) ?? `${digits}\uC790\uB9AC\uB97C \uBAA8\uB450 \uC785\uB825\uD574 \uC8FC\uC138\uC694.`;
+    const backLength = digits - 6;
+    const isControlled = "value" in props;
+    const split = (v) => {
+      const d = onlyDigits(v).slice(0, digits);
+      return { front: d.slice(0, 6), back: d.slice(6) };
+    };
+    const [parts, setParts] = useState15(() => split((isControlled ? value3 : defaultValue) ?? ""));
+    const current2 = isControlled && (value3 ?? "") !== parts.front + parts.back ? split(value3 ?? "") : parts;
+    const raw = current2.front + current2.back;
+    const generatedId = useId14();
+    const baseId = id ?? generatedId;
+    const frontId = `${baseId}-front`;
+    const backId = `${baseId}-back`;
+    const labelId = `${baseId}-label`;
+    const frontRef = useRef14(null);
+    const backRef = useRef14(null);
+    const complete = current2.front.length === 6 && current2.back.length === backLength;
+    const isValid = (v) => digits === 13 ? isValidResidentNumber(v) : parseResidentNumber(v) !== null;
+    const update = (next) => {
+      setParts(next);
+      const nextRaw = next.front + next.back;
+      if (nextRaw === raw) return;
+      const nextComplete = next.front.length === 6 && next.back.length === backLength;
+      onValueChange?.(nextRaw, nextComplete ? isValid(nextRaw) : null);
+    };
+    const [touched, setTouched] = useState15(false);
+    const autoInvalid = validate && raw.length > 0 && (complete ? !isValid(raw) : touched);
+    const showAuto = autoInvalid && error === void 0;
+    const invalid = error ?? autoInvalid;
+    const helper = showAuto ? complete ? invalidText : incompleteText : helperText3;
+    const helperId = helper ? `${baseId}-helper` : void 0;
+    const announcement = useDelayedAnnouncement(showAuto && complete ? invalidText : "");
+    const common = {
+      inputMode: "numeric",
+      autoComplete: "off",
+      size,
+      disabled,
+      required,
+      invalid,
+      "aria-describedby": helperId
+    };
+    return /* @__PURE__ */ jsxs29(
+      "div",
+      {
+        className: cx(field, className),
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) setTouched(true);
+          onBlur?.(event);
+        },
+        children: [
+          /* @__PURE__ */ jsxs29("label", { id: labelId, htmlFor: frontId, className: label, children: [
+            label6,
+            required && /* @__PURE__ */ jsx33("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxs29("div", { role: "group", id: baseId, "aria-labelledby": labelId, className: row3, children: [
+            /* @__PURE__ */ jsx33(
+              Input,
+              {
+                ...common,
+                ref: mergeRefs(ref, frontRef),
+                id: frontId,
+                "aria-label": m.residentNumberFront ?? "\uC55E 6\uC790\uB9AC",
+                placeholder: "000000",
+                rootClassName: front,
+                maxLength: 6,
+                value: current2.front,
+                onChange: (event) => update({ front: onlyDigits(event.target.value).slice(0, 6), back: current2.back }),
+                onPaste: (event) => {
+                  const pasted = onlyDigits(event.clipboardData.getData("text"));
+                  if (pasted.length <= 6) return;
+                  event.preventDefault();
+                  update(split(pasted));
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx33("span", { className: separator4, "aria-hidden": true, children: "-" }),
+            /* @__PURE__ */ jsx33(
+              Input,
+              {
+                ...common,
+                ref: backRef,
+                id: backId,
+                type: digits === 13 ? "password" : "text",
+                "aria-label": digits === 13 ? m.residentNumberBack ?? "\uB4A4 7\uC790\uB9AC" : m.residentNumberBackFirst ?? "\uB4B7\uC790\uB9AC \uCCAB \uC22B\uC790",
+                maxLength: backLength,
+                rootClassName: digits === 13 ? back : backOne,
+                value: current2.back,
+                onChange: (event) => update({ front: current2.front, back: onlyDigits(event.target.value).slice(0, backLength) }),
+                onKeyDown: (event) => {
+                  if (event.key === "Backspace" && current2.back === "") {
+                    event.preventDefault();
+                    frontRef.current?.focus();
+                  }
+                }
+              }
+            ),
+            digits === 7 && /* @__PURE__ */ jsx33("span", { className: hiddenDigits, "aria-hidden": true, children: "\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF" })
+          ] }),
+          helper && /* @__PURE__ */ jsx33("p", { id: helperId, className: helperText({ error: invalid }), children: helper }),
+          name && /* @__PURE__ */ jsx33("input", { type: "hidden", name, value: raw }),
+          /* @__PURE__ */ jsx33("span", { role: "status", className: visuallyHidden, children: announcement })
+        ]
+      }
+    );
+  }
+);
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { forwardRef as forwardRef28, useId as useId12, useRef as useRef14, useState as useState13 } from "react";
+import { forwardRef as forwardRef30, useId as useId15, useRef as useRef15, useState as useState16 } from "react";
 // src/components/SegmentedControl/SegmentedControl.css.ts
 import { createRuntimeFn as _7a46814 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -2794,9 +3099,9 @@ var item8 = /* @__PURE__ */ _7a46814({ defaultClassName: "_1h65mmo2", variantCla
 var root9 = /* @__PURE__ */ _7a46814({ defaultClassName: "_1h65mmo0", variantClassNames: { fullWidth: { true: "_1h65mmo1" } }, defaultVariants: {}, compoundVariants: [] });
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
 var NEXT_KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
-var SegmentedControl = /* @__PURE__ */ forwardRef28(
+var SegmentedControl = /* @__PURE__ */ forwardRef30(
   function SegmentedControl2(props, ref) {
     const {
       options,
@@ -2813,11 +3118,11 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
       className
     } = props;
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = useState13(defaultValue ?? "");
+    const [innerValue, setInnerValue] = useState16(defaultValue ?? "");
     const current2 = isControlled ? value3 ?? "" : innerValue;
-    const generatedId = useId12();
+    const generatedId = useId15();
     const labelId = label6 ? `${id ?? generatedId}-label` : void 0;
-    const itemRefs = useRef14([]);
+    const itemRefs = useRef15([]);
     const isEnabled = (index) => !disabled && !options[index]?.disabled;
     const select2 = (index) => {
       const next = options[index].value;
@@ -2825,7 +3130,7 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
       if (!isControlled) setInnerValue(next);
       onValueChange?.(next);
     };
-    const checkedIndex = options.findIndex((option2) => option2.value === current2);
+    const checkedIndex = options.findIndex((option3) => option3.value === current2);
     const tabStop = checkedIndex >= 0 && isEnabled(checkedIndex) ? checkedIndex : options.findIndex((_, i) => isEnabled(i));
     const handleKeyDown = (event, index) => {
       let target = -1;
@@ -2848,7 +3153,7 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
       itemRefs.current[target]?.focus();
       select2(target);
     };
-    const group = /* @__PURE__ */ jsxs26(
+    const group = /* @__PURE__ */ jsxs30(
       "div",
       {
         ref,
@@ -2859,9 +3164,9 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
         "aria-disabled": disabled || void 0,
         className: cx(root9({ fullWidth }), !label6 && className),
         children: [
-          options.map((option2, index) => {
+          options.map((option3, index) => {
             const checked = index === checkedIndex;
-            return /* @__PURE__ */ jsxs26(
+            return /* @__PURE__ */ jsxs30(
               "button",
               {
                 ref: (node) => {
@@ -2878,27 +3183,27 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
                 onClick: () => select2(index),
                 onKeyDown: (event) => handleKeyDown(event, index),
                 children: [
-                  option2.icon && /* @__PURE__ */ jsx32("span", { "aria-hidden": true, className: icon5, children: option2.icon }),
-                  option2.label
+                  option3.icon && /* @__PURE__ */ jsx34("span", { "aria-hidden": true, className: icon5, children: option3.icon }),
+                  option3.label
                 ]
               },
-              option2.value
+              option3.value
             );
           }),
-          name && /* @__PURE__ */ jsx32("input", { type: "hidden", name, value: current2 })
+          name && /* @__PURE__ */ jsx34("input", { type: "hidden", name, value: current2 })
         ]
       }
     );
     if (!label6) return group;
-    return /* @__PURE__ */ jsxs26("div", { className: cx(field, className), children: [
-      /* @__PURE__ */ jsx32("span", { id: labelId, className: label, children: label6 }),
+    return /* @__PURE__ */ jsxs30("div", { className: cx(field, className), children: [
+      /* @__PURE__ */ jsx34("span", { id: labelId, className: label, children: label6 }),
       group
     ] });
   }
 );
 // src/components/NativeSelect/NativeSelect.tsx
-import { forwardRef as forwardRef29, useId as useId13 } from "react";
+import { forwardRef as forwardRef31, useId as useId16 } from "react";
 import { ChevronDownIcon as ChevronDownIcon4 } from "@bestow-ui/icons";
 // src/components/NativeSelect/NativeSelect.css.ts
@@ -2908,8 +3213,8 @@ var select = /* @__PURE__ */ _7a46815({ defaultClassName: "_5silym1", variantCla
 var wrapper = "_5silym0";
 // src/components/NativeSelect/NativeSelect.tsx
-import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
-var NativeSelect = /* @__PURE__ */ forwardRef29(function NativeSelect2({
+import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+var NativeSelect = /* @__PURE__ */ forwardRef31(function NativeSelect2({
   options,
   onValueChange,
   onChange,
@@ -2929,26 +3234,26 @@ var NativeSelect = /* @__PURE__ */ forwardRef29(function NativeSelect2({
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = useId13();
+  const generatedId = useId16();
   const selectId = id ?? generatedId;
   const helperId = helperText3 ? `${selectId}-helper` : void 0;
   const handleChange = (event) => {
     onChange?.(event);
     onValueChange?.(event.target.value);
   };
-  return /* @__PURE__ */ jsxs27("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs27("label", { htmlFor: selectId, className: label, children: [
+  return /* @__PURE__ */ jsxs31("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs31("label", { htmlFor: selectId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx33("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx35("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs27(
+    /* @__PURE__ */ jsxs31(
       "span",
       {
-        className: cx(root3({ size, fullWidth }), wrapper),
+        className: cx(root({ size, fullWidth }), wrapper),
         "data-invalid": error || void 0,
         "data-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ jsxs27(
+          /* @__PURE__ */ jsxs31(
             "select",
             {
               ref,
@@ -2963,25 +3268,25 @@ var NativeSelect = /* @__PURE__ */ forwardRef29(function NativeSelect2({
               className: cx(select({ size }), className),
               ...rest,
               children: [
-                placeholder !== void 0 && /* @__PURE__ */ jsx33("option", { value: "", disabled: true, children: placeholder }),
-                options ? options.map((option2) => /* @__PURE__ */ jsx33("option", { value: option2.value, disabled: option2.disabled, children: option2.label }, option2.value)) : children
+                placeholder !== void 0 && /* @__PURE__ */ jsx35("option", { value: "", disabled: true, children: placeholder }),
+                options ? options.map((option3) => /* @__PURE__ */ jsx35("option", { value: option3.value, disabled: option3.disabled, children: option3.label }, option3.value)) : children
               ]
             }
           ),
-          /* @__PURE__ */ jsx33(ChevronDownIcon4, { size: 16, className: icon6({ size }) })
+          /* @__PURE__ */ jsx35(ChevronDownIcon4, { size: 16, className: icon6({ size }) })
         ]
       }
     ),
-    helperText3 && /* @__PURE__ */ jsx33("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    helperText3 && /* @__PURE__ */ jsx35("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
 // src/components/Select/Select.tsx
 import * as RadixSelect from "@radix-ui/react-select";
-import { forwardRef as forwardRef30, useId as useId14 } from "react";
+import { forwardRef as forwardRef32, useId as useId17 } from "react";
 import { CheckIcon as CheckIcon3, ChevronDownIcon as ChevronDownIcon5 } from "@bestow-ui/icons";
-import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
-var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
+import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+var Select = /* @__PURE__ */ forwardRef32(function Select2(props, ref) {
   const {
     options,
     value: value3,
@@ -3001,16 +3306,16 @@ var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
     className
   } = props;
   const isControlled = "value" in props;
-  const generatedId = useId14();
+  const generatedId = useId17();
   const triggerId = id ?? generatedId;
   const helperId = helperText3 ? `${triggerId}-helper` : void 0;
   const portal2 = usePortalProps();
-  return /* @__PURE__ */ jsxs28("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs28("label", { htmlFor: triggerId, className: label, children: [
+  return /* @__PURE__ */ jsxs32("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs32("label", { htmlFor: triggerId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx34("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx36("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs28(
+    /* @__PURE__ */ jsxs32(
       RadixSelect.Root,
       {
         value: isControlled ? value3 ?? "" : void 0,
@@ -3020,7 +3325,7 @@ var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
         required,
         name,
         children: [
-          /* @__PURE__ */ jsxs28(
+          /* @__PURE__ */ jsxs32(
             RadixSelect.Trigger,
             {
               ref,
@@ -3029,14 +3334,14 @@ var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
               "aria-invalid": error || void 0,
               "aria-describedby": helperId,
               "data-invalid": error || void 0,
-              className: cx(root3({ size, fullWidth }), trigger2, className),
+              className: cx(root({ size, fullWidth }), trigger2, className),
               children: [
-                /* @__PURE__ */ jsx34("span", { className: value, children: /* @__PURE__ */ jsx34(RadixSelect.Value, { placeholder }) }),
-                /* @__PURE__ */ jsx34(RadixSelect.Icon, { className: icon3, children: /* @__PURE__ */ jsx34(ChevronDownIcon5, { size: 16 }) })
+                /* @__PURE__ */ jsx36("span", { className: value, children: /* @__PURE__ */ jsx36(RadixSelect.Value, { placeholder }) }),
+                /* @__PURE__ */ jsx36(RadixSelect.Icon, { className: icon3, children: /* @__PURE__ */ jsx36(ChevronDownIcon5, { size: 16 }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx34(RadixSelect.Portal, { children: /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx36(RadixSelect.Portal, { children: /* @__PURE__ */ jsx36(
             RadixSelect.Content,
             {
               position: "popper",
@@ -3044,37 +3349,37 @@ var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
               collisionPadding: 8,
               className: cx(portal2.className, content5),
               style: portal2.style,
-              children: /* @__PURE__ */ jsx34(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ jsxs28(
+              children: /* @__PURE__ */ jsx36(RadixSelect.Viewport, { className: viewport, children: options.map((option3) => /* @__PURE__ */ jsxs32(
                 RadixSelect.Item,
                 {
-                  value: option2.value,
-                  disabled: option2.disabled,
+                  value: option3.value,
+                  disabled: option3.disabled,
                   className: item4,
                   children: [
-                    /* @__PURE__ */ jsx34(RadixSelect.ItemText, { children: option2.label }),
-                    /* @__PURE__ */ jsx34(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx34(CheckIcon3, { size: 16 }) })
+                    /* @__PURE__ */ jsx36(RadixSelect.ItemText, { children: option3.label }),
+                    /* @__PURE__ */ jsx36(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx36(CheckIcon3, { size: 16 }) })
                   ]
                 },
-                option2.value
+                option3.value
               )) })
             }
           ) })
         ]
       }
     ),
-    helperText3 && /* @__PURE__ */ jsx34("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    helperText3 && /* @__PURE__ */ jsx36("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
 // src/components/SkipLink/SkipLink.tsx
-import { forwardRef as forwardRef31 } from "react";
+import { forwardRef as forwardRef33 } from "react";
 // src/components/SkipLink/SkipLink.css.ts
 var skipLink = "_1t9jaar0";
 // src/components/SkipLink/SkipLink.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
-var SkipLink = /* @__PURE__ */ forwardRef31(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
+import { jsx as jsx37 } from "react/jsx-runtime";
+var SkipLink = /* @__PURE__ */ forwardRef33(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
   const m = useMessages();
   const handleClick = (event) => {
     onClick?.(event);
@@ -3086,12 +3391,12 @@ var SkipLink = /* @__PURE__ */ forwardRef31(function SkipLink2({ href = "#main",
     target.focus();
     target.scrollIntoView?.({ block: "start" });
   };
-  return /* @__PURE__ */ jsx35("a", { ref, href, className: cx(skipLink, className), onClick: handleClick, ...rest, children: children ?? m.skipToContent ?? "\uBCF8\uBB38 \uBC14\uB85C\uAC00\uAE30" });
+  return /* @__PURE__ */ jsx37("a", { ref, href, className: cx(skipLink, className), onClick: handleClick, ...rest, children: children ?? m.skipToContent ?? "\uBCF8\uBB38 \uBC14\uB85C\uAC00\uAE30" });
 });
 // src/components/Slider/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import { forwardRef as forwardRef32, useId as useId15, useState as useState14 } from "react";
+import { forwardRef as forwardRef34, useId as useId18, useState as useState17 } from "react";
 // src/components/Slider/Slider.css.ts
 import { createRuntimeFn as _7a46816 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -3106,8 +3411,8 @@ var track = /* @__PURE__ */ _7a46816({ defaultClassName: "_126mzjm8", variantCla
 var value2 = "_126mzjm3";
 // src/components/Slider/Slider.tsx
-import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
-var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
+import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+var Slider = /* @__PURE__ */ forwardRef34(function Slider2(props, ref) {
   const {
     value: value3,
     defaultValue,
@@ -3128,12 +3433,12 @@ var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
   } = props;
   const m = useMessages();
   const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
-  const generatedId = useId15();
+  const generatedId = useId18();
   const baseId = id ?? generatedId;
   const labelId = `${baseId}-label`;
   const helperId = `${baseId}-helper`;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState14(defaultValue ?? [min]);
+  const [innerValue, setInnerValue] = useState17(defaultValue ?? [min]);
   const current2 = isControlled ? value3 ?? [min] : innerValue;
   const isRange = current2.length > 1;
   const handleChange = (next) => {
@@ -3141,12 +3446,12 @@ var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
     onValueChange?.(next);
   };
   const valueText = current2.map(formatValue).join(" \u2013 ");
-  return /* @__PURE__ */ jsxs29("div", { className: cx(field3, className), children: [
-    (label6 || showValue) && /* @__PURE__ */ jsxs29("div", { className: header6, children: [
-      label6 && /* @__PURE__ */ jsx36("span", { id: labelId, className: label3, children: label6 }),
-      showValue && /* @__PURE__ */ jsx36("span", { className: value2, "aria-hidden": true, children: valueText })
+  return /* @__PURE__ */ jsxs33("div", { className: cx(field3, className), children: [
+    (label6 || showValue) && /* @__PURE__ */ jsxs33("div", { className: header6, children: [
+      label6 && /* @__PURE__ */ jsx38("span", { id: labelId, className: label3, children: label6 }),
+      showValue && /* @__PURE__ */ jsx38("span", { className: value2, "aria-hidden": true, children: valueText })
     ] }),
-    /* @__PURE__ */ jsxs29(
+    /* @__PURE__ */ jsxs33(
       RadixSlider.Root,
       {
         ref,
@@ -3159,10 +3464,10 @@ var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
         className: root10({ size }),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx36(RadixSlider.Track, { className: track({ size }), children: /* @__PURE__ */ jsx36(RadixSlider.Range, { className: range2 }) }),
+          /* @__PURE__ */ jsx38(RadixSlider.Track, { className: track({ size }), children: /* @__PURE__ */ jsx38(RadixSlider.Range, { className: range2 }) }),
           current2.map((thumbValue, index) => {
             const thumbLabelId = `${baseId}-thumb-${index}`;
-            return /* @__PURE__ */ jsx36(
+            return /* @__PURE__ */ jsx38(
               RadixSlider.Thumb,
               {
                 className: thumb({ size }),
@@ -3177,21 +3482,21 @@ var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
         ]
       }
     ),
-    isRange && current2.map((_, index) => /* @__PURE__ */ jsxs29("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
+    isRange && current2.map((_, index) => /* @__PURE__ */ jsxs33("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
       label6 ? "" : ariaLabel ? `${ariaLabel} ` : "",
       thumbLabels[index] ?? `${index + 1}`
     ] }, index)),
-    helperText3 && /* @__PURE__ */ jsx36("span", { id: helperId, className: helperText2, children: helperText3 })
+    helperText3 && /* @__PURE__ */ jsx38("span", { id: helperId, className: helperText2, children: helperText3 })
   ] });
 });
 // src/components/Stepper/Stepper.tsx
-import { forwardRef as forwardRef33 } from "react";
+import { forwardRef as forwardRef35 } from "react";
 import { CheckIcon as CheckIcon4 } from "@bestow-ui/icons";
 // src/components/Stepper/Stepper.css.ts
 import { createRuntimeFn as _7a46817 } from "@vanilla-extract/recipes/createRuntimeFn";
-var description5 = "kervhmh";
+var description6 = "kervhmh";
 var indicator2 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhm6", variantClassNames: { status: { complete: "kervhm7", current: "kervhm8", upcoming: "kervhm9" } }, defaultVariants: {}, compoundVariants: [] });
 var label4 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhmd", variantClassNames: { status: { complete: "kervhme", current: "kervhmf", upcoming: "kervhmg" } }, defaultVariants: {}, compoundVariants: [] });
 var root11 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhm0", variantClassNames: { orientation: { horizontal: "kervhm1", vertical: "kervhm2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
@@ -3199,10 +3504,10 @@ var step = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhm3", variantClassN
 var text2 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhma", variantClassNames: { orientation: { horizontal: "kervhmb", vertical: "kervhmc" } }, defaultVariants: {}, compoundVariants: [] });
 // src/components/Stepper/Stepper.tsx
-import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
-var Stepper = /* @__PURE__ */ forwardRef33(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
+import { jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
+var Stepper = /* @__PURE__ */ forwardRef35(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
   const m = useMessages();
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39(
     "ol",
     {
       ref,
@@ -3211,24 +3516,24 @@ var Stepper = /* @__PURE__ */ forwardRef33(function Stepper2({ steps, current: c
       ...rest,
       children: steps.map((step2, index) => {
         const status = index < current2 ? "complete" : index === current2 ? "current" : "upcoming";
-        return /* @__PURE__ */ jsxs30(
+        return /* @__PURE__ */ jsxs34(
           "li",
           {
             className: step({ orientation }),
             "data-status": status,
             "aria-current": status === "current" ? "step" : void 0,
             children: [
-              /* @__PURE__ */ jsx37("span", { className: indicator2({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ jsx37(CheckIcon4, { size: 16, strokeWidth: 2.5 }) : index + 1 }),
-              /* @__PURE__ */ jsxs30("span", { className: text2({ orientation }), children: [
-                /* @__PURE__ */ jsxs30("span", { className: label4({ status }), children: [
+              /* @__PURE__ */ jsx39("span", { className: indicator2({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ jsx39(CheckIcon4, { size: 16, strokeWidth: 2.5 }) : index + 1 }),
+              /* @__PURE__ */ jsxs34("span", { className: text2({ orientation }), children: [
+                /* @__PURE__ */ jsxs34("span", { className: label4({ status }), children: [
                   step2.label,
-                  status === "complete" && /* @__PURE__ */ jsxs30("span", { className: visuallyHidden, children: [
+                  status === "complete" && /* @__PURE__ */ jsxs34("span", { className: visuallyHidden, children: [
                     " (",
                     m.stepCompleted ?? "\uC644\uB8CC",
                     ")"
                   ] })
                 ] }),
-                step2.description && /* @__PURE__ */ jsx37("span", { className: description5, children: step2.description })
+                step2.description && /* @__PURE__ */ jsx39("span", { className: description6, children: step2.description })
               ] })
             ]
           },
@@ -3240,7 +3545,7 @@ var Stepper = /* @__PURE__ */ forwardRef33(function Stepper2({ steps, current: c
 });
 // src/components/Switch/Switch.tsx
-import { forwardRef as forwardRef34, useEffect as useEffect10, useId as useId16, useRef as useRef15, useState as useState15 } from "react";
+import { forwardRef as forwardRef36, useEffect as useEffect11, useId as useId19, useRef as useRef16, useState as useState18 } from "react";
 // src/components/Switch/Switch.css.ts
 import { createRuntimeFn as _7a46818 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -3251,11 +3556,11 @@ var thumb2 = /* @__PURE__ */ _7a46818({ defaultClassName: "o33ul26", variantClas
 var track2 = /* @__PURE__ */ _7a46818({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 // src/components/Switch/Switch.tsx
-import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
 function setNativeChecked(input6, checked) {
   Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "checked")?.set?.call(input6, checked);
 }
-var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
+var Switch = /* @__PURE__ */ forwardRef36(function Switch2({
   label: label6,
   size,
   id,
@@ -3269,22 +3574,22 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
   onCheckedChange,
   "aria-label": ariaLabel
 }, ref) {
-  const generatedId = useId16();
+  const generatedId = useId19();
   const switchId = id ?? generatedId;
-  const [uncontrolled, setUncontrolled] = useState15(defaultChecked ?? false);
+  const [uncontrolled, setUncontrolled] = useState18(defaultChecked ?? false);
   const isControlled = checkedProp !== void 0;
   const checked = isControlled ? checkedProp : uncontrolled;
-  const buttonRef = useRef15(null);
-  const inputRef = useRef15(null);
-  const [inForm, setInForm] = useState15(true);
-  const userToggled = useRef15(false);
+  const buttonRef = useRef16(null);
+  const inputRef = useRef16(null);
+  const [inForm, setInForm] = useState18(true);
+  const userToggled = useRef16(false);
   const setChecked = (next) => {
     if (!isControlled) setUncontrolled(next);
     if (next !== checked) onCheckedChange?.(next);
   };
-  const setCheckedRef = useRef15(setChecked);
+  const setCheckedRef = useRef16(setChecked);
   setCheckedRef.current = setChecked;
-  useEffect10(() => {
+  useEffect11(() => {
     const form = buttonRef.current?.form;
     setInForm(!!form);
     if (!form) return;
@@ -3293,7 +3598,7 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
     form.addEventListener("reset", onReset);
     return () => form.removeEventListener("reset", onReset);
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     const input6 = inputRef.current;
     if (!input6 || input6.checked === checked) return;
     setNativeChecked(input6, checked);
@@ -3306,8 +3611,8 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
     if (inForm) event.stopPropagation();
   };
   const state = checked ? "checked" : "unchecked";
-  return /* @__PURE__ */ jsxs31("span", { className: cx(root12({ size }), className), "data-disabled": disabled || void 0, children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs35("span", { className: cx(root12({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsx40(
       "button",
       {
         ref: mergeRefs(ref, buttonRef),
@@ -3323,10 +3628,10 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
         value: value3,
         className: track2({ size }),
         onClick: handleClick,
-        children: /* @__PURE__ */ jsx38("span", { className: thumb2({ size }), "data-state": state, "data-disabled": disabled ? "" : void 0 })
+        children: /* @__PURE__ */ jsx40("span", { className: thumb2({ size }), "data-state": state, "data-disabled": disabled ? "" : void 0 })
       }
     ),
-    inForm && /* @__PURE__ */ jsx38(
+    inForm && /* @__PURE__ */ jsx40(
       "input",
       {
         ref: inputRef,
@@ -3341,16 +3646,16 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
         className: bubbleInput({ size })
       }
     ),
-    label6 && /* @__PURE__ */ jsx38("label", { htmlFor: switchId, className: label5, children: label6 })
+    label6 && /* @__PURE__ */ jsx40("label", { htmlFor: switchId, className: label5, children: label6 })
   ] });
 });
 // src/components/Table/Table.tsx
 import {
   createContext as createContext3,
-  forwardRef as forwardRef35,
+  forwardRef as forwardRef37,
   useContext as useContext3,
-  useId as useId17
+  useId as useId20
 } from "react";
 import { ArrowDownIcon, ArrowUpIcon } from "@bestow-ui/icons";
@@ -3366,7 +3671,7 @@ var footer3 = "l3ploy7";
 var footerCell = "l3ployg";
 var head = "l3ployf";
 var header7 = "l3ploy3";
-var row3 = "l3ploy8";
+var row4 = "l3ploy8";
 var sortButton = "l3ployh";
 var sortIcon = "l3ployi";
 var stickyHeader = "l3ploy4";
@@ -3374,10 +3679,10 @@ var striped = "l3ploy6";
 var table = "l3ploy1";
 // src/components/Table/Table.tsx
-import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 var TableSizeContext = /* @__PURE__ */ createContext3("md");
 var TableSectionContext = /* @__PURE__ */ createContext3("body");
-var Table = /* @__PURE__ */ forwardRef35(function Table2({
+var Table = /* @__PURE__ */ forwardRef37(function Table2({
   size = "md",
   striped: striped2,
   stickyHeader: stickyHeader2,
@@ -3389,8 +3694,8 @@ var Table = /* @__PURE__ */ forwardRef35(function Table2({
   children,
   ...rest
 }, ref) {
-  const captionId = useId17();
-  return /* @__PURE__ */ jsx39(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx39(
+  const captionId = useId20();
+  return /* @__PURE__ */ jsx41(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx41(
     "div",
     {
       className: cx(container, containerClassName),
@@ -3399,7 +3704,7 @@ var Table = /* @__PURE__ */ forwardRef35(function Table2({
       role: "region",
       "aria-labelledby": caption2 ? captionId : void 0,
       "aria-label": caption2 ? void 0 : ariaLabel,
-      children: /* @__PURE__ */ jsxs32(
+      children: /* @__PURE__ */ jsxs36(
         "table",
         {
           ref,
@@ -3407,7 +3712,7 @@ var Table = /* @__PURE__ */ forwardRef35(function Table2({
           "aria-label": caption2 ? void 0 : ariaLabel,
           ...rest,
           children: [
-            caption2 && /* @__PURE__ */ jsx39("caption", { id: captionId, className: caption, children: caption2 }),
+            caption2 && /* @__PURE__ */ jsx41("caption", { id: captionId, className: caption, children: caption2 }),
             children
           ]
         }
@@ -3415,31 +3720,31 @@ var Table = /* @__PURE__ */ forwardRef35(function Table2({
     }
   ) });
 });
-var TableHeader = /* @__PURE__ */ forwardRef35(
+var TableHeader = /* @__PURE__ */ forwardRef37(
   function TableHeader2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ jsx39("thead", { ref, className: cx(header7, className), ...rest }) });
+    return /* @__PURE__ */ jsx41(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ jsx41("thead", { ref, className: cx(header7, className), ...rest }) });
   }
 );
-var TableBody = /* @__PURE__ */ forwardRef35(
+var TableBody = /* @__PURE__ */ forwardRef37(
   function TableBody2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx39("tbody", { ref, className: cx(body3, className), ...rest }) });
+    return /* @__PURE__ */ jsx41(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx41("tbody", { ref, className: cx(body3, className), ...rest }) });
   }
 );
-var TableFooter = /* @__PURE__ */ forwardRef35(
+var TableFooter = /* @__PURE__ */ forwardRef37(
   function TableFooter2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx39("tfoot", { ref, className: cx(footer3, className), ...rest }) });
+    return /* @__PURE__ */ jsx41(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx41("tfoot", { ref, className: cx(footer3, className), ...rest }) });
   }
 );
-var TableRow = /* @__PURE__ */ forwardRef35(function TableRow2({ selected, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx39("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...rest });
+var TableRow = /* @__PURE__ */ forwardRef37(function TableRow2({ selected, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx41("tr", { ref, className: cx(row4, className), "data-state": selected ? "selected" : void 0, ...rest });
 });
-var TableHead = /* @__PURE__ */ forwardRef35(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
+var TableHead = /* @__PURE__ */ forwardRef37(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
   const size = useContext3(TableSizeContext);
   const section = useContext3(TableSectionContext);
   const sortable = onSort !== void 0;
   const direction = sortDirection ?? "none";
   const SortIcon = direction === "descending" ? ArrowDownIcon : ArrowUpIcon;
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     "th",
     {
       ref,
@@ -3451,17 +3756,17 @@ var TableHead = /* @__PURE__ */ forwardRef35(function TableHead2({ align, sortDi
         className
       ),
       ...rest,
-      children: sortable ? /* @__PURE__ */ jsxs32("button", { type: "button", className: sortButton, onClick: onSort, children: [
+      children: sortable ? /* @__PURE__ */ jsxs36("button", { type: "button", className: sortButton, onClick: onSort, children: [
         children,
-        /* @__PURE__ */ jsx39(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
+        /* @__PURE__ */ jsx41(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
       ] }) : children
     }
   );
 });
-var TableCell = /* @__PURE__ */ forwardRef35(function TableCell2({ align, className, ...rest }, ref) {
+var TableCell = /* @__PURE__ */ forwardRef37(function TableCell2({ align, className, ...rest }, ref) {
   const size = useContext3(TableSizeContext);
   const section = useContext3(TableSectionContext);
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     "td",
     {
       ref,
@@ -3470,17 +3775,17 @@ var TableCell = /* @__PURE__ */ forwardRef35(function TableCell2({ align, classN
     }
   );
 });
-var TableEmpty = /* @__PURE__ */ forwardRef35(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsx39(TableRow, { children: /* @__PURE__ */ jsx39(TableCell, { ref, colSpan, className: cx(emptyCell, className), ...rest, children: /* @__PURE__ */ jsx39("div", { className: emptyContent, children }) }) });
+var TableEmpty = /* @__PURE__ */ forwardRef37(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx41(TableRow, { children: /* @__PURE__ */ jsx41(TableCell, { ref, colSpan, className: cx(emptyCell, className), ...rest, children: /* @__PURE__ */ jsx41("div", { className: emptyContent, children }) }) });
 });
 function TableSkeleton({ rows = 5, columns }) {
-  return /* @__PURE__ */ jsx39(Fragment6, { children: Array.from({ length: rows }, (_, row5) => /* @__PURE__ */ jsx39(TableRow, { "aria-hidden": true, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ jsx39(TableCell, { children: /* @__PURE__ */ jsx39(Skeleton, { width: column === 0 ? "60%" : "80%" }) }, column)) }, row5)) });
+  return /* @__PURE__ */ jsx41(Fragment8, { children: Array.from({ length: rows }, (_, row6) => /* @__PURE__ */ jsx41(TableRow, { "aria-hidden": true, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ jsx41(TableCell, { children: /* @__PURE__ */ jsx41(Skeleton, { width: column === 0 ? "60%" : "80%" }) }, column)) }, row6)) });
 }
 // src/components/Table/useTableSelection.ts
-import { useCallback, useState as useState16 } from "react";
+import { useCallback, useState as useState19 } from "react";
 function useTableSelection(initial = []) {
-  const [selected, setSelected] = useState16(initial);
+  const [selected, setSelected] = useState19(initial);
   const isSelected = useCallback((id) => selected.includes(id), [selected]);
   const toggle3 = useCallback((id, checked) => {
     setSelected((prev) => {
@@ -3510,7 +3815,7 @@ function useTableSelection(initial = []) {
 // src/components/Tabs/Tabs.tsx
 import * as RadixTabs from "@radix-ui/react-tabs";
-import { createContext as createContext4, forwardRef as forwardRef36, useContext as useContext4 } from "react";
+import { createContext as createContext4, forwardRef as forwardRef38, useContext as useContext4 } from "react";
 // src/components/Tabs/Tabs.css.ts
 import { createRuntimeFn as _7a46820 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -3520,31 +3825,31 @@ var root13 = "fvhbtd0";
 var trigger3 = /* @__PURE__ */ _7a46820({ defaultClassName: "fvhbtd4", variantClassNames: { variant: { line: "fvhbtd5", soft: "fvhbtd6" }, size: { sm: "fvhbtd7", md: "fvhbtd8" } }, defaultVariants: { variant: "line", size: "md" }, compoundVariants: [[{ variant: "soft", size: "sm" }, "fvhbtd9"], [{ variant: "soft", size: "md" }, "fvhbtda"]] });
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var TabsStyleContext = /* @__PURE__ */ createContext4({ variant: "line", size: "md" });
-var Tabs = /* @__PURE__ */ forwardRef36(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
+var Tabs = /* @__PURE__ */ forwardRef38(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
   const controlled = "value" in props ? { value: props.value ?? "" } : {};
-  return /* @__PURE__ */ jsx40(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx40(RadixTabs.Root, { ref, className: cx(root13, className), ...props, ...controlled }) });
+  return /* @__PURE__ */ jsx42(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx42(RadixTabs.Root, { ref, className: cx(root13, className), ...props, ...controlled }) });
 });
-var TabsList = /* @__PURE__ */ forwardRef36(function TabsList2({ className, ...rest }, ref) {
+var TabsList = /* @__PURE__ */ forwardRef38(function TabsList2({ className, ...rest }, ref) {
   const { variant } = useContext4(TabsStyleContext);
-  return /* @__PURE__ */ jsx40(RadixTabs.List, { ref, className: cx(list6({ variant }), className), ...rest });
+  return /* @__PURE__ */ jsx42(RadixTabs.List, { ref, className: cx(list6({ variant }), className), ...rest });
 });
-var TabsTrigger = /* @__PURE__ */ forwardRef36(function TabsTrigger2({ className, ...rest }, ref) {
+var TabsTrigger = /* @__PURE__ */ forwardRef38(function TabsTrigger2({ className, ...rest }, ref) {
   const { variant, size } = useContext4(TabsStyleContext);
-  return /* @__PURE__ */ jsx40(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
+  return /* @__PURE__ */ jsx42(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
 });
-var TabsContent = /* @__PURE__ */ forwardRef36(function TabsContent2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx40(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
+var TabsContent = /* @__PURE__ */ forwardRef38(function TabsContent2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx42(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
 });
 // src/components/Textarea/Textarea.tsx
 import {
-  forwardRef as forwardRef37,
+  forwardRef as forwardRef39,
   useCallback as useCallback2,
-  useId as useId18,
-  useRef as useRef16,
-  useState as useState17
+  useId as useId21,
+  useRef as useRef17,
+  useState as useState20
 } from "react";
 // src/components/Textarea/Textarea.css.ts
@@ -3556,8 +3861,8 @@ var footer4 = "_1koawa8";
 var textarea = /* @__PURE__ */ _7a46821({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
 // src/components/Textarea/Textarea.tsx
-import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
-var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
+import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+var Textarea = /* @__PURE__ */ forwardRef39(function Textarea2({
   label: label6,
   helperText: helperText3,
   error,
@@ -3578,11 +3883,11 @@ var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = useId18();
+  const generatedId = useId21();
   const textareaId = id ?? generatedId;
   const helperId = helperText3 ? `${textareaId}-helper` : void 0;
-  const innerRef = useRef16(null);
-  const [uncontrolledLength, setUncontrolledLength] = useState17(() => String(defaultValue ?? "").length);
+  const innerRef = useRef17(null);
+  const [uncontrolledLength, setUncontrolledLength] = useState20(() => String(defaultValue ?? "").length);
   const length = value3 !== void 0 ? String(value3).length : uncontrolledLength;
   const fitHeight = useCallback2(() => {
     const el = innerRef.current;
@@ -3597,12 +3902,12 @@ var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
     fitHeight();
     onChange?.(event);
   };
-  return /* @__PURE__ */ jsxs33("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs33("label", { htmlFor: textareaId, className: label, children: [
+  return /* @__PURE__ */ jsxs37("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs37("label", { htmlFor: textareaId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx41("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx43("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx43(
       "textarea",
       {
         ref: mergeRefs(innerRef, ref),
@@ -3624,36 +3929,36 @@ var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
         ...rest
       }
     ),
-    (helperText3 || showCount) && /* @__PURE__ */ jsxs33("div", { className: footer4, children: [
-      helperText3 && /* @__PURE__ */ jsx41("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
-      showCount && /* @__PURE__ */ jsx41("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
+    (helperText3 || showCount) && /* @__PURE__ */ jsxs37("div", { className: footer4, children: [
+      helperText3 && /* @__PURE__ */ jsx43("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
+      showCount && /* @__PURE__ */ jsx43("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
     ] })
   ] });
 });
 // src/components/Toast/Toast.tsx
 import * as RadixToast from "@radix-ui/react-toast";
-import { createContext as createContext5, useCallback as useCallback3, useContext as useContext5, useMemo as useMemo4, useRef as useRef17, useState as useState18 } from "react";
+import { createContext as createContext5, useCallback as useCallback3, useContext as useContext5, useMemo as useMemo4, useRef as useRef18, useState as useState21 } from "react";
 import { XIcon as XIcon7 } from "@bestow-ui/icons";
 // src/components/Toast/Toast.css.ts
 import { createRuntimeFn as _7a46822 } from "@vanilla-extract/recipes/createRuntimeFn";
-var action2 = "_1g11zvx9";
-var close = "_1g11zvxa";
-var description6 = "_1g11zvx8";
-var title5 = "_1g11zvx7";
-var toast = /* @__PURE__ */ _7a46822({ defaultClassName: "_1g11zvx1", variantClassNames: { color: { primary: "_1g11zvx2", neutral: "_1g11zvx3", success: "_1g11zvx4", warning: "_1g11zvx5", danger: "_1g11zvx6" } }, defaultVariants: { color: "neutral" }, compoundVariants: [] });
+var action2 = "_1g11zvxa";
+var close = "_1g11zvxb";
+var description7 = "_1g11zvx9";
+var title5 = "_1g11zvx8";
+var toast = /* @__PURE__ */ _7a46822({ defaultClassName: "_1g11zvx1", variantClassNames: { color: { primary: "_1g11zvx2", neutral: "_1g11zvx3", success: "_1g11zvx4", warning: "_1g11zvx5", danger: "_1g11zvx6", info: "_1g11zvx7" } }, defaultVariants: { color: "neutral" }, compoundVariants: [] });
 var viewport2 = "_1g11zvx0";
 // src/components/Toast/Toast.tsx
-import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
 var REMOVE_DELAY = 500;
 var ToastContext = /* @__PURE__ */ createContext5(null);
 function ToastProvider({ children, duration = 5e3, label: labelProp }) {
   const m = useMessages();
   const label6 = labelProp ?? m.notifications ?? "\uC54C\uB9BC";
-  const [toasts, setToasts] = useState18([]);
-  const nextId = useRef17(0);
+  const [toasts, setToasts] = useState21([]);
+  const nextId = useRef18(0);
   const portal2 = usePortalProps();
   const toast2 = useCallback3((options) => {
     const id = nextId.current++;
@@ -3666,9 +3971,9 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
     setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
   }, []);
   const value3 = useMemo4(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
-  return /* @__PURE__ */ jsx42(ToastContext.Provider, { value: value3, children: /* @__PURE__ */ jsxs34(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
+  return /* @__PURE__ */ jsx44(ToastContext.Provider, { value: value3, children: /* @__PURE__ */ jsxs38(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
     children,
-    toasts.map(({ id, open, title: title6, description: description7, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ jsxs34(
+    toasts.map(({ id, open, title: title6, description: description8, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ jsxs38(
       RadixToast.Root,
       {
         open,
@@ -3678,15 +3983,15 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
         },
         className: toast({ color }),
         children: [
-          /* @__PURE__ */ jsx42(RadixToast.Title, { className: title5, children: title6 }),
-          description7 && /* @__PURE__ */ jsx42(RadixToast.Description, { className: description6, children: description7 }),
-          action3 && /* @__PURE__ */ jsx42(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ jsx42(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
-          /* @__PURE__ */ jsx42(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx42(XIcon7, { size: 16 }) })
+          /* @__PURE__ */ jsx44(RadixToast.Title, { className: title5, children: title6 }),
+          description8 && /* @__PURE__ */ jsx44(RadixToast.Description, { className: description7, children: description8 }),
+          action3 && /* @__PURE__ */ jsx44(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ jsx44(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
+          /* @__PURE__ */ jsx44(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx44(XIcon7, { size: 16 }) })
         ]
       },
       id
     )),
-    /* @__PURE__ */ jsx42(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
+    /* @__PURE__ */ jsx44(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
   ] }) });
 }
 function useToast() {
@@ -3703,7 +4008,7 @@ var arrow2 = "z7rufs1";
 var content11 = "z7rufs0";
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
 function Tooltip({
   content: content12,
   children,
@@ -3718,9 +4023,9 @@ function Tooltip({
 }) {
   const portal2 = usePortalProps();
   if (disabled || content12 == null || content12 === "") return children;
-  return /* @__PURE__ */ jsx43(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs35(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx43(RadixTooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx43(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsx45(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs39(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx45(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx45(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs39(
       RadixTooltip.Content,
       {
         side,
@@ -3731,7 +4036,7 @@ function Tooltip({
         style: portal2.style,
         children: [
           content12,
-          /* @__PURE__ */ jsx43(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
+          /* @__PURE__ */ jsx45(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
         ]
       }
     ) })
@@ -3739,19 +4044,19 @@ function Tooltip({
 }
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-import { forwardRef as forwardRef38, useEffect as useEffect11, useId as useId19, useRef as useRef18, useState as useState19 } from "react";
+import { forwardRef as forwardRef40, useEffect as useEffect12, useId as useId22, useRef as useRef19, useState as useState22 } from "react";
 // src/components/VerificationCodeInput/VerificationCodeInput.css.ts
 var input5 = "ea01812";
-var row4 = "ea01810";
+var row5 = "ea01810";
 var slot = "ea01813";
 var slots = "ea01811";
 var timer = "ea01814";
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs40 } from "react/jsx-runtime";
 var formatTime = (seconds) => `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
-var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
+var VerificationCodeInput = /* @__PURE__ */ forwardRef40(
   function VerificationCodeInput2(props, ref) {
     const {
       length = 6,
@@ -3778,23 +4083,23 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
     const label6 = labelProp ?? m.verificationCode ?? "\uC778\uC99D\uBC88\uD638";
     const resendText = resendTextProp ?? m.resend ?? "\uC7AC\uC804\uC1A1";
     const expiredText = expiredTextProp ?? m.verificationExpired ?? "\uC778\uC99D \uC2DC\uAC04\uC774 \uC9C0\uB0AC\uC5B4\uC694. \uC7AC\uC804\uC1A1\uD574 \uC8FC\uC138\uC694.";
-    const generatedId = useId19();
+    const generatedId = useId22();
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
     const statusId = `${inputId}-status`;
-    const inputRef = useRef18(null);
+    const inputRef = useRef19(null);
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = useState19(defaultValue ?? "");
+    const [innerValue, setInnerValue] = useState22(defaultValue ?? "");
     const code = (isControlled ? value3 ?? "" : innerValue).slice(0, length);
-    const [focused, setFocused] = useState19(false);
-    const [endAt, setEndAt] = useState19(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
-    const [remaining, setRemaining] = useState19(expiresIn ?? 0);
+    const [focused, setFocused] = useState22(false);
+    const [endAt, setEndAt] = useState22(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
+    const [remaining, setRemaining] = useState22(expiresIn ?? 0);
     const expired = expiresIn !== void 0 && remaining <= 0;
-    const onExpireRef = useRef18(onExpire);
-    useEffect11(() => {
+    const onExpireRef = useRef19(onExpire);
+    useEffect12(() => {
       onExpireRef.current = onExpire;
     });
-    useEffect11(() => {
+    useEffect12(() => {
       if (endAt === null) return;
       const tick = () => {
         const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
@@ -3827,19 +4132,19 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
       }
       inputRef.current?.focus();
     };
-    const description7 = helperText3 ?? m.verificationCodeHint?.(length, type) ?? `${length}\uC790\uB9AC ${type === "numeric" ? "\uC22B\uC790" : "\uBB38\uC790"}\uB97C \uC785\uB825\uD558\uC138\uC694.`;
+    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__ */ jsxs36(
+    return /* @__PURE__ */ jsxs40(
       "div",
       {
         className: cx(field, className),
         "data-invalid": error || void 0,
         "data-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ jsx44("label", { htmlFor: inputId, className: label, children: label6 }),
-          /* @__PURE__ */ jsxs36("div", { className: row4, children: [
-            /* @__PURE__ */ jsxs36("div", { className: slots, children: [
-              /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx46("label", { htmlFor: inputId, className: label, children: label6 }),
+          /* @__PURE__ */ jsxs40("div", { className: row5, children: [
+            /* @__PURE__ */ jsxs40("div", { className: slots, children: [
+              /* @__PURE__ */ jsx46(
                 "input",
                 {
                   ref: mergeRefs(ref, inputRef),
@@ -3859,7 +4164,7 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
                   className: input5
                 }
               ),
-              Array.from({ length }, (_, index) => /* @__PURE__ */ jsx44(
+              Array.from({ length }, (_, index) => /* @__PURE__ */ jsx46(
                 "div",
                 {
                   className: slot,
@@ -3870,12 +4175,12 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
                 index
               ))
             ] }),
-            expiresIn !== void 0 && /* @__PURE__ */ jsx44("span", { role: "timer", className: timer, children: formatTime(remaining) }),
-            onResend && /* @__PURE__ */ jsx44(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
+            expiresIn !== void 0 && /* @__PURE__ */ jsx46("span", { role: "timer", className: timer, children: formatTime(remaining) }),
+            onResend && /* @__PURE__ */ jsx46(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
           ] }),
-          /* @__PURE__ */ jsx44("p", { id: helperId, className: helperText({ error }), children: description7 }),
-          /* @__PURE__ */ jsx44("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
-          name && /* @__PURE__ */ jsx44("input", { type: "hidden", name, value: code })
+          /* @__PURE__ */ jsx46("p", { id: helperId, className: helperText({ error }), children: description8 }),
+          /* @__PURE__ */ jsx46("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
+          name && /* @__PURE__ */ jsx46("input", { type: "hidden", name, value: code })
         ]
       }
     );
@@ -3894,6 +4199,7 @@ export {
   Button,
   Calendar,
   Checkbox,
+  CheckboxGroup,
   Combobox,
   DatePicker,
   DateRangePicker,
@@ -3927,6 +4233,7 @@ export {
   Popover2 as Popover,
   PopoverClose,
   RadioGroup2 as RadioGroup,
+  ResidentNumberInput,
   SegmentedControl,
   Select,
   SkipLink,