@bestow-ui/react 0.12.0 → 1.1.0

package/dist/client.js

@@ -0,0 +1,3279 @@
+"use client";
+import {
+  KOREAN_WEEKDAYS,
+  addDays,
+  addMonths,
+  compareDays,
+  formatBusinessNumber,
+  formatKoreanAmount,
+  formatPhoneNumber,
+  getCalendarWeeks,
+  isSameDay,
+  isSameMonth,
+  isValidBusinessNumber,
+  kakaoPostcodeProvider,
+  mergeThemes,
+  parseISODate,
+  phoneNumberMaxDigits,
+  themeClass,
+  themeToStyle,
+  toISODate
+} from "./chunk-PFEZ3D2H.js";
+
+// src/theme/ThemeProvider.tsx
+import { createContext, forwardRef, useContext, useMemo } from "react";
+
+// src/utils/cx.ts
+function cx(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+// src/theme/ThemeProvider.css.ts
+var portal = "sfyhlv0";
+var root = "sfyhlv1 sfyhlv0";
+
+// src/theme/ThemeProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = /* @__PURE__ */ createContext({ theme: "light" });
+var ThemeProvider = /* @__PURE__ */ forwardRef(function ThemeProvider2({ theme: themeProp, overrides, className, style, children, ...rest }, ref) {
+  const parent = useContext(ThemeContext);
+  const theme = themeProp ?? parent.theme;
+  const merged = useMemo(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
+  const value4 = useMemo(
+    () => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
+    [theme, merged]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: value4, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-theme": theme,
+      className: cx(themeClass[theme], root, className),
+      style: value4.style ? { ...value4.style, ...style } : style,
+      ...rest,
+      children
+    }
+  ) });
+});
+function useTheme() {
+  return useContext(ThemeContext).theme;
+}
+function usePortalProps() {
+  const { theme, style } = useContext(ThemeContext);
+  return { className: cx(themeClass[theme], portal), style };
+}
+
+// src/i18n/LocaleProvider.tsx
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MessagesContext = /* @__PURE__ */ createContext2({});
+function LocaleProvider({ messages, children }) {
+  const parent = useContext2(MessagesContext);
+  const value4 = useMemo2(() => ({ ...parent, ...messages }), [parent, messages]);
+  return /* @__PURE__ */ jsx2(MessagesContext.Provider, { value: value4, children });
+}
+function useMessages() {
+  return useContext2(MessagesContext);
+}
+
+// src/components/Accordion/Accordion.tsx
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@bestow-ui/icons";
+import { forwardRef as forwardRef2 } from "react";
+
+// src/components/Accordion/Accordion.css.ts
+var chevron = "v58j0l4";
+var content = "v58j0l5";
+var contentInner = "v58j0l6";
+var header = "v58j0l2";
+var item = "v58j0l1";
+var root2 = "v58j0l0";
+var trigger = "v58j0l3";
+
+// src/components/Accordion/Accordion.tsx
+import { jsx as jsx3, jsxs } 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 });
+});
+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: [
+      title6,
+      /* @__PURE__ */ jsx3(ChevronDownIcon, { size: 18, className: chevron })
+    ] }) }) }),
+    /* @__PURE__ */ jsx3(RadixAccordion.Content, { className: content, children: /* @__PURE__ */ jsx3("div", { className: contentInner, children }) })
+  ] });
+});
+
+// src/components/AddressInput/AddressInput.tsx
+import { forwardRef as forwardRef7, useEffect, useId as useId2, useRef as useRef2, useState } from "react";
+
+// src/components/Button/Button.tsx
+import { forwardRef as forwardRef4 } from "react";
+
+// src/components/Spinner/Spinner.tsx
+import { LoaderIcon } from "@bestow-ui/icons";
+import { forwardRef as forwardRef3 } from "react";
+
+// src/styles/visuallyHidden.css.ts
+var visuallyHidden = "_1kdtbw10";
+
+// src/components/Spinner/Spinner.css.ts
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+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";
+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: [
+    /* @__PURE__ */ jsx4(LoaderIcon, { size: "100%" }),
+    label6 && /* @__PURE__ */ jsx4("span", { className: visuallyHidden, children: label6 })
+  ] });
+});
+
+// src/components/Button/Button.css.ts
+import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
+var button = /* @__PURE__ */ _7a4682({ defaultClassName: "xcekda6", variantClassNames: { variant: { solid: "xcekda7", soft: "xcekda8", outline: "xcekda9", ghost: "xcekdaa" }, color: { primary: "xcekdab", neutral: "xcekdac", danger: "xcekdad" }, size: { sm: "xcekdae", md: "xcekdaf", lg: "xcekdag" }, fullWidth: { true: "xcekdah" } }, defaultVariants: { variant: "solid", color: "primary", size: "md" }, compoundVariants: [] });
+var icon = "xcekdai";
+
+// src/components/Button/Button.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Button = /* @__PURE__ */ forwardRef4(function Button2({
+  variant,
+  color,
+  size,
+  fullWidth,
+  startIcon,
+  endIcon,
+  loading,
+  className,
+  type = "button",
+  onClick,
+  children,
+  ...rest
+}, ref) {
+  const handleClick = (event) => {
+    if (loading) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+  };
+  const leading = loading ? /* @__PURE__ */ jsx5(Spinner, { size: "sm", label: "" }) : startIcon;
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      ref,
+      type,
+      className: cx(button({ variant, color, size, fullWidth }), className),
+      "aria-busy": loading || void 0,
+      "aria-disabled": loading || void 0,
+      onClick: handleClick,
+      ...rest,
+      children: [
+        leading && /* @__PURE__ */ jsx5("span", { className: icon, children: leading }),
+        children,
+        endIcon && /* @__PURE__ */ jsx5("span", { className: icon, children: endIcon })
+      ]
+    }
+  );
+});
+
+// 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";
+var Input = /* @__PURE__ */ forwardRef5(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cx(root3({ size, fullWidth }), rootClassName),
+      "data-invalid": invalid || void 0,
+      "data-disabled": disabled || void 0,
+      children: [
+        startAdornment && /* @__PURE__ */ jsx6("span", { className: adornment, children: startAdornment }),
+        /* @__PURE__ */ jsx6(
+          "input",
+          {
+            ref,
+            className: cx(input, className),
+            disabled,
+            "aria-invalid": invalid || void 0,
+            ...rest
+          }
+        ),
+        endAdornment && /* @__PURE__ */ jsx6("span", { className: adornment, children: endAdornment })
+      ]
+    }
+  );
+});
+
+// src/components/Input/TextField.tsx
+import { forwardRef as forwardRef6, useId } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } 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 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: [
+      label6,
+      required && /* @__PURE__ */ jsx7("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx7(
+      Input,
+      {
+        ref,
+        id: inputId,
+        invalid: error,
+        required,
+        fullWidth,
+        "aria-describedby": cx(helperId, ariaDescribedBy) || void 0,
+        ...rest
+      }
+    ),
+    helperText3 && /* @__PURE__ */ jsx7("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+  ] });
+});
+
+// src/components/Modal/Modal.tsx
+import * as Dialog from "@radix-ui/react-dialog";
+import { XIcon } from "@bestow-ui/icons";
+
+// src/utils/useReturnFocus.ts
+import { useRef } from "react";
+function useReturnFocus(hasTrigger, onCloseAutoFocus) {
+  const returnTo = useRef(null);
+  return {
+    onOpenAutoFocus: () => {
+      returnTo.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    },
+    onCloseAutoFocus: (event) => {
+      onCloseAutoFocus?.(event);
+      if (event.defaultPrevented || hasTrigger) return;
+      const target = returnTo.current;
+      if (target && target.isConnected && target !== document.body) {
+        event.preventDefault();
+        target.focus();
+      }
+    }
+  };
+}
+
+// src/components/Modal/Modal.css.ts
+import { createRuntimeFn as _7a4684 } 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 description = "_1pdsmv08";
+var footer = "_1pdsmv0b";
+var header2 = "_1pdsmv05";
+var headings = "_1pdsmv06";
+var overlay = "_1pdsmv00";
+var title = "_1pdsmv07";
+
+// src/components/Modal/Modal.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function Modal({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger: trigger4,
+  title: title6,
+  description: description6,
+  children,
+  footer: footer6,
+  size,
+  hideCloseButton = false,
+  closeOnOverlayClick = true,
+  className,
+  onCloseAutoFocus
+}) {
+  const portal2 = usePortalProps();
+  const m = useMessages();
+  const focus = useReturnFocus(Boolean(trigger4), onCloseAutoFocus);
+  return /* @__PURE__ */ jsxs6(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger4 && /* @__PURE__ */ jsx8(Dialog.Trigger, { asChild: true, children: trigger4 }),
+    /* @__PURE__ */ jsxs6(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx8(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
+      /* @__PURE__ */ jsxs6(
+        Dialog.Content,
+        {
+          className: cx(portal2.className, content2({ size }), className),
+          style: portal2.style,
+          onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
+          onOpenAutoFocus: focus.onOpenAutoFocus,
+          onCloseAutoFocus: focus.onCloseAutoFocus,
+          ...description6 ? {} : { "aria-describedby": void 0 },
+          children: [
+            /* @__PURE__ */ jsxs6("div", { className: header2, children: [
+              /* @__PURE__ */ jsxs6("div", { className: headings, children: [
+                /* @__PURE__ */ jsx8(Dialog.Title, { className: title, children: title6 }),
+                description6 && /* @__PURE__ */ jsx8(Dialog.Description, { className: description, children: description6 })
+              ] }),
+              !hideCloseButton && /* @__PURE__ */ jsx8(Dialog.Close, { className: closeButton, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx8(XIcon, { size: 16 }) })
+            ] }),
+            children && /* @__PURE__ */ jsx8("div", { className: body, children }),
+            footer6 && /* @__PURE__ */ jsx8("div", { className: footer, children: footer6 })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var ModalClose = Dialog.Close;
+
+// src/components/AddressInput/AddressInput.css.ts
+var fieldset = "_16fi7uy0";
+var legend = "_16fi7uy1";
+var row = "_16fi7uy2";
+var searchArea = "_16fi7uy4";
+var searchStatus = "_16fi7uy5";
+var zonecode = "_16fi7uy3";
+
+// src/components/AddressInput/AddressInput.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var EMPTY = { zonecode: "", address: "", extraAddress: "", detail: "" };
+function SearchArea({
+  provider,
+  onSelect,
+  loadErrorText,
+  loadingText
+}) {
+  const containerRef = useRef2(null);
+  const [status, setStatus] = useState("loading");
+  const onSelectRef = useRef2(onSelect);
+  useEffect(() => {
+    onSelectRef.current = onSelect;
+  });
+  useEffect(() => {
+    const container2 = containerRef.current;
+    if (!container2) return;
+    let cleanup;
+    let cancelled = false;
+    Promise.resolve().then(() => provider(container2, (result) => onSelectRef.current(result))).then((fn) => {
+      if (cancelled) fn?.();
+      else {
+        cleanup = fn;
+        setStatus("ready");
+      }
+    }).catch(() => !cancelled && setStatus("error"));
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, [provider]);
+  return /* @__PURE__ */ jsxs7("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 })
+  ] });
+}
+var AddressInput = /* @__PURE__ */ forwardRef7(
+  function AddressInput2(props, ref) {
+    const {
+      value: value4,
+      defaultValue,
+      onValueChange,
+      label: labelProp,
+      required,
+      helperText: helperText3,
+      error,
+      disabled,
+      provider = kakaoPostcodeProvider,
+      searchLabel: searchLabelProp,
+      detailPlaceholder: detailPlaceholderProp,
+      loadErrorText: loadErrorTextProp,
+      name,
+      className
+    } = props;
+    const m = useMessages();
+    const label6 = labelProp ?? m.address ?? "\uC8FC\uC18C";
+    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 helperId = helperText3 ? `${baseId}-helper` : void 0;
+    const detailRef = useRef2(null);
+    const selectedRef = useRef2(false);
+    const [open, setOpen] = useState(false);
+    const isControlled = "value" in props;
+    const [innerValue, setInnerValue] = useState(defaultValue ?? EMPTY);
+    const current2 = isControlled ? value4 ?? EMPTY : innerValue;
+    const update = (next) => {
+      if (!isControlled) setInnerValue(next);
+      onValueChange?.(next);
+    };
+    const openSearch = () => {
+      if (disabled) return;
+      selectedRef.current = false;
+      setOpen(true);
+    };
+    const handleSelect = (result) => {
+      selectedRef.current = true;
+      update({
+        ...current2,
+        zonecode: result.zonecode,
+        address: result.address,
+        extraAddress: result.extraAddress ?? ""
+      });
+      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: [
+        label6,
+        required && /* @__PURE__ */ jsx9("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: row, children: [
+        /* @__PURE__ */ jsx9(
+          TextField,
+          {
+            "aria-label": m.postalCode ?? "\uC6B0\uD3B8\uBC88\uD638",
+            readOnly: true,
+            value: current2.zonecode,
+            placeholder: m.postalCode ?? "\uC6B0\uD3B8\uBC88\uD638",
+            error: error && !current2.zonecode,
+            "aria-required": required || void 0,
+            rootClassName: zonecode,
+            onClick: openSearch
+          }
+        ),
+        /* @__PURE__ */ jsx9(Button, { variant: "outline", color: "neutral", onClick: openSearch, disabled, children: searchLabel })
+      ] }),
+      /* @__PURE__ */ jsx9(
+        TextField,
+        {
+          "aria-label": m.baseAddress ?? "\uAE30\uBCF8 \uC8FC\uC18C",
+          readOnly: true,
+          value: fullAddress,
+          placeholder: m.baseAddressPlaceholder ?? `${searchLabel}\uC744 \uB20C\uB7EC \uC8FC\uC18C\uB97C \uACE0\uB974\uC138\uC694`,
+          error: error && !current2.address,
+          "aria-required": required || void 0,
+          fullWidth: true,
+          onClick: openSearch
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        TextField,
+        {
+          ref: detailRef,
+          "aria-label": m.detailAddress ?? "\uC0C1\uC138 \uC8FC\uC18C",
+          value: current2.detail,
+          placeholder: detailPlaceholder,
+          onChange: (event) => update({ ...current2, detail: event.target.value }),
+          autoComplete: "address-line2",
+          fullWidth: true
+        }
+      ),
+      helperText3 && /* @__PURE__ */ jsx9("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
+      name && /* @__PURE__ */ jsxs7(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 })
+      ] }),
+      /* @__PURE__ */ jsx9(
+        Modal,
+        {
+          open,
+          onOpenChange: setOpen,
+          title: searchLabel,
+          description: m.addressSearchDescription ?? "\uB3C4\uB85C\uBA85, \uAC74\uBB3C\uBA85, \uC9C0\uBC88\uC73C\uB85C \uAC80\uC0C9\uD560 \uC218 \uC788\uC5B4\uC694.",
+          onCloseAutoFocus: (event) => {
+            if (selectedRef.current) {
+              event.preventDefault();
+              detailRef.current?.focus();
+            }
+          },
+          children: /* @__PURE__ */ jsx9(
+            SearchArea,
+            {
+              provider,
+              onSelect: handleSelect,
+              loadErrorText,
+              loadingText: m.addressLoading ?? "\uC8FC\uC18C \uAC80\uC0C9\uC744 \uBD88\uB7EC\uC624\uB294 \uC911"
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+
+// src/components/AgreementGroup/AgreementGroup.tsx
+import { forwardRef as forwardRef9, useId as useId3, useState as useState2 } from "react";
+import { ChevronDownIcon as ChevronDownIcon2 } from "@bestow-ui/icons";
+
+// src/components/Checkbox/Checkbox.tsx
+import { forwardRef as forwardRef8, useEffect as useEffect2, useRef as useRef3 } from "react";
+
+// src/utils/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (value4) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value4);
+      else if (ref) ref.current = value4;
+    }
+  };
+}
+
+// src/components/Checkbox/Checkbox.css.ts
+import { createRuntimeFn as _7a4685 } 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 indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
+var input2 = "_1y7mzsn6";
+var root4 = /* @__PURE__ */ _7a4685({ 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";
+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: [
+      /* @__PURE__ */ jsx10(
+        "input",
+        {
+          ref: mergeRefs(innerRef, ref),
+          type: "checkbox",
+          className: input2,
+          disabled,
+          "aria-invalid": invalid || void 0,
+          onChange: (event) => {
+            onChange?.(event);
+            onCheckedChange?.(event.target.checked);
+          },
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsx10("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx10(
+        "path",
+        {
+          d: "M5 10.5l3.2 3L15 7",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) }),
+      /* @__PURE__ */ jsx10("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx10("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+    ] }),
+    label6
+  ] });
+});
+
+// src/components/AgreementGroup/AgreementGroup.css.ts
+var all = "j3uxdc3";
+var box = "j3uxdc2";
+var chevron2 = "j3uxdc9";
+var content3 = "j3uxdca";
+var fieldset2 = "j3uxdc0";
+var item2 = "j3uxdc5";
+var legend2 = "j3uxdc1";
+var list = "j3uxdc4";
+var row2 = "j3uxdc6";
+var tag = "j3uxdc7";
+var toggle = "j3uxdc8";
+
+// src/components/AgreementGroup/AgreementGroup.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var AgreementGroup = /* @__PURE__ */ forwardRef9(
+  function AgreementGroup2(props, ref) {
+    const {
+      items: items2,
+      value: value4,
+      defaultValue,
+      onValueChange,
+      label: label6,
+      allLabel: allLabelProp,
+      helperText: helperText3,
+      error,
+      disabled,
+      requiredText: requiredTextProp,
+      optionalText: optionalTextProp,
+      showText: showTextProp,
+      hideText: hideTextProp,
+      name,
+      className
+    } = props;
+    const m = useMessages();
+    const allLabel = allLabelProp ?? m.agreeAll ?? "\uC804\uCCB4 \uB3D9\uC758";
+    const requiredText = requiredTextProp ?? m.required ?? "\uD544\uC218";
+    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 helperId = helperText3 ? `${baseId}-helper` : void 0;
+    const isControlled = "value" in props;
+    const [innerValue, setInnerValue] = useState2(defaultValue ?? []);
+    const agreed = isControlled ? value4 ?? [] : innerValue;
+    const [expanded, setExpanded] = useState2([]);
+    const update = (next) => {
+      if (!isControlled) setInnerValue(next);
+      onValueChange?.(next);
+    };
+    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));
+    return /* @__PURE__ */ jsxs9(
+      "fieldset",
+      {
+        ref,
+        className: cx(fieldset2, className),
+        disabled,
+        "aria-describedby": helperId,
+        "data-invalid": error || void 0,
+        children: [
+          label6 && /* @__PURE__ */ jsx11("legend", { className: legend2, children: label6 }),
+          /* @__PURE__ */ jsxs9("div", { className: box, children: [
+            /* @__PURE__ */ jsx11("div", { className: all, children: /* @__PURE__ */ jsx11(
+              Checkbox,
+              {
+                label: allLabel,
+                checked: allChecked,
+                indeterminate: agreedCount > 0 && !allChecked,
+                onChange: (event) => update(event.target.checked ? allValues : [])
+              }
+            ) }),
+            /* @__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(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": item8.required || void 0, children: item8.required ? requiredText : optionalText }),
+                        " ",
+                        item8.label
+                      ] })
+                    }
+                  ),
+                  item8.content && /* @__PURE__ */ jsxs9(
+                    "button",
+                    {
+                      type: "button",
+                      className: toggle,
+                      "aria-expanded": isOpen,
+                      "aria-controls": contentId,
+                      "aria-labelledby": `${labelId} ${toggleTextId}`,
+                      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 })
+                      ]
+                    }
+                  )
+                ] }),
+                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: item8.content })
+              ] }, item8.value);
+            }) })
+          ] }),
+          name && agreed.map((v) => /* @__PURE__ */ jsx11("input", { type: "hidden", name, value: v }, v)),
+          helperText3 && /* @__PURE__ */ jsx11("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/Alert/Alert.tsx
+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";
+
+// src/components/Alert/Alert.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var defaultIcons = {
+  primary: InfoIcon,
+  neutral: InfoIcon,
+  success: CircleCheckIcon,
+  warning: TriangleAlertIcon,
+  danger: CircleAlertIcon
+};
+var Alert = /* @__PURE__ */ forwardRef10(function Alert2({
+  variant,
+  color = "primary",
+  title: title6,
+  icon: icon7,
+  action: action3,
+  onClose,
+  closeLabel: closeLabelProp,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const m = useMessages();
+  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: [
+    iconNode !== false && iconNode !== null && /* @__PURE__ */ jsx12("span", { className: icon2, "aria-hidden": true, children: iconNode }),
+    /* @__PURE__ */ jsxs10("div", { className: content4, children: [
+      title6 && /* @__PURE__ */ jsx12("div", { className: title2, children: title6 }),
+      children && /* @__PURE__ */ jsx12("div", { className: description2, children })
+    ] }),
+    action3 && /* @__PURE__ */ jsx12("div", { className: action, children: action3 }),
+    onClose && /* @__PURE__ */ jsx12("button", { type: "button", className: closeButton2, "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx12(XIcon2, { size: 16 }) })
+  ] });
+});
+
+// src/components/AmountInput/AmountInput.tsx
+import { forwardRef as forwardRef11, useRef as useRef5 } from "react";
+
+// src/utils/useFormattedInput.ts
+import { useRef as useRef4, useState as useState3 } from "react";
+
+// src/utils/useIsomorphicLayoutEffect.ts
+import { useEffect as useEffect3, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect3;
+
+// src/utils/useFormattedInput.ts
+function caretAfter(display, count2, isMeaningful) {
+  if (count2 <= 0) return 0;
+  let seen = 0;
+  for (let i = 0; i < display.length; i++) {
+    if (isMeaningful(display[i])) seen++;
+    if (seen === count2) return i + 1;
+  }
+  return display.length;
+}
+function useFormattedInput({
+  isControlled,
+  value: value4,
+  defaultValue,
+  onValueChange,
+  sanitize: sanitize4,
+  format: format2,
+  isMeaningful,
+  inputRef
+}) {
+  const [innerValue, setInnerValue] = useState3(() => sanitize4(defaultValue ?? ""));
+  const raw = isControlled ? sanitize4(value4 ?? "") : innerValue;
+  const display = format2(raw);
+  const pendingCaret = useRef4(null);
+  useIsomorphicLayoutEffect(() => {
+    const input5 = inputRef.current;
+    if (pendingCaret.current === null || !input5 || document.activeElement !== input5) return;
+    const position = caretAfter(input5.value, pendingCaret.current, isMeaningful);
+    input5.setSelectionRange(position, position);
+    pendingCaret.current = null;
+  });
+  const commit = (next, caretCount) => {
+    pendingCaret.current = caretCount;
+    if (!isControlled) setInnerValue(next);
+    if (next !== raw) onValueChange?.(next);
+  };
+  const onChange = (event) => {
+    const { value: typed, selectionStart } = event.target;
+    const next = sanitize4(typed);
+    const before = sanitize4(typed.slice(0, selectionStart ?? typed.length));
+    commit(next, Math.min(before.length, next.length));
+  };
+  const onKeyDown = (event) => {
+    const input5 = event.currentTarget;
+    const { selectionStart: start, selectionEnd: end } = input5;
+    if (start === null || start !== end) return;
+    const countBefore = (text2) => [...text2].filter(isMeaningful).length;
+    if (event.key === "Backspace" && start > 0 && !isMeaningful(input5.value[start - 1])) {
+      const index = countBefore(input5.value.slice(0, start)) - 1;
+      if (index < 0) return;
+      event.preventDefault();
+      commit(raw.slice(0, index) + raw.slice(index + 1), index);
+    } else if (event.key === "Delete" && start < input5.value.length && !isMeaningful(input5.value[start])) {
+      const index = countBefore(input5.value.slice(0, start));
+      if (index >= raw.length) return;
+      event.preventDefault();
+      commit(raw.slice(0, index) + raw.slice(index + 1), index);
+    }
+  };
+  const setRaw = (next) => setInnerValue(sanitize4(next));
+  return { raw, display, onChange, onKeyDown, setRaw };
+}
+
+// src/components/AmountInput/AmountInput.css.ts
+var input3 = "_70qkav0";
+
+// src/components/AmountInput/AmountInput.tsx
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var MAX_DIGITS = 15;
+var isDigit = (char) => /\d/.test(char);
+var AmountInput = /* @__PURE__ */ forwardRef11(
+  function AmountInput2(props, ref) {
+    const {
+      value: value4,
+      defaultValue,
+      onValueChange,
+      max,
+      unit: unitProp,
+      showKoreanAmount = true,
+      label: labelProp,
+      placeholder = "0",
+      helperText: helperText3,
+      onKeyDown,
+      className,
+      ...rest
+    } = props;
+    const inputRef = useRef5(null);
+    const m = useMessages();
+    const unit = unitProp ?? m.currencyUnit ?? "\uC6D0";
+    const label6 = labelProp ?? m.amount ?? "\uAE08\uC561";
+    const sanitize4 = (input5) => {
+      let digits = input5.replace(/\D/g, "").replace(/^0+(?=\d)/, "").slice(0, MAX_DIGITS);
+      if (max !== void 0 && digits && Number(digits) > max) digits = String(Math.floor(max));
+      return digits;
+    };
+    const toRaw = (amount) => amount === null || amount === void 0 ? "" : String(Math.floor(Math.abs(amount)));
+    const field3 = useFormattedInput({
+      isControlled: "value" in props,
+      value: toRaw(value4),
+      defaultValue: toRaw(defaultValue),
+      onValueChange: (digits) => onValueChange?.(digits === "" ? null : Number(digits)),
+      sanitize: sanitize4,
+      format: (digits) => digits === "" ? "" : Number(digits).toLocaleString("ko-KR"),
+      isMeaningful: isDigit,
+      inputRef
+    });
+    const reading = showKoreanAmount && field3.raw !== "" ? formatKoreanAmount(Number(field3.raw), unit) : null;
+    return /* @__PURE__ */ jsx13(
+      TextField,
+      {
+        ref: mergeRefs(ref, inputRef),
+        label: label6,
+        placeholder,
+        inputMode: "numeric",
+        value: field3.display,
+        onChange: field3.onChange,
+        onKeyDown: (event) => {
+          field3.onKeyDown(event);
+          onKeyDown?.(event);
+        },
+        endAdornment: unit,
+        helperText: reading && helperText3 ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+          reading,
+          /* @__PURE__ */ jsx13("br", {}),
+          helperText3
+        ] }) : reading ?? helperText3,
+        className: cx(input3, className),
+        ...rest
+      }
+    );
+  }
+);
+
+// src/components/Avatar/Avatar.tsx
+import * as RadixAvatar from "@radix-ui/react-avatar";
+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";
+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: [] });
+
+// src/components/Avatar/Avatar.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function getInitials(name) {
+  const [a = "", b = ""] = name.trim().split(/\s+/);
+  const first = (word) => Array.from(word)[0] ?? "";
+  return (first(a) + first(b)).toUpperCase();
+}
+var Avatar = /* @__PURE__ */ forwardRef12(function Avatar2({ src, alt, name, fallback: fallback2, size, shape, className, ...rest }, ref) {
+  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: [
+    src && /* @__PURE__ */ jsx14(RadixAvatar.Image, { src, alt: "", className: image }),
+    /* @__PURE__ */ jsx14(RadixAvatar.Fallback, { className: fallback, children: fallback2 ?? (initials || /* @__PURE__ */ jsx14(UserIcon, { size: "60%" })) })
+  ] });
+});
+
+// src/components/Badge/Badge.tsx
+import { forwardRef as forwardRef13 } from "react";
+
+// src/components/Badge/Badge.css.ts
+import { createRuntimeFn as _7a4688 } from "@vanilla-extract/recipes/createRuntimeFn";
+var badge = /* @__PURE__ */ _7a4688({ defaultClassName: "_1295cfn4", variantClassNames: { variant: { solid: "_1295cfn5", soft: "_1295cfn6", outline: "_1295cfn7" }, color: { primary: "_1295cfn8", neutral: "_1295cfn9", danger: "_1295cfna", success: "_1295cfnb", warning: "_1295cfnc" }, size: { sm: "_1295cfnd", md: "_1295cfne", lg: "_1295cfnf" } }, defaultVariants: { variant: "soft", color: "neutral", size: "md" }, compoundVariants: [] });
+var icon3 = "_1295cfng";
+
+// src/components/Badge/Badge.tsx
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var Badge = /* @__PURE__ */ forwardRef13(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs13("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
+    startIcon && /* @__PURE__ */ jsx15("span", { className: icon3, children: startIcon }),
+    children
+  ] });
+});
+
+// src/components/Breadcrumb/Breadcrumb.tsx
+import { forwardRef as forwardRef15 } from "react";
+import { ChevronRightIcon } from "@bestow-ui/icons";
+
+// src/components/Link/Link.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef as forwardRef14 } from "react";
+import { ExternalLinkIcon } from "@bestow-ui/icons";
+
+// src/components/Link/Link.css.ts
+import { createRuntimeFn as _7a4689 } from "@vanilla-extract/recipes/createRuntimeFn";
+var externalIcon = "_1t4hlp6";
+var link = /* @__PURE__ */ _7a4689({ 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 jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var Link = /* @__PURE__ */ forwardRef14(function Link2({
+  as: Component = "a",
+  asChild,
+  color,
+  underline,
+  external,
+  externalLabel: externalLabelProp,
+  target,
+  rel,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const m = useMessages();
+  const externalLabel = externalLabelProp ?? m.newWindow ?? "(\uC0C8 \uCC3D)";
+  const linkClassName = cx(link({ color, underline }), className);
+  if (asChild) {
+    return (
+      // Slot 의 props 타입은 HTMLElement 기준이라 <a> 전용 속성(target·rel 등)은 그대로 넘기도록 단언한다
+      /* @__PURE__ */ jsx16(Slot, { ref, className: linkClassName, ...{ target, rel, ...rest }, children })
+    );
+  }
+  return /* @__PURE__ */ jsxs14(
+    Component,
+    {
+      ref,
+      className: linkClassName,
+      target: external ? target ?? "_blank" : target,
+      rel: external ? rel ?? "noopener noreferrer" : rel,
+      ...rest,
+      children: [
+        children,
+        external && /* @__PURE__ */ jsxs14(Fragment3, { children: [
+          " ",
+          /* @__PURE__ */ jsx16(ExternalLinkIcon, { className: externalIcon }),
+          /* @__PURE__ */ jsx16("span", { className: visuallyHidden, children: externalLabel })
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/Breadcrumb/Breadcrumb.css.ts
+var current = "_18t8ztt3";
+var item3 = "_18t8ztt1";
+var link2 = "_18t8ztt2";
+var list2 = "_18t8ztt0";
+var separator = "_18t8ztt4";
+
+// src/components/Breadcrumb/Breadcrumb.tsx
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var Breadcrumb = /* @__PURE__ */ forwardRef15(function Breadcrumb2({ items: items2, linkAs, separator: separator3, "aria-label": ariaLabelProp, className, ...rest }, ref) {
+  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((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 || 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);
+  }) }) });
+});
+
+// src/components/BusinessNumberInput/BusinessNumberInput.tsx
+import { forwardRef as forwardRef16, useRef as useRef6, useState as useState4 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var sanitize = (input5) => input5.replace(/\D/g, "").slice(0, 10);
+var isDigit2 = (char) => /\d/.test(char);
+var BusinessNumberInput = /* @__PURE__ */ forwardRef16(
+  function BusinessNumberInput2(props, ref) {
+    const {
+      value: value4,
+      defaultValue,
+      onValueChange,
+      validate = true,
+      invalidText: invalidTextProp,
+      label: labelProp,
+      placeholder = "000-00-00000",
+      error,
+      helperText: helperText3,
+      onBlur,
+      onKeyDown,
+      ...rest
+    } = props;
+    const inputRef = useRef6(null);
+    const m = useMessages();
+    const invalidText = invalidTextProp ?? m.businessNumberInvalid ?? "\uC62C\uBC14\uB978 \uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638\uAC00 \uC544\uB2C8\uC5D0\uC694. \uBC88\uD638\uB97C \uB2E4\uC2DC \uD655\uC778\uD574 \uC8FC\uC138\uC694.";
+    const 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 field3 = useFormattedInput({
+      isControlled: "value" in props,
+      value: value4,
+      defaultValue,
+      onValueChange: (digits) => onValueChange?.(digits, digits.length === 10 ? isValidBusinessNumber(digits) : null),
+      sanitize,
+      format: formatBusinessNumber,
+      isMeaningful: isDigit2,
+      inputRef
+    });
+    const complete = field3.raw.length === 10;
+    const autoInvalid = validate && field3.raw.length > 0 && (complete ? !isValidBusinessNumber(field3.raw) : touched);
+    const showAuto = autoInvalid && error === void 0;
+    return /* @__PURE__ */ jsx18(
+      TextField,
+      {
+        ref: mergeRefs(ref, inputRef),
+        label: label6,
+        placeholder,
+        inputMode: "numeric",
+        value: field3.display,
+        onChange: field3.onChange,
+        onKeyDown: (event) => {
+          field3.onKeyDown(event);
+          onKeyDown?.(event);
+        },
+        onBlur: (event) => {
+          setTouched(true);
+          onBlur?.(event);
+        },
+        error: error ?? autoInvalid,
+        helperText: showAuto ? complete ? invalidText : incompleteText : helperText3,
+        ...rest
+      }
+    );
+  }
+);
+
+// src/components/Calendar/Calendar.tsx
+import { forwardRef as forwardRef18, useEffect as useEffect4, useId as useId4, useRef as useRef7, useState as useState5 } from "react";
+import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2 } from "@bestow-ui/icons";
+
+// src/utils/useIsClient.ts
+import { useSyncExternalStore } from "react";
+var subscribeNothing = () => () => {
+};
+function useIsClient() {
+  return useSyncExternalStore(
+    subscribeNothing,
+    () => true,
+    () => false
+  );
+}
+
+// src/components/IconButton/IconButton.tsx
+import { forwardRef as forwardRef17 } from "react";
+
+// src/components/IconButton/IconButton.css.ts
+import { createRuntimeFn as _7a46810 } from "@vanilla-extract/recipes/createRuntimeFn";
+var iconButton = /* @__PURE__ */ _7a46810({ defaultClassName: "ip9et20", variantClassNames: { size: { sm: "ip9et21", md: "ip9et22", lg: "ip9et23" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+
+// src/components/IconButton/IconButton.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var IconButton = /* @__PURE__ */ forwardRef17(function IconButton2({ variant = "ghost", color = "neutral", size, loading, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx19(
+    Button,
+    {
+      ref,
+      variant,
+      color,
+      size,
+      loading,
+      className: cx(iconButton({ size }), className),
+      ...rest,
+      children: !loading && children
+    }
+  );
+});
+
+// src/components/Calendar/Calendar.css.ts
+var cell = "_1qyq67b5";
+var day = "_1qyq67b6";
+var grid = "_1qyq67b3";
+var header3 = "_1qyq67b1";
+var heading = "_1qyq67b2";
+var root6 = "_1qyq67b0";
+var weekday = "_1qyq67b4";
+
+// src/components/Calendar/Calendar.tsx
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var Calendar = /* @__PURE__ */ forwardRef18(function Calendar2(props, ref) {
+  const {
+    value: value4,
+    defaultValue,
+    onValueChange,
+    min,
+    max,
+    isDateDisabled,
+    isHoliday,
+    today: todayProp,
+    initialFocus,
+    prevMonthLabel: prevMonthLabelProp,
+    nextMonthLabel: nextMonthLabelProp,
+    className
+  } = props;
+  const m = useMessages();
+  const prevMonthLabel = prevMonthLabelProp ?? m.previousMonth ?? "\uC774\uC804 \uB2EC";
+  const nextMonthLabel = nextMonthLabelProp ?? m.nextMonth ?? "\uB2E4\uC74C \uB2EC";
+  const weekdaysShort = m.weekdaysShort ?? KOREAN_WEEKDAYS;
+  const weekdaysLong = m.weekdaysLong ?? KOREAN_WEEKDAYS.map((name) => `${name}\uC694\uC77C`);
+  const headingId = useId4();
+  const gridRef = useRef7(null);
+  const isControlled = "value" in props;
+  const [innerValue, setInnerValue] = useState5(defaultValue ?? "");
+  const selected = parseISODate(isControlled ? value4 : innerValue);
+  const isClient = useIsClient();
+  const today = parseISODate(todayProp) ?? (isClient ? /* @__PURE__ */ new Date() : null);
+  const minDate = parseISODate(min);
+  const maxDate = parseISODate(max);
+  const clamp = (date) => {
+    if (minDate && compareDays(date, minDate) < 0) return minDate;
+    if (maxDate && compareDays(date, maxDate) > 0) return maxDate;
+    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 base = selected ?? today;
+  const focused = focusedState ?? (base ? clamp(base) : null);
+  const moveFocus = useRef7(initialFocus ?? false);
+  const selectedIso = selected ? toISODate(selected) : "";
+  useEffect4(() => {
+    const date = parseISODate(selectedIso);
+    if (date) setFocused((prev) => isSameDay(prev, date) ? prev : date);
+  }, [selectedIso]);
+  useEffect4(() => {
+    if (!moveFocus.current || !focused) return;
+    moveFocus.current = false;
+    gridRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
+  }, [focused]);
+  const focusDate = (date) => {
+    moveFocus.current = true;
+    setFocused(clamp(date));
+  };
+  const select = (date) => {
+    if (isDisabled(date)) return;
+    const iso = toISODate(date);
+    if (!isControlled) setInnerValue(iso);
+    onValueChange?.(iso);
+    setFocused(date);
+  };
+  const handleKeyDown = (event) => {
+    if (!focused) return;
+    const moves = {
+      ArrowLeft: () => addDays(focused, -1),
+      ArrowRight: () => addDays(focused, 1),
+      ArrowUp: () => addDays(focused, -7),
+      ArrowDown: () => addDays(focused, 7),
+      Home: () => addDays(focused, -focused.getDay()),
+      End: () => addDays(focused, 6 - focused.getDay()),
+      PageUp: () => addMonths(focused, event.shiftKey ? -12 : -1),
+      PageDown: () => addMonths(focused, event.shiftKey ? 12 : 1)
+    };
+    const move = moves[event.key];
+    if (move) {
+      event.preventDefault();
+      focusDate(move());
+    }
+  };
+  const visible = focused;
+  const weeks = visible ? getCalendarWeeks(visible.getFullYear(), visible.getMonth()).filter(
+    (week) => week.some((date) => isSameMonth(date, visible))
+  ) : [];
+  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__ */ jsxs16("div", { ref, className: cx(root6, className), children: [
+    /* @__PURE__ */ jsxs16("div", { className: header3, children: [
+      /* @__PURE__ */ jsx20(
+        IconButton,
+        {
+          "aria-label": prevMonthLabel,
+          size: "sm",
+          disabled: !canPrev,
+          onClick: () => visible && setFocused(clamp(addMonths(visible, -1))),
+          children: /* @__PURE__ */ jsx20(ChevronLeftIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx20("div", { id: headingId, className: heading, "aria-live": "polite", children: visible && (m.monthTitle?.(visible.getFullYear(), visible.getMonth() + 1) ?? `${visible.getFullYear()}\uB144 ${visible.getMonth() + 1}\uC6D4`) }),
+      /* @__PURE__ */ jsx20(
+        IconButton,
+        {
+          "aria-label": nextMonthLabel,
+          size: "sm",
+          disabled: !canNext,
+          onClick: () => visible && setFocused(clamp(addMonths(visible, 1))),
+          children: /* @__PURE__ */ jsx20(ChevronRightIcon2, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("table", { ref: gridRef, role: "grid", "aria-labelledby": headingId, className: grid, onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsx20("tr", { children: weekdaysShort.map((name, index) => /* @__PURE__ */ jsx20("th", { scope: "col", abbr: weekdaysLong[index], className: weekday, "data-weekday": index, children: name }, index)) }) }),
+      /* @__PURE__ */ jsx20("tbody", { children: weeks.map((week) => /* @__PURE__ */ jsx20("tr", { children: week.map((date) => {
+        const iso = toISODate(date);
+        if (!visible || !isSameMonth(date, visible))
+          return /* @__PURE__ */ jsx20("td", { role: "gridcell", className: cell }, iso);
+        const isSelected = isSameDay(date, selected);
+        const isToday = isSameDay(date, today);
+        const holiday = !!isHoliday?.(date);
+        const disabled = isDisabled(date);
+        const label6 = [
+          m.dayLabel?.(date, weekdaysLong[date.getDay()]) ?? `${date.getDate()}, ${date.getFullYear()}\uB144 ${date.getMonth() + 1}\uC6D4 ${weekdaysLong[date.getDay()]}`,
+          holiday && (m.holiday ?? "\uACF5\uD734\uC77C"),
+          isToday && (m.today ?? "\uC624\uB298")
+        ].filter(Boolean).join(", ");
+        return /* @__PURE__ */ jsx20("td", { role: "gridcell", "aria-selected": isSelected, className: cell, children: /* @__PURE__ */ jsx20(
+          "button",
+          {
+            type: "button",
+            className: day,
+            "data-date": iso,
+            "data-weekday": date.getDay(),
+            "data-holiday": holiday || void 0,
+            "data-selected": isSelected || void 0,
+            tabIndex: isSameDay(date, focused) ? 0 : -1,
+            "aria-label": label6,
+            "aria-current": isToday ? "date" : void 0,
+            "aria-disabled": disabled || void 0,
+            onClick: () => select(date),
+            onFocus: () => !isSameDay(date, focused) && setFocused(date),
+            children: date.getDate()
+          }
+        ) }, iso);
+      }) }, toISODate(week[0]))) })
+    ] })
+  ] });
+});
+
+// src/components/Card/Card.tsx
+import { forwardRef as forwardRef19 } from "react";
+
+// src/components/Card/Card.css.ts
+import { createRuntimeFn as _7a46811 } from "@vanilla-extract/recipes/createRuntimeFn";
+var body2 = "dnuf1u9";
+var card = /* @__PURE__ */ _7a46811({ defaultClassName: "dnuf1u0", variantClassNames: { variant: { outline: "dnuf1u1", elevated: "dnuf1u2", soft: "dnuf1u3" }, padding: { none: "dnuf1u4", sm: "dnuf1u5", md: "dnuf1u6", lg: "dnuf1u7" } }, defaultVariants: { variant: "outline", padding: "md" }, compoundVariants: [] });
+var footer2 = "dnuf1ua";
+var header4 = "dnuf1u8";
+
+// src/components/Card/Card.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var Card = /* @__PURE__ */ forwardRef19(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx21(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
+});
+var CardHeader = /* @__PURE__ */ forwardRef19(function CardHeader2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx21("div", { ref, className: cx(header4, className), ...rest });
+});
+var CardBody = /* @__PURE__ */ forwardRef19(function CardBody2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx21("div", { ref, className: cx(body2, className), ...rest });
+});
+var CardFooter = /* @__PURE__ */ forwardRef19(function CardFooter2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx21("div", { ref, className: cx(footer2, className), ...rest });
+});
+
+// src/components/Combobox/Combobox.tsx
+import * as Popover from "@radix-ui/react-popover";
+import {
+  forwardRef as forwardRef20,
+  useEffect as useEffect5,
+  useId as useId5,
+  useMemo as useMemo3,
+  useRef as useRef8,
+  useState as useState6
+} from "react";
+import { CheckIcon, ChevronDownIcon as ChevronDownIcon3, XIcon as XIcon3 } from "@bestow-ui/icons";
+
+// src/components/Select/Select.css.ts
+var content5 = "_1kx81e83";
+var icon4 = "_1kx81e82";
+var item4 = "_1kx81e85";
+var itemIndicator = "_1kx81e86";
+var trigger2 = "_1kx81e80";
+var value = "_1kx81e81";
+var viewport = "_1kx81e84";
+
+// src/components/Combobox/Combobox.css.ts
+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";
+var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
+var Combobox = /* @__PURE__ */ forwardRef20(function Combobox2(props, ref) {
+  const {
+    options,
+    value: value4,
+    defaultValue,
+    onValueChange,
+    filter = defaultFilter,
+    emptyMessage: emptyMessageProp,
+    placeholder,
+    label: label6,
+    helperText: helperText3,
+    error,
+    size,
+    fullWidth,
+    disabled,
+    required,
+    name,
+    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`;
+  const listId = `${inputId}-listbox`;
+  const helperId = helperText3 ? `${inputId}-helper` : void 0;
+  const optionId = (index) => `${inputId}-option-${index}`;
+  const portal2 = usePortalProps();
+  const inputRef = useRef8(null);
+  const anchorRef = useRef8(null);
+  const isControlled = "value" in props;
+  const [innerValue, setInnerValue] = useState6(defaultValue);
+  const selectedValue = isControlled ? value4 : 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 firstEnabled = (list5, from = 0, step = 1) => {
+    for (let i = from; i >= 0 && i < list5.length; i += step) if (!list5[i].disabled) return i;
+    return -1;
+  };
+  const openList = (list5 = filtered, preferLast = false) => {
+    setOpen(true);
+    const selectedIndex = list5.findIndex((o) => o.value === selectedValue);
+    setActiveIndex(
+      selectedIndex >= 0 && !list5[selectedIndex].disabled ? selectedIndex : preferLast ? firstEnabled(list5, list5.length - 1, -1) : firstEnabled(list5)
+    );
+  };
+  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);
+    reset();
+  };
+  const move = (step) => {
+    const start = activeIndex < 0 ? step === 1 ? 0 : filtered.length - 1 : activeIndex + step;
+    const next = firstEnabled(filtered, start, step);
+    if (next >= 0) setActiveIndex(next);
+  };
+  const handleChange = (event) => {
+    const nextQuery = event.target.value;
+    const nextList = nextQuery ? options.filter((o) => filter(o, nextQuery)) : options;
+    setQuery(nextQuery);
+    setOpen(true);
+    setActiveIndex(nextQuery ? firstEnabled(nextList) : -1);
+  };
+  const handleKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) openList();
+        else move(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) openList(filtered, true);
+        else move(-1);
+        break;
+      case "Enter":
+        if (open) {
+          event.preventDefault();
+          const option2 = filtered[activeIndex];
+          if (option2) select(option2);
+          else close2();
+        }
+        break;
+      case "Escape":
+        if (open) {
+          event.preventDefault();
+          close2();
+        }
+        break;
+      case "Tab":
+        if (open) close2();
+        break;
+    }
+  };
+  useEffect5(() => {
+    if (!open || activeIndex < 0) return;
+    document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: "nearest" });
+  }, [open, activeIndex]);
+  const hasOptions = filtered.length > 0;
+  return /* @__PURE__ */ jsxs17("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs17("label", { id: labelId, htmlFor: inputId, className: label, children: [
+      label6,
+      required && /* @__PURE__ */ jsx22("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs17(Popover.Root, { open: open && !disabled, onOpenChange: (next) => next ? openList() : close2(), children: [
+      /* @__PURE__ */ jsx22(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          ref: anchorRef,
+          className: cx(root3({ size, fullWidth }), className),
+          "data-invalid": error || void 0,
+          "data-disabled": disabled || void 0,
+          children: [
+            /* @__PURE__ */ jsx22(
+              "input",
+              {
+                ref: mergeRefs(ref, inputRef),
+                id: inputId,
+                type: "text",
+                role: "combobox",
+                "aria-expanded": open,
+                "aria-controls": open && hasOptions ? listId : void 0,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": open && activeIndex >= 0 ? optionId(activeIndex) : void 0,
+                "aria-label": label6 ? void 0 : ariaLabel,
+                "aria-invalid": error || void 0,
+                "aria-required": required || void 0,
+                "aria-describedby": helperId,
+                autoComplete: "off",
+                placeholder,
+                disabled,
+                value: inputText,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown,
+                onBlur: () => {
+                  if (open) close2();
+                },
+                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",
+              {
+                type: "button",
+                tabIndex: -1,
+                "aria-label": toggleLabel,
+                "aria-expanded": open,
+                disabled,
+                className: toggle2,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => {
+                  if (open) close2();
+                  else openList(options);
+                  inputRef.current?.focus();
+                },
+                children: /* @__PURE__ */ jsx22(ChevronDownIcon3, { size: 16 })
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx22(Popover.Portal, { children: /* @__PURE__ */ jsx22(
+        Popover.Content,
+        {
+          role: "presentation",
+          align: "start",
+          sideOffset: 4,
+          collisionPadding: 8,
+          className: cx(portal2.className, content6),
+          style: portal2.style,
+          onOpenAutoFocus: (event) => event.preventDefault(),
+          onCloseAutoFocus: (event) => event.preventDefault(),
+          onMouseDown: (event) => event.preventDefault(),
+          onInteractOutside: (event) => {
+            if (anchorRef.current?.contains(event.target)) event.preventDefault();
+          },
+          children: hasOptions ? /* @__PURE__ */ jsx22(
+            "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;
+                return (
+                  // aria-activedescendant 패턴: 포커스·키보드는 입력창이 맡고 항목은 포커스를 받지 않는다 (WAI-ARIA combobox)
+                  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
+                  /* @__PURE__ */ jsxs17(
+                    "div",
+                    {
+                      id: optionId(index),
+                      role: "option",
+                      "aria-selected": isSelected,
+                      "aria-disabled": option2.disabled || void 0,
+                      "data-highlighted": index === activeIndex ? "" : void 0,
+                      "data-state": isSelected ? "checked" : "unchecked",
+                      "data-disabled": option2.disabled ? "" : void 0,
+                      className: item4,
+                      onMouseDown: (event) => event.preventDefault(),
+                      onMouseMove: () => !option2.disabled && setActiveIndex(index),
+                      onClick: () => select(option2),
+                      children: [
+                        option2.label,
+                        isSelected && /* @__PURE__ */ jsx22("span", { className: itemIndicator, "aria-hidden": true, children: /* @__PURE__ */ jsx22(CheckIcon, { size: 16 }) })
+                      ]
+                    },
+                    option2.value
+                  )
+                );
+              })
+            }
+          ) : /* @__PURE__ */ jsx22("div", { className: empty, role: "status", children: emptyMessage })
+        }
+      ) })
+    ] }),
+    name && /* @__PURE__ */ jsx22("input", { type: "hidden", name, value: selectedValue ?? "" }),
+    helperText3 && /* @__PURE__ */ jsx22("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+  ] });
+});
+
+// src/components/DatePicker/DatePicker.tsx
+import { forwardRef as forwardRef21, useEffect as useEffect6, useRef as useRef9, useState as useState7 } 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";
+
+// src/components/Popover/Popover.css.ts
+var arrow = "_1j99p8x4";
+var closeButton3 = "_1j99p8x3";
+var content7 = "_1j99p8x0";
+var header5 = "_1j99p8x1";
+var title3 = "_1j99p8x2";
+
+// src/components/Popover/Popover.tsx
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+function Popover2({
+  content: content12,
+  children,
+  title: title6,
+  "aria-label": ariaLabel,
+  showClose = false,
+  showArrow = false,
+  side = "bottom",
+  align = "center",
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal,
+  className,
+  style,
+  onOpenAutoFocus
+}) {
+  const portal2 = usePortalProps();
+  const m = useMessages();
+  const titleId = useId6();
+  return /* @__PURE__ */ jsxs18(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
+    /* @__PURE__ */ jsx23(RadixPopover.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx23(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs18(
+      RadixPopover.Content,
+      {
+        side,
+        align,
+        sideOffset: 6,
+        onOpenAutoFocus,
+        collisionPadding: 8,
+        "aria-labelledby": title6 ? titleId : void 0,
+        "aria-label": title6 ? void 0 : ariaLabel,
+        className: cx(portal2.className, content7, className),
+        style: { ...portal2.style, ...style },
+        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(XIcon4, { size: 16 }) })
+          ] }),
+          content12,
+          showArrow && /* @__PURE__ */ jsx23(RadixPopover.Arrow, { className: arrow, width: 12, height: 6 })
+        ]
+      }
+    ) })
+  ] });
+}
+var PopoverClose = RadixPopover.Close;
+
+// src/components/DatePicker/DatePicker.tsx
+import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+var sanitize2 = (input5) => input5.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__ */ forwardRef21(
+  function DatePicker2(props, ref) {
+    const {
+      value: value4,
+      defaultValue,
+      onValueChange,
+      min,
+      max,
+      isDateDisabled,
+      isHoliday,
+      today,
+      label: labelProp,
+      helperText: helperText3,
+      error,
+      required,
+      disabled,
+      fullWidth,
+      placeholder = "YYYY-MM-DD",
+      calendarLabel: calendarLabelProp,
+      invalidText: invalidTextProp,
+      unavailableText: unavailableTextProp,
+      incompleteText: incompleteTextProp,
+      name,
+      id,
+      className
+    } = props;
+    const inputRef = useRef9(null);
+    const m = useMessages();
+    const label6 = labelProp ?? m.date ?? "\uB0A0\uC9DC";
+    const calendarLabel = calendarLabelProp ?? m.openCalendar ?? "\uB2EC\uB825 \uC5F4\uAE30";
+    const invalidText = invalidTextProp ?? m.dateInvalid ?? "\uC62C\uBC14\uB978 \uB0A0\uC9DC\uAC00 \uC544\uB2C8\uC5D0\uC694.";
+    const unavailableText = unavailableTextProp ?? m.dateUnavailable ?? "\uACE0\uB97C \uC218 \uC5C6\uB294 \uB0A0\uC9DC\uC608\uC694.";
+    const incompleteText = incompleteTextProp ?? m.dateIncomplete ?? "\uB0A0\uC9DC\uB97C YYYY-MM-DD \uD615\uC2DD\uC73C\uB85C \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
+    const [open, setOpen] = useState7(false);
+    const [touched, setTouched] = useState7(false);
+    const isControlled = "value" in props;
+    const lastEmitted = useRef9(isControlled ? value4 ?? "" : defaultValue ?? "");
+    const minDate = parseISODate(min);
+    const maxDate = parseISODate(max);
+    const toIso = (digits) => digits.length === 8 ? `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}` : "";
+    const isUnavailable = (date2) => minDate !== null && compareDays(date2, minDate) < 0 || maxDate !== null && compareDays(date2, maxDate) > 0 || !!isDateDisabled?.(date2);
+    const emit = (iso) => {
+      if (iso === lastEmitted.current) return;
+      lastEmitted.current = iso;
+      onValueChange?.(iso);
+    };
+    const field3 = useFormattedInput({
+      isControlled: false,
+      value: void 0,
+      defaultValue: (isControlled ? value4 : defaultValue)?.replace(/\D/g, ""),
+      onValueChange: (digits) => {
+        const date2 = parseISODate(toIso(digits));
+        emit(date2 && !isUnavailable(date2) ? toIso(digits) : "");
+      },
+      sanitize: sanitize2,
+      format,
+      isMeaningful: isDigit3,
+      inputRef
+    });
+    const textIso = toIso(field3.raw);
+    const { setRaw } = field3;
+    useEffect6(() => {
+      if (!isControlled) return;
+      const next = value4 ?? "";
+      lastEmitted.current = next;
+      if (next === textIso) return;
+      const textDate = parseISODate(textIso);
+      const textIsValid = textDate !== null && !isUnavailable(textDate);
+      if (next === "" && !textIsValid) return;
+      setRaw(next.replace(/\D/g, ""));
+    }, [value4]);
+    const date = parseISODate(textIso);
+    const complete = field3.raw.length === 8;
+    const autoError = complete ? !date ? invalidText : isUnavailable(date) ? unavailableText : null : touched && field3.raw.length > 0 ? incompleteText : null;
+    const showAuto = autoError !== null && error === void 0;
+    const selectedIso = date && !isUnavailable(date) ? textIso : "";
+    return /* @__PURE__ */ jsxs19(Fragment4, { children: [
+      /* @__PURE__ */ jsx24(
+        TextField,
+        {
+          ref: mergeRefs(ref, inputRef),
+          id,
+          label: label6,
+          placeholder,
+          inputMode: "numeric",
+          autoComplete: "off",
+          value: field3.display,
+          onChange: field3.onChange,
+          onKeyDown: field3.onKeyDown,
+          onBlur: () => setTouched(true),
+          error: error ?? autoError !== null,
+          helperText: showAuto ? autoError : helperText3,
+          required,
+          disabled,
+          fullWidth,
+          rootClassName: className,
+          endAdornment: /* @__PURE__ */ jsx24(
+            Popover2,
+            {
+              open,
+              onOpenChange: setOpen,
+              modal: true,
+              align: "end",
+              "aria-label": m.calendar ?? "\uB2EC\uB825",
+              onOpenAutoFocus: (event) => event.preventDefault(),
+              content: /* @__PURE__ */ jsx24(
+                Calendar,
+                {
+                  value: selectedIso,
+                  onValueChange: (iso) => {
+                    setRaw(iso.replace(/\D/g, ""));
+                    emit(iso);
+                    setOpen(false);
+                  },
+                  min,
+                  max,
+                  isDateDisabled,
+                  isHoliday,
+                  today,
+                  initialFocus: true
+                }
+              ),
+              children: /* @__PURE__ */ jsx24(IconButton, { "aria-label": calendarLabel, size: "sm", disabled, children: /* @__PURE__ */ jsx24(CalendarIcon, {}) })
+            }
+          )
+        }
+      ),
+      name && /* @__PURE__ */ jsx24("input", { type: "hidden", name, value: selectedIso })
+    ] });
+  }
+);
+
+// src/components/Divider/Divider.tsx
+import { forwardRef as forwardRef22 } from "react";
+
+// src/components/Divider/Divider.css.ts
+import { createRuntimeFn as _7a46812 } from "@vanilla-extract/recipes/createRuntimeFn";
+var divider = /* @__PURE__ */ _7a46812({ defaultClassName: "_1t3gq8v0", variantClassNames: { orientation: { horizontal: "_1t3gq8v1", vertical: "_1t3gq8v2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
+var labeled = "_1t3gq8v3";
+var line = "_1t3gq8v4";
+
+// src/components/Divider/Divider.tsx
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+var Divider = /* @__PURE__ */ forwardRef22(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
+  if (children && orientation === "horizontal") {
+    return /* @__PURE__ */ jsxs20("div", { ref, className: cx(labeled, className), ...rest, children: [
+      /* @__PURE__ */ jsx25("span", { className: line, "aria-hidden": true }),
+      children,
+      /* @__PURE__ */ jsx25("span", { className: line, "aria-hidden": true })
+    ] });
+  }
+  const a11y = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
+  return /* @__PURE__ */ jsx25("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
+});
+
+// src/components/Drawer/Drawer.tsx
+import * as Dialog2 from "@radix-ui/react-dialog";
+import { XIcon as XIcon5 } from "@bestow-ui/icons";
+
+// src/components/Drawer/Drawer.css.ts
+import { createRuntimeFn as _7a46813 } from "@vanilla-extract/recipes/createRuntimeFn";
+var body3 = "nmobyvy";
+var closeButton4 = "nmobyvx";
+var content8 = /* @__PURE__ */ _7a46813({ 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 footer3 = "nmobyvz";
+var header6 = "nmobyvt";
+var headings2 = "nmobyvu";
+var overlay2 = "nmobyv0";
+var title4 = "nmobyvv";
+
+// src/components/Drawer/Drawer.tsx
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+function Drawer({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger: trigger4,
+  title: title6,
+  description: description6,
+  children,
+  footer: footer6,
+  side,
+  size,
+  hideCloseButton = false,
+  closeOnOverlayClick = true,
+  className
+}) {
+  const portal2 = usePortalProps();
+  const m = useMessages();
+  const focus = useReturnFocus(Boolean(trigger4));
+  return /* @__PURE__ */ jsxs21(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger4 && /* @__PURE__ */ jsx26(Dialog2.Trigger, { asChild: true, children: trigger4 }),
+    /* @__PURE__ */ jsxs21(Dialog2.Portal, { children: [
+      /* @__PURE__ */ jsx26(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
+      /* @__PURE__ */ jsxs21(
+        Dialog2.Content,
+        {
+          className: cx(portal2.className, content8({ side, size }), className),
+          style: portal2.style,
+          "data-side": side ?? "right",
+          onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
+          onOpenAutoFocus: focus.onOpenAutoFocus,
+          onCloseAutoFocus: focus.onCloseAutoFocus,
+          ...description6 ? {} : { "aria-describedby": void 0 },
+          children: [
+            /* @__PURE__ */ jsxs21("div", { className: header6, children: [
+              /* @__PURE__ */ jsxs21("div", { className: headings2, children: [
+                /* @__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(XIcon5, {}) }) })
+            ] }),
+            children && /* @__PURE__ */ jsx26("div", { className: body3, children }),
+            footer6 && /* @__PURE__ */ jsx26("div", { className: footer3, children: footer6 })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var DrawerClose = Dialog2.Close;
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+import { forwardRef as forwardRef23 } from "react";
+
+// src/components/DropdownMenu/DropdownMenu.css.ts
+var content9 = "_1d7ahux0";
+var danger = "_1d7ahux2";
+var icon5 = "_1d7ahux3";
+var item5 = "_1d7ahux1";
+var label2 = "_1d7ahux5";
+var separator2 = "_1d7ahux6";
+var shortcut = "_1d7ahux4";
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+var DropdownMenu = RadixMenu.Root;
+var DropdownMenuTrigger = RadixMenu.Trigger;
+var DropdownMenuGroup = RadixMenu.Group;
+var DropdownMenuContent = /* @__PURE__ */ forwardRef23(
+  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(
+      RadixMenu.Content,
+      {
+        ref,
+        side,
+        align,
+        sideOffset,
+        collisionPadding,
+        className: cx(portal2.className, content9, className),
+        style: { ...portal2.style, ...style },
+        ...rest
+      }
+    ) });
+  }
+);
+var DropdownMenuItem = /* @__PURE__ */ forwardRef23(
+  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: [
+      icon7 && /* @__PURE__ */ jsx27("span", { className: icon5, "aria-hidden": true, children: icon7 }),
+      children,
+      shortcut2 && /* @__PURE__ */ jsx27("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
+    ] });
+  }
+);
+var DropdownMenuLabel = /* @__PURE__ */ forwardRef23(
+  function DropdownMenuLabel2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx27(RadixMenu.Label, { ref, className: cx(label2, className), ...rest });
+  }
+);
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef23(
+  function DropdownMenuSeparator2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx27(RadixMenu.Separator, { ref, className: cx(separator2, className), ...rest });
+  }
+);
+
+// src/components/Pagination/Pagination.tsx
+import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon3 } from "@bestow-ui/icons";
+import { forwardRef as forwardRef24, useState as useState8 } from "react";
+
+// src/components/Pagination/getPaginationItems.ts
+var range = (start, end) => end < start ? [] : Array.from({ length: end - start + 1 }, (_, i) => start + i);
+function getPaginationItems(page, totalPages, siblingCount = 1, boundaryCount = 1) {
+  if (totalPages < 1) return [];
+  const startPages = range(1, Math.min(boundaryCount, totalPages));
+  const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+  const siblingsStart = Math.max(
+    Math.min(page - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+  const siblingsEnd = Math.min(
+    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;
+}
+
+// src/components/Pagination/Pagination.css.ts
+import { createRuntimeFn as _7a46814 } from "@vanilla-extract/recipes/createRuntimeFn";
+var ellipsis = "_1iraoak4";
+var item6 = /* @__PURE__ */ _7a46814({ defaultClassName: "_1iraoak1", variantClassNames: { size: { sm: "_1iraoak2", md: "_1iraoak3" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var list3 = "_1iraoak0";
+
+// src/components/Pagination/Pagination.tsx
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+var Pagination = /* @__PURE__ */ forwardRef24(function Pagination2({
+  totalPages,
+  page: pageProp,
+  defaultPage = 1,
+  onPageChange,
+  siblingCount = 1,
+  boundaryCount = 1,
+  size,
+  getItemLabel: getItemLabelProp,
+  className,
+  "aria-label": ariaLabelProp,
+  ...rest
+}, ref) {
+  const [uncontrolledPage, setUncontrolledPage] = useState8(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`);
+  if (totalPages < 1) return null;
+  const page = Math.min(Math.max(pageProp ?? uncontrolledPage, 1), totalPages);
+  const goTo = (next) => {
+    if (next === page || next < 1 || next > totalPages) return;
+    if (pageProp === void 0) setUncontrolledPage(next);
+    onPageChange?.(next);
+  };
+  const itemClass = item6({ size });
+  return /* @__PURE__ */ jsx28("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsxs23("ul", { className: list3, children: [
+    /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
+      "button",
+      {
+        type: "button",
+        className: itemClass,
+        "aria-label": getItemLabel("previous", page - 1),
+        disabled: page <= 1,
+        onClick: () => goTo(page - 1),
+        children: /* @__PURE__ */ jsx28(ChevronLeftIcon2, { size: 16 })
+      }
+    ) }),
+    getPaginationItems(page, totalPages, siblingCount, boundaryCount).map(
+      (item8) => typeof item8 === "number" ? /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
+        "button",
+        {
+          type: "button",
+          className: itemClass,
+          "aria-label": getItemLabel("page", item8),
+          "aria-current": item8 === page ? "page" : void 0,
+          onClick: () => goTo(item8),
+          children: item8
+        }
+      ) }, item8) : /* @__PURE__ */ jsx28("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item8)
+    ),
+    /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
+      "button",
+      {
+        type: "button",
+        className: itemClass,
+        "aria-label": getItemLabel("next", page + 1),
+        disabled: page >= totalPages,
+        onClick: () => goTo(page + 1),
+        children: /* @__PURE__ */ jsx28(ChevronRightIcon3, { size: 16 })
+      }
+    ) })
+  ] }) });
+});
+
+// src/components/PhoneNumberInput/PhoneNumberInput.tsx
+import { forwardRef as forwardRef25, useRef as useRef10 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var sanitize3 = (input5) => {
+  const digits = input5.replace(/\D/g, "");
+  return digits.slice(0, phoneNumberMaxDigits(digits));
+};
+var isDigit4 = (char) => /\d/.test(char);
+var PhoneNumberInput = /* @__PURE__ */ forwardRef25(
+  function PhoneNumberInput2(props, ref) {
+    const {
+      value: value4,
+      defaultValue,
+      onValueChange,
+      label: labelProp,
+      placeholder = "010-0000-0000",
+      onKeyDown,
+      ...rest
+    } = props;
+    const inputRef = useRef10(null);
+    const m = useMessages();
+    const label6 = labelProp ?? m.phoneNumber ?? "\uD734\uB300\uD3F0 \uBC88\uD638";
+    const field3 = useFormattedInput({
+      isControlled: "value" in props,
+      value: value4,
+      defaultValue,
+      onValueChange,
+      sanitize: sanitize3,
+      format: formatPhoneNumber,
+      isMeaningful: isDigit4,
+      inputRef
+    });
+    return /* @__PURE__ */ jsx29(
+      TextField,
+      {
+        ref: mergeRefs(ref, inputRef),
+        label: label6,
+        placeholder,
+        type: "tel",
+        inputMode: "tel",
+        autoComplete: "tel-national",
+        value: field3.display,
+        onChange: field3.onChange,
+        onKeyDown: (event) => {
+          field3.onKeyDown(event);
+          onKeyDown?.(event);
+        },
+        ...rest
+      }
+    );
+  }
+);
+
+// src/components/Progress/Progress.tsx
+import { forwardRef as forwardRef26, useId as useId7 } from "react";
+
+// src/components/Progress/Progress.css.ts
+import { createRuntimeFn as _7a46815 } from "@vanilla-extract/recipes/createRuntimeFn";
+var header7 = "_1tvkq001";
+var indicator = /* @__PURE__ */ _7a46815({ defaultClassName: "_1tvkq008", variantClassNames: { color: { primary: "_1tvkq009", neutral: "_1tvkq00a", success: "_1tvkq00b", warning: "_1tvkq00c", danger: "_1tvkq00d" } }, defaultVariants: { color: "primary" }, compoundVariants: [] });
+var label3 = "_1tvkq002";
+var root7 = "_1tvkq000";
+var track = /* @__PURE__ */ _7a46815({ defaultClassName: "_1tvkq004", variantClassNames: { size: { sm: "_1tvkq005", md: "_1tvkq006", lg: "_1tvkq007" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var value2 = "_1tvkq003";
+
+// src/components/Progress/Progress.tsx
+import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+var defaultFormat = (value4, max) => `${Math.round(value4 / max * 100)}%`;
+var Progress = /* @__PURE__ */ forwardRef26(function Progress2({
+  value: value4,
+  max = 100,
+  label: label6,
+  "aria-label": ariaLabel,
+  showValue,
+  formatValue = defaultFormat,
+  size,
+  color,
+  className,
+  ...rest
+}, ref) {
+  const labelId = useId7();
+  const isIndeterminate = value4 === void 0 || value4 === null;
+  const safeMax = max > 0 ? max : 100;
+  const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value4));
+  const valueText = isIndeterminate ? void 0 : formatValue(clamped, safeMax);
+  return /* @__PURE__ */ jsxs24("div", { ref, className: cx(root7, className), ...rest, children: [
+    (label6 || showValue && valueText) && /* @__PURE__ */ jsxs24("div", { className: header7, children: [
+      label6 && /* @__PURE__ */ jsx30("span", { id: labelId, className: label3, children: label6 }),
+      showValue && valueText && /* @__PURE__ */ jsx30("span", { className: value2, "aria-hidden": true, children: valueText })
+    ] }),
+    /* @__PURE__ */ jsx30(
+      "div",
+      {
+        role: "progressbar",
+        "aria-labelledby": label6 ? labelId : void 0,
+        "aria-label": label6 ? void 0 : ariaLabel,
+        "aria-valuemin": 0,
+        "aria-valuemax": safeMax,
+        "aria-valuenow": isIndeterminate ? void 0 : clamped,
+        "aria-valuetext": valueText,
+        className: track({ size }),
+        children: /* @__PURE__ */ jsx30(
+          "div",
+          {
+            className: indicator({ color }),
+            "data-state": isIndeterminate ? "indeterminate" : clamped >= safeMax ? "complete" : "loading",
+            style: isIndeterminate ? void 0 : { width: `${clamped / safeMax * 100}%` }
+          }
+        )
+      }
+    )
+  ] });
+});
+
+// src/components/RadioGroup/RadioGroup.tsx
+import * as RadixRadioGroup from "@radix-ui/react-radio-group";
+import { forwardRef as forwardRef27, useId as useId8 } from "react";
+
+// src/components/RadioGroup/RadioGroup.css.ts
+import { createRuntimeFn as _7a46816 } from "@vanilla-extract/recipes/createRuntimeFn";
+var description4 = "_1w9iwjmd";
+var groupLabel = "_1w9iwjme";
+var indicator2 = "_1w9iwjma";
+var items = /* @__PURE__ */ _7a46816({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
+var labelText = "_1w9iwjmc";
+var option = /* @__PURE__ */ _7a46816({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var radio = /* @__PURE__ */ _7a46816({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var text = "_1w9iwjmb";
+
+// src/components/RadioGroup/RadioGroup.tsx
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+var RadioGroup = /* @__PURE__ */ forwardRef27(function RadioGroup2(props, ref) {
+  const {
+    options,
+    value: value4,
+    defaultValue,
+    onValueChange,
+    label: label6,
+    helperText: helperText3,
+    error,
+    orientation = "vertical",
+    size,
+    disabled,
+    required,
+    name,
+    id,
+    "aria-label": ariaLabel,
+    className
+  } = props;
+  const isControlled = "value" in props;
+  const generatedId = useId8();
+  const baseId = id ?? generatedId;
+  const labelId = label6 ? `${baseId}-label` : void 0;
+  const helperId = helperText3 ? `${baseId}-helper` : void 0;
+  return /* @__PURE__ */ jsxs25("div", { className: cx(field, className), children: [
+    label6 && /* @__PURE__ */ jsxs25("span", { id: labelId, className: cx(label, groupLabel), children: [
+      label6,
+      required && /* @__PURE__ */ jsx31("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx31(
+      RadixRadioGroup.Root,
+      {
+        ref,
+        id: baseId,
+        value: isControlled ? value4 ?? "" : void 0,
+        defaultValue,
+        onValueChange,
+        orientation,
+        disabled,
+        required,
+        name,
+        "aria-label": ariaLabel,
+        "aria-labelledby": labelId,
+        "aria-describedby": helperId,
+        "aria-invalid": error || 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;
+          return /* @__PURE__ */ jsxs25("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
+            /* @__PURE__ */ jsx31(
+              RadixRadioGroup.Item,
+              {
+                id: itemId,
+                value: option2.value,
+                disabled: option2.disabled,
+                "aria-describedby": descriptionId,
+                className: radio({ size }),
+                children: /* @__PURE__ */ jsx31(RadixRadioGroup.Indicator, { className: indicator2 })
+              }
+            ),
+            /* @__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 })
+            ] })
+          ] }, option2.value);
+        })
+      }
+    ),
+    helperText3 && /* @__PURE__ */ jsx31("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+  ] });
+});
+
+// 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 forwardRef29, useId as useId10 } from "react";
+import { CheckIcon as CheckIcon2, ChevronDownIcon as ChevronDownIcon4 } from "@bestow-ui/icons";
+import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
+var Select = /* @__PURE__ */ forwardRef29(function Select2(props, ref) {
+  const {
+    options,
+    value: value4,
+    defaultValue,
+    onValueChange,
+    placeholder,
+    label: label6,
+    helperText: helperText3,
+    error,
+    size,
+    fullWidth,
+    disabled,
+    required,
+    name,
+    id,
+    "aria-label": ariaLabel,
+    className
+  } = props;
+  const isControlled = "value" in props;
+  const generatedId = useId10();
+  const triggerId = id ?? generatedId;
+  const helperId = helperText3 ? `${triggerId}-helper` : void 0;
+  const portal2 = usePortalProps();
+  return /* @__PURE__ */ jsxs27("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs27("label", { htmlFor: triggerId, className: label, children: [
+      label6,
+      required && /* @__PURE__ */ jsx33("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs27(
+      RadixSelect.Root,
+      {
+        value: isControlled ? value4 ?? "" : void 0,
+        defaultValue,
+        onValueChange,
+        disabled,
+        required,
+        name,
+        children: [
+          /* @__PURE__ */ jsxs27(
+            RadixSelect.Trigger,
+            {
+              ref,
+              id: triggerId,
+              "aria-label": ariaLabel,
+              "aria-invalid": error || void 0,
+              "aria-describedby": helperId,
+              "data-invalid": error || void 0,
+              className: cx(root3({ size, fullWidth }), trigger2, className),
+              children: [
+                /* @__PURE__ */ jsx33("span", { className: value, children: /* @__PURE__ */ jsx33(RadixSelect.Value, { placeholder }) }),
+                /* @__PURE__ */ jsx33(RadixSelect.Icon, { className: icon4, children: /* @__PURE__ */ jsx33(ChevronDownIcon4, { size: 16 }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx33(RadixSelect.Portal, { children: /* @__PURE__ */ jsx33(
+            RadixSelect.Content,
+            {
+              position: "popper",
+              sideOffset: 4,
+              collisionPadding: 8,
+              className: cx(portal2.className, content5),
+              style: portal2.style,
+              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__ */ jsx33(RadixSelect.ItemText, { children: option2.label }),
+                    /* @__PURE__ */ jsx33(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx33(CheckIcon2, { size: 16 }) })
+                  ]
+                },
+                option2.value
+              )) })
+            }
+          ) })
+        ]
+      }
+    ),
+    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 forwardRef30 } from "react";
+
+// src/components/Skeleton/Skeleton.css.ts
+import { createRuntimeFn as _7a46818 } from "@vanilla-extract/recipes/createRuntimeFn";
+var height = "var(--_1s8datd1)";
+var lines = "_1s8datd6";
+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 jsx34 } from "react/jsx-runtime";
+var toCss = (value4) => typeof value4 === "number" ? `${value4}px` : value4;
+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__ */ jsx34(
+      "span",
+      {
+        ref,
+        "aria-hidden": true,
+        className: cx(lines, className),
+        style: { ...assignInlineVars({ [width]: w }), ...style },
+        ...rest,
+        children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ jsx34(
+          "span",
+          {
+            className: skeleton({ variant }),
+            style: assignInlineVars({ [width]: i === lines2 - 1 ? "60%" : "100%", [height]: h })
+          },
+          i
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx34(
+    "span",
+    {
+      ref,
+      "aria-hidden": true,
+      className: cx(skeleton({ variant }), className),
+      style: { ...assignInlineVars({ [width]: w, [height]: h }), ...style },
+      ...rest
+    }
+  );
+});
+
+// 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 forwardRef32, useId as useId11, useState as useState10 } from "react";
+
+// src/components/Slider/Slider.css.ts
+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 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 jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
+  const {
+    value: value4,
+    defaultValue,
+    onValueChange,
+    min = 0,
+    max = 100,
+    label: label6,
+    "aria-label": ariaLabel,
+    helperText: helperText3,
+    showValue,
+    formatValue = String,
+    thumbLabels: thumbLabelsProp,
+    size,
+    id,
+    className,
+    disabled,
+    ...rest
+  } = props;
+  const m = useMessages();
+  const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
+  const generatedId = useId11();
+  const baseId = id ?? generatedId;
+  const labelId = `${baseId}-label`;
+  const helperId = `${baseId}-helper`;
+  const isControlled = "value" in props;
+  const [innerValue, setInnerValue] = useState10(defaultValue ?? [min]);
+  const current2 = isControlled ? value4 ?? [min] : innerValue;
+  const isRange = current2.length > 1;
+  const handleChange = (next) => {
+    if (!isControlled) setInnerValue(next);
+    onValueChange?.(next);
+  };
+  const valueText = current2.map(formatValue).join(" \u2013 ");
+  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__ */ jsxs28(
+      RadixSlider.Root,
+      {
+        ref,
+        id: baseId,
+        min,
+        max,
+        disabled,
+        value: current2,
+        onValueChange: handleChange,
+        className: root9({ size }),
+        ...rest,
+        children: [
+          /* @__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__ */ jsx36(
+              RadixSlider.Thumb,
+              {
+                className: thumb({ size }),
+                "aria-labelledby": label6 ? isRange ? `${labelId} ${thumbLabelId}` : labelId : isRange ? thumbLabelId : void 0,
+                "aria-label": label6 ? void 0 : isRange ? void 0 : ariaLabel,
+                "aria-valuetext": formatValue(thumbValue),
+                "aria-describedby": helperText3 ? helperId : void 0
+              },
+              index
+            );
+          })
+        ]
+      }
+    ),
+    isRange && current2.map((_, index) => /* @__PURE__ */ jsxs28("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 })
+  ] });
+});
+
+// src/components/Stack/Stack.tsx
+import { forwardRef as forwardRef33 } from "react";
+
+// src/components/Stack/Stack.css.ts
+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 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 forwardRef34, useId as useId12 } from "react";
+
+// src/components/Switch/Switch.css.ts
+import { createRuntimeFn as _7a46821 } from "@vanilla-extract/recipes/createRuntimeFn";
+var label5 = "o33ul29";
+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 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__ */ jsxs29("span", { className: cx(root10({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsx38(
+      RadixSwitch.Root,
+      {
+        ref,
+        id: switchId,
+        disabled,
+        "aria-label": ariaLabel,
+        className: track3({ size }),
+        ...rest,
+        children: /* @__PURE__ */ jsx38(RadixSwitch.Thumb, { className: thumb2({ size }) })
+      }
+    ),
+    label6 && /* @__PURE__ */ jsx38("label", { htmlFor: switchId, className: label5, children: label6 })
+  ] });
+});
+
+// src/components/Table/Table.tsx
+import {
+  createContext as createContext3,
+  forwardRef as forwardRef35,
+  useContext as useContext3,
+  useId as useId13
+} from "react";
+import { ArrowDownIcon, ArrowUpIcon } from "@bestow-ui/icons";
+
+// src/components/Table/Table.css.ts
+import { createRuntimeFn as _7a46822 } from "@vanilla-extract/recipes/createRuntimeFn";
+var body4 = "l3ploy5";
+var caption = "l3ploy2";
+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";
+var head = "l3ployf";
+var header9 = "l3ploy3";
+var row3 = "l3ploy8";
+var sortButton = "l3ployh";
+var sortIcon = "l3ployi";
+var stickyHeader = "l3ploy4";
+var striped = "l3ploy6";
+var table = "l3ploy1";
+
+// src/components/Table/Table.tsx
+import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+var TableSizeContext = /* @__PURE__ */ createContext3("md");
+var TableSectionContext = /* @__PURE__ */ createContext3("body");
+var Table = /* @__PURE__ */ forwardRef35(function Table2({
+  size = "md",
+  striped: striped2,
+  stickyHeader: stickyHeader2,
+  caption: caption2,
+  "aria-label": ariaLabel,
+  containerClassName,
+  containerStyle,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const captionId = useId13();
+  return /* @__PURE__ */ jsx39(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx39(
+    "div",
+    {
+      className: cx(container, containerClassName),
+      style: containerStyle,
+      tabIndex: 0,
+      role: "region",
+      "aria-labelledby": caption2 ? captionId : void 0,
+      "aria-label": caption2 ? void 0 : ariaLabel,
+      children: /* @__PURE__ */ jsxs30(
+        "table",
+        {
+          ref,
+          className: cx(table, striped2 && striped, stickyHeader2 && stickyHeader, className),
+          "aria-label": caption2 ? void 0 : ariaLabel,
+          ...rest,
+          children: [
+            caption2 && /* @__PURE__ */ jsx39("caption", { id: captionId, className: caption, children: caption2 }),
+            children
+          ]
+        }
+      )
+    }
+  ) });
+});
+var TableHeader = /* @__PURE__ */ forwardRef35(
+  function TableHeader2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ jsx39("thead", { ref, className: cx(header9, className), ...rest }) });
+  }
+);
+var TableBody = /* @__PURE__ */ forwardRef35(
+  function TableBody2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx39("tbody", { ref, className: cx(body4, className), ...rest }) });
+  }
+);
+var TableFooter = /* @__PURE__ */ forwardRef35(
+  function TableFooter2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx39("tfoot", { ref, className: cx(footer4, 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 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__ */ jsx39(
+    "th",
+    {
+      ref,
+      scope: scope ?? (section === "header" ? "col" : "row"),
+      "aria-sort": sortable && direction !== "none" ? direction : void 0,
+      className: cx(
+        cell2({ size, align }),
+        section === "header" ? head : section === "footer" ? footerCell : void 0,
+        className
+      ),
+      ...rest,
+      children: sortable ? /* @__PURE__ */ jsxs30("button", { type: "button", className: sortButton, onClick: onSort, children: [
+        children,
+        /* @__PURE__ */ jsx39(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
+      ] }) : children
+    }
+  );
+});
+var TableCell = /* @__PURE__ */ forwardRef35(function TableCell2({ align, className, ...rest }, ref) {
+  const size = useContext3(TableSizeContext);
+  const section = useContext3(TableSectionContext);
+  return /* @__PURE__ */ jsx39(
+    "td",
+    {
+      ref,
+      className: cx(cell2({ size, align }), section === "footer" && footerCell, className),
+      ...rest
+    }
+  );
+});
+
+// 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";
+
+// src/components/Tabs/Tabs.css.ts
+import { createRuntimeFn as _7a46823 } from "@vanilla-extract/recipes/createRuntimeFn";
+var content10 = "fvhbtda";
+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 jsx40 } from "react/jsx-runtime";
+var TabsStyleContext = /* @__PURE__ */ createContext4({ variant: "line", size: "md" });
+var Tabs = /* @__PURE__ */ forwardRef36(function Tabs2({ variant = "line", size = "md", ...props }, ref) {
+  const controlled = "value" in props ? { value: props.value ?? "" } : {};
+  return /* @__PURE__ */ jsx40(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx40(RadixTabs.Root, { ref, ...props, ...controlled }) });
+});
+var TabsList = /* @__PURE__ */ forwardRef36(function TabsList2({ className, ...rest }, ref) {
+  const { variant } = useContext4(TabsStyleContext);
+  return /* @__PURE__ */ jsx40(RadixTabs.List, { ref, className: cx(list4({ variant }), className), ...rest });
+});
+var TabsTrigger = /* @__PURE__ */ forwardRef36(function TabsTrigger2({ className, ...rest }, ref) {
+  const { variant, size } = useContext4(TabsStyleContext);
+  return /* @__PURE__ */ jsx40(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 });
+});
+
+// src/components/Textarea/Textarea.tsx
+import {
+  forwardRef as forwardRef37,
+  useCallback,
+  useId as useId14,
+  useRef as useRef12,
+  useState as useState11
+} from "react";
+
+// src/components/Textarea/Textarea.css.ts
+import { createRuntimeFn as _7a46824 } from "@vanilla-extract/recipes/createRuntimeFn";
+var count = "_1koawa9";
+var countOver = "_1koawaa";
+var defaultWidth = "_1koawa7";
+var footer5 = "_1koawa8";
+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 jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
+  label: label6,
+  helperText: helperText3,
+  error,
+  size,
+  fullWidth,
+  resize,
+  autoResize,
+  showCount,
+  required,
+  id,
+  rows = 3,
+  value: value4,
+  defaultValue,
+  onChange,
+  maxLength,
+  className,
+  style,
+  "aria-describedby": ariaDescribedBy,
+  ...rest
+}, ref) {
+  const generatedId = useId14();
+  const textareaId = id ?? generatedId;
+  const helperId = helperText3 ? `${textareaId}-helper` : void 0;
+  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;
+    if (!autoResize || !el) return;
+    el.style.height = "auto";
+    const borders = el.offsetHeight - el.clientHeight;
+    el.style.height = `${el.scrollHeight + borders}px`;
+  }, [autoResize]);
+  useIsomorphicLayoutEffect(fitHeight, [fitHeight, value4]);
+  const handleChange = (event) => {
+    if (value4 === void 0) setUncontrolledLength(event.target.value.length);
+    fitHeight();
+    onChange?.(event);
+  };
+  return /* @__PURE__ */ jsxs31("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs31("label", { htmlFor: textareaId, className: label, children: [
+      label6,
+      required && /* @__PURE__ */ jsx41("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx41(
+      "textarea",
+      {
+        ref: mergeRefs(innerRef, ref),
+        id: textareaId,
+        rows,
+        value: value4,
+        defaultValue,
+        onChange: handleChange,
+        maxLength,
+        required,
+        "aria-invalid": error || void 0,
+        "aria-describedby": cx(helperId, ariaDescribedBy) || void 0,
+        className: cx(
+          textarea({ size, resize: autoResize ? "none" : resize }),
+          !fullWidth && defaultWidth,
+          className
+        ),
+        style: autoResize ? { overflowY: "auto", ...style } : style,
+        ...rest
+      }
+    ),
+    (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 useRef13, useState as useState12 } from "react";
+import { XIcon as XIcon6 } from "@bestow-ui/icons";
+
+// src/components/Toast/Toast.css.ts
+import { createRuntimeFn as _7a46825 } from "@vanilla-extract/recipes/createRuntimeFn";
+var action2 = "_1g11zvx9";
+var close = "_1g11zvxa";
+var description5 = "_1g11zvx8";
+var title5 = "_1g11zvx7";
+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 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] = useState12([]);
+  const nextId = useRef13(0);
+  const portal2 = usePortalProps();
+  const toast2 = useCallback2((options) => {
+    const id = nextId.current++;
+    setToasts((prev) => [...prev, { ...options, id, open: true }]);
+    return id;
+  }, []);
+  const dismiss = useCallback2((id) => {
+    const isTarget = (t) => id === void 0 || t.id === id;
+    setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
+    setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
+  }, []);
+  const value4 = useMemo4(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
+  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__ */ jsxs32(
+      RadixToast.Root,
+      {
+        open,
+        duration: itemDuration,
+        onOpenChange: (nextOpen) => {
+          if (!nextOpen) dismiss(id);
+        },
+        className: toast({ color }),
+        children: [
+          /* @__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__ */ jsx42(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
+  ] }) });
+}
+function useToast() {
+  const context = useContext5(ToastContext);
+  if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
+  return context;
+}
+
+// src/components/Tooltip/Tooltip.tsx
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+
+// src/components/Tooltip/Tooltip.css.ts
+var arrow2 = "z7rufs1";
+var content11 = "z7rufs0";
+
+// src/components/Tooltip/Tooltip.tsx
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+function Tooltip({
+  content: content12,
+  children,
+  side = "top",
+  align = "center",
+  delay = 300,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  className
+}) {
+  const portal2 = usePortalProps();
+  if (disabled || content12 == null || content12 === "") return children;
+  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,
+        align,
+        sideOffset: 6,
+        collisionPadding: 8,
+        className: cx(portal2.className, content11, className),
+        style: portal2.style,
+        children: [
+          content12,
+          /* @__PURE__ */ jsx43(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
+        ]
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/Typography/Typography.tsx
+import { forwardRef as forwardRef38 } from "react";
+
+// src/components/Typography/Typography.css.ts
+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 jsx44 } from "react/jsx-runtime";
+var defaultElement = {
+  display: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  "body-lg": "p",
+  body: "p",
+  "body-sm": "p",
+  caption: "span"
+};
+var Typography = /* @__PURE__ */ forwardRef38(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
+  const Component = as ?? defaultElement[variant];
+  return /* @__PURE__ */ jsx44(
+    Component,
+    {
+      ref,
+      className: cx(typography({ variant, color, weight, align, truncate }), className),
+      ...rest
+    }
+  );
+});
+
+// src/components/VerificationCodeInput/VerificationCodeInput.tsx
+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";
+var row4 = "ea01810";
+var slot = "ea01813";
+var slots = "ea01811";
+var timer = "ea01814";
+
+// src/components/VerificationCodeInput/VerificationCodeInput.tsx
+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__ */ forwardRef39(
+  function VerificationCodeInput2(props, ref) {
+    const {
+      length = 6,
+      value: value4,
+      defaultValue,
+      onValueChange,
+      onComplete,
+      type = "numeric",
+      label: labelProp,
+      helperText: helperText3,
+      error,
+      disabled,
+      autoFocus,
+      expiresIn,
+      onExpire,
+      onResend,
+      resendText: resendTextProp,
+      expiredText: expiredTextProp,
+      name,
+      id,
+      className
+    } = props;
+    const m = useMessages();
+    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 = useId15();
+    const inputId = id ?? generatedId;
+    const helperId = `${inputId}-helper`;
+    const statusId = `${inputId}-status`;
+    const inputRef = useRef14(null);
+    const isControlled = "value" in props;
+    const [innerValue, setInnerValue] = useState13(defaultValue ?? "");
+    const code = (isControlled ? value4 ?? "" : innerValue).slice(0, length);
+    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 = useRef14(onExpire);
+    useEffect7(() => {
+      onExpireRef.current = onExpire;
+    });
+    useEffect7(() => {
+      if (endAt === null) return;
+      const tick = () => {
+        const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
+        setRemaining(left);
+        if (left === 0) {
+          clearInterval(timer2);
+          onExpireRef.current?.();
+        }
+      };
+      const timer2 = setInterval(tick, 250);
+      tick();
+      return () => clearInterval(timer2);
+    }, [endAt]);
+    const setCode = (next) => {
+      if (!isControlled) setInnerValue(next);
+      onValueChange?.(next);
+      if (next.length === length && code.length !== length) onComplete?.(next);
+    };
+    const handleChange = (event) => {
+      const raw = event.target.value;
+      const cleaned = (type === "numeric" ? raw.replace(/\D/g, "") : raw.replace(/[^0-9a-z]/gi, "").toUpperCase()).slice(0, length);
+      setCode(cleaned);
+    };
+    const resend = () => {
+      onResend?.();
+      setCode("");
+      if (expiresIn) {
+        setEndAt(Date.now() + expiresIn * 1e3);
+        setRemaining(expiresIn);
+      }
+      inputRef.current?.focus();
+    };
+    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__ */ jsxs34(
+      "div",
+      {
+        className: cx(field, className),
+        "data-invalid": error || void 0,
+        "data-disabled": disabled || void 0,
+        children: [
+          /* @__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),
+                  id: inputId,
+                  type: "text",
+                  inputMode: type === "numeric" ? "numeric" : "text",
+                  autoComplete: "one-time-code",
+                  pattern: type === "numeric" ? "[0-9]*" : void 0,
+                  value: code,
+                  onChange: handleChange,
+                  onFocus: () => setFocused(true),
+                  onBlur: () => setFocused(false),
+                  disabled,
+                  autoFocus,
+                  "aria-invalid": error || void 0,
+                  "aria-describedby": `${helperId} ${statusId}`,
+                  className: input4
+                }
+              ),
+              Array.from({ length }, (_, index) => /* @__PURE__ */ jsx45(
+                "div",
+                {
+                  className: slot,
+                  "data-active": focused && index === activeIndex ? "" : void 0,
+                  "aria-hidden": true,
+                  children: code[index] ?? ""
+                },
+                index
+              ))
+            ] }),
+            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__ */ 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 })
+        ]
+      }
+    );
+  }
+);
+export {
+  Accordion,
+  AccordionItem,
+  AddressInput,
+  AgreementGroup,
+  Alert,
+  AmountInput,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  BusinessNumberInput,
+  Button,
+  Calendar,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Checkbox,
+  Combobox,
+  DatePicker,
+  Divider,
+  Drawer,
+  DrawerClose,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  IconButton,
+  Input,
+  Link,
+  LocaleProvider,
+  Modal,
+  ModalClose,
+  Pagination,
+  PhoneNumberInput,
+  Popover2 as Popover,
+  PopoverClose,
+  Progress,
+  RadioGroup,
+  SegmentedControl,
+  Select,
+  Skeleton,
+  SkipLink,
+  Slider,
+  Spinner,
+  Stack,
+  Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TextField,
+  Textarea,
+  ThemeProvider,
+  ToastProvider,
+  Tooltip,
+  Typography,
+  VerificationCodeInput,
+  useMessages,
+  usePortalProps,
+  useTheme,
+  useToast
+};
+//# sourceMappingURL=client.js.map