@bigtablet/design-system 3.2.2 → 3.4.0

package/dist/index.js

@@ -1,9 +1,9 @@
 "use client";
 import './index.css';
-import * as React20 from 'react';
-import { createContext, useRef, useState, useLayoutEffect, useId, useEffect, useContext, useCallback, useMemo, Fragment } from 'react';
+import * as React19 from 'react';
+import { createContext, useRef, useState, useId, useEffect, useContext, useCallback, useMemo, Fragment, useLayoutEffect } from 'react';
 import { useSpring, animated } from '@react-spring/web';
-import { ChevronDown, Globe, ChevronRight, ChevronLeft, Check, Image, X, TriangleAlert, XCircle, AlertTriangle, CheckCircle2, Info, Bell } from 'lucide-react';
+import { ChevronDown, ChevronRight, Globe, ChevronLeft, XCircle, AlertTriangle, CheckCircle2, Info, Search, Check, X, Image, ArrowUp, ArrowDown, ArrowUpDown, Bell, TriangleAlert } from 'lucide-react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -38,8 +38,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React20.useRef(null);
-  React20.useEffect(() => {
+  const previousActiveElement = React19.useRef(null);
+  React19.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -116,14 +116,14 @@ function getServerSnapshot() {
   return false;
 }
 function useReducedMotion() {
-  return React20.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return React19.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 var useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useSpringHover({
   scale = 1.02,
   lift = -2
 } = {}) {
-  const [hovered, setHovered] = React20.useState(false);
+  const [hovered, setHovered] = React19.useState(false);
   const reduced = useReducedMotion();
   const style = useSpring({
     transform: hovered ? `translateY(${lift}px) scale(${scale})` : "translateY(0px) scale(1)",
@@ -167,23 +167,33 @@ function useSpringPresence({
     }
   });
 }
+
+// src/styles/icon/index.ts
+var iconSize = {
+  xs: 14,
+  sm: 16,
+  md: 18,
+  lg: 20,
+  xl: 32
+};
 var Accordion = ({
   items,
   multiple = false,
   defaultOpenKeys = [],
   openKeys: controlledKeys,
+  onValueChange,
   onChange,
   className,
   ...props
 }) => {
   const isControlled = controlledKeys !== void 0;
-  const [internalKeys, setInternalKeys] = React20.useState(defaultOpenKeys);
+  const [internalKeys, setInternalKeys] = React19.useState(defaultOpenKeys);
   const open = isControlled ? controlledKeys ?? [] : internalKeys;
   const toggle = (key) => {
     const isOpen = open.includes(key);
     const next = isOpen ? open.filter((k) => k !== key) : multiple ? [...open, key] : [key];
     if (!isControlled) setInternalKeys(next);
-    onChange?.(next);
+    (onValueChange ?? onChange)?.(next);
   };
   return /* @__PURE__ */ jsx("div", { className: cn("accordion", className), ...props, children: items.map((item) => {
     const isOpen = open.includes(item.key);
@@ -205,7 +215,7 @@ var Accordion = ({
             /* @__PURE__ */ jsx(
               ChevronDown,
               {
-                size: 20,
+                size: iconSize.lg,
                 className: cn("accordion_chevron", isOpen && "accordion_chevron_open"),
                 "aria-hidden": "true"
               }
@@ -220,6 +230,7 @@ var Accordion = ({
           role: "region",
           "aria-labelledby": headerId,
           "aria-hidden": !isOpen,
+          inert: !isOpen,
           className: cn("accordion_panel", isOpen && "accordion_panel_open"),
           children: /* @__PURE__ */ jsx("div", { className: "accordion_panel_wrap", children: /* @__PURE__ */ jsx("div", { className: "accordion_content", children: item.content }) })
         }
@@ -243,7 +254,7 @@ var Avatar = ({
   style,
   ...props
 }) => {
-  const [imgFailed, setImgFailed] = React20.useState(false);
+  const [imgFailed, setImgFailed] = React19.useState(false);
   const showImage = src && !imgFailed;
   const initials = getInitials(name);
   return /* @__PURE__ */ jsx(
@@ -392,7 +403,7 @@ var Breadcrumb = ({
   className,
   ...props
 }) => {
-  const sep = separator ?? /* @__PURE__ */ jsx(ChevronRight, { size: 14, "aria-hidden": "true" });
+  const sep = separator ?? /* @__PURE__ */ jsx(ChevronRight, { size: iconSize.xs, "aria-hidden": "true" });
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: cn("breadcrumb", className), ...props, children: /* @__PURE__ */ jsx("ol", { className: "breadcrumb_list", children: items.map((item, idx) => {
     const isLast = idx === items.length - 1;
     return (
@@ -461,11 +472,12 @@ var ErrorState = ({
   );
 };
 var Menu = ({ items, trigger, align = "start" }) => {
-  const [open, setOpen] = React20.useState(false);
-  const wrapperRef = React20.useRef(null);
-  const menuId = React20.useId();
+  const [open, setOpen] = React19.useState(false);
+  const wrapperRef = React19.useRef(null);
+  const itemRefs = React19.useRef([]);
+  const menuId = React19.useId();
   const style = useSpringPresence({ visible: open, from: "translateY(-4px)" });
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -480,7 +492,53 @@ var Menu = ({ items, trigger, align = "start" }) => {
       document.removeEventListener("keydown", handleEsc);
     };
   }, [open]);
-  const triggerWithProps = React20.cloneElement(
+  React19.useEffect(() => {
+    const active = document.activeElement;
+    if (!open || active && itemRefs.current.includes(active)) return;
+    const first = items.findIndex((it) => !it.disabled);
+    if (first >= 0) itemRefs.current[first]?.focus();
+  }, [open, items]);
+  const moveFocus = (dir) => {
+    const enabled = items.flatMap((it, i) => it.disabled ? [] : [i]);
+    if (enabled.length === 0) return;
+    if (dir === "first") return void itemRefs.current[enabled[0]]?.focus();
+    if (dir === "last") return void itemRefs.current[enabled[enabled.length - 1]]?.focus();
+    const pos = enabled.findIndex((i) => itemRefs.current[i] === document.activeElement);
+    const next = pos < 0 ? dir === 1 ? 0 : enabled.length - 1 : (pos + dir + enabled.length) % enabled.length;
+    itemRefs.current[enabled[next]]?.focus();
+  };
+  const handleMenuKeyDown = (e) => {
+    if (["ArrowDown", "ArrowUp", "Home", "End", "Escape"].includes(e.key)) {
+      e.stopPropagation();
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveFocus(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveFocus(-1);
+        break;
+      case "Home":
+        e.preventDefault();
+        moveFocus("first");
+        break;
+      case "End":
+        e.preventDefault();
+        moveFocus("last");
+        break;
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        wrapperRef.current?.querySelector("[aria-haspopup]")?.focus();
+        break;
+      case "Tab":
+        setOpen(false);
+        break;
+    }
+  };
+  const triggerWithProps = React19.cloneElement(
     trigger,
     {
       onClick: () => setOpen((o) => !o),
@@ -498,11 +556,16 @@ var Menu = ({ items, trigger, align = "start" }) => {
         role: "menu",
         style,
         className: cn("menu", `menu_align_${align}`),
-        children: items.map((item) => /* @__PURE__ */ jsxs(
+        onKeyDown: handleMenuKeyDown,
+        children: items.map((item, index) => /* @__PURE__ */ jsxs(
           "button",
           {
+            ref: (el) => {
+              itemRefs.current[index] = el;
+            },
             type: "button",
             role: "menuitem",
+            tabIndex: -1,
             disabled: item.disabled,
             className: cn(
               "menu_item",
@@ -543,7 +606,7 @@ var NavBar = ({
   const linksRef = useRef(null);
   const [indicator, setIndicator] = useState(null);
   const [hasMounted, setHasMounted] = useState(false);
-  useLayoutEffect(() => {
+  useSafeLayoutEffect(() => {
     const links = linksRef.current;
     if (!links) return;
     const update = () => {
@@ -614,6 +677,7 @@ var NavBar = ({
 var LocaleSwitcher = ({ locale }) => {
   const [open, setOpen] = useState(false);
   const wrapperRef = useRef(null);
+  const itemRefs = useRef([]);
   const menuId = useId();
   const currentOption = locale.options.find((o) => o.value === locale.current);
   useEffect(() => {
@@ -631,8 +695,53 @@ var LocaleSwitcher = ({ locale }) => {
       document.removeEventListener("keydown", escHandler);
     };
   }, [open]);
+  useEffect(() => {
+    const active = document.activeElement;
+    if (!open || active && itemRefs.current.includes(active)) return;
+    itemRefs.current[0]?.focus();
+  }, [open]);
+  const moveFocus = (dir) => {
+    const n = locale.options.length;
+    if (n === 0) return;
+    if (dir === "first") return void itemRefs.current[0]?.focus();
+    if (dir === "last") return void itemRefs.current[n - 1]?.focus();
+    const pos = itemRefs.current.indexOf(document.activeElement);
+    const next = pos < 0 ? dir === 1 ? 0 : n - 1 : (pos + dir + n) % n;
+    itemRefs.current[next]?.focus();
+  };
+  const handleMenuKeyDown = (e) => {
+    if (["ArrowDown", "ArrowUp", "Home", "End", "Escape"].includes(e.key)) {
+      e.stopPropagation();
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveFocus(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveFocus(-1);
+        break;
+      case "Home":
+        e.preventDefault();
+        moveFocus("first");
+        break;
+      case "End":
+        e.preventDefault();
+        moveFocus("last");
+        break;
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        wrapperRef.current?.querySelector("[aria-haspopup]")?.focus();
+        break;
+      case "Tab":
+        setOpen(false);
+        break;
+    }
+  };
   const handleSelect = (value) => {
-    locale.onChange(value);
+    (locale.onValueChange ?? locale.onChange)?.(value);
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: "nav_bar_locale", children: [
@@ -646,25 +755,45 @@ var LocaleSwitcher = ({ locale }) => {
         "aria-controls": menuId,
         onClick: () => setOpen((p) => !p),
         children: [
-          /* @__PURE__ */ jsx(Globe, { size: 16, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(Globe, { size: iconSize.sm, "aria-hidden": "true" }),
           !locale.hideLabel && /* @__PURE__ */ jsx("span", { className: "nav_bar_locale_label", children: currentOption?.label ?? locale.current.toUpperCase() }),
-          /* @__PURE__ */ jsx(ChevronDown, { size: 14, "aria-hidden": "true", className: "nav_bar_locale_chevron" })
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              size: iconSize.xs,
+              "aria-hidden": "true",
+              className: "nav_bar_locale_chevron"
+            }
+          )
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx("ul", { id: menuId, role: "menu", className: "nav_bar_locale_menu", children: locale.options.map((opt) => /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(
-      "button",
+    open && /* @__PURE__ */ jsx(
+      "ul",
       {
-        type: "button",
-        role: "menuitem",
-        className: cn(
-          "nav_bar_locale_item",
-          opt.value === locale.current && "nav_bar_locale_item_active"
-        ),
-        onClick: () => handleSelect(opt.value),
-        children: opt.label
+        id: menuId,
+        role: "menu",
+        className: "nav_bar_locale_menu",
+        onKeyDown: handleMenuKeyDown,
+        children: locale.options.map((opt, index) => /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: (el) => {
+              itemRefs.current[index] = el;
+            },
+            type: "button",
+            role: "menuitem",
+            tabIndex: -1,
+            className: cn(
+              "nav_bar_locale_item",
+              opt.value === locale.current && "nav_bar_locale_item_active"
+            ),
+            onClick: () => handleSelect(opt.value),
+            children: opt.label
+          }
+        ) }, opt.value))
       }
-    ) }, opt.value)) })
+    )
   ] });
 };
 var NavLink = ({ active, className, children, ...props }) => {
@@ -699,9 +828,9 @@ var Sidebar = ({
   ...props
 }) => {
   const isControlled = collapsedProp !== void 0;
-  const [internalCollapsed, setInternalCollapsed] = React20.useState(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = React19.useState(defaultCollapsed);
   const collapsed = isControlled ? collapsedProp : internalCollapsed;
-  const toggle = React20.useCallback(() => {
+  const toggle = React19.useCallback(() => {
     const next = !collapsed;
     if (!isControlled) setInternalCollapsed(next);
     onCollapsedChange?.(next);
@@ -733,7 +862,7 @@ var Sidebar = ({
             onClick: toggle,
             "aria-label": toggleLabel,
             "aria-expanded": !collapsed,
-            children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) : /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+            children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { size: iconSize.xs }) : /* @__PURE__ */ jsx(ChevronLeft, { size: iconSize.xs })
           }
         )
       ]
@@ -774,9 +903,9 @@ var SidebarSection = ({ label, className, children, ...props }) => {
     children
   ] });
 };
-var TabsContext = React20.createContext(null);
+var TabsContext = React19.createContext(null);
 function useTabsContext() {
-  const ctx = React20.useContext(TabsContext);
+  const ctx = React19.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>'
@@ -795,17 +924,17 @@ var Tabs = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React20.useState(defaultValue);
+  const [internalValue, setInternalValue] = React19.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const setValue = React20.useCallback(
+  const setValue = React19.useCallback(
     (v) => {
       if (!isControlled) setInternalValue(v);
       onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
-  const idPrefix = React20.useId();
-  const ctx = React20.useMemo(
+  const idPrefix = React19.useId();
+  const ctx = React19.useMemo(
     () => ({ value, setValue, variant, size, idPrefix }),
     [value, setValue, variant, size, idPrefix]
   );
@@ -813,10 +942,10 @@ var Tabs = ({
 };
 var TabList = ({ ariaLabel, className, children, ...props }) => {
   const { variant } = useTabsContext();
-  const listRef = React20.useRef(null);
-  const [indicator, setIndicator] = React20.useState(null);
-  const [hasMounted, setHasMounted] = React20.useState(false);
-  React20.useLayoutEffect(() => {
+  const listRef = React19.useRef(null);
+  const [indicator, setIndicator] = React19.useState(null);
+  const [hasMounted, setHasMounted] = React19.useState(false);
+  useSafeLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
     const update = () => {
@@ -964,15 +1093,15 @@ var Popover = ({
   className
 }) => {
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = React20.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React19.useState(defaultOpen);
   const open = isControlled ? openProp : internalOpen;
-  const [shouldRender, setShouldRender] = React20.useState(open ?? false);
+  const [shouldRender, setShouldRender] = React19.useState(open ?? false);
   if (open && !shouldRender) setShouldRender(true);
-  const wrapperRef = React20.useRef(null);
-  const popoverRef = React20.useRef(null);
-  const previousFocusRef = React20.useRef(null);
-  const popoverId = React20.useId();
-  const setOpen = React20.useCallback(
+  const wrapperRef = React19.useRef(null);
+  const popoverRef = React19.useRef(null);
+  const previousFocusRef = React19.useRef(null);
+  const popoverId = React19.useId();
+  const setOpen = React19.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
@@ -992,7 +1121,7 @@ var Popover = ({
     }
   })();
   const style = useSpringPresence({ visible: open, from: fromTransform, onExitComplete: () => setShouldRender(false) });
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!open) return;
     previousFocusRef.current = document.activeElement;
     const node = popoverRef.current;
@@ -1000,7 +1129,7 @@ var Popover = ({
     const focusable = node.querySelector(FOCUSABLE_SELECTORS2);
     (focusable ?? node).focus();
   }, [open]);
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -1018,7 +1147,7 @@ var Popover = ({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open, setOpen]);
-  const triggerWithProps = React20.cloneElement(
+  const triggerWithProps = React19.cloneElement(
     trigger,
     {
       onClick: (e) => {
@@ -1057,18 +1186,18 @@ var Tooltip = ({
   disabled = false,
   children
 }) => {
-  const [open, setOpen] = React20.useState(false);
-  const timerRef = React20.useRef(null);
-  const tooltipId = React20.useId();
-  const show = React20.useCallback(() => {
+  const [open, setOpen] = React19.useState(false);
+  const timerRef = React19.useRef(null);
+  const tooltipId = React19.useId();
+  const show = React19.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => setOpen(true), delay);
   }, [delay]);
-  const hide = React20.useCallback(() => {
+  const hide = React19.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setOpen(false);
   }, []);
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
@@ -1086,12 +1215,27 @@ var Tooltip = ({
     }
   })();
   const style = useSpringPresence({ visible: open, from: fromTransform });
-  const trigger = React20.cloneElement(children, {
-    onMouseEnter: show,
-    onMouseLeave: hide,
-    onFocus: show,
-    onBlur: hide,
-    "aria-describedby": open ? tooltipId : void 0
+  const child = children;
+  const childProps = child.props;
+  const trigger = React19.cloneElement(child, {
+    onMouseEnter: (e) => {
+      childProps.onMouseEnter?.(e);
+      show();
+    },
+    onMouseLeave: (e) => {
+      childProps.onMouseLeave?.(e);
+      hide();
+    },
+    onFocus: (e) => {
+      childProps.onFocus?.(e);
+      show();
+    },
+    onBlur: (e) => {
+      childProps.onBlur?.(e);
+      hide();
+    },
+    // 자식의 기존 aria-describedby 보존 + tooltip id 합성 (폼 설명/에러 연결 끊김 방지)
+    "aria-describedby": open ? [childProps["aria-describedby"], tooltipId].filter(Boolean).join(" ") : childProps["aria-describedby"]
   });
   if (disabled) return children;
   return /* @__PURE__ */ jsxs("span", { className: "tooltip_wrapper", children: [
@@ -1165,10 +1309,13 @@ var baseColors = {
   neutral900: "#121212",
   neutral925: "#141414",
   neutral950: "#0A0A0A",
-  statusError: "#EF4444",
-  statusSuccess: "#10B981",
-  statusWarning: "#F59E0B",
-  statusInfo: "#3B82F6",
+  // caption 전용 AA 값 (neutral_500 과 분리 — SCSS _index.scss 와 동일)
+  textCaptionLight: "#6F6F6F",
+  // status — SCSS _index.scss 와 동일한 AA 통과(red/green/amber/blue-700) 값
+  statusError: "#B91C1C",
+  statusSuccess: "#047857",
+  statusWarning: "#B45309",
+  statusInfo: "#1D4ED8",
   alphaBlack5: "rgba(0, 0, 0, 0.05)",
   alphaBlack8: "rgba(0, 0, 0, 0.08)",
   alphaBlack12: "rgba(26, 26, 26, 0.12)",
@@ -1186,7 +1333,7 @@ var colors = {
   text: {
     heading: baseColors.neutral900,
     body: baseColors.neutral700,
-    caption: baseColors.neutral500,
+    caption: baseColors.textCaptionLight,
     brand: baseColors.brandPrimary,
     inverse: baseColors.neutral0,
     disabled: baseColors.alphaBlack38
@@ -1592,6 +1739,8 @@ var Button = ({
   fullWidth = false,
   radius: radius2,
   danger = false,
+  type = "button",
+  ref,
   className,
   children,
   ...props
@@ -1605,17 +1754,17 @@ var Button = ({
     danger && "button_danger",
     className
   );
-  return /* @__PURE__ */ jsxs("button", { className: buttonClassName, ...props, children: [
+  return /* @__PURE__ */ jsxs("button", { ref, type, className: buttonClassName, ...props, 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 })
   ] });
 };
 var ICONS = {
-  info: /* @__PURE__ */ jsx(Info, { size: 20, "aria-hidden": "true" }),
-  success: /* @__PURE__ */ jsx(CheckCircle2, { size: 20, "aria-hidden": "true" }),
-  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: 20, "aria-hidden": "true" }),
-  error: /* @__PURE__ */ jsx(XCircle, { size: 20, "aria-hidden": "true" })
+  info: /* @__PURE__ */ jsx(Info, { size: iconSize.lg, "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx(CheckCircle2, { size: iconSize.lg, "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: iconSize.lg, "aria-hidden": "true" }),
+  error: /* @__PURE__ */ jsx(XCircle, { size: iconSize.lg, "aria-hidden": "true" })
 };
 var AlertContext = createContext(null);
 var useAlert = () => {
@@ -1671,12 +1820,12 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  const panelRef = React20.useRef(null);
-  const titleId = React20.useId();
-  const messageId = React20.useId();
+  const panelRef = React19.useRef(null);
+  const titleId = React19.useId();
+  const messageId = React19.useId();
   const [shouldRender, setShouldRender] = useState(isOpen);
   useFocusTrap(panelRef, isOpen);
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (isOpen) setShouldRender(true);
   }, [isOpen]);
   const overlayStyle = useSpring({
@@ -1757,6 +1906,7 @@ var Card = ({
   interactive = false,
   footer,
   footerAlign = "end",
+  ref,
   className,
   children,
   ...props
@@ -1769,7 +1919,7 @@ var Card = ({
     { card_bordered: bordered, card_interactive: interactive },
     className
   );
-  return /* @__PURE__ */ jsxs("div", { className: cardClassName, ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: cardClassName, ...props, children: [
     heading ? /* @__PURE__ */ jsx(HeadingTag, { className: "card_title", children: heading }) : null,
     /* @__PURE__ */ jsx("div", { className: "card_body", children }),
     footer ? /* @__PURE__ */ jsx("div", { className: cn("card_footer", `card_footer_${footerAlign}`), children: footer }) : null
@@ -1783,12 +1933,12 @@ var Checkbox = ({
   ref,
   ...props
 }) => {
-  const inputRef = React20.useRef(null);
-  React20.useImperativeHandle(
+  const inputRef = React19.useRef(null);
+  React19.useImperativeHandle(
     ref,
     () => inputRef.current
   );
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
@@ -1960,39 +2110,91 @@ var Chip = ({
     )
   ] });
 };
-var Dropdown = ({
-  id,
-  label,
-  placeholder = "Select\u2026",
-  options,
-  value,
-  onChange,
-  defaultValue = null,
-  disabled,
-  size = "md",
-  className
-}) => {
+var normalizeForSearch = (s) => s.toLowerCase().replace(/\s+/g, "");
+var Dropdown = (props) => {
+  const {
+    id,
+    label,
+    placeholder = "Select\u2026",
+    options,
+    disabled,
+    size = "md",
+    className,
+    searchable = false,
+    searchPlaceholder = "\uAC80\uC0C9\u2026",
+    emptyText = "\uACB0\uACFC \uC5C6\uC74C",
+    selectedSummary = (count) => `${count}\uAC1C \uC120\uD0DD`
+  } = props;
+  const multiple = props.multiple === true;
   const internalId = useId();
   const dropdownId = id ?? internalId;
-  const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const currentValue = isControlled ? value ?? null : internalValue;
+  const isControlled = props.value !== void 0;
+  const [internalSingle, setInternalSingle] = useState(
+    () => props.multiple === true ? null : props.defaultValue ?? null
+  );
+  const [internalMulti, setInternalMulti] = useState(
+    () => props.multiple === true ? props.defaultValue ?? [] : []
+  );
   const [isOpen, setIsOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
   const [dropUp, setDropUp] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const [committedQuery, setCommittedQuery] = useState("");
+  const isComposingRef = useRef(false);
   const wrapperRef = useRef(null);
   const controlRef = useRef(null);
-  const currentOption = useMemo(
-    () => options.find((o) => o.value === currentValue) ?? null,
-    [options, currentValue]
-  );
-  const setValue = useCallback(
+  const searchRef = useRef(null);
+  const selectedValues = useMemo(() => {
+    if (multiple) {
+      const v2 = isControlled ? props.value : internalMulti;
+      return v2 ?? [];
+    }
+    const v = isControlled ? props.value : internalSingle;
+    return v != null ? [v] : [];
+  }, [multiple, isControlled, props.value, internalMulti, internalSingle]);
+  const visibleOptions = useMemo(() => {
+    if (!searchable) return options;
+    const q = normalizeForSearch(committedQuery);
+    if (q === "") return options;
+    return options.filter((o) => normalizeForSearch(o.label).includes(q));
+  }, [options, searchable, committedQuery]);
+  const selectSingle = useCallback(
     (next) => {
       const option = options.find((o) => o.value === next) ?? null;
-      if (!isControlled) setInternalValue(next);
-      onChange?.(next, option);
+      if (!isControlled) setInternalSingle(next);
+      if (props.multiple !== true) {
+        (props.onValueChange ?? props.onChange)?.(next, option);
+      }
+    },
+    [isControlled, options, props.multiple, props.onValueChange, props.onChange]
+  );
+  const toggleMultiple = useCallback(
+    (opt) => {
+      const exists = selectedValues.includes(opt.value);
+      const nextValues = exists ? selectedValues.filter((v) => v !== opt.value) : [...selectedValues, opt.value];
+      const nextOptions = nextValues.map((v) => options.find((o) => o.value === v)).filter((o) => Boolean(o));
+      if (!isControlled) setInternalMulti(nextValues);
+      if (props.multiple === true) {
+        (props.onValueChange ?? props.onChange)?.(nextValues, nextOptions);
+      }
     },
-    [isControlled, onChange, options]
+    [selectedValues, options, isControlled, props.multiple, props.onValueChange, props.onChange]
+  );
+  const closePanel = useCallback(() => {
+    setIsOpen(false);
+    if (searchable) controlRef.current?.focus();
+  }, [searchable]);
+  const selectOption = useCallback(
+    (opt) => {
+      if (opt.disabled) return;
+      if (multiple) {
+        toggleMultiple(opt);
+      } else {
+        selectSingle(opt.value);
+        closePanel();
+      }
+    },
+    [multiple, toggleMultiple, selectSingle, closePanel]
   );
   useEffect(() => {
     const handleOutsideClick = (e) => {
@@ -2003,31 +2205,33 @@ var Dropdown = ({
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, []);
-  const moveActive = (dir) => {
-    if (options.length === 0) return;
-    if (!isOpen) {
-      setIsOpen(true);
-      return;
-    }
-    let i = activeIndex;
-    const len = options.length;
-    for (let step = 0; step < len; step++) {
-      i = (i + dir + len) % len;
-      if (!options[i].disabled) {
-        setActiveIndex(i);
-        break;
+  const moveActive = useCallback(
+    (dir) => {
+      if (visibleOptions.length === 0) return;
+      if (!isOpen) {
+        setIsOpen(true);
+        return;
       }
-    }
-  };
-  const commitActive = () => {
-    if (activeIndex < 0 || activeIndex >= options.length) return;
-    const opt = options[activeIndex];
-    if (!opt.disabled) {
-      setValue(opt.value);
-      setIsOpen(false);
-    }
-  };
-  const onKeyDown = (e) => {
+      let i = activeIndex;
+      if (i === -1) {
+        i = dir === 1 ? -1 : 0;
+      }
+      const len = visibleOptions.length;
+      for (let step = 0; step < len; step++) {
+        i = (i + dir + len) % len;
+        if (!visibleOptions[i].disabled) {
+          setActiveIndex(i);
+          break;
+        }
+      }
+    },
+    [visibleOptions, isOpen, activeIndex]
+  );
+  const commitActive = useCallback(() => {
+    if (activeIndex < 0 || activeIndex >= visibleOptions.length) return;
+    selectOption(visibleOptions[activeIndex]);
+  }, [activeIndex, visibleOptions, selectOption]);
+  const onControlKeyDown = (e) => {
     if (disabled) return;
     switch (e.key) {
       case " ":
@@ -2047,13 +2251,13 @@ var Dropdown = ({
       case "Home":
         e.preventDefault();
         setIsOpen(true);
-        setActiveIndex(options.findIndex((o) => !o.disabled));
+        setActiveIndex(visibleOptions.findIndex((o) => !o.disabled));
         break;
       case "End":
         e.preventDefault();
         setIsOpen(true);
-        for (let i = options.length - 1; i >= 0; i--) {
-          if (!options[i].disabled) {
+        for (let i = visibleOptions.length - 1; i >= 0; i--) {
+          if (!visibleOptions[i].disabled) {
             setActiveIndex(i);
             break;
           }
@@ -2065,16 +2269,46 @@ var Dropdown = ({
         break;
     }
   };
+  const onSearchKeyDown = (e) => {
+    if (e.nativeEvent.isComposing) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveActive(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveActive(-1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        commitActive();
+        break;
+      case "Escape":
+        e.preventDefault();
+        closePanel();
+        break;
+    }
+  };
   useEffect(() => {
     if (!isOpen) return;
-    const matchedIndex = options.findIndex((o) => o.value === currentValue && !o.disabled);
-    setActiveIndex(
-      matchedIndex >= 0 ? matchedIndex : Math.max(
-        0,
-        options.findIndex((o) => !o.disabled)
-      )
+    const selectedIdx = visibleOptions.findIndex(
+      (o) => selectedValues.includes(o.value) && !o.disabled
     );
-  }, [isOpen, options, currentValue]);
+    setActiveIndex(selectedIdx >= 0 ? selectedIdx : visibleOptions.findIndex((o) => !o.disabled));
+  }, [isOpen, visibleOptions]);
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchText("");
+      setCommittedQuery("");
+      isComposingRef.current = false;
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen && searchable) {
+      searchRef.current?.focus();
+    }
+  }, [isOpen, searchable]);
   useEffect(() => {
     if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
@@ -2083,6 +2317,13 @@ var Dropdown = ({
     const MIN_BELOW = 120;
     setDropUp(spaceBelow < MIN_BELOW && spaceAbove > spaceBelow);
   }, [isOpen]);
+  const currentOption = useMemo(
+    () => multiple ? null : options.find((o) => o.value === selectedValues[0]) ?? null,
+    [multiple, options, selectedValues]
+  );
+  const hasSelection = selectedValues.length > 0;
+  const showValue = multiple ? hasSelection : currentOption != null;
+  const controlText = multiple ? hasSelection ? selectedSummary(selectedValues.length) : placeholder : currentOption ? currentOption.label : placeholder;
   const rootClassName = cn("dropdown", `dropdown_size_${size}`, className);
   const fieldsetClassName = cn("dropdown_fieldset", { is_open: isOpen, is_disabled: disabled });
   const listClassName = cn("dropdown_list", { dropdown_list_up: dropUp });
@@ -2090,86 +2331,107 @@ var Dropdown = ({
     visible: isOpen,
     from: dropUp ? "translateY(4px)" : "translateY(-4px)"
   });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: wrapperRef,
-      className: rootClassName,
-      children: [
-        label && /* @__PURE__ */ jsx("label", { htmlFor: dropdownId, className: "dropdown_label", children: label }),
-        /* @__PURE__ */ jsx("div", { className: fieldsetClassName, children: /* @__PURE__ */ jsxs(
-          "button",
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: rootClassName, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: dropdownId, className: "dropdown_label", children: label }),
+    /* @__PURE__ */ jsx("div", { className: fieldsetClassName, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: controlRef,
+        id: dropdownId,
+        type: "button",
+        className: cn("dropdown_control", { is_disabled: disabled }),
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-controls": `${dropdownId}_listbox`,
+        onClick: () => !disabled && setIsOpen((o) => !o),
+        onKeyDown: onControlKeyDown,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: showValue ? "dropdown_value" : "dropdown_placeholder", children: controlText }),
+          /* @__PURE__ */ jsx("span", { className: cn("dropdown_icon", { dropdown_icon_open: isOpen }), "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: iconSize.lg }) })
+        ]
+      }
+    ) }),
+    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 }) }),
+        /* @__PURE__ */ jsx(
+          "input",
           {
-            ref: controlRef,
-            id: dropdownId,
-            type: "button",
-            className: cn("dropdown_control", { is_disabled: disabled }),
-            "aria-haspopup": "listbox",
+            ref: searchRef,
+            type: "text",
+            className: "dropdown_search_input",
+            placeholder: searchPlaceholder,
+            "aria-label": searchPlaceholder,
+            autoComplete: "off",
+            role: "combobox",
+            "aria-autocomplete": "list",
             "aria-expanded": isOpen,
             "aria-controls": `${dropdownId}_listbox`,
-            onClick: () => !disabled && setIsOpen((o) => !o),
-            onKeyDown,
-            disabled,
-            children: [
-              /* @__PURE__ */ jsx("span", { className: currentOption ? "dropdown_value" : "dropdown_placeholder", children: currentOption ? currentOption.label : placeholder }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn("dropdown_icon", { dropdown_icon_open: isOpen }),
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 })
-                }
-              )
-            ]
-          }
-        ) }),
-        isOpen && /* @__PURE__ */ jsx(
-          animated.div,
-          {
-            id: `${dropdownId}_listbox`,
-            role: "listbox",
-            className: listClassName,
-            style: listStyle,
-            children: options.map((opt, i) => {
-              const selected = currentValue === opt.value;
-              const active = i === activeIndex;
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    role: "option",
-                    tabIndex: -1,
-                    "aria-selected": selected,
-                    "aria-disabled": opt.disabled ? true : void 0,
-                    className: cn("dropdown_option", {
-                      is_selected: selected,
-                      is_active: active,
-                      is_disabled: opt.disabled
-                    }),
-                    onMouseEnter: () => !opt.disabled && setActiveIndex(i),
-                    onClick: () => {
-                      if (opt.disabled) return;
-                      setValue(opt.value);
-                      setIsOpen(false);
-                    },
-                    children: [
-                      opt.leadingIcon && /* @__PURE__ */ jsx("span", { className: "dropdown_option_icon", children: opt.leadingIcon }),
-                      /* @__PURE__ */ jsxs("span", { className: "dropdown_option_content", children: [
-                        /* @__PURE__ */ jsx("span", { className: "dropdown_option_label", children: opt.label }),
-                        opt.supportingText && /* @__PURE__ */ jsx("span", { className: "dropdown_option_supporting", children: opt.supportingText })
-                      ] }),
-                      (selected || opt.trailingIcon) && /* @__PURE__ */ jsx("span", { className: "dropdown_option_trailing", children: opt.trailingIcon ?? /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" }) })
-                    ]
-                  }
-                ),
-                opt.showDivider && /* @__PURE__ */ jsx("hr", { className: "dropdown_option_divider" })
-              ] }, opt.value);
-            })
+            "aria-activedescendant": activeIndex >= 0 && visibleOptions[activeIndex] ? `${dropdownId}_option_${activeIndex}` : void 0,
+            value: searchText,
+            onChange: (e) => {
+              const v = e.target.value;
+              setSearchText(v);
+              if (!isComposingRef.current) setCommittedQuery(v);
+            },
+            onCompositionStart: () => {
+              isComposingRef.current = true;
+            },
+            onCompositionEnd: (e) => {
+              isComposingRef.current = false;
+              const v = e.currentTarget.value;
+              setSearchText(v);
+              setCommittedQuery(v);
+            },
+            onKeyDown: onSearchKeyDown
           }
         )
-      ]
-    }
-  );
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: `${dropdownId}_listbox`,
+          role: "listbox",
+          className: "dropdown_options",
+          "aria-multiselectable": multiple || void 0,
+          children: visibleOptions.length === 0 ? searchable && /* @__PURE__ */ jsx("div", { className: "dropdown_empty", children: emptyText }) : visibleOptions.map((opt, i) => {
+            const selected = selectedValues.includes(opt.value);
+            const active = i === activeIndex;
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  id: `${dropdownId}_option_${i}`,
+                  role: "option",
+                  tabIndex: -1,
+                  "aria-selected": selected,
+                  "aria-disabled": opt.disabled ? true : void 0,
+                  className: cn("dropdown_option", {
+                    is_selected: selected,
+                    is_active: active,
+                    is_disabled: opt.disabled
+                  }),
+                  onMouseEnter: () => !opt.disabled && setActiveIndex(i),
+                  onClick: () => selectOption(opt),
+                  children: [
+                    multiple && /* @__PURE__ */ jsx("span", { className: "dropdown_option_check", "aria-hidden": "true", children: selected && /* @__PURE__ */ jsx(Check, { size: iconSize.sm }) }),
+                    opt.leadingIcon && /* @__PURE__ */ jsx("span", { className: "dropdown_option_icon", children: opt.leadingIcon }),
+                    /* @__PURE__ */ jsxs("span", { className: "dropdown_option_content", children: [
+                      /* @__PURE__ */ jsx("span", { className: "dropdown_option_label", children: opt.label }),
+                      opt.supportingText && /* @__PURE__ */ jsx("span", { className: "dropdown_option_supporting", children: opt.supportingText })
+                    ] }),
+                    (opt.trailingIcon || !multiple && selected) && /* @__PURE__ */ jsx("span", { className: "dropdown_option_trailing", children: opt.trailingIcon ?? /* @__PURE__ */ jsx(Check, { size: iconSize.sm, "aria-hidden": "true" }) })
+                  ]
+                }
+              ),
+              opt.showDivider && /* @__PURE__ */ jsx("hr", { className: "dropdown_option_divider" })
+            ] }, opt.value);
+          })
+        }
+      )
+    ] })
+  ] });
 };
 var pad = (n) => String(n).padStart(2, "0");
 var getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
@@ -2178,6 +2440,7 @@ var range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => st
 var DatePicker = ({
   label,
   value,
+  onValueChange,
   onChange,
   mode = "year-month-day",
   startYear = 1950,
@@ -2193,9 +2456,9 @@ var DatePicker = ({
   minDateSrFormat = "Minimum date: {date}",
   selectableRangeUntilTodaySrText = "Selectable up to today"
 }) => {
-  const groupId = React20.useId();
-  const constraintId = React20.useId();
-  const { todayYear, todayMonth, todayDay } = React20.useMemo(() => {
+  const groupId = React19.useId();
+  const constraintId = React19.useId();
+  const { todayYear, todayMonth, todayDay } = React19.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     return {
       todayYear: now.getFullYear(),
@@ -2204,7 +2467,7 @@ var DatePicker = ({
     };
   }, []);
   const endYear = endYearProp ?? todayYear + 10;
-  const parsed = React20.useMemo(() => {
+  const parsed = React19.useMemo(() => {
     if (!value) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = value.split("-").map(Number);
     return {
@@ -2213,7 +2476,7 @@ var DatePicker = ({
       day: d || 0
     };
   }, [value]);
-  const min = React20.useMemo(() => {
+  const min = React19.useMemo(() => {
     if (!minDate) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = minDate.split("-").map(Number);
     return {
@@ -2233,7 +2496,7 @@ var DatePicker = ({
       min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1
     )
   );
-  const maxDay = React20.useMemo(() => {
+  const maxDay = React19.useMemo(() => {
     if (!year || !month) return 31;
     const daysInMonth = getDaysInMonth(year, month);
     if (selectableRange === "until-today" && year === todayYear && month === todayMonth) {
@@ -2241,39 +2504,40 @@ var DatePicker = ({
     }
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
-  const yearOptions = React20.useMemo(
+  const yearOptions = React19.useMemo(
     () => range(startYear, maxYear).map((y) => ({
       value: String(y),
       label: String(y)
     })),
     [startYear, maxYear]
   );
-  const monthOptions = React20.useMemo(
+  const monthOptions = React19.useMemo(
     () => range(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
       value: String(m),
       label: pad(m)
     })),
     [minMonth, maxMonth]
   );
-  const dayOptions = React20.useMemo(
+  const dayOptions = React19.useMemo(
     () => range(minDay, Math.max(minDay, maxDay)).map((d) => ({
       value: String(d),
       label: pad(d)
     })),
     [minDay, maxDay]
   );
-  const emit = React20.useCallback(
+  const emit = React19.useCallback(
     (yy, mm, dd) => {
+      const cb = onValueChange ?? onChange;
       if (mode === "year-month") {
-        onChange(`${yy}-${pad(mm)}`);
+        cb?.(`${yy}-${pad(mm)}`);
         return;
       }
       const safeDay = Math.min(dd ?? 1, getDaysInMonth(yy, mm));
-      onChange(`${yy}-${pad(mm)}-${pad(safeDay)}`);
+      cb?.(`${yy}-${pad(mm)}-${pad(safeDay)}`);
     },
-    [mode, onChange]
+    [mode, onValueChange, onChange]
   );
-  const handleYearChange = React20.useCallback(
+  const handleYearChange = React19.useCallback(
     (raw) => {
       if (!raw) return;
       const newYear = Number(raw);
@@ -2290,14 +2554,14 @@ var DatePicker = ({
     },
     [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
   );
-  const handleMonthChange = React20.useCallback(
+  const handleMonthChange = React19.useCallback(
     (raw) => {
       if (!raw || !year) return;
       emit(year, Number(raw), day || void 0);
     },
     [year, day, emit]
   );
-  const handleDayChange = React20.useCallback(
+  const handleDayChange = React19.useCallback(
     (raw) => {
       if (!raw || !year || !month) return;
       emit(year, month, Number(raw));
@@ -2333,7 +2597,7 @@ var DatePicker = ({
               placeholder: yearLabel,
               options: yearOptions,
               value: year ? String(year) : null,
-              onChange: handleYearChange,
+              onValueChange: handleYearChange,
               disabled
             }
           ),
@@ -2346,7 +2610,7 @@ var DatePicker = ({
               placeholder: monthLabel,
               options: monthOptions,
               value: month ? String(month) : null,
-              onChange: handleMonthChange,
+              onValueChange: handleMonthChange,
               disabled: disabled || !year
             }
           ),
@@ -2359,7 +2623,7 @@ var DatePicker = ({
               placeholder: dayLabel,
               options: dayOptions,
               value: day ? String(day) : null,
-              onChange: handleDayChange,
+              onValueChange: handleDayChange,
               disabled: disabled || !month
             }
           )
@@ -2372,6 +2636,119 @@ var Divider = ({ weight = "standard", className, ...props }) => {
   const dividerClassName = cn("divider", `divider_weight_${weight}`, className);
   return /* @__PURE__ */ jsx("hr", { className: dividerClassName, ...props });
 };
+var SLIDE_FROM = {
+  left: "translateX(-100%)",
+  right: "translateX(100%)",
+  bottom: "translateY(100%)"
+};
+var Drawer = ({
+  open,
+  onClose,
+  placement = "right",
+  size = 360,
+  title,
+  footer,
+  closeOnOverlay = true,
+  showCloseIcon = true,
+  closeLabel = "\uB2EB\uAE30",
+  ariaLabel,
+  children,
+  className,
+  ...props
+}) => {
+  const panelRef = React19.useRef(null);
+  const titleId = React19.useId();
+  const [shouldRender, setShouldRender] = React19.useState(open);
+  const reduced = useReducedMotion();
+  useFocusTrap(panelRef, open);
+  if (open && !shouldRender) setShouldRender(true);
+  const overlayStyle = useSpringPresence({
+    visible: open,
+    from: "translateY(0px)",
+    onExitComplete: () => setShouldRender(false)
+  });
+  const slideFrom = SLIDE_FROM[placement];
+  const slideRest = placement === "bottom" ? "translateY(0%)" : "translateX(0%)";
+  const panelStyle = useSpring({
+    from: { transform: slideFrom },
+    to: { transform: open ? slideRest : slideFrom },
+    immediate: reduced,
+    config: { tension: 280, friction: 28, clamp: !open }
+  });
+  React19.useEffect(() => {
+    if (!open) 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);
+      }
+    };
+  }, [open]);
+  if (!open && !shouldRender) 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,
+          className: cn("drawer_panel", className),
+          style: { ...panelStyle, ...panelSizeStyle },
+          role: "document",
+          onClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => {
+            if (e.key !== "Escape") e.stopPropagation();
+          },
+          ...props,
+          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 })
+          ]
+        }
+      )
+    }
+  );
+};
+Drawer.displayName = "Drawer";
 var FileInput = ({
   label = "Choose file",
   onFiles,
@@ -2385,16 +2762,15 @@ var FileInput = ({
   onChange,
   ...props
 }) => {
-  const inputId = React20.useId();
-  const helperId = React20.useId();
-  const inputRef = React20.useRef(null);
-  const [previewUrls, setPreviewUrls] = React20.useState([]);
+  const inputId = React19.useId();
+  const helperId = React19.useId();
+  const inputRef = React19.useRef(null);
+  const [previewUrls, setPreviewUrls] = React19.useState([]);
+  const previewUrlsRef = React19.useRef([]);
   const isPreviewVariant = variant === "preview";
   const showPreview = isPreviewVariant || preview;
   const handleChange = (e) => {
     const files = e.currentTarget.files;
-    onFiles?.(files);
-    onChange?.(e);
     if (showPreview && files) {
       for (const url of previewUrls) {
         URL.revokeObjectURL(url);
@@ -2407,12 +2783,16 @@ var FileInput = ({
         }
       }
       setPreviewUrls(urls);
+      previewUrlsRef.current = urls;
     } else {
       for (const url of previewUrls) {
         URL.revokeObjectURL(url);
       }
       setPreviewUrls([]);
+      previewUrlsRef.current = [];
     }
+    onFiles?.(files);
+    onChange?.(e);
   };
   const handleRemove = (e) => {
     e.preventDefault();
@@ -2421,18 +2801,19 @@ var FileInput = ({
       URL.revokeObjectURL(url);
     }
     setPreviewUrls([]);
+    previewUrlsRef.current = [];
     if (inputRef.current) {
       inputRef.current.value = "";
     }
     onFiles?.(null);
   };
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     return () => {
-      for (const url of previewUrls) {
+      for (const url of previewUrlsRef.current) {
         URL.revokeObjectURL(url);
       }
     };
-  }, [previewUrls]);
+  }, []);
   const hasImage = previewUrls.length > 0;
   const rootClassName = cn(
     "file_input",
@@ -2473,7 +2854,7 @@ var FileInput = ({
             }
           )
         ) : /* @__PURE__ */ jsxs("span", { className: "file_input_preview_empty", children: [
-          /* @__PURE__ */ jsx(Image, { size: 32, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(Image, { size: iconSize.xl, "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { className: "file_input_preview_empty_text", children: label })
         ] })
       }
@@ -2485,7 +2866,7 @@ var FileInput = ({
         className: "file_input_preview_remove",
         onClick: handleRemove,
         "aria-label": "\uC774\uBBF8\uC9C0 \uC81C\uAC70",
-        children: /* @__PURE__ */ jsx(X, { size: 14, "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx(X, { size: iconSize.xs, "aria-hidden": "true" })
       }
     ),
     supportingText && /* @__PURE__ */ jsx("span", { id: helperId, className: "file_input_helper", children: supportingText }),
@@ -2564,6 +2945,8 @@ var IconButton = ({
   variant = "standard",
   size = "md",
   icon,
+  type = "button",
+  ref,
   className,
   ...props
 }) => {
@@ -2573,7 +2956,7 @@ var IconButton = ({
     `icon_button_size_${size}`,
     className
   );
-  return /* @__PURE__ */ jsx("button", { className: buttonClassName, ...props, children: /* @__PURE__ */ jsx("span", { className: "icon_button_icon", "aria-hidden": "true", children: icon }) });
+  return /* @__PURE__ */ jsx("button", { ref, type, className: buttonClassName, ...props, children: /* @__PURE__ */ jsx("span", { className: "icon_button_icon", "aria-hidden": "true", children: icon }) });
 };
 var LinearProgress = ({
   totalSteps,
@@ -2646,7 +3029,7 @@ var ListItem = ({
           if (disabled || !onClick) return;
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
-            onClick(e);
+            e.currentTarget.click();
           }
         },
         role: onClick ? "button" : void 0,
@@ -2723,13 +3106,11 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React20.useRef(null);
-  const titleId = React20.useId();
-  const [shouldRender, setShouldRender] = React20.useState(open);
+  const panelRef = React19.useRef(null);
+  const titleId = React19.useId();
+  const [shouldRender, setShouldRender] = React19.useState(open);
   useFocusTrap(panelRef, open);
-  React20.useEffect(() => {
-    if (open) setShouldRender(true);
-  }, [open]);
+  if (open && !shouldRender) setShouldRender(true);
   const overlayStyle = useSpring({
     opacity: open ? 1 : 0,
     config: { tension: 280, friction: 28, clamp: !open },
@@ -2742,15 +3123,7 @@ var Modal = ({
     transform: open ? "scale(1) translateY(0px)" : "scale(0.96) translateY(-4px)",
     config: { tension: 280, friction: 28, clamp: !open }
   });
-  const handleEscape = React20.useEffectEvent((e) => {
-    if (e.key === "Escape") onClose?.();
-  });
-  React20.useEffect(() => {
-    if (!open) return;
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [open]);
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -2771,7 +3144,7 @@ var Modal = ({
       }
     };
   }, [open]);
-  if (!shouldRender) return null;
+  if (!open && !shouldRender) return null;
   const hasTitle = !!title;
   return /* @__PURE__ */ jsx(
     animated.div,
@@ -2784,7 +3157,10 @@ var Modal = ({
       "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
       onClick: () => closeOnOverlay && onClose?.(),
       onKeyDown: (e) => {
-        if (e.key === "Escape") onClose?.();
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onClose?.();
+        }
       },
       children: /* @__PURE__ */ jsxs(
         animated.div,
@@ -2806,7 +3182,7 @@ var Modal = ({
                 className: "modal_close",
                 onClick: onClose,
                 "aria-label": closeLabel,
-                children: /* @__PURE__ */ jsx(X, { size: 18, "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx(X, { size: iconSize.md, "aria-hidden": "true" })
               }
             ),
             title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "modal_title", children: title }),
@@ -2822,6 +3198,7 @@ var Modal = ({
 var OtpInput = ({
   length = 6,
   value = "",
+  onValueChange,
   onChange,
   error = false,
   disabled = false,
@@ -2830,12 +3207,12 @@ var OtpInput = ({
   ariaLabel = "OTP \uC785\uB825",
   className
 }) => {
-  const inputsRef = React20.useRef([]);
-  const isTypingRef = React20.useRef(false);
-  React20.useEffect(() => {
+  const inputsRef = React19.useRef([]);
+  const isTypingRef = React19.useRef(false);
+  React19.useEffect(() => {
     if (autoFocus) inputsRef.current[0]?.focus();
   }, [autoFocus]);
-  const digits = React20.useMemo(() => {
+  const digits = React19.useMemo(() => {
     const chars = value.split("").slice(0, length);
     while (chars.length < length) chars.push("");
     return chars;
@@ -2844,7 +3221,7 @@ var OtpInput = ({
     inputsRef.current[index]?.focus();
   };
   const updateValue = (newDigits) => {
-    onChange?.(newDigits.join(""));
+    (onValueChange ?? onChange)?.(newDigits.join(""));
   };
   const handleChange = (index, e) => {
     const nextDigit = e.target.value;
@@ -2968,20 +3345,22 @@ var getPaginationItems = (page, totalPages) => {
 var Pagination = ({
   page,
   totalPages,
+  onPageChange,
   onChange,
   prevLabel = "Previous page",
   nextLabel = "Next page"
 }) => {
+  const emit = onPageChange ?? onChange;
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React20.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
+  const items = React19.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
   return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         className: "pagination_item",
-        onClick: () => onChange(page - 1),
+        onClick: () => emit?.(page - 1),
         disabled: prevDisabled,
         "aria-label": prevLabel,
         children: "\u2039"
@@ -3000,7 +3379,7 @@ var Pagination = ({
         {
           type: "button",
           className: buttonClassName,
-          onClick: () => onChange(it),
+          onClick: () => emit?.(it),
           "aria-current": isActive ? "page" : void 0,
           children: it
         }
@@ -3011,7 +3390,7 @@ var Pagination = ({
       {
         type: "button",
         className: "pagination_item",
-        onClick: () => onChange(page + 1),
+        onClick: () => emit?.(page + 1),
         disabled: nextDisabled,
         "aria-label": nextLabel,
         children: "\u203A"
@@ -3019,9 +3398,9 @@ var Pagination = ({
     )
   ] });
 };
-var RadioGroupContext = React20.createContext(null);
+var RadioGroupContext = React19.createContext(null);
 function useRadioGroupContext() {
-  return React20.useContext(RadioGroupContext);
+  return React19.useContext(RadioGroupContext);
 }
 var RadioGroup = ({
   value: controlledValue,
@@ -3039,21 +3418,21 @@ var RadioGroup = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React20.useState(defaultValue);
+  const [internalValue, setInternalValue] = React19.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const generatedName = React20.useId();
+  const generatedName = React19.useId();
   const name = nameProp ?? generatedName;
-  const idPrefix = React20.useId();
+  const idPrefix = React19.useId();
   const labelId = label ? `${idPrefix}-label` : void 0;
   const helperId = supportingText ? `${idPrefix}-help` : void 0;
-  const onChange = React20.useCallback(
+  const onChange = React19.useCallback(
     (next) => {
       if (!isControlled) setInternalValue(next);
       onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
-  const ctx = React20.useMemo(
+  const ctx = React19.useMemo(
     () => ({ name, value, onChange, size, disabled }),
     [name, value, onChange, size, disabled]
   );
@@ -3182,7 +3561,15 @@ var Table = ({
   stickyHeader = false,
   ariaLabel,
   className,
-  onRowClick
+  onRowClick,
+  sort,
+  onSortChange,
+  selectAllAriaLabel = "\uC804\uCCB4 \uC120\uD0DD",
+  selectRowAriaLabel = (index) => `${index + 1}\uBC88\uC9F8 \uD589 \uC120\uD0DD`,
+  selectable = false,
+  rowKey,
+  selectedKeys,
+  onSelectionChange
 }) => {
   const wrapperClassName = cn(
     "table_wrapper",
@@ -3191,69 +3578,171 @@ var Table = ({
     className
   );
   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 selectedSet = React19.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;
+  const handleToggleAll = () => {
+    const pageKeys = new Set(allRowKeys);
+    const offPage = (selectedKeys ?? []).filter((k) => !pageKeys.has(k));
+    onSelectionChange?.(isAllSelected ? offPage : [...offPage, ...allRowKeys]);
+  };
+  const handleToggleRow = (key) => {
+    const current = selectedKeys ?? [];
+    const next = current.includes(key) ? current.filter((k) => k !== key) : [...current, key];
+    onSelectionChange?.(next);
+  };
+  const handleSortClick = (key) => {
+    const next = sort?.key !== key ? { key, direction: "asc" } : sort.direction === "asc" ? { key, direction: "desc" } : void 0;
+    onSortChange?.(next);
+  };
   return /* @__PURE__ */ jsxs("div", { className: wrapperClassName, children: [
     /* @__PURE__ */ jsxs("table", { className: "table", "aria-label": ariaLabel, children: [
-      /* @__PURE__ */ jsx("thead", { className: "table_thead", children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
-        "th",
-        {
-          scope: "col",
-          className: cn("table_th", col.align && `table_align_${col.align}`),
-          style: { width: col.width },
-          children: col.header
-        },
-        col.key
-      )) }) }),
+      /* @__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,
+          {
+            "aria-label": selectAllAriaLabel,
+            checked: isAllSelected,
+            indeterminate: isSomeSelected,
+            disabled: isLoading || allRowKeys.length === 0,
+            onChange: handleToggleAll
+          }
+        ) }),
+        columns.map((col) => {
+          const isSortActive = Boolean(col.sortable) && sort?.key === col.key;
+          const direction = isSortActive ? sort?.direction : void 0;
+          const ariaSort = col.sortable ? direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none" : void 0;
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: cn(
+                "table_th",
+                col.align && `table_align_${col.align}`,
+                col.sortable && "table_th_sortable"
+              ),
+              style: { width: col.width },
+              "aria-sort": ariaSort,
+              children: col.sortable ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "table_sort_button",
+                  onClick: () => handleSortClick(col.key),
+                  disabled: isLoading,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "table_sort_label", children: col.header }),
+                    direction === "asc" ? /* @__PURE__ */ jsx(
+                      ArrowUp,
+                      {
+                        size: iconSize.sm,
+                        className: "table_sort_icon table_sort_icon_active",
+                        "aria-hidden": "true"
+                      }
+                    ) : direction === "desc" ? /* @__PURE__ */ jsx(
+                      ArrowDown,
+                      {
+                        size: iconSize.sm,
+                        className: "table_sort_icon table_sort_icon_active",
+                        "aria-hidden": "true"
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      ArrowUpDown,
+                      {
+                        size: iconSize.sm,
+                        className: "table_sort_icon",
+                        "aria-hidden": "true"
+                      }
+                    )
+                  ]
+                }
+              ) : col.header
+            },
+            col.key
+          );
+        })
+      ] }) }),
       /* @__PURE__ */ jsx("tbody", { className: "table_tbody", children: isLoading ? Array.from({ length: skeletonRows }).map((_, rowIndex) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows have no stable identity
-        /* @__PURE__ */ jsx("tr", { className: "table_row table_row_skeleton", children: columns.map((col) => /* @__PURE__ */ jsx(
-          "td",
-          {
-            className: cn("table_td", col.align && `table_align_${col.align}`),
-            style: { width: col.width },
-            children: /* @__PURE__ */ jsx(Skeleton, { variant: "text" })
-          },
-          col.key
-        )) }, rowIndex)
-      )) : data.map((item, rowIndex) => /* @__PURE__ */ jsx(
-        "tr",
-        {
-          className: cn(
-            "table_row",
-            hoverable && "table_row_hoverable",
-            onRowClick && "table_row_clickable"
-          ),
-          role: onRowClick ? "button" : void 0,
-          tabIndex: onRowClick ? 0 : void 0,
-          onClick: onRowClick ? () => onRowClick(item, rowIndex) : void 0,
-          onKeyDown: onRowClick ? (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              onRowClick(item, rowIndex);
-            }
-          } : void 0,
-          children: columns.map((col) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("tr", { className: "table_row table_row_skeleton", children: [
+          selectable && /* @__PURE__ */ jsx("td", { className: "table_td table_td_checkbox" }),
+          columns.map((col) => /* @__PURE__ */ jsx(
             "td",
             {
               className: cn("table_td", col.align && `table_align_${col.align}`),
               style: { width: col.width },
-              children: (() => {
-                if (col.render) return col.render(item, rowIndex);
-                const value = item[col.key];
-                return value === null || value === void 0 || value === "" ? "-" : String(value);
-              })()
+              children: /* @__PURE__ */ jsx(Skeleton, { variant: "text" })
             },
             col.key
           ))
-        },
-        keyExtractor(item, rowIndex)
-      )) })
+        ] }, rowIndex)
+      )) : data.map((item, rowIndex) => {
+        const rowIdentity = selectable ? getRowKey(item, rowIndex) : void 0;
+        const isSelected = rowIdentity !== void 0 && selectedSet.has(rowIdentity);
+        return /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: cn(
+              "table_row",
+              hoverable && "table_row_hoverable",
+              onRowClick && "table_row_clickable",
+              isSelected && "table_row_selected"
+            ),
+            "aria-selected": isSelected ? "true" : void 0,
+            role: onRowClick && !selectable ? "button" : void 0,
+            tabIndex: onRowClick ? 0 : void 0,
+            onClick: onRowClick ? () => onRowClick(item, rowIndex) : void 0,
+            onKeyDown: onRowClick ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onRowClick(item, rowIndex);
+              }
+            } : void 0,
+            children: [
+              selectable && rowIdentity !== void 0 && /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: "table_td table_td_checkbox",
+                  onClick: (e) => e.stopPropagation(),
+                  onKeyDown: (e) => e.stopPropagation(),
+                  children: /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      "aria-label": selectRowAriaLabel(rowIndex),
+                      checked: isSelected,
+                      onChange: () => handleToggleRow(rowIdentity)
+                    }
+                  )
+                }
+              ),
+              columns.map((col) => /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: cn("table_td", col.align && `table_align_${col.align}`),
+                  style: { width: col.width },
+                  children: (() => {
+                    if (col.render) return col.render(item, rowIndex);
+                    const value = item[col.key];
+                    return value === null || value === void 0 || value === "" ? "-" : String(value);
+                  })()
+                },
+                col.key
+              ))
+            ]
+          },
+          keyExtractor(item, rowIndex)
+        );
+      }) })
     ] }),
     isEmpty && /* @__PURE__ */ jsx("div", { className: "table_empty", role: "status", children: emptyMessage })
   ] });
 };
-var ThemeContext = React20.createContext(null);
+var ThemeContext = React19.createContext(null);
 var useTheme = () => {
-  const ctx = React20.useContext(ThemeContext);
+  const ctx = React19.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>'
@@ -3277,14 +3766,15 @@ var ThemeProvider = ({
   targetSelector,
   children
 }) => {
-  const [mode, setModeState] = React20.useState(() => {
-    return readStored(storageKey) ?? defaultMode;
-  });
-  const [systemDark, setSystemDark] = React20.useState(() => {
-    if (!isClient) return false;
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  });
-  React20.useEffect(() => {
+  const [mode, setModeState] = React19.useState(defaultMode);
+  const [systemDark, setSystemDark] = React19.useState(false);
+  React19.useEffect(() => {
+    setModeState(readStored(storageKey) ?? defaultMode);
+    if (isClient) {
+      setSystemDark(window.matchMedia("(prefers-color-scheme: dark)").matches);
+    }
+  }, [storageKey, defaultMode]);
+  React19.useEffect(() => {
     if (!isClient) return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => setSystemDark(e.matches);
@@ -3292,7 +3782,7 @@ var ThemeProvider = ({
     return () => mq.removeEventListener("change", handler);
   }, []);
   const resolved = mode === "system" ? systemDark ? "dark" : "light" : mode;
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (!isClient) return;
     const target = targetSelector ? document.querySelector(targetSelector) : document.documentElement;
     if (!target) return;
@@ -3302,7 +3792,7 @@ var ThemeProvider = ({
       target.setAttribute("data-theme", mode);
     }
   }, [mode, targetSelector]);
-  const setMode = React20.useCallback(
+  const setMode = React19.useCallback(
     (next) => {
       setModeState(next);
       if (storageKey && isClient) {
@@ -3314,13 +3804,13 @@ var ThemeProvider = ({
     },
     [storageKey]
   );
-  const value = React20.useMemo(
+  const value = React19.useMemo(
     () => ({ mode, resolved, setMode }),
     [mode, resolved, setMode]
   );
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 };
-var ClearIcon = () => /* @__PURE__ */ jsx(X, { size: 20, "aria-hidden": "true" });
+var ClearIcon = () => /* @__PURE__ */ jsx(X, { size: iconSize.lg, "aria-hidden": "true" });
 var TextField = ({
   id,
   label,
@@ -3333,6 +3823,7 @@ var TextField = ({
   fullWidth,
   size = "md",
   className,
+  onValueChange,
   onChangeAction,
   imeStrategy = "delayed",
   value,
@@ -3363,10 +3854,10 @@ var TextField = ({
       setInnerValue(nextValue);
       if (nextValue !== lastEmittedValueRef.current) {
         lastEmittedValueRef.current = nextValue;
-        onChangeAction?.(nextValue);
+        (onValueChange ?? onChangeAction)?.(nextValue);
       }
     },
-    [onChangeAction]
+    [onValueChange, onChangeAction]
   );
   const handleClear = useCallback(() => {
     emit("");
@@ -3416,7 +3907,7 @@ var TextField = ({
                   setInnerValue(rawValue);
                   if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
                     lastEmittedValueRef.current = rawValue;
-                    onChangeAction?.(rawValue);
+                    (onValueChange ?? onChangeAction)?.(rawValue);
                   }
                   return;
                 }
@@ -3446,6 +3937,7 @@ var Textarea = ({
   fullWidth,
   size = "md",
   className,
+  onValueChange,
   onChangeAction,
   imeStrategy = "delayed",
   value,
@@ -3513,7 +4005,7 @@ var Textarea = ({
     setInnerValue(nextValue);
     if (nextValue !== lastEmittedValueRef.current) {
       lastEmittedValueRef.current = nextValue;
-      onChangeAction?.(nextValue);
+      (onValueChange ?? onChangeAction)?.(nextValue);
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
@@ -3545,7 +4037,7 @@ var Textarea = ({
             setInnerValue(rawValue);
             if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
               lastEmittedValueRef.current = rawValue;
-              onChangeAction?.(rawValue);
+              (onValueChange ?? onChangeAction)?.(rawValue);
             }
             return;
           }
@@ -3560,24 +4052,24 @@ var Textarea = ({
   ] });
 };
 Textarea.displayName = "Textarea";
-var ToastContext = React20.createContext(null);
+var ToastContext = React19.createContext(null);
 var VARIANT_ICONS = {
-  success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
-  error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
-  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: 18 }),
-  info: /* @__PURE__ */ jsx(Info, { size: 18 }),
-  default: /* @__PURE__ */ jsx(Bell, { size: 18 })
+  success: /* @__PURE__ */ jsx(CheckCircle2, { size: iconSize.md }),
+  error: /* @__PURE__ */ jsx(XCircle, { size: iconSize.md }),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: iconSize.md }),
+  info: /* @__PURE__ */ jsx(Info, { size: iconSize.md }),
+  default: /* @__PURE__ */ jsx(Bell, { size: iconSize.md })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [visible, setVisible] = React20.useState(true);
-  const closingRef = React20.useRef(false);
+  const [visible, setVisible] = React19.useState(true);
+  const closingRef = React19.useRef(false);
   const style = useSpringPresence({
     visible,
     from: "translateX(20px)",
     // 우측에서 슬라이드 인
     onExitComplete: () => onRemove(item.id)
   });
-  const close = React20.useCallback(() => {
+  const close = React19.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setVisible(false);
@@ -3591,7 +4083,7 @@ var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
       children: [
         /* @__PURE__ */ jsx("span", { className: `toast_icon toast_icon_${item.variant}`, "aria-hidden": "true", children: VARIANT_ICONS[item.variant] }),
         /* @__PURE__ */ jsx("span", { className: "toast_message", children: item.message }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "toast_close", onClick: close, "aria-label": closeAriaLabel, children: /* @__PURE__ */ jsx(X, { size: 14 }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "toast_close", onClick: close, "aria-label": closeAriaLabel, children: /* @__PURE__ */ jsx(X, { size: iconSize.xs }) }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -3610,22 +4102,23 @@ var ToastProvider = ({
   maxCount = 5,
   closeAriaLabel = "Close"
 }) => {
-  const [toasts, setToasts] = React20.useState([]);
-  const [isMounted, setIsMounted] = React20.useState(false);
-  React20.useEffect(() => {
+  const [toasts, setToasts] = React19.useState([]);
+  const [isMounted, setIsMounted] = React19.useState(false);
+  React19.useEffect(() => {
     setIsMounted(true);
   }, []);
-  const addToast = React20.useCallback(
+  const addToast = React19.useCallback(
     (message, variant, duration = 3e3) => {
       const id = crypto.randomUUID();
       setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
     },
     [maxCount]
   );
-  const removeToast = React20.useCallback((id) => {
+  const removeToast = React19.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
+  const contextValue = React19.useMemo(() => ({ addToast }), [addToast]);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: contextValue, children: [
     children,
     isMounted && createPortal(
       // biome-ignore lint/a11y/useSemanticElements: <section> would create unwanted nesting in portal; role=region is the WAI-ARIA equivalent for live announcements
@@ -3675,6 +4168,7 @@ var useToast = () => {
 var Toggle = ({
   checked,
   defaultChecked,
+  onCheckedChange,
   onChange,
   size = "sm",
   disabled,
@@ -3684,13 +4178,13 @@ var Toggle = ({
   ...props
 }) => {
   const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React20.useState(!!defaultChecked);
+  const [innerChecked, setInnerChecked] = React19.useState(!!defaultChecked);
   const isOn = isControlled ? !!checked : innerChecked;
   const handleToggle = () => {
     if (disabled) return;
     const next = !isOn;
     if (!isControlled) setInnerChecked(next);
-    onChange?.(next);
+    (onCheckedChange ?? onChange)?.(next);
   };
   const rootClassName = cn(
     "toggle",
@@ -3751,6 +4245,7 @@ var Container = ({
   size = "xl",
   center = true,
   as: Tag = "div",
+  ref,
   className,
   children,
   ...props
@@ -3758,6 +4253,7 @@ var Container = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      ref,
       className: cn("container", `container_size_${size}`, center && "container_center", className),
       ...props,
       children
@@ -3768,6 +4264,7 @@ var Section = ({
   spacing: spacing2 = "md",
   bg = "default",
   as: Tag = "section",
+  ref,
   className,
   children,
   ...props
@@ -3775,6 +4272,7 @@ var Section = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      ref,
       className: cn(
         "section",
         `section_spacing_${spacing2}`,
@@ -3793,6 +4291,7 @@ var Stack = ({
   justify,
   wrap,
   as: Tag = "div",
+  ref,
   className,
   children,
   style,
@@ -3801,6 +4300,7 @@ var Stack = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      ref,
       className: cn(
         "stack",
         `stack_${direction}`,
@@ -3823,6 +4323,7 @@ var Grid = ({
   colGap,
   singleColOnMobile = true,
   as: Tag = "div",
+  ref,
   className,
   children,
   style,
@@ -3832,6 +4333,7 @@ var Grid = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      ref,
       className: cn("grid_layout", singleColOnMobile && "grid_layout_mobile_single", className),
       style: {
         "--grid-cols": gridTemplateColumns,
@@ -3846,4 +4348,4 @@ var Grid = ({
   );
 };
 
-export { Accordion, AlertProvider, Avatar, Badge, BottomNav, BottomNavItem, BottomNavSpacer, Breadcrumb, Button, Card, Checkbox, Chip, Container, DatePicker, Divider, Dropdown, EmptyState, ErrorState, FileInput, Grid, Hero, Icon, IconButton, LinearProgress, ListItem, MediaCard, Menu, Modal, NavBar, NavLink, OtpInput, Pagination, Popover, Radio, RadioGroup, Section, Sidebar, SidebarItem, SidebarSection, Skeleton, Spinner, Stack, Tab, TabList, TabPanel, Table, Tabs, TextField, Textarea, ThemeProvider, ToastProvider, Toggle, Tooltip, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
+export { Accordion, AlertProvider, Avatar, Badge, BottomNav, BottomNavItem, BottomNavSpacer, Breadcrumb, Button, Card, Checkbox, Chip, Container, DatePicker, Divider, Drawer, Dropdown, EmptyState, ErrorState, FileInput, Grid, Hero, Icon, IconButton, LinearProgress, ListItem, MediaCard, Menu, Modal, NavBar, NavLink, OtpInput, Pagination, Popover, Radio, RadioGroup, Section, Sidebar, SidebarItem, SidebarSection, Skeleton, Spinner, Stack, Tab, TabList, TabPanel, Table, Tabs, TextField, Textarea, ThemeProvider, ToastProvider, Toggle, Tooltip, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };