@bestow-ui/react 1.0.0 → 1.1.0

package/dist/client.js

@@ -631,7 +631,7 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
       if (!isControlled) setInnerValue(next);
       onValueChange?.(next);
     };
-    const allValues = items2.map((item7) => item7.value);
+    const allValues = items2.map((item8) => item8.value);
     const agreedCount = allValues.filter((v) => agreed.includes(v)).length;
     const allChecked = items2.length > 0 && agreedCount === items2.length;
     const toggleItem = (itemValue, checked) => update(checked ? [...agreed.filter((v) => v !== itemValue), itemValue] : agreed.filter((v) => v !== itemValue));
@@ -655,28 +655,28 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
                 onChange: (event) => update(event.target.checked ? allValues : [])
               }
             ) }),
-            /* @__PURE__ */ jsx11("ul", { className: list, children: items2.map((item7) => {
-              const labelId = `${baseId}-${item7.value}-label`;
-              const toggleTextId = `${baseId}-${item7.value}-toggle`;
-              const contentId = `${baseId}-${item7.value}-content`;
-              const isOpen = expanded.includes(item7.value);
+            /* @__PURE__ */ jsx11("ul", { className: list, children: items2.map((item8) => {
+              const labelId = `${baseId}-${item8.value}-label`;
+              const toggleTextId = `${baseId}-${item8.value}-toggle`;
+              const contentId = `${baseId}-${item8.value}-content`;
+              const isOpen = expanded.includes(item8.value);
               return /* @__PURE__ */ jsxs9("li", { className: item2, children: [
                 /* @__PURE__ */ jsxs9("div", { className: row2, children: [
                   /* @__PURE__ */ jsx11(
                     Checkbox,
                     {
                       size: "sm",
-                      checked: agreed.includes(item7.value),
-                      invalid: error && item7.required && !agreed.includes(item7.value),
-                      onChange: (event) => toggleItem(item7.value, event.target.checked),
+                      checked: agreed.includes(item8.value),
+                      invalid: error && item8.required && !agreed.includes(item8.value),
+                      onChange: (event) => toggleItem(item8.value, event.target.checked),
                       label: /* @__PURE__ */ jsxs9("span", { id: labelId, children: [
-                        /* @__PURE__ */ jsx11("span", { className: tag, "data-required": item7.required || void 0, children: item7.required ? requiredText : optionalText }),
+                        /* @__PURE__ */ jsx11("span", { className: tag, "data-required": item8.required || void 0, children: item8.required ? requiredText : optionalText }),
                         " ",
-                        item7.label
+                        item8.label
                       ] })
                     }
                   ),
-                  item7.content && /* @__PURE__ */ jsxs9(
+                  item8.content && /* @__PURE__ */ jsxs9(
                     "button",
                     {
                       type: "button",
@@ -684,7 +684,7 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
                       "aria-expanded": isOpen,
                       "aria-controls": contentId,
                       "aria-labelledby": `${labelId} ${toggleTextId}`,
-                      onClick: () => setExpanded((prev) => isOpen ? prev.filter((v) => v !== item7.value) : [...prev, item7.value]),
+                      onClick: () => setExpanded((prev) => isOpen ? prev.filter((v) => v !== item8.value) : [...prev, item8.value]),
                       children: [
                         /* @__PURE__ */ jsx11("span", { id: toggleTextId, children: isOpen ? hideText : showText }),
                         /* @__PURE__ */ jsx11(ChevronDownIcon2, { size: 14, className: chevron2 })
@@ -692,10 +692,10 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
                     }
                   )
                 ] }),
-                item7.content && isOpen && // 내용이 길면 스크롤된다 — 키보드로도 스크롤할 수 있게 포커스를 받는 이름 있는 영역으로 둔다
+                item8.content && isOpen && // 내용이 길면 스크롤된다 — 키보드로도 스크롤할 수 있게 포커스를 받는 이름 있는 영역으로 둔다
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                /* @__PURE__ */ jsx11("div", { id: contentId, role: "region", "aria-labelledby": labelId, tabIndex: 0, className: content3, children: item7.content })
-              ] }, item7.value);
+                /* @__PURE__ */ jsx11("div", { id: contentId, role: "region", "aria-labelledby": labelId, tabIndex: 0, className: content3, children: item8.content })
+              ] }, item8.value);
             }) })
           ] }),
           name && agreed.map((v) => /* @__PURE__ */ jsx11("input", { type: "hidden", name, value: v }, v)),
@@ -733,7 +733,7 @@ var Alert = /* @__PURE__ */ forwardRef10(function Alert2({
   variant,
   color = "primary",
   title: title6,
-  icon: icon6,
+  icon: icon7,
   action: action3,
   onClose,
   closeLabel: closeLabelProp,
@@ -744,7 +744,7 @@ var Alert = /* @__PURE__ */ forwardRef10(function Alert2({
   const m = useMessages();
   const closeLabel = closeLabelProp ?? m.close ?? "\uB2EB\uAE30";
   const DefaultIcon = defaultIcons[color];
-  const iconNode = icon6 === void 0 ? /* @__PURE__ */ jsx12(DefaultIcon, { size: 18 }) : icon6;
+  const iconNode = icon7 === void 0 ? /* @__PURE__ */ jsx12(DefaultIcon, { size: 18 }) : icon7;
   return /* @__PURE__ */ jsxs10("div", { ref, className: cx(alert({ variant, color }), className), ...rest, children: [
     iconNode !== false && iconNode !== null && /* @__PURE__ */ jsx12("span", { className: icon2, "aria-hidden": true, children: iconNode }),
     /* @__PURE__ */ jsxs10("div", { className: content4, children: [
@@ -1015,11 +1015,11 @@ var Breadcrumb = /* @__PURE__ */ forwardRef15(function Breadcrumb2({ items: item
   const m = useMessages();
   const ariaLabel = ariaLabelProp ?? m.breadcrumb ?? "\uC774\uB3D9 \uACBD\uB85C";
   const sep = separator3 ?? /* @__PURE__ */ jsx17(ChevronRightIcon, { size: 14 });
-  return /* @__PURE__ */ jsx17("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsx17("ol", { className: list2, children: items2.map((item7, index) => {
+  return /* @__PURE__ */ jsx17("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsx17("ol", { className: list2, children: items2.map((item8, index) => {
     const isCurrent = index === items2.length - 1;
     return /* @__PURE__ */ jsxs15("li", { className: item3, children: [
       index > 0 && /* @__PURE__ */ jsx17("span", { className: separator, "aria-hidden": true, children: sep }),
-      isCurrent || item7.href === void 0 ? /* @__PURE__ */ jsx17("span", { className: isCurrent ? current : void 0, "aria-current": isCurrent ? "page" : void 0, children: item7.label }) : /* @__PURE__ */ jsx17(Link, { as: linkAs, href: item7.href, color: "neutral", underline: "hover", className: link2, children: item7.label })
+      isCurrent || item8.href === void 0 ? /* @__PURE__ */ jsx17("span", { className: isCurrent ? current : void 0, "aria-current": isCurrent ? "page" : void 0, children: item8.label }) : /* @__PURE__ */ jsx17(Link, { as: linkAs, href: item8.href, color: "neutral", underline: "hover", className: link2, children: item8.label })
     ] }, index);
   }) }) });
 });
@@ -1322,7 +1322,7 @@ import {
   useRef as useRef8,
   useState as useState6
 } from "react";
-import { CheckIcon, ChevronDownIcon as ChevronDownIcon3 } from "@bestow-ui/icons";
+import { CheckIcon, ChevronDownIcon as ChevronDownIcon3, XIcon as XIcon3 } from "@bestow-ui/icons";
 
 // src/components/Select/Select.css.ts
 var content5 = "_1kx81e83";
@@ -1334,9 +1334,10 @@ var value = "_1kx81e81";
 var viewport = "_1kx81e84";
 
 // src/components/Combobox/Combobox.css.ts
-var content6 = "c2pbq71";
-var empty = "c2pbq72";
-var toggle2 = "c2pbq70";
+var clear = "c2pbq72 c2pbq70";
+var content6 = "c2pbq73";
+var empty = "c2pbq74";
+var toggle2 = "c2pbq71 c2pbq70";
 
 // src/components/Combobox/Combobox.tsx
 import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -1361,11 +1362,14 @@ var Combobox = /* @__PURE__ */ forwardRef20(function Combobox2(props, ref) {
     id,
     "aria-label": ariaLabel,
     toggleLabel: toggleLabelProp,
+    clearable,
+    clearLabel: clearLabelProp,
     className
   } = props;
   const m = useMessages();
   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 inputId = id ?? generatedId;
   const labelId = `${inputId}-label`;
@@ -1395,16 +1399,24 @@ var Combobox = /* @__PURE__ */ forwardRef20(function Combobox2(props, ref) {
       selectedIndex >= 0 && !list5[selectedIndex].disabled ? selectedIndex : preferLast ? firstEnabled(list5, list5.length - 1, -1) : firstEnabled(list5)
     );
   };
-  const close2 = () => {
+  const reset = () => {
     setOpen(false);
     setQuery(null);
     setActiveIndex(-1);
   };
+  const clearSelection = () => {
+    if (!isControlled) setInnerValue(void 0);
+    if (selectedValue) onValueChange?.("");
+  };
+  const close2 = () => {
+    if (query === "" && selectedValue) clearSelection();
+    reset();
+  };
   const select = (option2) => {
     if (option2.disabled) return;
     if (!isControlled) setInnerValue(option2.value);
     if (option2.value !== selectedValue) onValueChange?.(option2.value);
-    close2();
+    reset();
   };
   const move = (step) => {
     const start = activeIndex < 0 ? step === 1 ? 0 : filtered.length - 1 : activeIndex + step;
@@ -1416,7 +1428,7 @@ var Combobox = /* @__PURE__ */ forwardRef20(function Combobox2(props, ref) {
     const nextList = nextQuery ? options.filter((o) => filter(o, nextQuery)) : options;
     setQuery(nextQuery);
     setOpen(true);
-    setActiveIndex(firstEnabled(nextList));
+    setActiveIndex(nextQuery ? firstEnabled(nextList) : -1);
   };
   const handleKeyDown = (event) => {
     switch (event.key) {
@@ -1435,6 +1447,7 @@ var Combobox = /* @__PURE__ */ forwardRef20(function Combobox2(props, ref) {
           event.preventDefault();
           const option2 = filtered[activeIndex];
           if (option2) select(option2);
+          else close2();
         }
         break;
       case "Escape":
@@ -1494,6 +1507,22 @@ var Combobox = /* @__PURE__ */ forwardRef20(function Combobox2(props, ref) {
                 className: input
               }
             ),
+            clearable && selectedOption && !disabled && /* @__PURE__ */ jsx22(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                "aria-label": clearLabel,
+                className: clear,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => {
+                  clearSelection();
+                  reset();
+                  inputRef.current?.focus();
+                },
+                children: /* @__PURE__ */ jsx22(XIcon3, { size: 16 })
+              }
+            ),
             /* @__PURE__ */ jsx22(
               "button",
               {
@@ -1581,7 +1610,7 @@ import { CalendarIcon } from "@bestow-ui/icons";
 
 // src/components/Popover/Popover.tsx
 import * as RadixPopover from "@radix-ui/react-popover";
-import { XIcon as XIcon3 } from "@bestow-ui/icons";
+import { XIcon as XIcon4 } from "@bestow-ui/icons";
 import { useId as useId6 } from "react";
 
 // src/components/Popover/Popover.css.ts
@@ -1630,7 +1659,7 @@ function Popover2({
         children: [
           (title6 || showClose) && /* @__PURE__ */ jsxs18("div", { className: header5, children: [
             title6 && /* @__PURE__ */ jsx23("h2", { id: titleId, className: title3, children: title6 }),
-            showClose && /* @__PURE__ */ jsx23(RadixPopover.Close, { className: closeButton3, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx23(XIcon3, { size: 16 }) })
+            showClose && /* @__PURE__ */ jsx23(RadixPopover.Close, { className: closeButton3, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx23(XIcon4, { size: 16 }) })
           ] }),
           content12,
           showArrow && /* @__PURE__ */ jsx23(RadixPopover.Arrow, { className: arrow, width: 12, height: 6 })
@@ -1803,7 +1832,7 @@ var Divider = /* @__PURE__ */ forwardRef22(function Divider2({ orientation = "ho
 
 // src/components/Drawer/Drawer.tsx
 import * as Dialog2 from "@radix-ui/react-dialog";
-import { XIcon as XIcon4 } from "@bestow-ui/icons";
+import { XIcon as XIcon5 } from "@bestow-ui/icons";
 
 // src/components/Drawer/Drawer.css.ts
 import { createRuntimeFn as _7a46813 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -1857,7 +1886,7 @@ function Drawer({
                 /* @__PURE__ */ jsx26(Dialog2.Title, { className: title4, children: title6 }),
                 description6 && /* @__PURE__ */ jsx26(Dialog2.Description, { className: description3, children: description6 })
               ] }),
-              !hideCloseButton && /* @__PURE__ */ jsx26(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx26(IconButton, { "aria-label": m.close ?? "\uB2EB\uAE30", size: "sm", className: closeButton4, children: /* @__PURE__ */ jsx26(XIcon4, {}) }) })
+              !hideCloseButton && /* @__PURE__ */ jsx26(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx26(IconButton, { "aria-label": m.close ?? "\uB2EB\uAE30", size: "sm", className: closeButton4, children: /* @__PURE__ */ jsx26(XIcon5, {}) }) })
             ] }),
             children && /* @__PURE__ */ jsx26("div", { className: body3, children }),
             footer6 && /* @__PURE__ */ jsx26("div", { className: footer3, children: footer6 })
@@ -1906,9 +1935,9 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef23(
   }
 );
 var DropdownMenuItem = /* @__PURE__ */ forwardRef23(
-  function DropdownMenuItem2({ icon: icon6, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
+  function DropdownMenuItem2({ icon: icon7, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
     return /* @__PURE__ */ jsxs22(RadixMenu.Item, { ref, className: cx(item5, color === "danger" && danger, className), ...rest, children: [
-      icon6 && /* @__PURE__ */ jsx27("span", { className: icon5, "aria-hidden": true, children: icon6 }),
+      icon7 && /* @__PURE__ */ jsx27("span", { className: icon5, "aria-hidden": true, children: icon7 }),
       children,
       shortcut2 && /* @__PURE__ */ jsx27("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
     ] });
@@ -1999,17 +2028,17 @@ var Pagination = /* @__PURE__ */ forwardRef24(function Pagination2({
       }
     ) }),
     getPaginationItems(page, totalPages, siblingCount, boundaryCount).map(
-      (item7) => typeof item7 === "number" ? /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
+      (item8) => typeof item8 === "number" ? /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
         "button",
         {
           type: "button",
           className: itemClass,
-          "aria-label": getItemLabel("page", item7),
-          "aria-current": item7 === page ? "page" : void 0,
-          onClick: () => goTo(item7),
-          children: item7
+          "aria-label": getItemLabel("page", item8),
+          "aria-current": item8 === page ? "page" : void 0,
+          onClick: () => goTo(item8),
+          children: item8
         }
-      ) }, item7) : /* @__PURE__ */ jsx28("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item7)
+      ) }, item8) : /* @__PURE__ */ jsx28("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item8)
     ),
     /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
       "button",
@@ -2229,12 +2258,125 @@ var RadioGroup = /* @__PURE__ */ forwardRef27(function RadioGroup2(props, ref) {
   ] });
 });
 
+// src/components/SegmentedControl/SegmentedControl.tsx
+import { forwardRef as forwardRef28, useId as useId9, useRef as useRef11, useState as useState9 } from "react";
+
+// src/components/SegmentedControl/SegmentedControl.css.ts
+import { createRuntimeFn as _7a46817 } from "@vanilla-extract/recipes/createRuntimeFn";
+var icon6 = "_1h65mmo7";
+var item7 = /* @__PURE__ */ _7a46817({ defaultClassName: "_1h65mmo2", variantClassNames: { size: { sm: "_1h65mmo3", md: "_1h65mmo4", lg: "_1h65mmo5" }, fullWidth: { true: "_1h65mmo6" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var root8 = /* @__PURE__ */ _7a46817({ defaultClassName: "_1h65mmo0", variantClassNames: { fullWidth: { true: "_1h65mmo1" } }, defaultVariants: {}, compoundVariants: [] });
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+var NEXT_KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+var SegmentedControl = /* @__PURE__ */ forwardRef28(
+  function SegmentedControl2(props, ref) {
+    const {
+      options,
+      value: value4,
+      defaultValue,
+      onValueChange,
+      label: label6,
+      "aria-label": ariaLabel,
+      size,
+      fullWidth,
+      disabled,
+      name,
+      id,
+      className
+    } = props;
+    const isControlled = "value" in props;
+    const [innerValue, setInnerValue] = useState9(defaultValue ?? "");
+    const current2 = isControlled ? value4 ?? "" : innerValue;
+    const generatedId = useId9();
+    const labelId = label6 ? `${id ?? generatedId}-label` : void 0;
+    const itemRefs = useRef11([]);
+    const isEnabled = (index) => !disabled && !options[index]?.disabled;
+    const select = (index) => {
+      const next = options[index].value;
+      if (next === current2) return;
+      if (!isControlled) setInnerValue(next);
+      onValueChange?.(next);
+    };
+    const checkedIndex = options.findIndex((option2) => option2.value === current2);
+    const tabStop = checkedIndex >= 0 && isEnabled(checkedIndex) ? checkedIndex : options.findIndex((_, i) => isEnabled(i));
+    const handleKeyDown = (event, index) => {
+      let target = -1;
+      const step = NEXT_KEYS[event.key];
+      if (step) {
+        for (let i = 1; i <= options.length; i++) {
+          const candidate = (index + step * i + options.length) % options.length;
+          if (isEnabled(candidate)) {
+            target = candidate;
+            break;
+          }
+        }
+      } else if (event.key === "Home") {
+        target = options.findIndex((_, i) => isEnabled(i));
+      } else if (event.key === "End") {
+        for (let i = options.length - 1; i >= 0 && target < 0; i--) if (isEnabled(i)) target = i;
+      }
+      if (target < 0) return;
+      event.preventDefault();
+      itemRefs.current[target]?.focus();
+      select(target);
+    };
+    const group = /* @__PURE__ */ jsxs26(
+      "div",
+      {
+        ref,
+        id,
+        role: "radiogroup",
+        "aria-labelledby": labelId,
+        "aria-label": label6 ? void 0 : ariaLabel,
+        "aria-disabled": disabled || void 0,
+        className: cx(root8({ fullWidth }), !label6 && className),
+        children: [
+          options.map((option2, index) => {
+            const checked = index === checkedIndex;
+            return /* @__PURE__ */ jsxs26(
+              "button",
+              {
+                ref: (node) => {
+                  itemRefs.current[index] = node;
+                },
+                type: "button",
+                role: "radio",
+                "aria-checked": checked,
+                tabIndex: index === tabStop ? 0 : -1,
+                disabled: !isEnabled(index),
+                "data-state": checked ? "checked" : "unchecked",
+                "data-disabled": isEnabled(index) ? void 0 : "",
+                className: item7({ size, fullWidth }),
+                onClick: () => select(index),
+                onKeyDown: (event) => handleKeyDown(event, index),
+                children: [
+                  option2.icon && /* @__PURE__ */ jsx32("span", { "aria-hidden": true, className: icon6, children: option2.icon }),
+                  option2.label
+                ]
+              },
+              option2.value
+            );
+          }),
+          name && /* @__PURE__ */ jsx32("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 }),
+      group
+    ] });
+  }
+);
+
 // src/components/Select/Select.tsx
 import * as RadixSelect from "@radix-ui/react-select";
-import { forwardRef as forwardRef28, useId as useId9 } from "react";
+import { forwardRef as forwardRef29, useId as useId10 } from "react";
 import { CheckIcon as CheckIcon2, ChevronDownIcon as ChevronDownIcon4 } from "@bestow-ui/icons";
-import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
-var Select = /* @__PURE__ */ forwardRef28(function Select2(props, ref) {
+import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
+var Select = /* @__PURE__ */ forwardRef29(function Select2(props, ref) {
   const {
     options,
     value: value4,
@@ -2254,16 +2396,16 @@ var Select = /* @__PURE__ */ forwardRef28(function Select2(props, ref) {
     className
   } = props;
   const isControlled = "value" in props;
-  const generatedId = useId9();
+  const generatedId = useId10();
   const triggerId = id ?? generatedId;
   const helperId = helperText3 ? `${triggerId}-helper` : void 0;
   const portal2 = usePortalProps();
-  return /* @__PURE__ */ jsxs26("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs26("label", { htmlFor: triggerId, className: label, children: [
+  return /* @__PURE__ */ jsxs27("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs27("label", { htmlFor: triggerId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx32("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx33("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs26(
+    /* @__PURE__ */ jsxs27(
       RadixSelect.Root,
       {
         value: isControlled ? value4 ?? "" : void 0,
@@ -2273,7 +2415,7 @@ var Select = /* @__PURE__ */ forwardRef28(function Select2(props, ref) {
         required,
         name,
         children: [
-          /* @__PURE__ */ jsxs26(
+          /* @__PURE__ */ jsxs27(
             RadixSelect.Trigger,
             {
               ref,
@@ -2284,12 +2426,12 @@ var Select = /* @__PURE__ */ forwardRef28(function Select2(props, ref) {
               "data-invalid": error || void 0,
               className: cx(root3({ size, fullWidth }), trigger2, className),
               children: [
-                /* @__PURE__ */ jsx32("span", { className: value, children: /* @__PURE__ */ jsx32(RadixSelect.Value, { placeholder }) }),
-                /* @__PURE__ */ jsx32(RadixSelect.Icon, { className: icon4, children: /* @__PURE__ */ jsx32(ChevronDownIcon4, { size: 16 }) })
+                /* @__PURE__ */ jsx33("span", { className: value, children: /* @__PURE__ */ jsx33(RadixSelect.Value, { placeholder }) }),
+                /* @__PURE__ */ jsx33(RadixSelect.Icon, { className: icon4, children: /* @__PURE__ */ jsx33(ChevronDownIcon4, { size: 16 }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx32(RadixSelect.Portal, { children: /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(RadixSelect.Portal, { children: /* @__PURE__ */ jsx33(
             RadixSelect.Content,
             {
               position: "popper",
@@ -2297,15 +2439,15 @@ var Select = /* @__PURE__ */ forwardRef28(function Select2(props, ref) {
               collisionPadding: 8,
               className: cx(portal2.className, content5),
               style: portal2.style,
-              children: /* @__PURE__ */ jsx32(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ jsxs26(
+              children: /* @__PURE__ */ jsx33(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ jsxs27(
                 RadixSelect.Item,
                 {
                   value: option2.value,
                   disabled: option2.disabled,
                   className: item4,
                   children: [
-                    /* @__PURE__ */ jsx32(RadixSelect.ItemText, { children: option2.label }),
-                    /* @__PURE__ */ jsx32(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx32(CheckIcon2, { size: 16 }) })
+                    /* @__PURE__ */ jsx33(RadixSelect.ItemText, { children: option2.label }),
+                    /* @__PURE__ */ jsx33(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx33(CheckIcon2, { size: 16 }) })
                   ]
                 },
                 option2.value
@@ -2315,29 +2457,29 @@ var Select = /* @__PURE__ */ forwardRef28(function Select2(props, ref) {
         ]
       }
     ),
-    helperText3 && /* @__PURE__ */ jsx32("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    helperText3 && /* @__PURE__ */ jsx33("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
 
 // src/components/Skeleton/Skeleton.tsx
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef as forwardRef29 } from "react";
+import { forwardRef as forwardRef30 } from "react";
 
 // src/components/Skeleton/Skeleton.css.ts
-import { createRuntimeFn as _7a46817 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46818 } from "@vanilla-extract/recipes/createRuntimeFn";
 var height = "var(--_1s8datd1)";
 var lines = "_1s8datd6";
-var skeleton = /* @__PURE__ */ _7a46817({ defaultClassName: "_1s8datd2", variantClassNames: { variant: { text: "_1s8datd3", rect: "_1s8datd4", circle: "_1s8datd5" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
+var skeleton = /* @__PURE__ */ _7a46818({ defaultClassName: "_1s8datd2", variantClassNames: { variant: { text: "_1s8datd3", rect: "_1s8datd4", circle: "_1s8datd5" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
 var width = "var(--_1s8datd0)";
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var toCss = (value4) => typeof value4 === "number" ? `${value4}px` : value4;
-var Skeleton = /* @__PURE__ */ forwardRef29(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
+var Skeleton = /* @__PURE__ */ forwardRef30(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
   const w = toCss(width2 ?? (variant === "circle" ? 40 : "100%"));
   const h = toCss(height2 ?? (variant === "circle" ? w : variant === "rect" ? 100 : "1em"));
   if (variant === "text" && lines2 > 1) {
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       "span",
       {
         ref,
@@ -2345,7 +2487,7 @@ var Skeleton = /* @__PURE__ */ forwardRef29(function Skeleton2({ variant = "text
         className: cx(lines, className),
         style: { ...assignInlineVars({ [width]: w }), ...style },
         ...rest,
-        children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ jsx33(
+        children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ jsx34(
           "span",
           {
             className: skeleton({ variant }),
@@ -2356,7 +2498,7 @@ var Skeleton = /* @__PURE__ */ forwardRef29(function Skeleton2({ variant = "text
       }
     );
   }
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "span",
     {
       ref,
@@ -2368,25 +2510,48 @@ var Skeleton = /* @__PURE__ */ forwardRef29(function Skeleton2({ variant = "text
   );
 });
 
+// src/components/SkipLink/SkipLink.tsx
+import { forwardRef as forwardRef31 } 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) {
+  const m = useMessages();
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented || !href.startsWith("#")) return;
+    const target = document.getElementById(decodeURIComponent(href.slice(1)));
+    if (!target) return;
+    event.preventDefault();
+    if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
+    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" });
+});
+
 // src/components/Slider/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import { forwardRef as forwardRef30, useId as useId10, useState as useState9 } from "react";
+import { forwardRef as forwardRef32, useId as useId11, useState as useState10 } from "react";
 
 // src/components/Slider/Slider.css.ts
-import { createRuntimeFn as _7a46818 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46819 } from "@vanilla-extract/recipes/createRuntimeFn";
 var field2 = "_126mzjm0";
 var header8 = "_126mzjm1";
 var helperText2 = "_126mzjm4";
 var label4 = "_126mzjm2";
 var range2 = "_126mzjmb";
-var root8 = /* @__PURE__ */ _7a46818({ defaultClassName: "_126mzjm5", variantClassNames: { size: { sm: "_126mzjm6", md: "_126mzjm7" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var thumb = /* @__PURE__ */ _7a46818({ defaultClassName: "_126mzjmc", variantClassNames: { size: { sm: "_126mzjmd", md: "_126mzjme" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var track2 = /* @__PURE__ */ _7a46818({ defaultClassName: "_126mzjm8", variantClassNames: { size: { sm: "_126mzjm9", md: "_126mzjma" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var root9 = /* @__PURE__ */ _7a46819({ defaultClassName: "_126mzjm5", variantClassNames: { size: { sm: "_126mzjm6", md: "_126mzjm7" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var thumb = /* @__PURE__ */ _7a46819({ defaultClassName: "_126mzjmc", variantClassNames: { size: { sm: "_126mzjmd", md: "_126mzjme" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var track2 = /* @__PURE__ */ _7a46819({ defaultClassName: "_126mzjm8", variantClassNames: { size: { sm: "_126mzjm9", md: "_126mzjma" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var value3 = "_126mzjm3";
 
 // src/components/Slider/Slider.tsx
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
-var Slider = /* @__PURE__ */ forwardRef30(function Slider2(props, ref) {
+import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
   const {
     value: value4,
     defaultValue,
@@ -2407,12 +2572,12 @@ var Slider = /* @__PURE__ */ forwardRef30(function Slider2(props, ref) {
   } = props;
   const m = useMessages();
   const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
-  const generatedId = useId10();
+  const generatedId = useId11();
   const baseId = id ?? generatedId;
   const labelId = `${baseId}-label`;
   const helperId = `${baseId}-helper`;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState9(defaultValue ?? [min]);
+  const [innerValue, setInnerValue] = useState10(defaultValue ?? [min]);
   const current2 = isControlled ? value4 ?? [min] : innerValue;
   const isRange = current2.length > 1;
   const handleChange = (next) => {
@@ -2420,12 +2585,12 @@ var Slider = /* @__PURE__ */ forwardRef30(function Slider2(props, ref) {
     onValueChange?.(next);
   };
   const valueText = current2.map(formatValue).join(" \u2013 ");
-  return /* @__PURE__ */ jsxs27("div", { className: cx(field2, className), children: [
-    (label6 || showValue) && /* @__PURE__ */ jsxs27("div", { className: header8, children: [
-      label6 && /* @__PURE__ */ jsx34("span", { id: labelId, className: label4, children: label6 }),
-      showValue && /* @__PURE__ */ jsx34("span", { className: value3, "aria-hidden": true, children: valueText })
+  return /* @__PURE__ */ jsxs28("div", { className: cx(field2, className), children: [
+    (label6 || showValue) && /* @__PURE__ */ jsxs28("div", { className: header8, children: [
+      label6 && /* @__PURE__ */ jsx36("span", { id: labelId, className: label4, children: label6 }),
+      showValue && /* @__PURE__ */ jsx36("span", { className: value3, "aria-hidden": true, children: valueText })
     ] }),
-    /* @__PURE__ */ jsxs27(
+    /* @__PURE__ */ jsxs28(
       RadixSlider.Root,
       {
         ref,
@@ -2435,13 +2600,13 @@ var Slider = /* @__PURE__ */ forwardRef30(function Slider2(props, ref) {
         disabled,
         value: current2,
         onValueChange: handleChange,
-        className: root8({ size }),
+        className: root9({ size }),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx34(RadixSlider.Track, { className: track2({ size }), children: /* @__PURE__ */ jsx34(RadixSlider.Range, { className: range2 }) }),
+          /* @__PURE__ */ jsx36(RadixSlider.Track, { className: track2({ size }), children: /* @__PURE__ */ jsx36(RadixSlider.Range, { className: range2 }) }),
           current2.map((thumbValue, index) => {
             const thumbLabelId = `${baseId}-thumb-${index}`;
-            return /* @__PURE__ */ jsx34(
+            return /* @__PURE__ */ jsx36(
               RadixSlider.Thumb,
               {
                 className: thumb({ size }),
@@ -2456,45 +2621,45 @@ var Slider = /* @__PURE__ */ forwardRef30(function Slider2(props, ref) {
         ]
       }
     ),
-    isRange && current2.map((_, index) => /* @__PURE__ */ jsxs27("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
+    isRange && current2.map((_, index) => /* @__PURE__ */ jsxs28("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
       label6 ? "" : ariaLabel ? `${ariaLabel} ` : "",
       thumbLabels[index] ?? `${index + 1}`
     ] }, index)),
-    helperText3 && /* @__PURE__ */ jsx34("span", { id: helperId, className: helperText2, children: helperText3 })
+    helperText3 && /* @__PURE__ */ jsx36("span", { id: helperId, className: helperText2, children: helperText3 })
   ] });
 });
 
 // src/components/Stack/Stack.tsx
-import { forwardRef as forwardRef31 } from "react";
+import { forwardRef as forwardRef33 } from "react";
 
 // src/components/Stack/Stack.css.ts
-import { createRuntimeFn as _7a46819 } from "@vanilla-extract/recipes/createRuntimeFn";
-var stack = /* @__PURE__ */ _7a46819({ defaultClassName: "_1jz9hj90", variantClassNames: { direction: { row: "_1jz9hj91", column: "_1jz9hj92", "row-reverse": "_1jz9hj93", "column-reverse": "_1jz9hj94" }, gap: { "0": "_1jz9hj95", "1": "_1jz9hj96", "2": "_1jz9hj97", "3": "_1jz9hj98", "4": "_1jz9hj99", "5": "_1jz9hj9a", "6": "_1jz9hj9b", "8": "_1jz9hj9c", "10": "_1jz9hj9d", "12": "_1jz9hj9e", "16": "_1jz9hj9f" }, align: { start: "_1jz9hj9g", center: "_1jz9hj9h", end: "_1jz9hj9i", stretch: "_1jz9hj9j", baseline: "_1jz9hj9k" }, justify: { start: "_1jz9hj9l", center: "_1jz9hj9m", end: "_1jz9hj9n", between: "_1jz9hj9o", around: "_1jz9hj9p", evenly: "_1jz9hj9q" }, wrap: { true: "_1jz9hj9r" } }, defaultVariants: { direction: "column" }, compoundVariants: [] });
+import { createRuntimeFn as _7a46820 } from "@vanilla-extract/recipes/createRuntimeFn";
+var stack = /* @__PURE__ */ _7a46820({ defaultClassName: "_1jz9hj90", variantClassNames: { direction: { row: "_1jz9hj91", column: "_1jz9hj92", "row-reverse": "_1jz9hj93", "column-reverse": "_1jz9hj94" }, gap: { "0": "_1jz9hj95", "1": "_1jz9hj96", "2": "_1jz9hj97", "3": "_1jz9hj98", "4": "_1jz9hj99", "5": "_1jz9hj9a", "6": "_1jz9hj9b", "8": "_1jz9hj9c", "10": "_1jz9hj9d", "12": "_1jz9hj9e", "16": "_1jz9hj9f" }, align: { start: "_1jz9hj9g", center: "_1jz9hj9h", end: "_1jz9hj9i", stretch: "_1jz9hj9j", baseline: "_1jz9hj9k" }, justify: { start: "_1jz9hj9l", center: "_1jz9hj9m", end: "_1jz9hj9n", between: "_1jz9hj9o", around: "_1jz9hj9p", evenly: "_1jz9hj9q" }, wrap: { true: "_1jz9hj9r" } }, defaultVariants: { direction: "column" }, compoundVariants: [] });
 
 // src/components/Stack/Stack.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
-var Stack = /* @__PURE__ */ forwardRef31(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx35(Component, { ref, className: cx(stack({ direction, gap, align, justify, wrap }), className), ...rest });
+import { jsx as jsx37 } from "react/jsx-runtime";
+var Stack = /* @__PURE__ */ forwardRef33(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx37(Component, { ref, className: cx(stack({ direction, gap, align, justify, wrap }), className), ...rest });
 });
 
 // src/components/Switch/Switch.tsx
 import * as RadixSwitch from "@radix-ui/react-switch";
-import { forwardRef as forwardRef32, useId as useId11 } from "react";
+import { forwardRef as forwardRef34, useId as useId12 } from "react";
 
 // src/components/Switch/Switch.css.ts
-import { createRuntimeFn as _7a46820 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46821 } from "@vanilla-extract/recipes/createRuntimeFn";
 var label5 = "o33ul29";
-var root9 = /* @__PURE__ */ _7a46820({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var thumb2 = /* @__PURE__ */ _7a46820({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-var track3 = /* @__PURE__ */ _7a46820({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var root10 = /* @__PURE__ */ _7a46821({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var thumb2 = /* @__PURE__ */ _7a46821({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var track3 = /* @__PURE__ */ _7a46821({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/Switch/Switch.tsx
-import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
-var Switch = /* @__PURE__ */ forwardRef32(function Switch2({ label: label6, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
-  const generatedId = useId11();
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+var Switch = /* @__PURE__ */ forwardRef34(function Switch2({ label: label6, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
+  const generatedId = useId12();
   const switchId = id ?? generatedId;
-  return /* @__PURE__ */ jsxs28("span", { className: cx(root9({ size }), className), "data-disabled": disabled || void 0, children: [
-    /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs29("span", { className: cx(root10({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsx38(
       RadixSwitch.Root,
       {
         ref,
@@ -2503,27 +2668,27 @@ var Switch = /* @__PURE__ */ forwardRef32(function Switch2({ label: label6, size
         "aria-label": ariaLabel,
         className: track3({ size }),
         ...rest,
-        children: /* @__PURE__ */ jsx36(RadixSwitch.Thumb, { className: thumb2({ size }) })
+        children: /* @__PURE__ */ jsx38(RadixSwitch.Thumb, { className: thumb2({ size }) })
       }
     ),
-    label6 && /* @__PURE__ */ jsx36("label", { htmlFor: switchId, className: label5, children: label6 })
+    label6 && /* @__PURE__ */ jsx38("label", { htmlFor: switchId, className: label5, children: label6 })
   ] });
 });
 
 // src/components/Table/Table.tsx
 import {
   createContext as createContext3,
-  forwardRef as forwardRef33,
+  forwardRef as forwardRef35,
   useContext as useContext3,
-  useId as useId12
+  useId as useId13
 } from "react";
 import { ArrowDownIcon, ArrowUpIcon } from "@bestow-ui/icons";
 
 // src/components/Table/Table.css.ts
-import { createRuntimeFn as _7a46821 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46822 } from "@vanilla-extract/recipes/createRuntimeFn";
 var body4 = "l3ploy5";
 var caption = "l3ploy2";
-var cell2 = /* @__PURE__ */ _7a46821({ defaultClassName: "l3ploy9", variantClassNames: { size: { sm: "l3ploya", md: "l3ployb" }, align: { left: "l3ployc", center: "l3ployd", right: "l3ploye" } }, defaultVariants: { size: "md", align: "left" }, compoundVariants: [] });
+var cell2 = /* @__PURE__ */ _7a46822({ defaultClassName: "l3ploy9", variantClassNames: { size: { sm: "l3ploya", md: "l3ployb" }, align: { left: "l3ployc", center: "l3ployd", right: "l3ploye" } }, defaultVariants: { size: "md", align: "left" }, compoundVariants: [] });
 var container = "l3ploy0";
 var footer4 = "l3ploy7";
 var footerCell = "l3ployg";
@@ -2537,10 +2702,10 @@ var striped = "l3ploy6";
 var table = "l3ploy1";
 
 // src/components/Table/Table.tsx
-import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 var TableSizeContext = /* @__PURE__ */ createContext3("md");
 var TableSectionContext = /* @__PURE__ */ createContext3("body");
-var Table = /* @__PURE__ */ forwardRef33(function Table2({
+var Table = /* @__PURE__ */ forwardRef35(function Table2({
   size = "md",
   striped: striped2,
   stickyHeader: stickyHeader2,
@@ -2552,8 +2717,8 @@ var Table = /* @__PURE__ */ forwardRef33(function Table2({
   children,
   ...rest
 }, ref) {
-  const captionId = useId12();
-  return /* @__PURE__ */ jsx37(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx37(
+  const captionId = useId13();
+  return /* @__PURE__ */ jsx39(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx39(
     "div",
     {
       className: cx(container, containerClassName),
@@ -2562,7 +2727,7 @@ var Table = /* @__PURE__ */ forwardRef33(function Table2({
       role: "region",
       "aria-labelledby": caption2 ? captionId : void 0,
       "aria-label": caption2 ? void 0 : ariaLabel,
-      children: /* @__PURE__ */ jsxs29(
+      children: /* @__PURE__ */ jsxs30(
         "table",
         {
           ref,
@@ -2570,7 +2735,7 @@ var Table = /* @__PURE__ */ forwardRef33(function Table2({
           "aria-label": caption2 ? void 0 : ariaLabel,
           ...rest,
           children: [
-            caption2 && /* @__PURE__ */ jsx37("caption", { id: captionId, className: caption, children: caption2 }),
+            caption2 && /* @__PURE__ */ jsx39("caption", { id: captionId, className: caption, children: caption2 }),
             children
           ]
         }
@@ -2578,31 +2743,31 @@ var Table = /* @__PURE__ */ forwardRef33(function Table2({
     }
   ) });
 });
-var TableHeader = /* @__PURE__ */ forwardRef33(
+var TableHeader = /* @__PURE__ */ forwardRef35(
   function TableHeader2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx37(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ jsx37("thead", { ref, className: cx(header9, className), ...rest }) });
+    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ jsx39("thead", { ref, className: cx(header9, className), ...rest }) });
   }
 );
-var TableBody = /* @__PURE__ */ forwardRef33(
+var TableBody = /* @__PURE__ */ forwardRef35(
   function TableBody2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx37(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx37("tbody", { ref, className: cx(body4, className), ...rest }) });
+    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx39("tbody", { ref, className: cx(body4, className), ...rest }) });
   }
 );
-var TableFooter = /* @__PURE__ */ forwardRef33(
+var TableFooter = /* @__PURE__ */ forwardRef35(
   function TableFooter2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx37(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx37("tfoot", { ref, className: cx(footer4, className), ...rest }) });
+    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx39("tfoot", { ref, className: cx(footer4, className), ...rest }) });
   }
 );
-var TableRow = /* @__PURE__ */ forwardRef33(function TableRow2({ selected, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx37("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...rest });
+var TableRow = /* @__PURE__ */ forwardRef35(function TableRow2({ selected, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx39("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...rest });
 });
-var TableHead = /* @__PURE__ */ forwardRef33(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
+var TableHead = /* @__PURE__ */ forwardRef35(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
   const size = useContext3(TableSizeContext);
   const section = useContext3(TableSectionContext);
   const sortable = onSort !== void 0;
   const direction = sortDirection ?? "none";
   const SortIcon = direction === "descending" ? ArrowDownIcon : ArrowUpIcon;
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39(
     "th",
     {
       ref,
@@ -2614,17 +2779,17 @@ var TableHead = /* @__PURE__ */ forwardRef33(function TableHead2({ align, sortDi
         className
       ),
       ...rest,
-      children: sortable ? /* @__PURE__ */ jsxs29("button", { type: "button", className: sortButton, onClick: onSort, children: [
+      children: sortable ? /* @__PURE__ */ jsxs30("button", { type: "button", className: sortButton, onClick: onSort, children: [
         children,
-        /* @__PURE__ */ jsx37(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
+        /* @__PURE__ */ jsx39(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
       ] }) : children
     }
   );
 });
-var TableCell = /* @__PURE__ */ forwardRef33(function TableCell2({ align, className, ...rest }, ref) {
+var TableCell = /* @__PURE__ */ forwardRef35(function TableCell2({ align, className, ...rest }, ref) {
   const size = useContext3(TableSizeContext);
   const section = useContext3(TableSectionContext);
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39(
     "td",
     {
       ref,
@@ -2636,53 +2801,53 @@ var TableCell = /* @__PURE__ */ forwardRef33(function TableCell2({ align, classN
 
 // src/components/Tabs/Tabs.tsx
 import * as RadixTabs from "@radix-ui/react-tabs";
-import { createContext as createContext4, forwardRef as forwardRef34, useContext as useContext4 } from "react";
+import { createContext as createContext4, forwardRef as forwardRef36, useContext as useContext4 } from "react";
 
 // src/components/Tabs/Tabs.css.ts
-import { createRuntimeFn as _7a46822 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46823 } from "@vanilla-extract/recipes/createRuntimeFn";
 var content10 = "fvhbtda";
-var list4 = /* @__PURE__ */ _7a46822({ defaultClassName: "fvhbtd0", variantClassNames: { variant: { line: "fvhbtd1", soft: "fvhbtd2" } }, defaultVariants: { variant: "line" }, compoundVariants: [] });
-var trigger3 = /* @__PURE__ */ _7a46822({ defaultClassName: "fvhbtd3", variantClassNames: { variant: { line: "fvhbtd4", soft: "fvhbtd5" }, size: { sm: "fvhbtd6", md: "fvhbtd7" } }, defaultVariants: { variant: "line", size: "md" }, compoundVariants: [[{ variant: "soft", size: "sm" }, "fvhbtd8"], [{ variant: "soft", size: "md" }, "fvhbtd9"]] });
+var list4 = /* @__PURE__ */ _7a46823({ defaultClassName: "fvhbtd0", variantClassNames: { variant: { line: "fvhbtd1", soft: "fvhbtd2" } }, defaultVariants: { variant: "line" }, compoundVariants: [] });
+var trigger3 = /* @__PURE__ */ _7a46823({ defaultClassName: "fvhbtd3", variantClassNames: { variant: { line: "fvhbtd4", soft: "fvhbtd5" }, size: { sm: "fvhbtd6", md: "fvhbtd7" } }, defaultVariants: { variant: "line", size: "md" }, compoundVariants: [[{ variant: "soft", size: "sm" }, "fvhbtd8"], [{ variant: "soft", size: "md" }, "fvhbtd9"]] });
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var TabsStyleContext = /* @__PURE__ */ createContext4({ variant: "line", size: "md" });
-var Tabs = /* @__PURE__ */ forwardRef34(function Tabs2({ variant = "line", size = "md", ...props }, ref) {
+var Tabs = /* @__PURE__ */ forwardRef36(function Tabs2({ variant = "line", size = "md", ...props }, ref) {
   const controlled = "value" in props ? { value: props.value ?? "" } : {};
-  return /* @__PURE__ */ jsx38(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx38(RadixTabs.Root, { ref, ...props, ...controlled }) });
+  return /* @__PURE__ */ jsx40(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx40(RadixTabs.Root, { ref, ...props, ...controlled }) });
 });
-var TabsList = /* @__PURE__ */ forwardRef34(function TabsList2({ className, ...rest }, ref) {
+var TabsList = /* @__PURE__ */ forwardRef36(function TabsList2({ className, ...rest }, ref) {
   const { variant } = useContext4(TabsStyleContext);
-  return /* @__PURE__ */ jsx38(RadixTabs.List, { ref, className: cx(list4({ variant }), className), ...rest });
+  return /* @__PURE__ */ jsx40(RadixTabs.List, { ref, className: cx(list4({ variant }), className), ...rest });
 });
-var TabsTrigger = /* @__PURE__ */ forwardRef34(function TabsTrigger2({ className, ...rest }, ref) {
+var TabsTrigger = /* @__PURE__ */ forwardRef36(function TabsTrigger2({ className, ...rest }, ref) {
   const { variant, size } = useContext4(TabsStyleContext);
-  return /* @__PURE__ */ jsx38(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
+  return /* @__PURE__ */ jsx40(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
 });
-var TabsContent = /* @__PURE__ */ forwardRef34(function TabsContent2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx38(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
+var TabsContent = /* @__PURE__ */ forwardRef36(function TabsContent2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx40(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
 });
 
 // src/components/Textarea/Textarea.tsx
 import {
-  forwardRef as forwardRef35,
+  forwardRef as forwardRef37,
   useCallback,
-  useId as useId13,
-  useRef as useRef11,
-  useState as useState10
+  useId as useId14,
+  useRef as useRef12,
+  useState as useState11
 } from "react";
 
 // src/components/Textarea/Textarea.css.ts
-import { createRuntimeFn as _7a46823 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46824 } from "@vanilla-extract/recipes/createRuntimeFn";
 var count = "_1koawa9";
 var countOver = "_1koawaa";
 var defaultWidth = "_1koawa7";
 var footer5 = "_1koawa8";
-var textarea = /* @__PURE__ */ _7a46823({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
+var textarea = /* @__PURE__ */ _7a46824({ 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 jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
-var Textarea = /* @__PURE__ */ forwardRef35(function Textarea2({
+import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
   label: label6,
   helperText: helperText3,
   error,
@@ -2703,11 +2868,11 @@ var Textarea = /* @__PURE__ */ forwardRef35(function Textarea2({
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = useId13();
+  const generatedId = useId14();
   const textareaId = id ?? generatedId;
   const helperId = helperText3 ? `${textareaId}-helper` : void 0;
-  const innerRef = useRef11(null);
-  const [uncontrolledLength, setUncontrolledLength] = useState10(() => String(defaultValue ?? "").length);
+  const innerRef = useRef12(null);
+  const [uncontrolledLength, setUncontrolledLength] = useState11(() => String(defaultValue ?? "").length);
   const length = value4 !== void 0 ? String(value4).length : uncontrolledLength;
   const fitHeight = useCallback(() => {
     const el = innerRef.current;
@@ -2722,12 +2887,12 @@ var Textarea = /* @__PURE__ */ forwardRef35(function Textarea2({
     fitHeight();
     onChange?.(event);
   };
-  return /* @__PURE__ */ jsxs30("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs30("label", { htmlFor: textareaId, className: label, children: [
+  return /* @__PURE__ */ jsxs31("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs31("label", { htmlFor: textareaId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx39("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx41("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx41(
       "textarea",
       {
         ref: mergeRefs(innerRef, ref),
@@ -2749,36 +2914,36 @@ var Textarea = /* @__PURE__ */ forwardRef35(function Textarea2({
         ...rest
       }
     ),
-    (helperText3 || showCount) && /* @__PURE__ */ jsxs30("div", { className: footer5, children: [
-      helperText3 && /* @__PURE__ */ jsx39("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
-      showCount && /* @__PURE__ */ jsx39("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
+    (helperText3 || showCount) && /* @__PURE__ */ jsxs31("div", { className: footer5, children: [
+      helperText3 && /* @__PURE__ */ jsx41("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
+      showCount && /* @__PURE__ */ jsx41("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
     ] })
   ] });
 });
 
 // src/components/Toast/Toast.tsx
 import * as RadixToast from "@radix-ui/react-toast";
-import { createContext as createContext5, useCallback as useCallback2, useContext as useContext5, useMemo as useMemo4, useRef as useRef12, useState as useState11 } from "react";
-import { XIcon as XIcon5 } from "@bestow-ui/icons";
+import { createContext as createContext5, useCallback as useCallback2, useContext as useContext5, useMemo as useMemo4, useRef as useRef13, useState as useState12 } from "react";
+import { XIcon as XIcon6 } from "@bestow-ui/icons";
 
 // src/components/Toast/Toast.css.ts
-import { createRuntimeFn as _7a46824 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a46825 } from "@vanilla-extract/recipes/createRuntimeFn";
 var action2 = "_1g11zvx9";
 var close = "_1g11zvxa";
 var description5 = "_1g11zvx8";
 var title5 = "_1g11zvx7";
-var toast = /* @__PURE__ */ _7a46824({ defaultClassName: "_1g11zvx1", variantClassNames: { color: { primary: "_1g11zvx2", neutral: "_1g11zvx3", success: "_1g11zvx4", warning: "_1g11zvx5", danger: "_1g11zvx6" } }, defaultVariants: { color: "neutral" }, compoundVariants: [] });
+var toast = /* @__PURE__ */ _7a46825({ defaultClassName: "_1g11zvx1", variantClassNames: { color: { primary: "_1g11zvx2", neutral: "_1g11zvx3", success: "_1g11zvx4", warning: "_1g11zvx5", danger: "_1g11zvx6" } }, defaultVariants: { color: "neutral" }, compoundVariants: [] });
 var viewport2 = "_1g11zvx0";
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs32 } 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] = useState11([]);
-  const nextId = useRef12(0);
+  const [toasts, setToasts] = useState12([]);
+  const nextId = useRef13(0);
   const portal2 = usePortalProps();
   const toast2 = useCallback2((options) => {
     const id = nextId.current++;
@@ -2791,9 +2956,9 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
     setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
   }, []);
   const value4 = useMemo4(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
-  return /* @__PURE__ */ jsx40(ToastContext.Provider, { value: value4, children: /* @__PURE__ */ jsxs31(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
+  return /* @__PURE__ */ jsx42(ToastContext.Provider, { value: value4, children: /* @__PURE__ */ jsxs32(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
     children,
-    toasts.map(({ id, open, title: title6, description: description6, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ jsxs31(
+    toasts.map(({ id, open, title: title6, description: description6, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ jsxs32(
       RadixToast.Root,
       {
         open,
@@ -2803,15 +2968,15 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
         },
         className: toast({ color }),
         children: [
-          /* @__PURE__ */ jsx40(RadixToast.Title, { className: title5, children: title6 }),
-          description6 && /* @__PURE__ */ jsx40(RadixToast.Description, { className: description5, children: description6 }),
-          action3 && /* @__PURE__ */ jsx40(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ jsx40(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
-          /* @__PURE__ */ jsx40(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx40(XIcon5, { size: 16 }) })
+          /* @__PURE__ */ jsx42(RadixToast.Title, { className: title5, children: title6 }),
+          description6 && /* @__PURE__ */ jsx42(RadixToast.Description, { className: description5, children: description6 }),
+          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(XIcon6, { size: 16 }) })
         ]
       },
       id
     )),
-    /* @__PURE__ */ jsx40(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
+    /* @__PURE__ */ jsx42(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
   ] }) });
 }
 function useToast() {
@@ -2828,7 +2993,7 @@ var arrow2 = "z7rufs1";
 var content11 = "z7rufs0";
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 function Tooltip({
   content: content12,
   children,
@@ -2843,9 +3008,9 @@ function Tooltip({
 }) {
   const portal2 = usePortalProps();
   if (disabled || content12 == null || content12 === "") return children;
-  return /* @__PURE__ */ jsx41(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs32(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx41(RadixTooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx41(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsx43(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs33(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx43(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx43(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs33(
       RadixTooltip.Content,
       {
         side,
@@ -2856,7 +3021,7 @@ function Tooltip({
         style: portal2.style,
         children: [
           content12,
-          /* @__PURE__ */ jsx41(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
+          /* @__PURE__ */ jsx43(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
         ]
       }
     ) })
@@ -2864,14 +3029,14 @@ function Tooltip({
 }
 
 // src/components/Typography/Typography.tsx
-import { forwardRef as forwardRef36 } from "react";
+import { forwardRef as forwardRef38 } from "react";
 
 // src/components/Typography/Typography.css.ts
-import { createRuntimeFn as _7a46825 } from "@vanilla-extract/recipes/createRuntimeFn";
-var typography = /* @__PURE__ */ _7a46825({ defaultClassName: "kiolio0", variantClassNames: { variant: { display: "kiolio1", h1: "kiolio2", h2: "kiolio3", h3: "kiolio4", h4: "kiolio5", "body-lg": "kiolio6", body: "kiolio7", "body-sm": "kiolio8", caption: "kiolio9" }, color: { "default": "kiolioa", muted: "kioliob", subtle: "kiolioc", primary: "kioliod", danger: "kiolioe", success: "kioliof", warning: "kioliog", inherit: "kiolioh" }, weight: { regular: "kiolioi", medium: "kiolioj", semibold: "kioliok", bold: "kioliol" }, align: { start: "kioliom", center: "kiolion", end: "kiolioo" }, truncate: { true: "kioliop" } }, defaultVariants: { variant: "body", color: "default" }, compoundVariants: [] });
+import { createRuntimeFn as _7a46826 } from "@vanilla-extract/recipes/createRuntimeFn";
+var typography = /* @__PURE__ */ _7a46826({ defaultClassName: "kiolio0", variantClassNames: { variant: { display: "kiolio1", h1: "kiolio2", h2: "kiolio3", h3: "kiolio4", h4: "kiolio5", "body-lg": "kiolio6", body: "kiolio7", "body-sm": "kiolio8", caption: "kiolio9" }, color: { "default": "kiolioa", muted: "kioliob", subtle: "kiolioc", primary: "kioliod", danger: "kiolioe", success: "kioliof", warning: "kioliog", inherit: "kiolioh" }, weight: { regular: "kiolioi", medium: "kiolioj", semibold: "kioliok", bold: "kioliol" }, align: { start: "kioliom", center: "kiolion", end: "kiolioo" }, truncate: { true: "kioliop" } }, defaultVariants: { variant: "body", color: "default" }, compoundVariants: [] });
 
 // src/components/Typography/Typography.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var defaultElement = {
   display: "h1",
   h1: "h1",
@@ -2883,9 +3048,9 @@ var defaultElement = {
   "body-sm": "p",
   caption: "span"
 };
-var Typography = /* @__PURE__ */ forwardRef36(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
+var Typography = /* @__PURE__ */ forwardRef38(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
   const Component = as ?? defaultElement[variant];
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     Component,
     {
       ref,
@@ -2896,7 +3061,7 @@ var Typography = /* @__PURE__ */ forwardRef36(function Typography2({ variant = "
 });
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-import { forwardRef as forwardRef37, useEffect as useEffect7, useId as useId14, useRef as useRef13, useState as useState12 } from "react";
+import { forwardRef as forwardRef39, useEffect as useEffect7, useId as useId15, useRef as useRef14, useState as useState13 } from "react";
 
 // src/components/VerificationCodeInput/VerificationCodeInput.css.ts
 var input4 = "ea01812";
@@ -2906,9 +3071,9 @@ var slots = "ea01811";
 var timer = "ea01814";
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
 var formatTime = (seconds) => `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
-var VerificationCodeInput = /* @__PURE__ */ forwardRef37(
+var VerificationCodeInput = /* @__PURE__ */ forwardRef39(
   function VerificationCodeInput2(props, ref) {
     const {
       length = 6,
@@ -2935,19 +3100,19 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef37(
     const label6 = labelProp ?? m.verificationCode ?? "\uC778\uC99D\uBC88\uD638";
     const resendText = resendTextProp ?? m.resend ?? "\uC7AC\uC804\uC1A1";
     const expiredText = expiredTextProp ?? m.verificationExpired ?? "\uC778\uC99D \uC2DC\uAC04\uC774 \uC9C0\uB0AC\uC5B4\uC694. \uC7AC\uC804\uC1A1\uD574 \uC8FC\uC138\uC694.";
-    const generatedId = useId14();
+    const generatedId = useId15();
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
     const statusId = `${inputId}-status`;
-    const inputRef = useRef13(null);
+    const inputRef = useRef14(null);
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = useState12(defaultValue ?? "");
+    const [innerValue, setInnerValue] = useState13(defaultValue ?? "");
     const code = (isControlled ? value4 ?? "" : innerValue).slice(0, length);
-    const [focused, setFocused] = useState12(false);
-    const [endAt, setEndAt] = useState12(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
-    const [remaining, setRemaining] = useState12(expiresIn ?? 0);
+    const [focused, setFocused] = useState13(false);
+    const [endAt, setEndAt] = useState13(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
+    const [remaining, setRemaining] = useState13(expiresIn ?? 0);
     const expired = expiresIn !== void 0 && remaining <= 0;
-    const onExpireRef = useRef13(onExpire);
+    const onExpireRef = useRef14(onExpire);
     useEffect7(() => {
       onExpireRef.current = onExpire;
     });
@@ -2986,17 +3151,17 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef37(
     };
     const description6 = 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__ */ jsxs33(
+    return /* @__PURE__ */ jsxs34(
       "div",
       {
         className: cx(field, className),
         "data-invalid": error || void 0,
         "data-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ jsx43("label", { htmlFor: inputId, className: label, children: label6 }),
-          /* @__PURE__ */ jsxs33("div", { className: row4, children: [
-            /* @__PURE__ */ jsxs33("div", { className: slots, children: [
-              /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx45("label", { htmlFor: inputId, className: label, children: label6 }),
+          /* @__PURE__ */ jsxs34("div", { className: row4, children: [
+            /* @__PURE__ */ jsxs34("div", { className: slots, children: [
+              /* @__PURE__ */ jsx45(
                 "input",
                 {
                   ref: mergeRefs(ref, inputRef),
@@ -3016,7 +3181,7 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef37(
                   className: input4
                 }
               ),
-              Array.from({ length }, (_, index) => /* @__PURE__ */ jsx43(
+              Array.from({ length }, (_, index) => /* @__PURE__ */ jsx45(
                 "div",
                 {
                   className: slot,
@@ -3027,12 +3192,12 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef37(
                 index
               ))
             ] }),
-            expiresIn !== void 0 && /* @__PURE__ */ jsx43("span", { role: "timer", className: timer, children: formatTime(remaining) }),
-            onResend && /* @__PURE__ */ jsx43(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
+            expiresIn !== void 0 && /* @__PURE__ */ jsx45("span", { role: "timer", className: timer, children: formatTime(remaining) }),
+            onResend && /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
           ] }),
-          /* @__PURE__ */ jsx43("p", { id: helperId, className: helperText({ error }), children: description6 }),
-          /* @__PURE__ */ jsx43("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
-          name && /* @__PURE__ */ jsx43("input", { type: "hidden", name, value: code })
+          /* @__PURE__ */ jsx45("p", { id: helperId, className: helperText({ error }), children: description6 }),
+          /* @__PURE__ */ jsx45("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
+          name && /* @__PURE__ */ jsx45("input", { type: "hidden", name, value: code })
         ]
       }
     );
@@ -3080,8 +3245,10 @@ export {
   PopoverClose,
   Progress,
   RadioGroup,
+  SegmentedControl,
   Select,
   Skeleton,
+  SkipLink,
   Slider,
   Spinner,
   Stack,