@bestow-ui/react 0.12.0 → 1.0.0

package/dist/index.cjs

@@ -29,8 +29,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   Accordion: () => Accordion,
   AccordionItem: () => AccordionItem,
   AddressInput: () => AddressInput,
@@ -112,13 +112,12 @@ __export(index_exports, {
   themeClass: () => themeClass,
   toISODate: () => toISODate,
   useMessages: () => useMessages,
-  usePortalClassName: () => usePortalClassName,
   usePortalProps: () => usePortalProps,
   useTheme: () => useTheme,
   useToast: () => useToast,
   vars: () => vars
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/theme/contract.css.ts
 var themeClass = { light: "tkagtb0", dark: "tkagtb1" };
@@ -203,36 +202,43 @@ function hoverFor(base, delta, contrast) {
   if (contrastRatio(contrast, preferred) >= 4.5) return preferred;
   return withL(base, Math.min(1, Math.max(0, base.l - delta)));
 }
-function pickContrast(solid) {
+function solidWithContrast(color) {
   const white = import_tokens.palette.white;
   const dark = import_tokens.palette.gray[900];
-  if (contrastRatio(white, solid) >= 4.5) return white;
-  return contrastRatio(dark, solid) >= contrastRatio(white, solid) ? dark : white;
+  if (contrastRatio(white, color) >= 4.5) return { solid: color, contrast: white };
+  if (contrastRatio(dark, color) >= 4.5) return { solid: color, contrast: dark };
+  const base = rgbToOklch(parseHex(color));
+  for (let delta = 5e-3; delta <= 1; delta += 5e-3) {
+    const darker = withL(base, Math.max(0, base.l - delta));
+    if (contrastRatio(white, darker) >= 4.5) return { solid: darker, contrast: white };
+    const lighter = withL(base, Math.min(1, base.l + delta));
+    if (contrastRatio(dark, lighter) >= 4.5) return { solid: lighter, contrast: dark };
+  }
+  return { solid: import_tokens.palette.black, contrast: white };
 }
 var rgba = (hex, alpha) => {
   const [r, g, b] = parseHex(hex).map((v) => Math.round(v * 255));
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
 function createIntentColors(intent, color) {
-  const solid = toHex(parseHex(color));
-  const base = rgbToOklch(parseHex(solid));
+  const input5 = toHex(parseHex(color));
+  const base = rgbToOklch(parseHex(input5));
   const lightSubtle = withL(base, 0.97, Math.min(base.c, 0.12) * 0.3);
   const lightSubtleHover = withL(base, 0.93, Math.min(base.c, 0.12) * 0.45);
-  const lightContrast = pickContrast(solid);
+  const { solid, contrast: lightContrast } = solidWithContrast(input5);
   const light = {
     solid,
-    solidHover: hoverFor(base, -0.06, lightContrast),
+    solidHover: hoverFor(rgbToOklch(parseHex(solid)), -0.06, lightContrast),
     contrast: lightContrast,
     subtle: lightSubtle,
     subtleHover: lightSubtleHover,
     text: findReadable(base, Math.min(base.l, 0.55), -0.02, [import_tokens.lightColors.bg.default, lightSubtle, lightSubtleHover])
   };
   const darkBg = import_tokens.darkColors.bg.default;
-  const darkSolid = base.l < 0.5 ? withL(base, 0.55) : solid;
+  const { solid: darkSolid, contrast: darkContrast } = solidWithContrast(base.l < 0.5 ? withL(base, 0.55) : input5);
   const darkBase = rgbToOklch(parseHex(darkSolid));
   const darkSubtleOnBg = blend(darkSolid, 0.16, darkBg);
   const darkSubtleHoverOnBg = blend(darkSolid, 0.26, darkBg);
-  const darkContrast = pickContrast(darkSolid);
   const dark = {
     solid: darkSolid,
     solidHover: hoverFor(darkBase, 0.06, darkContrast),
@@ -295,65 +301,6 @@ function themeToStyle(theme, mode) {
   return Object.keys(map).length ? (0, import_dynamic.assignInlineVars)(map) : void 0;
 }
 
-// src/theme/ThemeProvider.tsx
-var import_react = require("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
-var import_jsx_runtime = require("react/jsx-runtime");
-var ThemeContext = /* @__PURE__ */ (0, import_react.createContext)({ theme: "light" });
-var ThemeProvider = /* @__PURE__ */ (0, import_react.forwardRef)(function ThemeProvider2({ theme: themeProp, overrides, className, style, children, ...rest }, ref) {
-  const parent = (0, import_react.useContext)(ThemeContext);
-  const theme = themeProp ?? parent.theme;
-  const merged = (0, import_react.useMemo)(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
-  const value4 = (0, import_react.useMemo)(
-    () => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
-    [theme, merged]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ref,
-      "data-theme": theme,
-      className: cx(themeClass[theme], root, className),
-      style: value4.style ? { ...value4.style, ...style } : style,
-      ...rest,
-      children
-    }
-  ) });
-});
-function useTheme() {
-  return (0, import_react.useContext)(ThemeContext).theme;
-}
-function usePortalProps() {
-  const { theme, style } = (0, import_react.useContext)(ThemeContext);
-  return { className: cx(themeClass[theme], portal), style };
-}
-function usePortalClassName() {
-  return usePortalProps().className;
-}
-
-// src/i18n/LocaleProvider.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var MessagesContext = /* @__PURE__ */ (0, import_react2.createContext)({});
-function LocaleProvider({ messages, children }) {
-  const parent = (0, import_react2.useContext)(MessagesContext);
-  const value4 = (0, import_react2.useMemo)(() => ({ ...parent, ...messages }), [parent, messages]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MessagesContext.Provider, { value: value4, children });
-}
-function useMessages() {
-  return (0, import_react2.useContext)(MessagesContext);
-}
-
 // src/i18n/en.ts
 var WEEKDAYS_LONG = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 var MONTHS = [
@@ -425,6 +372,209 @@ var en = {
   dateIncomplete: "Enter the date as YYYY-MM-DD."
 };
 
+// src/utils/koreanFormat.ts
+var onlyDigits = (input5) => input5.replace(/\D/g, "");
+function phoneNumberMaxDigits(digits) {
+  if (digits.startsWith("02")) return 10;
+  if (/^1[568]/.test(digits)) return 8;
+  return 11;
+}
+function formatPhoneNumber(input5) {
+  const d = onlyDigits(input5).slice(0, phoneNumberMaxDigits(onlyDigits(input5)));
+  if (d.startsWith("02")) {
+    if (d.length <= 2) return d;
+    if (d.length <= 5) return `${d.slice(0, 2)}-${d.slice(2)}`;
+    if (d.length <= 9) return `${d.slice(0, 2)}-${d.slice(2, 5)}-${d.slice(5)}`;
+    return `${d.slice(0, 2)}-${d.slice(2, 6)}-${d.slice(6)}`;
+  }
+  if (/^1[568]/.test(d)) {
+    return d.length <= 4 ? d : `${d.slice(0, 4)}-${d.slice(4)}`;
+  }
+  if (d.length <= 3) return d;
+  if (d.length <= 6) return `${d.slice(0, 3)}-${d.slice(3)}`;
+  if (d.length <= 10) return `${d.slice(0, 3)}-${d.slice(3, 6)}-${d.slice(6)}`;
+  return `${d.slice(0, 3)}-${d.slice(3, 7)}-${d.slice(7)}`;
+}
+function formatBusinessNumber(input5) {
+  const d = onlyDigits(input5).slice(0, 10);
+  if (d.length <= 3) return d;
+  if (d.length <= 5) return `${d.slice(0, 3)}-${d.slice(3)}`;
+  return `${d.slice(0, 3)}-${d.slice(3, 5)}-${d.slice(5)}`;
+}
+function isValidBusinessNumber(input5) {
+  const d = onlyDigits(input5);
+  if (d.length !== 10) return false;
+  const weights = [1, 3, 7, 1, 3, 7, 1, 3, 5];
+  const digits = [...d].map(Number);
+  let sum = weights.reduce((acc, w, i) => acc + w * digits[i], 0);
+  sum += Math.floor(digits[8] * 5 / 10);
+  return (10 - sum % 10) % 10 === digits[9];
+}
+function formatKoreanAmount(amount, unit = "\uC6D0") {
+  const n = Math.floor(Math.abs(amount));
+  if (n === 0) return `0${unit}`;
+  const units = [
+    { value: 1e12, label: "\uC870" },
+    { value: 1e8, label: "\uC5B5" },
+    { value: 1e4, label: "\uB9CC" },
+    { value: 1, label: "" }
+  ];
+  let rest = n;
+  const parts = [];
+  for (const u of units) {
+    const q = Math.floor(rest / u.value);
+    rest %= u.value;
+    if (q > 0) parts.push(`${q.toLocaleString("ko-KR")}${u.label}`);
+  }
+  return `${amount < 0 ? "-" : ""}${parts.join(" ")}${unit}`;
+}
+
+// src/utils/date.ts
+var pad = (n) => String(n).padStart(2, "0");
+function toISODate(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function parseISODate(value4) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value4 ?? "");
+  if (!m) return null;
+  const [y, mo, d] = [Number(m[1]), Number(m[2]), Number(m[3])];
+  const date = new Date(y, mo - 1, d);
+  return date.getFullYear() === y && date.getMonth() === mo - 1 && date.getDate() === d ? date : null;
+}
+function addDays(date, days) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+function addMonths(date, months) {
+  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), lastDay));
+}
+function isSameDay(a, b) {
+  return !!a && !!b && toISODate(a) === toISODate(b);
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function compareDays(a, b) {
+  const x = toISODate(a);
+  const y = toISODate(b);
+  return x < y ? -1 : x > y ? 1 : 0;
+}
+function getCalendarWeeks(year, month) {
+  const first = new Date(year, month, 1);
+  const start = addDays(first, -first.getDay());
+  return Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_2, day2) => addDays(start, week * 7 + day2)));
+}
+var KOREAN_WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
+function formatKoreanDate(date, withWeekday = true) {
+  const base = `${date.getFullYear()}\uB144 ${date.getMonth() + 1}\uC6D4 ${date.getDate()}\uC77C`;
+  return withWeekday ? `${base} ${KOREAN_WEEKDAYS[date.getDay()]}\uC694\uC77C` : base;
+}
+
+// src/components/AddressInput/addressProviders.ts
+var KAKAO_POSTCODE_SRC = "https://t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
+var loading = null;
+function loadKakaoPostcode() {
+  const w = window;
+  const existing = w.kakao?.Postcode ?? w.daum?.Postcode;
+  if (existing) return Promise.resolve(existing);
+  loading ?? (loading = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = KAKAO_POSTCODE_SRC;
+    script.async = true;
+    script.onload = () => {
+      const ctor = w.kakao?.Postcode ?? w.daum?.Postcode;
+      if (ctor) resolve(ctor);
+      else reject(new Error("\uC6B0\uD3B8\uBC88\uD638 \uC11C\uBE44\uC2A4\uB97C \uCC3E\uC9C0 \uBABB\uD588\uC5B4\uC694"));
+    };
+    script.onerror = () => {
+      loading = null;
+      reject(new Error("\uC6B0\uD3B8\uBC88\uD638 \uC11C\uBE44\uC2A4\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694"));
+    };
+    document.head.appendChild(script);
+  }));
+  return loading;
+}
+function composeExtraAddress(data) {
+  if (data.userSelectedType !== "R") return "";
+  const parts = [];
+  if (data.bname && /[동로가]$/.test(data.bname)) parts.push(data.bname);
+  if (data.buildingName && data.apartment === "Y") parts.push(data.buildingName);
+  return parts.length ? ` (${parts.join(", ")})` : "";
+}
+var kakaoPostcodeProvider = async (container2, onSelect) => {
+  const Postcode = await loadKakaoPostcode();
+  new Postcode({
+    width: "100%",
+    height: "100%",
+    oncomplete: (data) => {
+      const address = data.userSelectedType === "R" ? data.roadAddress : data.jibunAddress || data.autoJibunAddress || "";
+      onSelect({ zonecode: data.zonecode, address, extraAddress: composeExtraAddress(data) });
+    }
+  }).embed(container2);
+};
+
+// src/components/AgreementGroup/agreements.ts
+function hasAllRequiredAgreements(items2, value4) {
+  return items2.every((item7) => !item7.required || value4.includes(item7.value));
+}
+
+// src/theme/ThemeProvider.tsx
+var import_react = require("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
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = /* @__PURE__ */ (0, import_react.createContext)({ theme: "light" });
+var ThemeProvider = /* @__PURE__ */ (0, import_react.forwardRef)(function ThemeProvider2({ theme: themeProp, overrides, className, style, children, ...rest }, ref) {
+  const parent = (0, import_react.useContext)(ThemeContext);
+  const theme = themeProp ?? parent.theme;
+  const merged = (0, import_react.useMemo)(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
+  const value4 = (0, import_react.useMemo)(
+    () => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
+    [theme, merged]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      "data-theme": theme,
+      className: cx(themeClass[theme], root, className),
+      style: value4.style ? { ...value4.style, ...style } : style,
+      ...rest,
+      children
+    }
+  ) });
+});
+function useTheme() {
+  return (0, import_react.useContext)(ThemeContext).theme;
+}
+function usePortalProps() {
+  const { theme, style } = (0, import_react.useContext)(ThemeContext);
+  return { className: cx(themeClass[theme], portal), style };
+}
+
+// src/i18n/LocaleProvider.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MessagesContext = /* @__PURE__ */ (0, import_react2.createContext)({});
+function LocaleProvider({ messages, children }) {
+  const parent = (0, import_react2.useContext)(MessagesContext);
+  const value4 = (0, import_react2.useMemo)(() => ({ ...parent, ...messages }), [parent, messages]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MessagesContext.Provider, { value: value4, children });
+}
+function useMessages() {
+  return (0, import_react2.useContext)(MessagesContext);
+}
+
 // src/components/Accordion/Accordion.tsx
 var RadixAccordion = __toESM(require("@radix-ui/react-accordion"), 1);
 var import_icons = require("@bestow-ui/icons");
@@ -475,23 +625,10 @@ var visuallyHidden = "_1kdtbw10";
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var spinner = /* @__PURE__ */ (0, import_createRuntimeFn.createRuntimeFn)({ 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/utils/warnOnce.ts
-var warned = /* @__PURE__ */ new Set();
-function warnOnce(message) {
-  if (typeof process !== "undefined" && process.env.NODE_ENV === "production") return;
-  if (warned.has(message)) return;
-  warned.add(message);
-  console.warn(`[BestOW UI] ${message}`);
-}
-
 // src/components/Spinner/Spinner.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Spinner = /* @__PURE__ */ (0, import_react4.forwardRef)(function Spinner2({ size, color, label: labelProp, className, ...rest }, ref) {
   const m = useMessages();
-  if (color === "current") {
-    warnOnce('Spinner \uC758 color="current" \uB294 deprecated \uC608\uC694. color="inherit" \uB97C \uC4F0\uC138\uC694 (1.0 \uC5D0\uC11C \uC81C\uAC70).');
-    color = "inherit";
-  }
   const label6 = labelProp ?? m.loading ?? "\uB85C\uB529 \uC911";
   const a11y = label6 ? { role: "status" } : { "aria-hidden": true };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
@@ -702,49 +839,6 @@ function Modal({
 }
 var ModalClose = Dialog.Close;
 
-// src/components/AddressInput/addressProviders.ts
-var KAKAO_POSTCODE_SRC = "https://t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
-var loading = null;
-function loadKakaoPostcode() {
-  const w = window;
-  const existing = w.kakao?.Postcode ?? w.daum?.Postcode;
-  if (existing) return Promise.resolve(existing);
-  loading ?? (loading = new Promise((resolve, reject) => {
-    const script = document.createElement("script");
-    script.src = KAKAO_POSTCODE_SRC;
-    script.async = true;
-    script.onload = () => {
-      const ctor = w.kakao?.Postcode ?? w.daum?.Postcode;
-      if (ctor) resolve(ctor);
-      else reject(new Error("\uC6B0\uD3B8\uBC88\uD638 \uC11C\uBE44\uC2A4\uB97C \uCC3E\uC9C0 \uBABB\uD588\uC5B4\uC694"));
-    };
-    script.onerror = () => {
-      loading = null;
-      reject(new Error("\uC6B0\uD3B8\uBC88\uD638 \uC11C\uBE44\uC2A4\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694"));
-    };
-    document.head.appendChild(script);
-  }));
-  return loading;
-}
-function composeExtraAddress(data) {
-  if (data.userSelectedType !== "R") return "";
-  const parts = [];
-  if (data.bname && /[동로가]$/.test(data.bname)) parts.push(data.bname);
-  if (data.buildingName && data.apartment === "Y") parts.push(data.buildingName);
-  return parts.length ? ` (${parts.join(", ")})` : "";
-}
-var kakaoPostcodeProvider = async (container2, onSelect) => {
-  const Postcode = await loadKakaoPostcode();
-  new Postcode({
-    width: "100%",
-    height: "100%",
-    oncomplete: (data) => {
-      const address = data.userSelectedType === "R" ? data.roadAddress : data.jibunAddress || data.autoJibunAddress || "";
-      onSelect({ zonecode: data.zonecode, address, extraAddress: composeExtraAddress(data) });
-    }
-  }).embed(container2);
-};
-
 // src/components/AddressInput/AddressInput.css.ts
 var fieldset = "_16fi7uy0";
 var legend = "_16fi7uy1";
@@ -1001,9 +1095,6 @@ var toggle = "j3uxdc8";
 
 // src/components/AgreementGroup/AgreementGroup.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function hasAllRequiredAgreements(items2, value4) {
-  return items2.every((item7) => !item7.required || value4.includes(item7.value));
-}
 var AgreementGroup = /* @__PURE__ */ (0, import_react11.forwardRef)(
   function AgreementGroup2(props, ref) {
     const {
@@ -1165,67 +1256,16 @@ var Alert = /* @__PURE__ */ (0, import_react12.forwardRef)(function Alert2({
 });
 
 // src/components/AmountInput/AmountInput.tsx
+var import_react15 = require("react");
+
+// src/utils/useFormattedInput.ts
 var import_react14 = require("react");
 
-// src/utils/koreanFormat.ts
-var onlyDigits = (input5) => input5.replace(/\D/g, "");
-function phoneNumberMaxDigits(digits) {
-  if (digits.startsWith("02")) return 10;
-  if (/^1[568]/.test(digits)) return 8;
-  return 11;
-}
-function formatPhoneNumber(input5) {
-  const d = onlyDigits(input5).slice(0, phoneNumberMaxDigits(onlyDigits(input5)));
-  if (d.startsWith("02")) {
-    if (d.length <= 2) return d;
-    if (d.length <= 5) return `${d.slice(0, 2)}-${d.slice(2)}`;
-    if (d.length <= 9) return `${d.slice(0, 2)}-${d.slice(2, 5)}-${d.slice(5)}`;
-    return `${d.slice(0, 2)}-${d.slice(2, 6)}-${d.slice(6)}`;
-  }
-  if (/^1[568]/.test(d)) {
-    return d.length <= 4 ? d : `${d.slice(0, 4)}-${d.slice(4)}`;
-  }
-  if (d.length <= 3) return d;
-  if (d.length <= 6) return `${d.slice(0, 3)}-${d.slice(3)}`;
-  if (d.length <= 10) return `${d.slice(0, 3)}-${d.slice(3, 6)}-${d.slice(6)}`;
-  return `${d.slice(0, 3)}-${d.slice(3, 7)}-${d.slice(7)}`;
-}
-function formatBusinessNumber(input5) {
-  const d = onlyDigits(input5).slice(0, 10);
-  if (d.length <= 3) return d;
-  if (d.length <= 5) return `${d.slice(0, 3)}-${d.slice(3)}`;
-  return `${d.slice(0, 3)}-${d.slice(3, 5)}-${d.slice(5)}`;
-}
-function isValidBusinessNumber(input5) {
-  const d = onlyDigits(input5);
-  if (d.length !== 10) return false;
-  const weights = [1, 3, 7, 1, 3, 7, 1, 3, 5];
-  const digits = [...d].map(Number);
-  let sum = weights.reduce((acc, w, i) => acc + w * digits[i], 0);
-  sum += Math.floor(digits[8] * 5 / 10);
-  return (10 - sum % 10) % 10 === digits[9];
-}
-function formatKoreanAmount(amount, unit = "\uC6D0") {
-  const n = Math.floor(Math.abs(amount));
-  if (n === 0) return `0${unit}`;
-  const units = [
-    { value: 1e12, label: "\uC870" },
-    { value: 1e8, label: "\uC5B5" },
-    { value: 1e4, label: "\uB9CC" },
-    { value: 1, label: "" }
-  ];
-  let rest = n;
-  const parts = [];
-  for (const u of units) {
-    const q = Math.floor(rest / u.value);
-    rest %= u.value;
-    if (q > 0) parts.push(`${q.toLocaleString("ko-KR")}${u.label}`);
-  }
-  return `${amount < 0 ? "-" : ""}${parts.join(" ")}${unit}`;
-}
+// src/utils/useIsomorphicLayoutEffect.ts
+var import_react13 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react13.useLayoutEffect : import_react13.useEffect;
 
 // src/utils/useFormattedInput.ts
-var import_react13 = require("react");
 function caretAfter(display, count2, isMeaningful) {
   if (count2 <= 0) return 0;
   let seen = 0;
@@ -1245,11 +1285,11 @@ function useFormattedInput({
   isMeaningful,
   inputRef
 }) {
-  const [innerValue, setInnerValue] = (0, import_react13.useState)(() => sanitize4(defaultValue ?? ""));
+  const [innerValue, setInnerValue] = (0, import_react14.useState)(() => sanitize4(defaultValue ?? ""));
   const raw = isControlled ? sanitize4(value4 ?? "") : innerValue;
   const display = format2(raw);
-  const pendingCaret = (0, import_react13.useRef)(null);
-  (0, import_react13.useLayoutEffect)(() => {
+  const pendingCaret = (0, import_react14.useRef)(null);
+  useIsomorphicLayoutEffect(() => {
     const input5 = inputRef.current;
     if (pendingCaret.current === null || !input5 || document.activeElement !== input5) return;
     const position = caretAfter(input5.value, pendingCaret.current, isMeaningful);
@@ -1295,7 +1335,7 @@ var input3 = "_70qkav0";
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var MAX_DIGITS = 15;
 var isDigit = (char) => /\d/.test(char);
-var AmountInput = /* @__PURE__ */ (0, import_react14.forwardRef)(
+var AmountInput = /* @__PURE__ */ (0, import_react15.forwardRef)(
   function AmountInput2(props, ref) {
     const {
       value: value4,
@@ -1311,7 +1351,7 @@ var AmountInput = /* @__PURE__ */ (0, import_react14.forwardRef)(
       className,
       ...rest
     } = props;
-    const inputRef = (0, import_react14.useRef)(null);
+    const inputRef = (0, import_react15.useRef)(null);
     const m = useMessages();
     const unit = unitProp ?? m.currencyUnit ?? "\uC6D0";
     const label6 = labelProp ?? m.amount ?? "\uAE08\uC561";
@@ -1361,7 +1401,7 @@ var AmountInput = /* @__PURE__ */ (0, import_react14.forwardRef)(
 // src/components/Avatar/Avatar.tsx
 var RadixAvatar = __toESM(require("@radix-ui/react-avatar"), 1);
 var import_icons6 = require("@bestow-ui/icons");
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/Avatar/Avatar.css.ts
 var import_createRuntimeFn7 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -1376,7 +1416,7 @@ function getInitials(name) {
   const first = (word) => Array.from(word)[0] ?? "";
   return (first(a) + first(b)).toUpperCase();
 }
-var Avatar = /* @__PURE__ */ (0, import_react15.forwardRef)(function Avatar2({ src, alt, name, fallback: fallback2, size, shape, className, ...rest }, ref) {
+var Avatar = /* @__PURE__ */ (0, import_react16.forwardRef)(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) : "";
@@ -1387,7 +1427,7 @@ var Avatar = /* @__PURE__ */ (0, import_react15.forwardRef)(function Avatar2({ s
 });
 
 // src/components/Badge/Badge.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/components/Badge/Badge.css.ts
 var import_createRuntimeFn8 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -1396,7 +1436,7 @@ var icon3 = "_1295cfng";
 
 // src/components/Badge/Badge.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Badge = /* @__PURE__ */ (0, import_react16.forwardRef)(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
+var Badge = /* @__PURE__ */ (0, import_react17.forwardRef)(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
     startIcon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: icon3, children: startIcon }),
     children
@@ -1404,12 +1444,12 @@ var Badge = /* @__PURE__ */ (0, import_react16.forwardRef)(function Badge2({ var
 });
 
 // src/components/Breadcrumb/Breadcrumb.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_icons8 = require("@bestow-ui/icons");
 
 // src/components/Link/Link.tsx
 var import_react_slot = require("@radix-ui/react-slot");
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_icons7 = require("@bestow-ui/icons");
 
 // src/components/Link/Link.css.ts
@@ -1422,7 +1462,7 @@ var import_jsx_runtime16 = (
   // Slot 의 props 타입은 HTMLElement 기준이라 <a> 전용 속성(target·rel 등)은 그대로 넘기도록 단언한다
   require("react/jsx-runtime")
 );
-var Link = /* @__PURE__ */ (0, import_react17.forwardRef)(function Link2({
+var Link = /* @__PURE__ */ (0, import_react18.forwardRef)(function Link2({
   as: Component = "a",
   asChild,
   color,
@@ -1470,7 +1510,7 @@ var separator = "_18t8ztt4";
 
 // src/components/Breadcrumb/Breadcrumb.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var Breadcrumb = /* @__PURE__ */ (0, import_react18.forwardRef)(function Breadcrumb2({ items: items2, linkAs, separator: separator3, "aria-label": ariaLabelProp, className, ...rest }, ref) {
+var Breadcrumb = /* @__PURE__ */ (0, import_react19.forwardRef)(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__ */ (0, import_jsx_runtime17.jsx)(import_icons8.ChevronRightIcon, { size: 14 });
@@ -1484,11 +1524,11 @@ var Breadcrumb = /* @__PURE__ */ (0, import_react18.forwardRef)(function Breadcr
 });
 
 // src/components/BusinessNumberInput/BusinessNumberInput.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var sanitize = (input5) => input5.replace(/\D/g, "").slice(0, 10);
 var isDigit2 = (char) => /\d/.test(char);
-var BusinessNumberInput = /* @__PURE__ */ (0, import_react19.forwardRef)(
+var BusinessNumberInput = /* @__PURE__ */ (0, import_react20.forwardRef)(
   function BusinessNumberInput2(props, ref) {
     const {
       value: value4,
@@ -1504,12 +1544,12 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react19.forwardRef)(
       onKeyDown,
       ...rest
     } = props;
-    const inputRef = (0, import_react19.useRef)(null);
+    const inputRef = (0, import_react20.useRef)(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] = (0, import_react19.useState)(false);
+    const [touched, setTouched] = (0, import_react20.useState)(false);
     const field3 = useFormattedInput({
       isControlled: "value" in props,
       value: value4,
@@ -1549,53 +1589,23 @@ var BusinessNumberInput = /* @__PURE__ */ (0, import_react19.forwardRef)(
 );
 
 // src/components/Calendar/Calendar.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_icons9 = require("@bestow-ui/icons");
 
-// src/utils/date.ts
-var pad = (n) => String(n).padStart(2, "0");
-function toISODate(date) {
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-}
-function parseISODate(value4) {
-  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value4 ?? "");
-  if (!m) return null;
-  const [y, mo, d] = [Number(m[1]), Number(m[2]), Number(m[3])];
-  const date = new Date(y, mo - 1, d);
-  return date.getFullYear() === y && date.getMonth() === mo - 1 && date.getDate() === d ? date : null;
-}
-function addDays(date, days) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
-}
-function addMonths(date, months) {
-  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
-  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
-  return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), lastDay));
-}
-function isSameDay(a, b) {
-  return !!a && !!b && toISODate(a) === toISODate(b);
-}
-function isSameMonth(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
-}
-function compareDays(a, b) {
-  const x = toISODate(a);
-  const y = toISODate(b);
-  return x < y ? -1 : x > y ? 1 : 0;
-}
-function getCalendarWeeks(year, month) {
-  const first = new Date(year, month, 1);
-  const start = addDays(first, -first.getDay());
-  return Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_2, day2) => addDays(start, week * 7 + day2)));
-}
-var KOREAN_WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
-function formatKoreanDate(date, withWeekday = true) {
-  const base = `${date.getFullYear()}\uB144 ${date.getMonth() + 1}\uC6D4 ${date.getDate()}\uC77C`;
-  return withWeekday ? `${base} ${KOREAN_WEEKDAYS[date.getDay()]}\uC694\uC77C` : base;
+// src/utils/useIsClient.ts
+var import_react21 = require("react");
+var subscribeNothing = () => () => {
+};
+function useIsClient() {
+  return (0, import_react21.useSyncExternalStore)(
+    subscribeNothing,
+    () => true,
+    () => false
+  );
 }
 
 // src/components/IconButton/IconButton.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // src/components/IconButton/IconButton.css.ts
 var import_createRuntimeFn10 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -1603,7 +1613,7 @@ var iconButton = /* @__PURE__ */ (0, import_createRuntimeFn10.createRuntimeFn)({
 
 // src/components/IconButton/IconButton.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var IconButton = /* @__PURE__ */ (0, import_react20.forwardRef)(function IconButton2({ variant = "ghost", color = "neutral", size, loading: loading2, className, children, ...rest }, ref) {
+var IconButton = /* @__PURE__ */ (0, import_react22.forwardRef)(function IconButton2({ variant = "ghost", color = "neutral", size, loading: loading2, className, children, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     Button,
     {
@@ -1630,7 +1640,7 @@ var weekday = "_1qyq67b4";
 
 // src/components/Calendar/Calendar.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Calendar = /* @__PURE__ */ (0, import_react21.forwardRef)(function Calendar2(props, ref) {
+var Calendar = /* @__PURE__ */ (0, import_react23.forwardRef)(function Calendar2(props, ref) {
   const {
     value: value4,
     defaultValue,
@@ -1650,12 +1660,13 @@ var Calendar = /* @__PURE__ */ (0, import_react21.forwardRef)(function Calendar2
   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 = (0, import_react21.useId)();
-  const gridRef = (0, import_react21.useRef)(null);
+  const headingId = (0, import_react23.useId)();
+  const gridRef = (0, import_react23.useRef)(null);
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react21.useState)(defaultValue ?? "");
+  const [innerValue, setInnerValue] = (0, import_react23.useState)(defaultValue ?? "");
   const selected = parseISODate(isControlled ? value4 : innerValue);
-  const today = parseISODate(todayProp) ?? /* @__PURE__ */ new Date();
+  const isClient = useIsClient();
+  const today = parseISODate(todayProp) ?? (isClient ? /* @__PURE__ */ new Date() : null);
   const minDate = parseISODate(min);
   const maxDate = parseISODate(max);
   const clamp = (date) => {
@@ -1664,15 +1675,17 @@ var Calendar = /* @__PURE__ */ (0, import_react21.forwardRef)(function Calendar2
     return date;
   };
   const isDisabled = (date) => minDate !== null && compareDays(date, minDate) < 0 || maxDate !== null && compareDays(date, maxDate) > 0 || !!isDateDisabled?.(date);
-  const [focused, setFocused] = (0, import_react21.useState)(() => clamp(selected ?? today));
-  const moveFocus = (0, import_react21.useRef)(initialFocus ?? false);
+  const [focusedState, setFocused] = (0, import_react23.useState)(null);
+  const base = selected ?? today;
+  const focused = focusedState ?? (base ? clamp(base) : null);
+  const moveFocus = (0, import_react23.useRef)(initialFocus ?? false);
   const selectedIso = selected ? toISODate(selected) : "";
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const date = parseISODate(selectedIso);
     if (date) setFocused((prev) => isSameDay(prev, date) ? prev : date);
   }, [selectedIso]);
-  (0, import_react21.useEffect)(() => {
-    if (!moveFocus.current) return;
+  (0, import_react23.useEffect)(() => {
+    if (!moveFocus.current || !focused) return;
     moveFocus.current = false;
     gridRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
   }, [focused]);
@@ -1688,6 +1701,7 @@ var Calendar = /* @__PURE__ */ (0, import_react21.forwardRef)(function Calendar2
     setFocused(date);
   };
   const handleKeyDown = (event) => {
+    if (!focused) return;
     const moves = {
       ArrowLeft: () => addDays(focused, -1),
       ArrowRight: () => addDays(focused, 1),
@@ -1705,13 +1719,11 @@ var Calendar = /* @__PURE__ */ (0, import_react21.forwardRef)(function Calendar2
     }
   };
   const visible = focused;
-  const weeks = getCalendarWeeks(visible.getFullYear(), visible.getMonth()).filter(
+  const weeks = visible ? getCalendarWeeks(visible.getFullYear(), visible.getMonth()).filter(
     (week) => week.some((date) => isSameMonth(date, visible))
-  );
-  const prevMonth = addMonths(visible, -1);
-  const nextMonth = addMonths(visible, 1);
-  const canPrev = !minDate || compareDays(new Date(visible.getFullYear(), visible.getMonth(), 0), minDate) >= 0;
-  const canNext = !maxDate || compareDays(new Date(visible.getFullYear(), visible.getMonth() + 1, 1), maxDate) <= 0;
+  ) : [];
+  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__ */ (0, import_jsx_runtime20.jsxs)("div", { ref, className: cx(root6, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: header3, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -1720,18 +1732,18 @@ var Calendar = /* @__PURE__ */ (0, import_react21.forwardRef)(function Calendar2
           "aria-label": prevMonthLabel,
           size: "sm",
           disabled: !canPrev,
-          onClick: () => setFocused(clamp(prevMonth)),
+          onClick: () => visible && setFocused(clamp(addMonths(visible, -1))),
           children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons9.ChevronLeftIcon, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { id: headingId, className: heading, "aria-live": "polite", children: m.monthTitle?.(visible.getFullYear(), visible.getMonth() + 1) ?? `${visible.getFullYear()}\uB144 ${visible.getMonth() + 1}\uC6D4` }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsx)(
         IconButton,
         {
           "aria-label": nextMonthLabel,
           size: "sm",
           disabled: !canNext,
-          onClick: () => setFocused(clamp(nextMonth)),
+          onClick: () => visible && setFocused(clamp(addMonths(visible, 1))),
           children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons9.ChevronRightIcon, {})
         }
       )
@@ -1740,7 +1752,8 @@ var Calendar = /* @__PURE__ */ (0, import_react21.forwardRef)(function Calendar2
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tr", { children: weekdaysShort.map((name, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("th", { scope: "col", abbr: weekdaysLong[index], className: weekday, "data-weekday": index, children: name }, index)) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children: weeks.map((week) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tr", { children: week.map((date) => {
         const iso = toISODate(date);
-        if (!isSameMonth(date, visible)) return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("td", { role: "gridcell", className: cell }, iso);
+        if (!visible || !isSameMonth(date, visible))
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("td", { role: "gridcell", className: cell }, iso);
         const isSelected = isSameDay(date, selected);
         const isToday = isSameDay(date, today);
         const holiday = !!isHoliday?.(date);
@@ -1774,7 +1787,7 @@ var Calendar = /* @__PURE__ */ (0, import_react21.forwardRef)(function Calendar2
 });
 
 // src/components/Card/Card.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 
 // src/components/Card/Card.css.ts
 var import_createRuntimeFn11 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -1785,22 +1798,22 @@ var header4 = "dnuf1u8";
 
 // src/components/Card/Card.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var Card = /* @__PURE__ */ (0, import_react22.forwardRef)(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
+var Card = /* @__PURE__ */ (0, import_react24.forwardRef)(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
 });
-var CardHeader = /* @__PURE__ */ (0, import_react22.forwardRef)(function CardHeader2({ className, ...rest }, ref) {
+var CardHeader = /* @__PURE__ */ (0, import_react24.forwardRef)(function CardHeader2({ className, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: cx(header4, className), ...rest });
 });
-var CardBody = /* @__PURE__ */ (0, import_react22.forwardRef)(function CardBody2({ className, ...rest }, ref) {
+var CardBody = /* @__PURE__ */ (0, import_react24.forwardRef)(function CardBody2({ className, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: cx(body2, className), ...rest });
 });
-var CardFooter = /* @__PURE__ */ (0, import_react22.forwardRef)(function CardFooter2({ className, ...rest }, ref) {
+var CardFooter = /* @__PURE__ */ (0, import_react24.forwardRef)(function CardFooter2({ className, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: cx(footer2, className), ...rest });
 });
 
 // src/components/Combobox/Combobox.tsx
 var Popover = __toESM(require("@radix-ui/react-popover"), 1);
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_icons10 = require("@bestow-ui/icons");
 
 // src/components/Select/Select.css.ts
@@ -1820,7 +1833,7 @@ var toggle2 = "c2pbq70";
 // src/components/Combobox/Combobox.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
-var Combobox = /* @__PURE__ */ (0, import_react23.forwardRef)(function Combobox2(props, ref) {
+var Combobox = /* @__PURE__ */ (0, import_react25.forwardRef)(function Combobox2(props, ref) {
   const {
     options,
     value: value4,
@@ -1845,23 +1858,23 @@ var Combobox = /* @__PURE__ */ (0, import_react23.forwardRef)(function Combobox2
   const m = useMessages();
   const emptyMessage = emptyMessageProp ?? m.noResults ?? "\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694";
   const toggleLabel = toggleLabelProp ?? m.openList ?? "\uBAA9\uB85D \uC5F4\uAE30";
-  const generatedId = (0, import_react23.useId)();
+  const generatedId = (0, import_react25.useId)();
   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 = (0, import_react23.useRef)(null);
-  const anchorRef = (0, import_react23.useRef)(null);
+  const inputRef = (0, import_react25.useRef)(null);
+  const anchorRef = (0, import_react25.useRef)(null);
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react23.useState)(defaultValue);
+  const [innerValue, setInnerValue] = (0, import_react25.useState)(defaultValue);
   const selectedValue = isControlled ? value4 : innerValue;
   const selectedOption = options.find((o) => o.value === selectedValue);
-  const [open, setOpen] = (0, import_react23.useState)(false);
-  const [query, setQuery] = (0, import_react23.useState)(null);
-  const [activeIndex, setActiveIndex] = (0, import_react23.useState)(-1);
-  const filtered = (0, import_react23.useMemo)(() => query ? options.filter((o) => filter(o, query)) : options, [options, filter, query]);
+  const [open, setOpen] = (0, import_react25.useState)(false);
+  const [query, setQuery] = (0, import_react25.useState)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react25.useState)(-1);
+  const filtered = (0, import_react25.useMemo)(() => 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;
@@ -1927,7 +1940,7 @@ var Combobox = /* @__PURE__ */ (0, import_react23.forwardRef)(function Combobox2
         break;
     }
   };
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!open || activeIndex < 0) return;
     document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: "nearest" });
   }, [open, activeIndex]);
@@ -2055,13 +2068,13 @@ var Combobox = /* @__PURE__ */ (0, import_react23.forwardRef)(function Combobox2
 });
 
 // src/components/DatePicker/DatePicker.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 var import_icons12 = require("@bestow-ui/icons");
 
 // src/components/Popover/Popover.tsx
 var RadixPopover = __toESM(require("@radix-ui/react-popover"), 1);
 var import_icons11 = require("@bestow-ui/icons");
-var import_react24 = require("react");
+var import_react26 = require("react");
 
 // src/components/Popover/Popover.css.ts
 var arrow = "_1j99p8x4";
@@ -2091,7 +2104,7 @@ function Popover2({
 }) {
   const portal2 = usePortalProps();
   const m = useMessages();
-  const titleId = (0, import_react24.useId)();
+  const titleId = (0, import_react26.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadixPopover.Trigger, { asChild: true, children }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadixPopover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
@@ -2125,7 +2138,7 @@ var import_jsx_runtime24 = require("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__ */ (0, import_react25.forwardRef)(
+var DatePicker = /* @__PURE__ */ (0, import_react27.forwardRef)(
   function DatePicker2(props, ref) {
     const {
       value: value4,
@@ -2151,17 +2164,17 @@ var DatePicker = /* @__PURE__ */ (0, import_react25.forwardRef)(
       id,
       className
     } = props;
-    const inputRef = (0, import_react25.useRef)(null);
+    const inputRef = (0, import_react27.useRef)(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] = (0, import_react25.useState)(false);
-    const [touched, setTouched] = (0, import_react25.useState)(false);
+    const [open, setOpen] = (0, import_react27.useState)(false);
+    const [touched, setTouched] = (0, import_react27.useState)(false);
     const isControlled = "value" in props;
-    const lastEmitted = (0, import_react25.useRef)(isControlled ? value4 ?? "" : defaultValue ?? "");
+    const lastEmitted = (0, import_react27.useRef)(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)}` : "";
@@ -2186,7 +2199,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react25.forwardRef)(
     });
     const textIso = toIso(field3.raw);
     const { setRaw } = field3;
-    (0, import_react25.useEffect)(() => {
+    (0, import_react27.useEffect)(() => {
       if (!isControlled) return;
       const next = value4 ?? "";
       lastEmitted.current = next;
@@ -2258,7 +2271,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react25.forwardRef)(
 );
 
 // src/components/Divider/Divider.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 
 // src/components/Divider/Divider.css.ts
 var import_createRuntimeFn12 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -2268,7 +2281,7 @@ var line = "_1t3gq8v4";
 
 // src/components/Divider/Divider.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var Divider = /* @__PURE__ */ (0, import_react26.forwardRef)(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
+var Divider = /* @__PURE__ */ (0, import_react28.forwardRef)(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
   if (children && orientation === "horizontal") {
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref, className: cx(labeled, className), ...rest, children: [
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: line, "aria-hidden": true }),
@@ -2350,7 +2363,7 @@ var DrawerClose = Dialog2.Close;
 
 // src/components/DropdownMenu/DropdownMenu.tsx
 var RadixMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
-var import_react27 = require("react");
+var import_react29 = require("react");
 
 // src/components/DropdownMenu/DropdownMenu.css.ts
 var content9 = "_1d7ahux0";
@@ -2366,7 +2379,7 @@ var import_jsx_runtime27 = require("react/jsx-runtime");
 var DropdownMenu = RadixMenu.Root;
 var DropdownMenuTrigger = RadixMenu.Trigger;
 var DropdownMenuGroup = RadixMenu.Group;
-var DropdownMenuContent = /* @__PURE__ */ (0, import_react27.forwardRef)(
+var DropdownMenuContent = /* @__PURE__ */ (0, import_react29.forwardRef)(
   function DropdownMenuContent2({ className, style, side = "bottom", align = "start", sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
     const portal2 = usePortalProps();
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -2384,11 +2397,8 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react27.forwardRef)(
     ) });
   }
 );
-var DropdownMenuItem = /* @__PURE__ */ (0, import_react27.forwardRef)(
+var DropdownMenuItem = /* @__PURE__ */ (0, import_react29.forwardRef)(
   function DropdownMenuItem2({ icon: icon6, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
-    if (color === "default") {
-      warnOnce('DropdownMenuItem \uC758 color="default" \uB294 deprecated \uC608\uC694. color="neutral" \uC744 \uC4F0\uC138\uC694 (1.0 \uC5D0\uC11C \uC81C\uAC70).');
-    }
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(RadixMenu.Item, { ref, className: cx(item5, color === "danger" && danger, className), ...rest, children: [
       icon6 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: icon5, "aria-hidden": true, children: icon6 }),
       children,
@@ -2396,12 +2406,12 @@ var DropdownMenuItem = /* @__PURE__ */ (0, import_react27.forwardRef)(
     ] });
   }
 );
-var DropdownMenuLabel = /* @__PURE__ */ (0, import_react27.forwardRef)(
+var DropdownMenuLabel = /* @__PURE__ */ (0, import_react29.forwardRef)(
   function DropdownMenuLabel2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixMenu.Label, { ref, className: cx(label2, className), ...rest });
   }
 );
-var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react27.forwardRef)(
+var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react29.forwardRef)(
   function DropdownMenuSeparator2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixMenu.Separator, { ref, className: cx(separator2, className), ...rest });
   }
@@ -2409,7 +2419,7 @@ var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react27.forwardRef)(
 
 // src/components/Pagination/Pagination.tsx
 var import_icons14 = require("@bestow-ui/icons");
-var import_react28 = require("react");
+var import_react30 = require("react");
 
 // src/components/Pagination/getPaginationItems.ts
 var range = (start, end) => end < start ? [] : Array.from({ length: end - start + 1 }, (_, i) => start + i);
@@ -2443,7 +2453,7 @@ var list3 = "_1iraoak0";
 
 // src/components/Pagination/Pagination.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var Pagination = /* @__PURE__ */ (0, import_react28.forwardRef)(function Pagination2({
+var Pagination = /* @__PURE__ */ (0, import_react30.forwardRef)(function Pagination2({
   totalPages,
   page: pageProp,
   defaultPage = 1,
@@ -2456,7 +2466,7 @@ var Pagination = /* @__PURE__ */ (0, import_react28.forwardRef)(function Paginat
   "aria-label": ariaLabelProp,
   ...rest
 }, ref) {
-  const [uncontrolledPage, setUncontrolledPage] = (0, import_react28.useState)(defaultPage);
+  const [uncontrolledPage, setUncontrolledPage] = (0, import_react30.useState)(defaultPage);
   const m = useMessages();
   const ariaLabel = ariaLabelProp ?? m.pagination ?? "\uD398\uC774\uC9C0 \uD0D0\uC0C9";
   const getItemLabel = getItemLabelProp ?? ((type, n) => type === "previous" ? m.paginationPrevious ?? "\uC774\uC804 \uD398\uC774\uC9C0" : type === "next" ? m.paginationNext ?? "\uB2E4\uC74C \uD398\uC774\uC9C0" : m.paginationPage?.(n) ?? `${n} \uD398\uC774\uC9C0`);
@@ -2508,14 +2518,14 @@ var Pagination = /* @__PURE__ */ (0, import_react28.forwardRef)(function Paginat
 });
 
 // src/components/PhoneNumberInput/PhoneNumberInput.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime29 = require("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__ */ (0, import_react29.forwardRef)(
+var PhoneNumberInput = /* @__PURE__ */ (0, import_react31.forwardRef)(
   function PhoneNumberInput2(props, ref) {
     const {
       value: value4,
@@ -2526,7 +2536,7 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react29.forwardRef)(
       onKeyDown,
       ...rest
     } = props;
-    const inputRef = (0, import_react29.useRef)(null);
+    const inputRef = (0, import_react31.useRef)(null);
     const m = useMessages();
     const label6 = labelProp ?? m.phoneNumber ?? "\uD734\uB300\uD3F0 \uBC88\uD638";
     const field3 = useFormattedInput({
@@ -2561,7 +2571,7 @@ var PhoneNumberInput = /* @__PURE__ */ (0, import_react29.forwardRef)(
 );
 
 // src/components/Progress/Progress.tsx
-var import_react30 = require("react");
+var import_react32 = require("react");
 
 // src/components/Progress/Progress.css.ts
 var import_createRuntimeFn15 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -2575,7 +2585,7 @@ var value2 = "_1tvkq003";
 // src/components/Progress/Progress.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var defaultFormat = (value4, max) => `${Math.round(value4 / max * 100)}%`;
-var Progress = /* @__PURE__ */ (0, import_react30.forwardRef)(function Progress2({
+var Progress = /* @__PURE__ */ (0, import_react32.forwardRef)(function Progress2({
   value: value4,
   max = 100,
   label: label6,
@@ -2587,7 +2597,7 @@ var Progress = /* @__PURE__ */ (0, import_react30.forwardRef)(function Progress2
   className,
   ...rest
 }, ref) {
-  const labelId = (0, import_react30.useId)();
+  const labelId = (0, import_react32.useId)();
   const isIndeterminate = value4 === void 0 || value4 === null;
   const safeMax = max > 0 ? max : 100;
   const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value4));
@@ -2623,7 +2633,7 @@ var Progress = /* @__PURE__ */ (0, import_react30.forwardRef)(function Progress2
 
 // src/components/RadioGroup/RadioGroup.tsx
 var RadixRadioGroup = __toESM(require("@radix-ui/react-radio-group"), 1);
-var import_react31 = require("react");
+var import_react33 = require("react");
 
 // src/components/RadioGroup/RadioGroup.css.ts
 var import_createRuntimeFn16 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -2638,7 +2648,7 @@ var text = "_1w9iwjmb";
 
 // src/components/RadioGroup/RadioGroup.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var RadioGroup = /* @__PURE__ */ (0, import_react31.forwardRef)(function RadioGroup2(props, ref) {
+var RadioGroup = /* @__PURE__ */ (0, import_react33.forwardRef)(function RadioGroup2(props, ref) {
   const {
     options,
     value: value4,
@@ -2657,7 +2667,7 @@ var RadioGroup = /* @__PURE__ */ (0, import_react31.forwardRef)(function RadioGr
     className
   } = props;
   const isControlled = "value" in props;
-  const generatedId = (0, import_react31.useId)();
+  const generatedId = (0, import_react33.useId)();
   const baseId = id ?? generatedId;
   const labelId = label6 ? `${baseId}-label` : void 0;
   const helperId = helperText3 ? `${baseId}-helper` : void 0;
@@ -2713,10 +2723,10 @@ var RadioGroup = /* @__PURE__ */ (0, import_react31.forwardRef)(function RadioGr
 
 // src/components/Select/Select.tsx
 var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_icons15 = require("@bestow-ui/icons");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var Select = /* @__PURE__ */ (0, import_react32.forwardRef)(function Select2(props, ref) {
+var Select = /* @__PURE__ */ (0, import_react34.forwardRef)(function Select2(props, ref) {
   const {
     options,
     value: value4,
@@ -2736,7 +2746,7 @@ var Select = /* @__PURE__ */ (0, import_react32.forwardRef)(function Select2(pro
     className
   } = props;
   const isControlled = "value" in props;
-  const generatedId = (0, import_react32.useId)();
+  const generatedId = (0, import_react34.useId)();
   const triggerId = id ?? generatedId;
   const helperId = helperText3 ? `${triggerId}-helper` : void 0;
   const portal2 = usePortalProps();
@@ -2803,7 +2813,7 @@ var Select = /* @__PURE__ */ (0, import_react32.forwardRef)(function Select2(pro
 
 // src/components/Skeleton/Skeleton.tsx
 var import_dynamic2 = require("@vanilla-extract/dynamic");
-var import_react33 = require("react");
+var import_react35 = require("react");
 
 // src/components/Skeleton/Skeleton.css.ts
 var import_createRuntimeFn17 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -2815,7 +2825,7 @@ var width = "var(--_1s8datd0)";
 // src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var toCss = (value4) => typeof value4 === "number" ? `${value4}px` : value4;
-var Skeleton = /* @__PURE__ */ (0, import_react33.forwardRef)(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
+var Skeleton = /* @__PURE__ */ (0, import_react35.forwardRef)(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) {
@@ -2852,7 +2862,7 @@ var Skeleton = /* @__PURE__ */ (0, import_react33.forwardRef)(function Skeleton2
 
 // src/components/Slider/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"), 1);
-var import_react34 = require("react");
+var import_react36 = require("react");
 
 // src/components/Slider/Slider.css.ts
 var import_createRuntimeFn18 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -2868,7 +2878,7 @@ var value3 = "_126mzjm3";
 
 // src/components/Slider/Slider.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Slider = /* @__PURE__ */ (0, import_react34.forwardRef)(function Slider2(props, ref) {
+var Slider = /* @__PURE__ */ (0, import_react36.forwardRef)(function Slider2(props, ref) {
   const {
     value: value4,
     defaultValue,
@@ -2889,12 +2899,12 @@ var Slider = /* @__PURE__ */ (0, import_react34.forwardRef)(function Slider2(pro
   } = props;
   const m = useMessages();
   const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
-  const generatedId = (0, import_react34.useId)();
+  const generatedId = (0, import_react36.useId)();
   const baseId = id ?? generatedId;
   const labelId = `${baseId}-label`;
   const helperId = `${baseId}-helper`;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = (0, import_react34.useState)(defaultValue ?? [min]);
+  const [innerValue, setInnerValue] = (0, import_react36.useState)(defaultValue ?? [min]);
   const current2 = isControlled ? value4 ?? [min] : innerValue;
   const isRange = current2.length > 1;
   const handleChange = (next) => {
@@ -2947,7 +2957,7 @@ var Slider = /* @__PURE__ */ (0, import_react34.forwardRef)(function Slider2(pro
 });
 
 // src/components/Stack/Stack.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 
 // src/components/Stack/Stack.css.ts
 var import_createRuntimeFn19 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -2955,13 +2965,13 @@ var stack = /* @__PURE__ */ (0, import_createRuntimeFn19.createRuntimeFn)({ defa
 
 // src/components/Stack/Stack.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var Stack = /* @__PURE__ */ (0, import_react35.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
+var Stack = /* @__PURE__ */ (0, import_react37.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Component, { ref, className: cx(stack({ direction, gap, align, justify, wrap }), className), ...rest });
 });
 
 // src/components/Switch/Switch.tsx
 var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
-var import_react36 = require("react");
+var import_react38 = require("react");
 
 // src/components/Switch/Switch.css.ts
 var import_createRuntimeFn20 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -2972,8 +2982,8 @@ var track3 = /* @__PURE__ */ (0, import_createRuntimeFn20.createRuntimeFn)({ def
 
 // src/components/Switch/Switch.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var Switch = /* @__PURE__ */ (0, import_react36.forwardRef)(function Switch2({ label: label6, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
-  const generatedId = (0, import_react36.useId)();
+var Switch = /* @__PURE__ */ (0, import_react38.forwardRef)(function Switch2({ label: label6, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
+  const generatedId = (0, import_react38.useId)();
   const switchId = id ?? generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: cx(root9({ size }), className), "data-disabled": disabled || void 0, children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -2993,7 +3003,7 @@ var Switch = /* @__PURE__ */ (0, import_react36.forwardRef)(function Switch2({ l
 });
 
 // src/components/Table/Table.tsx
-var import_react37 = require("react");
+var import_react39 = require("react");
 var import_icons16 = require("@bestow-ui/icons");
 
 // src/components/Table/Table.css.ts
@@ -3015,9 +3025,9 @@ var table = "l3ploy1";
 
 // src/components/Table/Table.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var TableSizeContext = /* @__PURE__ */ (0, import_react37.createContext)("md");
-var TableSectionContext = /* @__PURE__ */ (0, import_react37.createContext)("body");
-var Table = /* @__PURE__ */ (0, import_react37.forwardRef)(function Table2({
+var TableSizeContext = /* @__PURE__ */ (0, import_react39.createContext)("md");
+var TableSectionContext = /* @__PURE__ */ (0, import_react39.createContext)("body");
+var Table = /* @__PURE__ */ (0, import_react39.forwardRef)(function Table2({
   size = "md",
   striped: striped2,
   stickyHeader: stickyHeader2,
@@ -3029,7 +3039,7 @@ var Table = /* @__PURE__ */ (0, import_react37.forwardRef)(function Table2({
   children,
   ...rest
 }, ref) {
-  const captionId = (0, import_react37.useId)();
+  const captionId = (0, import_react39.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
@@ -3055,27 +3065,27 @@ var Table = /* @__PURE__ */ (0, import_react37.forwardRef)(function Table2({
     }
   ) });
 });
-var TableHeader = /* @__PURE__ */ (0, import_react37.forwardRef)(
+var TableHeader = /* @__PURE__ */ (0, import_react39.forwardRef)(
   function TableHeader2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("thead", { ref, className: cx(header9, className), ...rest }) });
   }
 );
-var TableBody = /* @__PURE__ */ (0, import_react37.forwardRef)(
+var TableBody = /* @__PURE__ */ (0, import_react39.forwardRef)(
   function TableBody2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tbody", { ref, className: cx(body4, className), ...rest }) });
   }
 );
-var TableFooter = /* @__PURE__ */ (0, import_react37.forwardRef)(
+var TableFooter = /* @__PURE__ */ (0, import_react39.forwardRef)(
   function TableFooter2({ className, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tfoot", { ref, className: cx(footer4, className), ...rest }) });
   }
 );
-var TableRow = /* @__PURE__ */ (0, import_react37.forwardRef)(function TableRow2({ selected, className, ...rest }, ref) {
+var TableRow = /* @__PURE__ */ (0, import_react39.forwardRef)(function TableRow2({ selected, className, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...rest });
 });
-var TableHead = /* @__PURE__ */ (0, import_react37.forwardRef)(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
-  const size = (0, import_react37.useContext)(TableSizeContext);
-  const section = (0, import_react37.useContext)(TableSectionContext);
+var TableHead = /* @__PURE__ */ (0, import_react39.forwardRef)(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
+  const size = (0, import_react39.useContext)(TableSizeContext);
+  const section = (0, import_react39.useContext)(TableSectionContext);
   const sortable = onSort !== void 0;
   const direction = sortDirection ?? "none";
   const SortIcon = direction === "descending" ? import_icons16.ArrowDownIcon : import_icons16.ArrowUpIcon;
@@ -3098,9 +3108,9 @@ var TableHead = /* @__PURE__ */ (0, import_react37.forwardRef)(function TableHea
     }
   );
 });
-var TableCell = /* @__PURE__ */ (0, import_react37.forwardRef)(function TableCell2({ align, className, ...rest }, ref) {
-  const size = (0, import_react37.useContext)(TableSizeContext);
-  const section = (0, import_react37.useContext)(TableSectionContext);
+var TableCell = /* @__PURE__ */ (0, import_react39.forwardRef)(function TableCell2({ align, className, ...rest }, ref) {
+  const size = (0, import_react39.useContext)(TableSizeContext);
+  const section = (0, import_react39.useContext)(TableSectionContext);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "td",
     {
@@ -3113,7 +3123,7 @@ var TableCell = /* @__PURE__ */ (0, import_react37.forwardRef)(function TableCel
 
 // src/components/Tabs/Tabs.tsx
 var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
-var import_react38 = require("react");
+var import_react40 = require("react");
 
 // src/components/Tabs/Tabs.css.ts
 var import_createRuntimeFn22 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -3123,25 +3133,25 @@ var trigger3 = /* @__PURE__ */ (0, import_createRuntimeFn22.createRuntimeFn)({ d
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var TabsStyleContext = /* @__PURE__ */ (0, import_react38.createContext)({ variant: "line", size: "md" });
-var Tabs = /* @__PURE__ */ (0, import_react38.forwardRef)(function Tabs2({ variant = "line", size = "md", ...props }, ref) {
+var TabsStyleContext = /* @__PURE__ */ (0, import_react40.createContext)({ variant: "line", size: "md" });
+var Tabs = /* @__PURE__ */ (0, import_react40.forwardRef)(function Tabs2({ variant = "line", size = "md", ...props }, ref) {
   const controlled = "value" in props ? { value: props.value ?? "" } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(RadixTabs.Root, { ref, ...props, ...controlled }) });
 });
-var TabsList = /* @__PURE__ */ (0, import_react38.forwardRef)(function TabsList2({ className, ...rest }, ref) {
-  const { variant } = (0, import_react38.useContext)(TabsStyleContext);
+var TabsList = /* @__PURE__ */ (0, import_react40.forwardRef)(function TabsList2({ className, ...rest }, ref) {
+  const { variant } = (0, import_react40.useContext)(TabsStyleContext);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(RadixTabs.List, { ref, className: cx(list4({ variant }), className), ...rest });
 });
-var TabsTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)(function TabsTrigger2({ className, ...rest }, ref) {
-  const { variant, size } = (0, import_react38.useContext)(TabsStyleContext);
+var TabsTrigger = /* @__PURE__ */ (0, import_react40.forwardRef)(function TabsTrigger2({ className, ...rest }, ref) {
+  const { variant, size } = (0, import_react40.useContext)(TabsStyleContext);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
 });
-var TabsContent = /* @__PURE__ */ (0, import_react38.forwardRef)(function TabsContent2({ className, ...rest }, ref) {
+var TabsContent = /* @__PURE__ */ (0, import_react40.forwardRef)(function TabsContent2({ className, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
 });
 
 // src/components/Textarea/Textarea.tsx
-var import_react39 = require("react");
+var import_react41 = require("react");
 
 // src/components/Textarea/Textarea.css.ts
 var import_createRuntimeFn23 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -3153,8 +3163,7 @@ var textarea = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ d
 
 // src/components/Textarea/Textarea.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react39.useLayoutEffect : import_react39.useEffect;
-var Textarea = /* @__PURE__ */ (0, import_react39.forwardRef)(function Textarea2({
+var Textarea = /* @__PURE__ */ (0, import_react41.forwardRef)(function Textarea2({
   label: label6,
   helperText: helperText3,
   error,
@@ -3175,13 +3184,13 @@ var Textarea = /* @__PURE__ */ (0, import_react39.forwardRef)(function Textarea2
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = (0, import_react39.useId)();
+  const generatedId = (0, import_react41.useId)();
   const textareaId = id ?? generatedId;
   const helperId = helperText3 ? `${textareaId}-helper` : void 0;
-  const innerRef = (0, import_react39.useRef)(null);
-  const [uncontrolledLength, setUncontrolledLength] = (0, import_react39.useState)(() => String(defaultValue ?? "").length);
+  const innerRef = (0, import_react41.useRef)(null);
+  const [uncontrolledLength, setUncontrolledLength] = (0, import_react41.useState)(() => String(defaultValue ?? "").length);
   const length = value4 !== void 0 ? String(value4).length : uncontrolledLength;
-  const fitHeight = (0, import_react39.useCallback)(() => {
+  const fitHeight = (0, import_react41.useCallback)(() => {
     const el = innerRef.current;
     if (!autoResize || !el) return;
     el.style.height = "auto";
@@ -3230,7 +3239,7 @@ var Textarea = /* @__PURE__ */ (0, import_react39.forwardRef)(function Textarea2
 
 // src/components/Toast/Toast.tsx
 var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_icons17 = require("@bestow-ui/icons");
 
 // src/components/Toast/Toast.css.ts
@@ -3245,30 +3254,24 @@ var viewport2 = "_1g11zvx0";
 // src/components/Toast/Toast.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var REMOVE_DELAY = 500;
-var ToastContext = /* @__PURE__ */ (0, import_react40.createContext)(null);
+var ToastContext = /* @__PURE__ */ (0, import_react42.createContext)(null);
 function ToastProvider({ children, duration = 5e3, label: labelProp }) {
   const m = useMessages();
   const label6 = labelProp ?? m.notifications ?? "\uC54C\uB9BC";
-  const [toasts, setToasts] = (0, import_react40.useState)([]);
-  const nextId = (0, import_react40.useRef)(0);
+  const [toasts, setToasts] = (0, import_react42.useState)([]);
+  const nextId = (0, import_react42.useRef)(0);
   const portal2 = usePortalProps();
-  const toast2 = (0, import_react40.useCallback)(({ variant, ...options }) => {
-    if (variant !== void 0) {
-      warnOnce(
-        'toast() \uC758 variant \uB294 deprecated \uC608\uC694. color \uB97C \uC4F0\uC138\uC694 (variant "default" \u2192 color "neutral", 1.0 \uC5D0\uC11C \uC81C\uAC70).'
-      );
-    }
-    const color = options.color ?? (variant === "default" ? "neutral" : variant);
+  const toast2 = (0, import_react42.useCallback)((options) => {
     const id = nextId.current++;
-    setToasts((prev) => [...prev, { ...options, color, id, open: true }]);
+    setToasts((prev) => [...prev, { ...options, id, open: true }]);
     return id;
   }, []);
-  const dismiss = (0, import_react40.useCallback)((id) => {
+  const dismiss = (0, import_react42.useCallback)((id) => {
     const isTarget = (t) => id === void 0 || t.id === id;
     setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
     setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
   }, []);
-  const value4 = (0, import_react40.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
+  const value4 = (0, import_react42.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ToastContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
     children,
     toasts.map(({ id, open, title: title6, description: description6, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
@@ -3293,7 +3296,7 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
   ] }) });
 }
 function useToast() {
-  const context = (0, import_react40.useContext)(ToastContext);
+  const context = (0, import_react42.useContext)(ToastContext);
   if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
   return context;
 }
@@ -3342,7 +3345,7 @@ function Tooltip({
 }
 
 // src/components/Typography/Typography.tsx
-var import_react41 = require("react");
+var import_react43 = require("react");
 
 // src/components/Typography/Typography.css.ts
 var import_createRuntimeFn25 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -3361,7 +3364,7 @@ var defaultElement = {
   "body-sm": "p",
   caption: "span"
 };
-var Typography = /* @__PURE__ */ (0, import_react41.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
+var Typography = /* @__PURE__ */ (0, import_react43.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
   const Component = as ?? defaultElement[variant];
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Component,
@@ -3374,7 +3377,7 @@ var Typography = /* @__PURE__ */ (0, import_react41.forwardRef)(function Typogra
 });
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-var import_react42 = require("react");
+var import_react44 = require("react");
 
 // src/components/VerificationCodeInput/VerificationCodeInput.css.ts
 var input4 = "ea01812";
@@ -3386,7 +3389,7 @@ var timer = "ea01814";
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var formatTime = (seconds) => `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
-var VerificationCodeInput = /* @__PURE__ */ (0, import_react42.forwardRef)(
+var VerificationCodeInput = /* @__PURE__ */ (0, import_react44.forwardRef)(
   function VerificationCodeInput2(props, ref) {
     const {
       length = 6,
@@ -3413,23 +3416,23 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react42.forwardRef)(
     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 = (0, import_react42.useId)();
+    const generatedId = (0, import_react44.useId)();
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
     const statusId = `${inputId}-status`;
-    const inputRef = (0, import_react42.useRef)(null);
+    const inputRef = (0, import_react44.useRef)(null);
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = (0, import_react42.useState)(defaultValue ?? "");
+    const [innerValue, setInnerValue] = (0, import_react44.useState)(defaultValue ?? "");
     const code = (isControlled ? value4 ?? "" : innerValue).slice(0, length);
-    const [focused, setFocused] = (0, import_react42.useState)(false);
-    const [endAt, setEndAt] = (0, import_react42.useState)(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
-    const [remaining, setRemaining] = (0, import_react42.useState)(expiresIn ?? 0);
+    const [focused, setFocused] = (0, import_react44.useState)(false);
+    const [endAt, setEndAt] = (0, import_react44.useState)(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
+    const [remaining, setRemaining] = (0, import_react44.useState)(expiresIn ?? 0);
     const expired = expiresIn !== void 0 && remaining <= 0;
-    const onExpireRef = (0, import_react42.useRef)(onExpire);
-    (0, import_react42.useEffect)(() => {
+    const onExpireRef = (0, import_react44.useRef)(onExpire);
+    (0, import_react44.useEffect)(() => {
       onExpireRef.current = onExpire;
     });
-    (0, import_react42.useEffect)(() => {
+    (0, import_react44.useEffect)(() => {
       if (endAt === null) return;
       const tick = () => {
         const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
@@ -3599,7 +3602,6 @@ var VerificationCodeInput = /* @__PURE__ */ (0, import_react42.forwardRef)(
   themeClass,
   toISODate,
   useMessages,
-  usePortalClassName,
   usePortalProps,
   useTheme,
   useToast,