@bigtablet/design-system 3.4.1 → 3.5.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import './index.css';
-import * as React19 from 'react';
+import * as React15 from 'react';
 import { createContext, useRef, useState, useId, useEffect, useContext, useCallback, useMemo, Fragment, useLayoutEffect } from 'react';
 import { useSpring, animated } from '@react-spring/web';
 import { ChevronDown, ChevronRight, Globe, ChevronLeft, XCircle, AlertTriangle, CheckCircle2, Info, Search, Check, X, Image, ArrowUp, ArrowDown, ArrowUpDown, Bell, TriangleAlert } from 'lucide-react';
@@ -29,6 +29,44 @@ var cn = (...classes) => {
   }
   return classNames.join(" ");
 };
+var stack = [];
+var handleKeyDown = (e) => {
+  if (e.key !== "Escape") return;
+  const top = stack[stack.length - 1];
+  if (!top) return;
+  e.stopImmediatePropagation();
+  top();
+};
+function registerOverlay(onEscape) {
+  if (typeof document === "undefined") {
+    return () => {
+    };
+  }
+  if (stack.length === 0) {
+    document.addEventListener("keydown", handleKeyDown);
+  }
+  stack.push(onEscape);
+  let done = false;
+  return () => {
+    if (done) return;
+    done = true;
+    const index = stack.lastIndexOf(onEscape);
+    if (index !== -1) stack.splice(index, 1);
+    if (stack.length === 0) {
+      document.removeEventListener("keydown", handleKeyDown);
+    }
+  };
+}
+function useOverlayEscape(active, onEscape) {
+  const handlerRef = React15.useRef(onEscape);
+  React15.useEffect(() => {
+    handlerRef.current = onEscape;
+  });
+  React15.useEffect(() => {
+    if (!active) return;
+    return registerOverlay(() => handlerRef.current());
+  }, [active]);
+}
 var FOCUSABLE_SELECTORS = [
   "a[href]",
   "button:not([disabled])",
@@ -38,8 +76,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React19.useRef(null);
-  React19.useEffect(() => {
+  const previousActiveElement = React15.useRef(null);
+  React15.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -56,7 +94,7 @@ function useFocusTrap(containerRef, isActive) {
       wasTabIndexAdded = true;
       container.focus();
     }
-    const handleKeyDown = (e) => {
+    const handleKeyDown2 = (e) => {
       if (e.key !== "Tab") return;
       const focusableElements2 = getFocusableElements();
       if (focusableElements2.length === 0) {
@@ -77,9 +115,9 @@ function useFocusTrap(containerRef, isActive) {
         }
       }
     };
-    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown2);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keydown", handleKeyDown2);
       if (wasTabIndexAdded) {
         container.removeAttribute("tabindex");
       }
@@ -87,6 +125,13 @@ function useFocusTrap(containerRef, isActive) {
     };
   }, [isActive, containerRef]);
 }
+function useIsMounted() {
+  const [mounted, setMounted] = React15.useState(false);
+  React15.useEffect(() => {
+    setMounted(true);
+  }, []);
+  return mounted;
+}
 var QUERY = "(prefers-reduced-motion: reduce)";
 var mqCache = null;
 var cachedFor = null;
@@ -116,14 +161,14 @@ function getServerSnapshot() {
   return false;
 }
 function useReducedMotion() {
-  return React19.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return React15.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 var useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useSpringHover({
   scale = 1.02,
   lift = -2
 } = {}) {
-  const [hovered, setHovered] = React19.useState(false);
+  const [hovered, setHovered] = React15.useState(false);
   const reduced = useReducedMotion();
   const style = useSpring({
     transform: hovered ? `translateY(${lift}px) scale(${scale})` : "translateY(0px) scale(1)",
@@ -187,8 +232,9 @@ var Accordion = ({
   ...props
 }) => {
   const isControlled = controlledKeys !== void 0;
-  const [internalKeys, setInternalKeys] = React19.useState(defaultOpenKeys);
+  const [internalKeys, setInternalKeys] = React15.useState(defaultOpenKeys);
   const open = isControlled ? controlledKeys ?? [] : internalKeys;
+  const idPrefix = React15.useId();
   const toggle = (key) => {
     const isOpen = open.includes(key);
     const next = isOpen ? open.filter((k) => k !== key) : multiple ? [...open, key] : [key];
@@ -197,8 +243,8 @@ var Accordion = ({
   };
   return /* @__PURE__ */ jsx("div", { className: cn("accordion", className), ...props, children: items.map((item) => {
     const isOpen = open.includes(item.key);
-    const headerId = `${item.key}-header`;
-    const panelId = `${item.key}-panel`;
+    const headerId = `${idPrefix}-${item.key}-header`;
+    const panelId = `${idPrefix}-${item.key}-panel`;
     return /* @__PURE__ */ jsxs("div", { className: cn("accordion_item", isOpen && "accordion_item_open"), children: [
       /* @__PURE__ */ jsx("h3", { className: "accordion_header", children: /* @__PURE__ */ jsxs(
         "button",
@@ -254,7 +300,7 @@ var Avatar = ({
   style,
   ...props
 }) => {
-  const [imgFailed, setImgFailed] = React19.useState(false);
+  const [imgFailed, setImgFailed] = React15.useState(false);
   const showImage = src && !imgFailed;
   const initials = getInitials(name);
   return /* @__PURE__ */ jsx(
@@ -262,8 +308,9 @@ var Avatar = ({
     {
       className: cn("avatar", `avatar_size_${size}`, `avatar_shape_${shape}`, className),
       style: { background: !showImage ? bgColor : void 0, ...style },
-      role: showImage ? void 0 : "img",
+      role: showImage || !name ? void 0 : "img",
       "aria-label": showImage ? void 0 : name || void 0,
+      "aria-hidden": !showImage && !name ? true : void 0,
       ...props,
       children: showImage ? (
         // biome-ignore lint/performance/noImgElement: DS is framework-agnostic - consumers wrap with next/image
@@ -472,12 +519,12 @@ var ErrorState = ({
   );
 };
 var Menu = ({ items, trigger, align = "start" }) => {
-  const [open, setOpen] = React19.useState(false);
-  const wrapperRef = React19.useRef(null);
-  const itemRefs = React19.useRef([]);
-  const menuId = React19.useId();
+  const [open, setOpen] = React15.useState(false);
+  const wrapperRef = React15.useRef(null);
+  const itemRefs = React15.useRef([]);
+  const menuId = React15.useId();
   const style = useSpringPresence({ visible: open, from: "translateY(-4px)" });
-  React19.useEffect(() => {
+  React15.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -492,7 +539,7 @@ var Menu = ({ items, trigger, align = "start" }) => {
       document.removeEventListener("keydown", handleEsc);
     };
   }, [open]);
-  React19.useEffect(() => {
+  React15.useEffect(() => {
     const active = document.activeElement;
     if (!open || active && itemRefs.current.includes(active)) return;
     const first = items.findIndex((it) => !it.disabled);
@@ -538,7 +585,7 @@ var Menu = ({ items, trigger, align = "start" }) => {
         break;
     }
   };
-  const triggerWithProps = React19.cloneElement(
+  const triggerWithProps = React15.cloneElement(
     trigger,
     {
       onClick: () => setOpen((o) => !o),
@@ -782,7 +829,8 @@ var LocaleSwitcher = ({ locale }) => {
               itemRefs.current[index] = el;
             },
             type: "button",
-            role: "menuitem",
+            role: "menuitemradio",
+            "aria-checked": opt.value === locale.current,
             tabIndex: -1,
             className: cn(
               "nav_bar_locale_item",
@@ -828,9 +876,9 @@ var Sidebar = ({
   ...props
 }) => {
   const isControlled = collapsedProp !== void 0;
-  const [internalCollapsed, setInternalCollapsed] = React19.useState(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = React15.useState(defaultCollapsed);
   const collapsed = isControlled ? collapsedProp : internalCollapsed;
-  const toggle = React19.useCallback(() => {
+  const toggle = React15.useCallback(() => {
     const next = !collapsed;
     if (!isControlled) setInternalCollapsed(next);
     onCollapsedChange?.(next);
@@ -903,9 +951,9 @@ var SidebarSection = ({ label, className, children, ...props }) => {
     children
   ] });
 };
-var TabsContext = React19.createContext(null);
+var TabsContext = React15.createContext(null);
 function useTabsContext() {
-  const ctx = React19.useContext(TabsContext);
+  const ctx = React15.useContext(TabsContext);
   if (!ctx) {
     throw new Error(
       '[Bigtablet DS] <Tab>, <TabList>, <TabPanel>\uC740 \uBC18\uB4DC\uC2DC <Tabs> \uC548\uC5D0 \uC788\uC5B4\uC57C \uD569\uB2C8\uB2E4.\n\n\uC62C\uBC14\uB978 \uC0AC\uC6A9 \uC608:\n  <Tabs defaultValue="a">\n    <TabList>\n      <Tab value="a">A</Tab>\n    </TabList>\n    <TabPanel value="a">...</TabPanel>\n  </Tabs>'
@@ -924,27 +972,39 @@ var Tabs = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React19.useState(defaultValue);
+  const [internalValue, setInternalValue] = React15.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const setValue = React19.useCallback(
+  const setValue = React15.useCallback(
     (v) => {
       if (!isControlled) setInternalValue(v);
       onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
-  const idPrefix = React19.useId();
-  const ctx = React19.useMemo(
-    () => ({ value, setValue, variant, size, idPrefix }),
-    [value, setValue, variant, size, idPrefix]
+  const orderRef = React15.useRef([]);
+  const [firstTabValue, setFirstTabValue] = React15.useState();
+  const registerTab = React15.useCallback((v) => {
+    if (!orderRef.current.includes(v)) {
+      orderRef.current = [...orderRef.current, v];
+      setFirstTabValue(orderRef.current[0]);
+    }
+    return () => {
+      orderRef.current = orderRef.current.filter((x) => x !== v);
+      setFirstTabValue(orderRef.current[0]);
+    };
+  }, []);
+  const idPrefix = React15.useId();
+  const ctx = React15.useMemo(
+    () => ({ value, setValue, variant, size, idPrefix, registerTab, firstTabValue }),
+    [value, setValue, variant, size, idPrefix, registerTab, firstTabValue]
   );
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { className: cn("tabs", `tabs_variant_${variant}`, `tabs_size_${size}`, className), ...props, children }) });
 };
 var TabList = ({ ariaLabel, className, children, ...props }) => {
   const { variant } = useTabsContext();
-  const listRef = React19.useRef(null);
-  const [indicator, setIndicator] = React19.useState(null);
-  const [hasMounted, setHasMounted] = React19.useState(false);
+  const listRef = React15.useRef(null);
+  const [indicator, setIndicator] = React15.useState(null);
+  const [hasMounted, setHasMounted] = React15.useState(false);
   useSafeLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
@@ -1001,16 +1061,20 @@ var TabList = ({ ariaLabel, className, children, ...props }) => {
     }
   );
 };
-var Tab = ({ value, className, children, onClick, ...props }) => {
+var Tab = ({ value, className, children, onClick, onKeyDown, ...props }) => {
   const ctx = useTabsContext();
   const isActive = ctx.value === value;
   const panelId = `${ctx.idPrefix}-panel-${value}`;
   const tabId = `${ctx.idPrefix}-tab-${value}`;
+  const { registerTab } = ctx;
+  React15.useEffect(() => registerTab(value), [registerTab, value]);
   const handleClick = (e) => {
     ctx.setValue(value);
     onClick?.(e);
   };
-  const handleKeyDown = (e) => {
+  const handleKeyDown2 = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
     if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End") return;
     const list = e.currentTarget.closest('[role="tablist"]');
     if (!list) return;
@@ -1032,17 +1096,17 @@ var Tab = ({ value, className, children, onClick, ...props }) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
+      ...props,
       type: "button",
       role: "tab",
       id: tabId,
       "data-value": value,
       "aria-selected": isActive,
       "aria-controls": panelId,
-      tabIndex: isActive ? 0 : -1,
+      tabIndex: isActive || !ctx.value && value === ctx.firstTabValue ? 0 : -1,
       className: cn("tabs_tab", isActive && "tabs_tab_active", className),
       onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      ...props,
+      onKeyDown: handleKeyDown2,
       children
     }
   );
@@ -1093,15 +1157,15 @@ var Popover = ({
   className
 }) => {
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = React19.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React15.useState(defaultOpen);
   const open = isControlled ? openProp : internalOpen;
-  const [shouldRender, setShouldRender] = React19.useState(open ?? false);
+  const [shouldRender, setShouldRender] = React15.useState(open ?? false);
   if (open && !shouldRender) setShouldRender(true);
-  const wrapperRef = React19.useRef(null);
-  const popoverRef = React19.useRef(null);
-  const previousFocusRef = React19.useRef(null);
-  const popoverId = React19.useId();
-  const setOpen = React19.useCallback(
+  const wrapperRef = React15.useRef(null);
+  const popoverRef = React15.useRef(null);
+  const previousFocusRef = React15.useRef(null);
+  const popoverId = React15.useId();
+  const setOpen = React15.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
@@ -1121,7 +1185,7 @@ var Popover = ({
     }
   })();
   const style = useSpringPresence({ visible: open, from: fromTransform, onExitComplete: () => setShouldRender(false) });
-  React19.useEffect(() => {
+  React15.useEffect(() => {
     if (!open) return;
     previousFocusRef.current = document.activeElement;
     const node = popoverRef.current;
@@ -1129,25 +1193,19 @@ var Popover = ({
     const focusable = node.querySelector(FOCUSABLE_SELECTORS2);
     (focusable ?? node).focus();
   }, [open]);
-  React19.useEffect(() => {
+  React15.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
     };
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        setOpen(false);
-        previousFocusRef.current?.focus();
-      }
-    };
     document.addEventListener("mousedown", handleClick);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", handleClick);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
+    return () => document.removeEventListener("mousedown", handleClick);
   }, [open, setOpen]);
-  const triggerWithProps = React19.cloneElement(
+  useOverlayEscape(open, () => {
+    setOpen(false);
+    previousFocusRef.current?.focus();
+  });
+  const triggerWithProps = React15.cloneElement(
     trigger,
     {
       onClick: (e) => {
@@ -1186,22 +1244,31 @@ var Tooltip = ({
   disabled = false,
   children
 }) => {
-  const [open, setOpen] = React19.useState(false);
-  const timerRef = React19.useRef(null);
-  const tooltipId = React19.useId();
-  const show = React19.useCallback(() => {
+  const [open, setOpen] = React15.useState(false);
+  const timerRef = React15.useRef(null);
+  const tooltipId = React15.useId();
+  const HIDE_DELAY = 120;
+  const show = React15.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => setOpen(true), delay);
   }, [delay]);
-  const hide = React19.useCallback(() => {
+  const hideNow = React15.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setOpen(false);
   }, []);
-  React19.useEffect(() => {
+  const hide = React15.useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setOpen(false), HIDE_DELAY);
+  }, []);
+  const cancelHide = React15.useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+  }, []);
+  React15.useEffect(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, []);
+  useOverlayEscape(open, hideNow);
   const fromTransform = (() => {
     switch (placement) {
       case "top":
@@ -1217,7 +1284,7 @@ var Tooltip = ({
   const style = useSpringPresence({ visible: open, from: fromTransform });
   const child = children;
   const childProps = child.props;
-  const trigger = React19.cloneElement(child, {
+  const trigger = React15.cloneElement(child, {
     onMouseEnter: (e) => {
       childProps.onMouseEnter?.(e);
       show();
@@ -1232,7 +1299,7 @@ var Tooltip = ({
     },
     onBlur: (e) => {
       childProps.onBlur?.(e);
-      hide();
+      hideNow();
     },
     // 자식의 기존 aria-describedby 보존 + tooltip id 합성 (폼 설명/에러 연결 끊김 방지)
     "aria-describedby": open ? [childProps["aria-describedby"], tooltipId].filter(Boolean).join(" ") : childProps["aria-describedby"]
@@ -1240,16 +1307,24 @@ var Tooltip = ({
   if (disabled) return children;
   return /* @__PURE__ */ jsxs("span", { className: "tooltip_wrapper", children: [
     trigger,
-    open && /* @__PURE__ */ jsx("span", { className: cn("tooltip_position", `tooltip_placement_${placement}`), children: /* @__PURE__ */ jsx(
-      animated.span,
+    open && /* @__PURE__ */ jsx(
+      "span",
       {
-        id: tooltipId,
-        role: "tooltip",
-        style,
-        className: cn("tooltip", `tooltip_placement_${placement}`),
-        children: content
+        className: cn("tooltip_position", `tooltip_placement_${placement}`),
+        onMouseEnter: cancelHide,
+        onMouseLeave: hide,
+        children: /* @__PURE__ */ jsx(
+          animated.span,
+          {
+            id: tooltipId,
+            role: "tooltip",
+            style,
+            className: cn("tooltip", `tooltip_placement_${placement}`),
+            children: content
+          }
+        )
       }
-    ) })
+    )
   ] });
 };
 
@@ -1731,20 +1806,22 @@ var zIndex = {
   level4: 500,
   level5: 1e3
 };
-var Button = ({
-  variant = "filled",
-  size = "md",
-  leadingIcon,
-  trailingIcon,
-  fullWidth = false,
-  radius: radius2,
-  danger = false,
-  type = "button",
-  ref,
-  className,
-  children,
-  ...props
-}) => {
+var Button = (props) => {
+  const {
+    variant = "filled",
+    size = "md",
+    leadingIcon,
+    trailingIcon,
+    fullWidth = false,
+    radius: radius2,
+    danger = false,
+    disabled = false,
+    as,
+    className,
+    children,
+    ref,
+    ...rest
+  } = props;
   const buttonClassName = cn(
     "button",
     `button_variant_${variant}`,
@@ -1752,13 +1829,44 @@ var Button = ({
     fullWidth && "button_full_width",
     radius2 && `button_radius_${radius2}`,
     danger && "button_danger",
+    // anchor 엔 native :disabled 가 안 먹으므로 클래스로 비활성 스타일 적용 (button 도 무해)
+    disabled && "button_disabled",
     className
   );
-  return /* @__PURE__ */ jsxs("button", { ref, type, className: buttonClassName, ...props, children: [
+  const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
     leadingIcon && /* @__PURE__ */ jsx("span", { className: "button_icon", "aria-hidden": "true", children: leadingIcon }),
     children && /* @__PURE__ */ jsx("span", { className: "button_label", children }),
     trailingIcon && /* @__PURE__ */ jsx("span", { className: "button_icon", "aria-hidden": "true", children: trailingIcon })
   ] });
+  const anchorRest = rest;
+  const renderAnchor = as === "a" || as === void 0 && anchorRest.href != null;
+  if (renderAnchor) {
+    const { onClick, tabIndex, ...anchorProps } = anchorRest;
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...anchorProps,
+        ref,
+        className: buttonClassName,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : tabIndex,
+        onClick: disabled ? (e) => e.preventDefault() : onClick,
+        children: content
+      }
+    );
+  }
+  const { type = "button", ...buttonRest } = rest;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      disabled,
+      className: buttonClassName,
+      ...buttonRest,
+      children: content
+    }
+  );
 };
 var ICONS = {
   info: /* @__PURE__ */ jsx(Info, { size: iconSize.lg, "aria-hidden": "true" }),
@@ -1816,20 +1924,23 @@ var AlertModal = ({
   destructive = false,
   actionsAlign = "right",
   showIcon = false,
+  closeOnOverlay = true,
   onConfirm,
   onCancel,
   onClose
 }) => {
-  const panelRef = React19.useRef(null);
-  const titleId = React19.useId();
-  const messageId = React19.useId();
+  const dismiss = onCancel ?? onClose;
+  const panelRef = React15.useRef(null);
+  const titleId = React15.useId();
+  const messageId = React15.useId();
   const [shouldRender, setShouldRender] = useState(isOpen);
   useFocusTrap(panelRef, isOpen);
-  React19.useEffect(() => {
-    if (isOpen) setShouldRender(true);
-  }, [isOpen]);
+  useOverlayEscape(isOpen, () => dismiss());
+  if (isOpen && !shouldRender) setShouldRender(true);
+  const reduced = useReducedMotion();
   const overlayStyle = useSpring({
     opacity: isOpen ? 1 : 0,
+    immediate: reduced,
     config: { tension: 280, friction: 28, clamp: !isOpen },
     onRest: (result) => {
       if (!isOpen && result.finished) setShouldRender(false);
@@ -1838,9 +1949,31 @@ var AlertModal = ({
   const panelStyle = useSpring({
     opacity: isOpen ? 1 : 0,
     transform: isOpen ? "scale(1) translateY(0px)" : "scale(0.96) translateY(-4px)",
+    immediate: reduced,
     config: { tension: 280, friction: 28, clamp: !isOpen }
   });
-  if (!shouldRender) return null;
+  React15.useEffect(() => {
+    if (!shouldRender) return;
+    const body = document.body;
+    const openModals = parseInt(body.dataset.openModals || "0", 10);
+    if (openModals === 0) {
+      body.dataset.originalOverflow = window.getComputedStyle(body).overflow;
+      body.style.overflow = "hidden";
+    }
+    body.dataset.openModals = String(openModals + 1);
+    return () => {
+      const currentOpenModals = parseInt(body.dataset.openModals || "1", 10);
+      const nextOpenModals = currentOpenModals - 1;
+      if (nextOpenModals === 0) {
+        body.style.overflow = body.dataset.originalOverflow || "";
+        delete body.dataset.openModals;
+        delete body.dataset.originalOverflow;
+      } else {
+        body.dataset.openModals = String(nextOpenModals);
+      }
+    };
+  }, [shouldRender]);
+  if (!isOpen && !shouldRender) return null;
   const confirmVariant = "filled";
   const cancelVariant = "outline";
   const modalClassName = cn("alert_modal", `alert_variant_${variant}`);
@@ -1852,8 +1985,7 @@ var AlertModal = ({
         className: "alert_overlay",
         style: overlayStyle,
         role: "presentation",
-        onClick: onClose,
-        onKeyDown: (e) => e.key === "Escape" && onClose(),
+        onClick: () => closeOnOverlay && dismiss(),
         children: /* @__PURE__ */ jsxs(
           animated.div,
           {
@@ -1933,12 +2065,12 @@ var Checkbox = ({
   ref,
   ...props
 }) => {
-  const inputRef = React19.useRef(null);
-  React19.useImperativeHandle(
+  const inputRef = React15.useRef(null);
+  React15.useImperativeHandle(
     ref,
     () => inputRef.current
   );
-  React19.useEffect(() => {
+  React15.useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
@@ -1949,7 +2081,16 @@ var Checkbox = ({
     className
   );
   return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
-    /* @__PURE__ */ jsx("input", { ref: inputRef, type: "checkbox", className: "checkbox_input", ...props }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...props,
+        ref: inputRef,
+        type: "checkbox",
+        className: "checkbox_input",
+        "aria-invalid": error || void 0
+      }
+    ),
     /* @__PURE__ */ jsx("span", { className: "checkbox_state_layer", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "checkbox_icon" }) }),
     label ? /* @__PURE__ */ jsx("span", { className: "checkbox_label", children: label }) : null
   ] });
@@ -2012,9 +2153,11 @@ var Chip = ({
   leadingIcon,
   onClick,
   onRemove,
+  removeLabel,
   className,
   ...props
 }) => {
+  const removeAriaLabel = removeLabel ?? `${label} \uC81C\uAC70`;
   const [iconHovered, setIconHovered] = useState(false);
   const isStatic = type === "static";
   const hasLeading = !isStatic && selected;
@@ -2048,7 +2191,7 @@ var Chip = ({
           className: "chip_trailing",
           disabled,
           onClick: onRemove,
-          "aria-label": "Remove",
+          "aria-label": removeAriaLabel,
           children: /* @__PURE__ */ jsx("span", { className: "chip_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
         }
       )
@@ -2062,6 +2205,7 @@ var Chip = ({
         className: "chip_content",
         disabled,
         onClick,
+        "aria-pressed": type !== "filter" && selected !== void 0 ? selected : void 0,
         ...type === "filter" ? { "aria-haspopup": "listbox", "aria-expanded": !!open } : {},
         children: [
           hasLeading && /* @__PURE__ */ jsx(
@@ -2095,7 +2239,7 @@ var Chip = ({
         className: "chip_trailing",
         disabled,
         onClick: onRemove,
-        "aria-label": "Remove",
+        "aria-label": removeAriaLabel,
         children: /* @__PURE__ */ jsx(
           "span",
           {
@@ -2123,7 +2267,8 @@ var Dropdown = (props) => {
     searchable = false,
     searchPlaceholder = "\uAC80\uC0C9\u2026",
     emptyText = "\uACB0\uACFC \uC5C6\uC74C",
-    selectedSummary = (count) => `${count}\uAC1C \uC120\uD0DD`
+    selectedSummary = (count) => `${count}\uAC1C \uC120\uD0DD`,
+    name
   } = props;
   const multiple = props.multiple === true;
   const internalId = useId();
@@ -2267,6 +2412,9 @@ var Dropdown = (props) => {
         e.preventDefault();
         setIsOpen(false);
         break;
+      case "Tab":
+        setIsOpen(false);
+        break;
     }
   };
   const onSearchKeyDown = (e) => {
@@ -2288,6 +2436,9 @@ var Dropdown = (props) => {
         e.preventDefault();
         closePanel();
         break;
+      case "Tab":
+        closePanel();
+        break;
     }
   };
   useEffect(() => {
@@ -2342,7 +2493,7 @@ var Dropdown = (props) => {
         className: cn("dropdown_control", { is_disabled: disabled }),
         "aria-haspopup": "listbox",
         "aria-expanded": isOpen,
-        "aria-controls": `${dropdownId}_listbox`,
+        "aria-controls": isOpen ? `${dropdownId}_listbox` : void 0,
         onClick: () => !disabled && setIsOpen((o) => !o),
         onKeyDown: onControlKeyDown,
         disabled,
@@ -2352,6 +2503,7 @@ var Dropdown = (props) => {
         ]
       }
     ) }),
+    name && (multiple ? selectedValues.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: v, disabled }, v)) : /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selectedValues[0] ?? "", disabled })),
     isOpen && /* @__PURE__ */ jsxs(animated.div, { className: listClassName, style: listStyle, children: [
       searchable && /* @__PURE__ */ jsxs("div", { className: "dropdown_search", children: [
         /* @__PURE__ */ jsx("span", { className: "dropdown_search_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Search, { size: iconSize.sm }) }),
@@ -2456,9 +2608,9 @@ var DatePicker = ({
   minDateSrFormat = "Minimum date: {date}",
   selectableRangeUntilTodaySrText = "Selectable up to today"
 }) => {
-  const groupId = React19.useId();
-  const constraintId = React19.useId();
-  const { todayYear, todayMonth, todayDay } = React19.useMemo(() => {
+  const groupId = React15.useId();
+  const constraintId = React15.useId();
+  const { todayYear, todayMonth, todayDay } = React15.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     return {
       todayYear: now.getFullYear(),
@@ -2467,7 +2619,7 @@ var DatePicker = ({
     };
   }, []);
   const endYear = endYearProp ?? todayYear + 10;
-  const parsed = React19.useMemo(() => {
+  const parsed = React15.useMemo(() => {
     if (!value) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = value.split("-").map(Number);
     return {
@@ -2476,7 +2628,7 @@ var DatePicker = ({
       day: d || 0
     };
   }, [value]);
-  const min = React19.useMemo(() => {
+  const min = React15.useMemo(() => {
     if (!minDate) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = minDate.split("-").map(Number);
     return {
@@ -2496,7 +2648,7 @@ var DatePicker = ({
       min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1
     )
   );
-  const maxDay = React19.useMemo(() => {
+  const maxDay = React15.useMemo(() => {
     if (!year || !month) return 31;
     const daysInMonth = getDaysInMonth(year, month);
     if (selectableRange === "until-today" && year === todayYear && month === todayMonth) {
@@ -2504,28 +2656,28 @@ var DatePicker = ({
     }
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
-  const yearOptions = React19.useMemo(
+  const yearOptions = React15.useMemo(
     () => range(startYear, maxYear).map((y) => ({
       value: String(y),
       label: String(y)
     })),
     [startYear, maxYear]
   );
-  const monthOptions = React19.useMemo(
+  const monthOptions = React15.useMemo(
     () => range(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
       value: String(m),
       label: pad(m)
     })),
     [minMonth, maxMonth]
   );
-  const dayOptions = React19.useMemo(
+  const dayOptions = React15.useMemo(
     () => range(minDay, Math.max(minDay, maxDay)).map((d) => ({
       value: String(d),
       label: pad(d)
     })),
     [minDay, maxDay]
   );
-  const emit = React19.useCallback(
+  const emit = React15.useCallback(
     (yy, mm, dd) => {
       const cb = onValueChange ?? onChange;
       if (mode === "year-month") {
@@ -2537,7 +2689,7 @@ var DatePicker = ({
     },
     [mode, onValueChange, onChange]
   );
-  const handleYearChange = React19.useCallback(
+  const handleYearChange = React15.useCallback(
     (raw) => {
       if (!raw) return;
       const newYear = Number(raw);
@@ -2554,14 +2706,14 @@ var DatePicker = ({
     },
     [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
   );
-  const handleMonthChange = React19.useCallback(
+  const handleMonthChange = React15.useCallback(
     (raw) => {
       if (!raw || !year) return;
       emit(year, Number(raw), day || void 0);
     },
     [year, day, emit]
   );
-  const handleDayChange = React19.useCallback(
+  const handleDayChange = React15.useCallback(
     (raw) => {
       if (!raw || !year || !month) return;
       emit(year, month, Number(raw));
@@ -2656,11 +2808,13 @@ var Drawer = ({
   className,
   ...props
 }) => {
-  const panelRef = React19.useRef(null);
-  const titleId = React19.useId();
-  const [shouldRender, setShouldRender] = React19.useState(open);
+  const panelRef = React15.useRef(null);
+  const titleId = React15.useId();
+  const [shouldRender, setShouldRender] = React15.useState(open);
   const reduced = useReducedMotion();
-  useFocusTrap(panelRef, open);
+  const isMounted = useIsMounted();
+  useFocusTrap(panelRef, open && isMounted);
+  useOverlayEscape(open && isMounted, () => onClose?.());
   if (open && !shouldRender) setShouldRender(true);
   const overlayStyle = useSpringPresence({
     visible: open,
@@ -2675,7 +2829,7 @@ var Drawer = ({
     immediate: reduced,
     config: { tension: 280, friction: 28, clamp: !open }
   });
-  React19.useEffect(() => {
+  React15.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -2697,55 +2851,53 @@ var Drawer = ({
     };
   }, [open]);
   if (!open && !shouldRender) return null;
+  if (typeof document === "undefined" || !isMounted) return null;
   const hasTitle = !!title;
   const sizeValue = typeof size === "number" ? `${size}px` : size;
   const panelSizeStyle = placement === "bottom" ? { height: sizeValue } : { width: sizeValue };
-  return /* @__PURE__ */ jsx(
-    animated.div,
-    {
-      className: cn("drawer", `drawer_placement_${placement}`),
-      style: overlayStyle,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": hasTitle && !ariaLabel ? titleId : void 0,
-      "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
-      onClick: () => closeOnOverlay && onClose?.(),
-      onKeyDown: (e) => {
-        if (e.key === "Escape") {
-          e.stopPropagation();
-          onClose?.();
-        }
-      },
-      children: /* @__PURE__ */ jsxs(
-        animated.div,
-        {
-          ref: panelRef,
-          ...props,
-          className: cn("drawer_panel", className),
-          style: { ...props.style, ...panelStyle, ...panelSizeStyle },
-          role: "document",
-          onClick: (e) => e.stopPropagation(),
-          onKeyDown: (e) => {
-            if (e.key !== "Escape") e.stopPropagation();
-          },
-          children: [
-            showCloseIcon && onClose && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "drawer_close",
-                onClick: onClose,
-                "aria-label": closeLabel,
-                children: /* @__PURE__ */ jsx(X, { size: iconSize.md, "aria-hidden": "true" })
-              }
-            ),
-            title && /* @__PURE__ */ jsx("div", { className: "drawer_header", children: /* @__PURE__ */ jsx("h2", { id: titleId, className: "drawer_title", children: title }) }),
-            children && /* @__PURE__ */ jsx("div", { className: "drawer_body", children }),
-            footer && /* @__PURE__ */ jsx("div", { className: "drawer_footer", children: footer })
-          ]
-        }
-      )
-    }
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      animated.div,
+      {
+        className: cn("drawer", `drawer_placement_${placement}`),
+        style: overlayStyle,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": hasTitle && !ariaLabel ? titleId : void 0,
+        "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
+        onClick: () => closeOnOverlay && onClose?.(),
+        children: /* @__PURE__ */ jsxs(
+          animated.div,
+          {
+            ref: panelRef,
+            ...props,
+            className: cn("drawer_panel", className),
+            style: { ...props.style, ...panelStyle, ...panelSizeStyle },
+            role: "document",
+            onClick: (e) => e.stopPropagation(),
+            onKeyDown: (e) => {
+              if (e.key !== "Escape") e.stopPropagation();
+            },
+            children: [
+              showCloseIcon && onClose && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "drawer_close",
+                  onClick: onClose,
+                  "aria-label": closeLabel,
+                  children: /* @__PURE__ */ jsx(X, { size: iconSize.md, "aria-hidden": "true" })
+                }
+              ),
+              title && /* @__PURE__ */ jsx("div", { className: "drawer_header", children: /* @__PURE__ */ jsx("h2", { id: titleId, className: "drawer_title", children: title }) }),
+              children && /* @__PURE__ */ jsx("div", { className: "drawer_body", children }),
+              footer && /* @__PURE__ */ jsx("div", { className: "drawer_footer", children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
   );
 };
 Drawer.displayName = "Drawer";
@@ -2762,11 +2914,11 @@ var FileInput = ({
   onChange,
   ...props
 }) => {
-  const inputId = React19.useId();
-  const helperId = React19.useId();
-  const inputRef = React19.useRef(null);
-  const [previewUrls, setPreviewUrls] = React19.useState([]);
-  const previewUrlsRef = React19.useRef([]);
+  const inputId = React15.useId();
+  const helperId = React15.useId();
+  const inputRef = React15.useRef(null);
+  const [previewUrls, setPreviewUrls] = React15.useState([]);
+  const previewUrlsRef = React15.useRef([]);
   const isPreviewVariant = variant === "preview";
   const showPreview = isPreviewVariant || preview;
   const handleChange = (e) => {
@@ -2807,7 +2959,7 @@ var FileInput = ({
     }
     onFiles?.(null);
   };
-  React19.useEffect(() => {
+  React15.useEffect(() => {
     return () => {
       for (const url of previewUrlsRef.current) {
         URL.revokeObjectURL(url);
@@ -2884,6 +3036,10 @@ var FileInput = ({
     )) })
   ] });
 };
+var HeroActionButton = ({
+  action,
+  variant
+}) => action.href ? /* @__PURE__ */ jsx(Button, { as: "a", href: action.href, size: "lg", variant, onClick: action.onClick, children: action.label }) : /* @__PURE__ */ jsx(Button, { size: "lg", variant, onClick: action.onClick, children: action.label });
 var Hero = ({
   height = "md",
   align = "left",
@@ -2922,8 +3078,8 @@ var Hero = ({
       title && /* @__PURE__ */ jsx("h1", { className: "hero_title", children: title }),
       subtitle && /* @__PURE__ */ jsx("p", { className: "hero_subtitle", children: subtitle }),
       (primaryAction || secondaryAction || children) && /* @__PURE__ */ jsxs("div", { className: "hero_actions", children: [
-        primaryAction && /* @__PURE__ */ jsx(Button, { size: "lg", variant: "filled", onClick: primaryAction.onClick, children: primaryAction.label }),
-        secondaryAction && /* @__PURE__ */ jsx(Button, { size: "lg", variant: "outline", onClick: secondaryAction.onClick, children: secondaryAction.label }),
+        primaryAction && /* @__PURE__ */ jsx(HeroActionButton, { action: primaryAction, variant: "filled" }),
+        secondaryAction && /* @__PURE__ */ jsx(HeroActionButton, { action: secondaryAction, variant: "outline" }),
         children
       ] })
     ] })
@@ -3035,7 +3191,7 @@ var ListItem = ({
         role: onClick ? "button" : void 0,
         tabIndex: onClick && !disabled ? 0 : void 0,
         "aria-disabled": disabled || void 0,
-        "aria-selected": selected || void 0,
+        "aria-pressed": onClick && selected !== void 0 ? selected : void 0,
         ...props,
         children: /* @__PURE__ */ jsxs("div", { className: "list_item_state_layer", children: [
           leadingElement && /* @__PURE__ */ jsx("div", { className: "list_item_leading", children: leadingElement }),
@@ -3106,13 +3262,17 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React19.useRef(null);
-  const titleId = React19.useId();
-  const [shouldRender, setShouldRender] = React19.useState(open);
-  useFocusTrap(panelRef, open);
+  const panelRef = React15.useRef(null);
+  const titleId = React15.useId();
+  const [shouldRender, setShouldRender] = React15.useState(open);
+  const isMounted = useIsMounted();
+  useFocusTrap(panelRef, open && isMounted);
+  useOverlayEscape(open && isMounted, () => onClose?.());
   if (open && !shouldRender) setShouldRender(true);
+  const reduced = useReducedMotion();
   const overlayStyle = useSpring({
     opacity: open ? 1 : 0,
+    immediate: reduced,
     config: { tension: 280, friction: 28, clamp: !open },
     onRest: (result) => {
       if (!open && result.finished) setShouldRender(false);
@@ -3121,9 +3281,10 @@ var Modal = ({
   const panelStyle = useSpring({
     opacity: open ? 1 : 0,
     transform: open ? "scale(1) translateY(0px)" : "scale(0.96) translateY(-4px)",
+    immediate: reduced,
     config: { tension: 280, friction: 28, clamp: !open }
   });
-  React19.useEffect(() => {
+  React15.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -3145,54 +3306,52 @@ var Modal = ({
     };
   }, [open]);
   if (!open && !shouldRender) return null;
+  if (typeof document === "undefined" || !isMounted) return null;
   const hasTitle = !!title;
-  return /* @__PURE__ */ jsx(
-    animated.div,
-    {
-      className: "modal",
-      style: overlayStyle,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": hasTitle && !ariaLabel ? titleId : void 0,
-      "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
-      onClick: () => closeOnOverlay && onClose?.(),
-      onKeyDown: (e) => {
-        if (e.key === "Escape") {
-          e.stopPropagation();
-          onClose?.();
-        }
-      },
-      children: /* @__PURE__ */ jsxs(
-        animated.div,
-        {
-          ref: panelRef,
-          ...props,
-          className: cn("modal_panel", className),
-          style: { ...props.style, ...panelStyle, width },
-          role: "document",
-          onClick: (e) => e.stopPropagation(),
-          onKeyDown: (e) => {
-            if (e.key !== "Escape") e.stopPropagation();
-          },
-          children: [
-            showCloseIcon && onClose && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "modal_close",
-                onClick: onClose,
-                "aria-label": closeLabel,
-                children: /* @__PURE__ */ jsx(X, { size: iconSize.md, "aria-hidden": "true" })
-              }
-            ),
-            title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "modal_title", children: title }),
-            description && /* @__PURE__ */ jsx("div", { className: "modal_description", children: description }),
-            children && /* @__PURE__ */ jsx("div", { className: "modal_body", children }),
-            footer && /* @__PURE__ */ jsx("div", { className: cn("modal_footer", `modal_footer_${footerAlign}`), children: footer })
-          ]
-        }
-      )
-    }
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      animated.div,
+      {
+        className: "modal",
+        style: overlayStyle,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": hasTitle && !ariaLabel ? titleId : void 0,
+        "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
+        onClick: () => closeOnOverlay && onClose?.(),
+        children: /* @__PURE__ */ jsxs(
+          animated.div,
+          {
+            ref: panelRef,
+            ...props,
+            className: cn("modal_panel", className),
+            style: { ...props.style, ...panelStyle, width },
+            role: "document",
+            onClick: (e) => e.stopPropagation(),
+            onKeyDown: (e) => {
+              if (e.key !== "Escape") e.stopPropagation();
+            },
+            children: [
+              showCloseIcon && onClose && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "modal_close",
+                  onClick: onClose,
+                  "aria-label": closeLabel,
+                  children: /* @__PURE__ */ jsx(X, { size: iconSize.md, "aria-hidden": "true" })
+                }
+              ),
+              title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "modal_title", children: title }),
+              description && /* @__PURE__ */ jsx("div", { className: "modal_description", children: description }),
+              children && /* @__PURE__ */ jsx("div", { className: "modal_body", children }),
+              footer && /* @__PURE__ */ jsx("div", { className: cn("modal_footer", `modal_footer_${footerAlign}`), children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
   );
 };
 var OtpInput = ({
@@ -3207,12 +3366,12 @@ var OtpInput = ({
   ariaLabel = "OTP \uC785\uB825",
   className
 }) => {
-  const inputsRef = React19.useRef([]);
-  const isTypingRef = React19.useRef(false);
-  React19.useEffect(() => {
+  const inputsRef = React15.useRef([]);
+  const isTypingRef = React15.useRef(false);
+  React15.useEffect(() => {
     if (autoFocus) inputsRef.current[0]?.focus();
   }, [autoFocus]);
-  const digits = React19.useMemo(() => {
+  const digits = React15.useMemo(() => {
     const chars = value.split("").slice(0, length);
     while (chars.length < length) chars.push("");
     return chars;
@@ -3225,6 +3384,15 @@ var OtpInput = ({
   };
   const handleChange = (index, e) => {
     const nextDigit = e.target.value;
+    if (index === 0 && nextDigit.length > 1) {
+      const filled = nextDigit.replace(/\D/g, "").slice(0, length);
+      if (!filled) return;
+      const newDigits2 = [...digits];
+      for (let i = 0; i < filled.length; i++) newDigits2[i] = filled[i];
+      updateValue(newDigits2);
+      focusInput(Math.min(filled.length, length - 1));
+      return;
+    }
     if (nextDigit && !/^\d$/.test(nextDigit)) return;
     const newDigits = [...digits];
     newDigits[index] = nextDigit;
@@ -3244,7 +3412,7 @@ var OtpInput = ({
       focusInput(firstEmpty);
     }
   };
-  const handleKeyDown = (index, e) => {
+  const handleKeyDown2 = (index, e) => {
     if (e.key === "Backspace") {
       if (digits[index]) {
         const newDigits = [...digits];
@@ -3280,6 +3448,7 @@ var OtpInput = ({
     focusInput(nextIndex);
   };
   const rootClassName = cn("otp_input", className);
+  const supportingId = React15.useId();
   return (
     // biome-ignore lint/a11y/useSemanticElements: <fieldset> would force border/legend styles; role=group is the WAI-ARIA equivalent for OTP grouping
     /* @__PURE__ */ jsxs("div", { className: rootClassName, role: "group", "aria-label": ariaLabel, children: [
@@ -3293,13 +3462,16 @@ var OtpInput = ({
           inputMode: "numeric",
           pattern: "\\d*",
           maxLength: 1,
+          autoComplete: i === 0 ? "one-time-code" : "off",
           value: digit,
           onChange: (e) => handleChange(i, e),
           onFocus: () => handleFocus(i),
-          onKeyDown: (e) => handleKeyDown(i, e),
+          onKeyDown: (e) => handleKeyDown2(i, e),
           onPaste: handlePaste,
           disabled,
           "aria-label": `${i + 1}\uBC88\uC9F8 \uC790\uB9AC`,
+          "aria-invalid": error || void 0,
+          "aria-describedby": supportingText ? supportingId : void 0,
           className: cn(
             "otp_input_box",
             error && "otp_input_box_error",
@@ -3308,7 +3480,14 @@ var OtpInput = ({
         },
         i
       )) }),
-      supportingText && /* @__PURE__ */ jsx("span", { className: cn("otp_input_supporting", error && "otp_input_supporting_error"), children: supportingText })
+      supportingText && /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: supportingId,
+          className: cn("otp_input_supporting", error && "otp_input_supporting_error"),
+          children: supportingText
+        }
+      )
     ] })
   );
 };
@@ -3353,7 +3532,7 @@ var Pagination = ({
   const emit = onPageChange ?? onChange;
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React19.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
+  const items = React15.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
   return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -3398,9 +3577,9 @@ var Pagination = ({
     )
   ] });
 };
-var RadioGroupContext = React19.createContext(null);
+var RadioGroupContext = React15.createContext(null);
 function useRadioGroupContext() {
-  return React19.useContext(RadioGroupContext);
+  return React15.useContext(RadioGroupContext);
 }
 var RadioGroup = ({
   value: controlledValue,
@@ -3418,21 +3597,21 @@ var RadioGroup = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React19.useState(defaultValue);
+  const [internalValue, setInternalValue] = React15.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const generatedName = React19.useId();
+  const generatedName = React15.useId();
   const name = nameProp ?? generatedName;
-  const idPrefix = React19.useId();
+  const idPrefix = React15.useId();
   const labelId = label ? `${idPrefix}-label` : void 0;
   const helperId = supportingText ? `${idPrefix}-help` : void 0;
-  const onChange = React19.useCallback(
+  const onChange = React15.useCallback(
     (next) => {
       if (!isControlled) setInternalValue(next);
       onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
-  const ctx = React19.useMemo(
+  const ctx = React15.useMemo(
     () => ({ name, value, onChange, size, disabled }),
     [name, value, onChange, size, disabled]
   );
@@ -3481,7 +3660,7 @@ var Radio = ({
   const size = sizeProp ?? group?.size ?? "md";
   const name = nameProp ?? group?.name;
   const disabled = disabledProp ?? group?.disabled;
-  const resolvedChecked = group ? group.value === value : checked;
+  const resolvedChecked = group ? value !== void 0 && group.value != null && String(group.value) === String(value) : checked;
   const handleChange = (event) => {
     if (group && value !== void 0) group.onChange(String(value));
     onChange?.(event);
@@ -3581,8 +3760,8 @@ var Table = ({
   const isEmpty = !isLoading && data.length === 0;
   const getRowKey = (item, index) => rowKey?.(item) ?? String(index);
   const allRowKeys = selectable ? data.map((item, index) => getRowKey(item, index)) : [];
-  const rowClickHintId = React19.useId();
-  const selectedSet = React19.useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
+  const rowClickHintId = React15.useId();
+  const selectedSet = React15.useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
   const selectedCount = allRowKeys.filter((key) => selectedSet.has(key)).length;
   const isAllSelected = allRowKeys.length > 0 && selectedCount === allRowKeys.length;
   const isSomeSelected = selectedCount > 0 && !isAllSelected;
@@ -3601,7 +3780,7 @@ var Table = ({
     onSortChange?.(next);
   };
   return /* @__PURE__ */ jsxs("div", { className: wrapperClassName, children: [
-    /* @__PURE__ */ jsxs("table", { className: "table", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsxs("table", { className: "table", "aria-label": ariaLabel, "aria-busy": isLoading || void 0, children: [
       /* @__PURE__ */ jsx("thead", { className: "table_thead", children: /* @__PURE__ */ jsxs("tr", { children: [
         selectable && /* @__PURE__ */ jsx("th", { scope: "col", className: "table_th table_th_checkbox", children: /* @__PURE__ */ jsx(
           Checkbox,
@@ -3743,9 +3922,9 @@ var Table = ({
     isEmpty && /* @__PURE__ */ jsx("div", { className: "table_empty", role: "status", children: emptyMessage })
   ] });
 };
-var ThemeContext = React19.createContext(null);
+var ThemeContext = React15.createContext(null);
 var useTheme = () => {
-  const ctx = React19.useContext(ThemeContext);
+  const ctx = React15.useContext(ThemeContext);
   if (!ctx) {
     throw new Error(
       '[Bigtablet DS] useTheme\uB294 <ThemeProvider> \uC548\uC5D0\uC11C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5\uD569\uB2C8\uB2E4.\n\n\uC571 \uCD5C\uC0C1\uB2E8\uC5D0 <ThemeProvider>\uB85C \uAC10\uC2F8\uC8FC\uC138\uC694:\n  <ThemeProvider mode="system">\n    <YourApp />\n  </ThemeProvider>'
@@ -3769,15 +3948,15 @@ var ThemeProvider = ({
   targetSelector,
   children
 }) => {
-  const [mode, setModeState] = React19.useState(defaultMode);
-  const [systemDark, setSystemDark] = React19.useState(false);
-  React19.useEffect(() => {
+  const [mode, setModeState] = React15.useState(defaultMode);
+  const [systemDark, setSystemDark] = React15.useState(false);
+  React15.useEffect(() => {
     setModeState(readStored(storageKey) ?? defaultMode);
     if (isClient) {
       setSystemDark(window.matchMedia("(prefers-color-scheme: dark)").matches);
     }
   }, [storageKey, defaultMode]);
-  React19.useEffect(() => {
+  React15.useEffect(() => {
     if (!isClient) return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => setSystemDark(e.matches);
@@ -3785,7 +3964,7 @@ var ThemeProvider = ({
     return () => mq.removeEventListener("change", handler);
   }, []);
   const resolved = mode === "system" ? systemDark ? "dark" : "light" : mode;
-  React19.useEffect(() => {
+  React15.useEffect(() => {
     if (!isClient) return;
     const target = targetSelector ? document.querySelector(targetSelector) : document.documentElement;
     if (!target) return;
@@ -3795,7 +3974,7 @@ var ThemeProvider = ({
       target.setAttribute("data-theme", mode);
     }
   }, [mode, targetSelector]);
-  const setMode = React19.useCallback(
+  const setMode = React15.useCallback(
     (next) => {
       setModeState(next);
       if (storageKey && isClient) {
@@ -3807,7 +3986,7 @@ var ThemeProvider = ({
     },
     [storageKey]
   );
-  const value = React19.useMemo(
+  const value = React15.useMemo(
     () => ({ mode, resolved, setMode }),
     [mode, resolved, setMode]
   );
@@ -4055,7 +4234,7 @@ var Textarea = ({
   ] });
 };
 Textarea.displayName = "Textarea";
-var ToastContext = React19.createContext(null);
+var ToastContext = React15.createContext(null);
 var VARIANT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: iconSize.md }),
   error: /* @__PURE__ */ jsx(XCircle, { size: iconSize.md }),
@@ -4064,15 +4243,29 @@ var VARIANT_ICONS = {
   default: /* @__PURE__ */ jsx(Bell, { size: iconSize.md })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [visible, setVisible] = React19.useState(true);
-  const closingRef = React19.useRef(false);
+  const [visible, setVisible] = React15.useState(true);
+  const closingRef = React15.useRef(false);
+  const rootRef = React15.useRef(null);
   const style = useSpringPresence({
     visible,
     from: "translateX(20px)",
     // 우측에서 슬라이드 인
-    onExitComplete: () => onRemove(item.id)
+    onExitComplete: () => {
+      const hadFocus = rootRef.current?.contains(document.activeElement) ?? false;
+      if (hadFocus) {
+        const closeButtons = Array.from(
+          document.querySelectorAll(".toast_item .toast_close")
+        );
+        const currentIndex = closeButtons.findIndex((el) => rootRef.current?.contains(el));
+        if (currentIndex !== -1) {
+          const next = closeButtons[currentIndex + 1] || closeButtons[currentIndex - 1];
+          next?.focus();
+        }
+      }
+      onRemove(item.id);
+    }
   });
-  const close = React19.useCallback(() => {
+  const close = React15.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setVisible(false);
@@ -4080,6 +4273,7 @@ var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
   return /* @__PURE__ */ jsxs(
     animated.div,
     {
+      ref: rootRef,
       className: "toast_item",
       style,
       role: item.variant === "error" ? "alert" : "status",
@@ -4105,22 +4299,19 @@ var ToastProvider = ({
   maxCount = 5,
   closeAriaLabel = "Close"
 }) => {
-  const [toasts, setToasts] = React19.useState([]);
-  const [isMounted, setIsMounted] = React19.useState(false);
-  React19.useEffect(() => {
-    setIsMounted(true);
-  }, []);
-  const addToast = React19.useCallback(
+  const [toasts, setToasts] = React15.useState([]);
+  const isMounted = useIsMounted();
+  const addToast = React15.useCallback(
     (message, variant, duration = 3e3) => {
       const id = crypto.randomUUID();
       setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
     },
     [maxCount]
   );
-  const removeToast = React19.useCallback((id) => {
+  const removeToast = React15.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const contextValue = React19.useMemo(() => ({ addToast }), [addToast]);
+  const contextValue = React15.useMemo(() => ({ addToast }), [addToast]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: contextValue, children: [
     children,
     isMounted && createPortal(
@@ -4181,10 +4372,11 @@ var Toggle = ({
   ...props
 }) => {
   const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React19.useState(!!defaultChecked);
+  const [innerChecked, setInnerChecked] = React15.useState(!!defaultChecked);
   const isOn = isControlled ? !!checked : innerChecked;
-  const handleToggle = () => {
-    if (disabled) return;
+  const handleToggle = (e) => {
+    props.onClick?.(e);
+    if (disabled || e.defaultPrevented) return;
     const next = !isOn;
     if (!isControlled) setInnerChecked(next);
     (onCheckedChange ?? onChange)?.(next);
@@ -4198,6 +4390,7 @@ var Toggle = ({
   return /* @__PURE__ */ jsx(
     "button",
     {
+      ...props,
       ref,
       type: "button",
       role: "switch",
@@ -4206,7 +4399,6 @@ var Toggle = ({
       disabled,
       onClick: handleToggle,
       className: rootClassName,
-      ...props,
       children: /* @__PURE__ */ jsx("span", { className: "toggle_thumb" })
     }
   );