@bigtablet/design-system 3.2.1 → 3.3.0

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import './index.css';
-import * as React19 from 'react';
-import { createContext, useRef, useState, useLayoutEffect, useId, useEffect, useContext, useCallback, useMemo, Fragment } from 'react';
+import * as React20 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 { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
@@ -38,8 +38,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React19.useRef(null);
-  React19.useEffect(() => {
+  const previousActiveElement = React20.useRef(null);
+  React20.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -87,14 +87,48 @@ function useFocusTrap(containerRef, isActive) {
     };
   }, [isActive, containerRef]);
 }
+var QUERY = "(prefers-reduced-motion: reduce)";
+var mqCache = null;
+var cachedFor = null;
+function getMediaQuery() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    mqCache = null;
+    cachedFor = null;
+    return null;
+  }
+  if (!mqCache || cachedFor !== window.matchMedia) {
+    mqCache = window.matchMedia(QUERY);
+    cachedFor = window.matchMedia;
+  }
+  return mqCache;
+}
+function subscribe(onStoreChange) {
+  const mq = getMediaQuery();
+  if (!mq) return () => {
+  };
+  mq.addEventListener("change", onStoreChange);
+  return () => mq.removeEventListener("change", onStoreChange);
+}
+function getSnapshot() {
+  return getMediaQuery()?.matches ?? false;
+}
+function getServerSnapshot() {
+  return false;
+}
+function useReducedMotion() {
+  return React20.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] = React20.useState(false);
+  const reduced = useReducedMotion();
   const style = useSpring({
     transform: hovered ? `translateY(${lift}px) scale(${scale})` : "translateY(0px) scale(1)",
+    // reduced-motion: lift/scale 모션 제거 (WCAG 2.3.3)
+    immediate: reduced,
     config: { tension: 320, friction: 22 }
   });
   const bind = {
@@ -110,12 +144,15 @@ function useSpringPresence({
   from = "translateY(8px)",
   onExitComplete
 }) {
+  const reduced = useReducedMotion();
   return useSpring({
     from: { opacity: 0, transform: from },
     to: {
       opacity: visible ? 1 : 0,
       transform: visible ? "translateY(0px)" : from
     },
+    // reduced-motion: 진입/퇴출 모션 없이 즉시 최종 상태로 점프 (WCAG 2.3.3). onRest는 그대로 발화.
+    immediate: reduced,
     config: {
       tension: 280,
       // Vercel 식 부드러운 spring
@@ -135,18 +172,19 @@ var Accordion = ({
   multiple = false,
   defaultOpenKeys = [],
   openKeys: controlledKeys,
+  onValueChange,
   onChange,
   className,
   ...props
 }) => {
   const isControlled = controlledKeys !== void 0;
-  const [internalKeys, setInternalKeys] = React19.useState(defaultOpenKeys);
+  const [internalKeys, setInternalKeys] = React20.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);
@@ -183,6 +221,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 }) })
         }
@@ -206,7 +245,7 @@ var Avatar = ({
   style,
   ...props
 }) => {
-  const [imgFailed, setImgFailed] = React19.useState(false);
+  const [imgFailed, setImgFailed] = React20.useState(false);
   const showImage = src && !imgFailed;
   const initials = getInitials(name);
   return /* @__PURE__ */ jsx(
@@ -424,11 +463,12 @@ var ErrorState = ({
   );
 };
 var Menu = ({ items, trigger, align = "start" }) => {
-  const [open, setOpen] = React19.useState(false);
-  const wrapperRef = React19.useRef(null);
-  const menuId = React19.useId();
+  const [open, setOpen] = React20.useState(false);
+  const wrapperRef = React20.useRef(null);
+  const itemRefs = React20.useRef([]);
+  const menuId = React20.useId();
   const style = useSpringPresence({ visible: open, from: "translateY(-4px)" });
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -443,7 +483,53 @@ var Menu = ({ items, trigger, align = "start" }) => {
       document.removeEventListener("keydown", handleEsc);
     };
   }, [open]);
-  const triggerWithProps = React19.cloneElement(
+  React20.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 = React20.cloneElement(
     trigger,
     {
       onClick: () => setOpen((o) => !o),
@@ -461,11 +547,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",
@@ -506,7 +597,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 = () => {
@@ -577,6 +668,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(() => {
@@ -594,8 +686,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: [
@@ -615,19 +752,32 @@ var LocaleSwitcher = ({ locale }) => {
         ]
       }
     ),
-    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 }) => {
@@ -662,9 +812,9 @@ var Sidebar = ({
   ...props
 }) => {
   const isControlled = collapsedProp !== void 0;
-  const [internalCollapsed, setInternalCollapsed] = React19.useState(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = React20.useState(defaultCollapsed);
   const collapsed = isControlled ? collapsedProp : internalCollapsed;
-  const toggle = React19.useCallback(() => {
+  const toggle = React20.useCallback(() => {
     const next = !collapsed;
     if (!isControlled) setInternalCollapsed(next);
     onCollapsedChange?.(next);
@@ -737,9 +887,9 @@ var SidebarSection = ({ label, className, children, ...props }) => {
     children
   ] });
 };
-var TabsContext = React19.createContext(null);
+var TabsContext = React20.createContext(null);
 function useTabsContext() {
-  const ctx = React19.useContext(TabsContext);
+  const ctx = React20.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>'
@@ -758,17 +908,17 @@ var Tabs = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React19.useState(defaultValue);
+  const [internalValue, setInternalValue] = React20.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const setValue = React19.useCallback(
+  const setValue = React20.useCallback(
     (v) => {
       if (!isControlled) setInternalValue(v);
       onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
-  const idPrefix = React19.useId();
-  const ctx = React19.useMemo(
+  const idPrefix = React20.useId();
+  const ctx = React20.useMemo(
     () => ({ value, setValue, variant, size, idPrefix }),
     [value, setValue, variant, size, idPrefix]
   );
@@ -776,10 +926,10 @@ var Tabs = ({
 };
 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);
-  React19.useLayoutEffect(() => {
+  const listRef = React20.useRef(null);
+  const [indicator, setIndicator] = React20.useState(null);
+  const [hasMounted, setHasMounted] = React20.useState(false);
+  useSafeLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
     const update = () => {
@@ -927,15 +1077,15 @@ var Popover = ({
   className
 }) => {
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = React19.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React20.useState(defaultOpen);
   const open = isControlled ? openProp : internalOpen;
-  const [shouldRender, setShouldRender] = React19.useState(open ?? false);
+  const [shouldRender, setShouldRender] = React20.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 = React20.useRef(null);
+  const popoverRef = React20.useRef(null);
+  const previousFocusRef = React20.useRef(null);
+  const popoverId = React20.useId();
+  const setOpen = React20.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
@@ -955,7 +1105,7 @@ var Popover = ({
     }
   })();
   const style = useSpringPresence({ visible: open, from: fromTransform, onExitComplete: () => setShouldRender(false) });
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!open) return;
     previousFocusRef.current = document.activeElement;
     const node = popoverRef.current;
@@ -963,7 +1113,7 @@ var Popover = ({
     const focusable = node.querySelector(FOCUSABLE_SELECTORS2);
     (focusable ?? node).focus();
   }, [open]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -981,7 +1131,7 @@ var Popover = ({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open, setOpen]);
-  const triggerWithProps = React19.cloneElement(
+  const triggerWithProps = React20.cloneElement(
     trigger,
     {
       onClick: (e) => {
@@ -1020,18 +1170,18 @@ 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] = React20.useState(false);
+  const timerRef = React20.useRef(null);
+  const tooltipId = React20.useId();
+  const show = React20.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => setOpen(true), delay);
   }, [delay]);
-  const hide = React19.useCallback(() => {
+  const hide = React20.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setOpen(false);
   }, []);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
@@ -1049,12 +1199,27 @@ var Tooltip = ({
     }
   })();
   const style = useSpringPresence({ visible: open, from: fromTransform });
-  const trigger = React19.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 = React20.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: [
@@ -1128,10 +1293,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)",
@@ -1149,7 +1317,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
@@ -1555,6 +1723,8 @@ var Button = ({
   fullWidth = false,
   radius: radius2,
   danger = false,
+  type = "button",
+  ref,
   className,
   children,
   ...props
@@ -1568,7 +1738,7 @@ 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 })
@@ -1634,12 +1804,12 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  const panelRef = React19.useRef(null);
-  const titleId = React19.useId();
-  const messageId = React19.useId();
+  const panelRef = React20.useRef(null);
+  const titleId = React20.useId();
+  const messageId = React20.useId();
   const [shouldRender, setShouldRender] = useState(isOpen);
   useFocusTrap(panelRef, isOpen);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (isOpen) setShouldRender(true);
   }, [isOpen]);
   const overlayStyle = useSpring({
@@ -1720,6 +1890,7 @@ var Card = ({
   interactive = false,
   footer,
   footerAlign = "end",
+  ref,
   className,
   children,
   ...props
@@ -1732,7 +1903,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
@@ -1746,12 +1917,12 @@ var Checkbox = ({
   ref,
   ...props
 }) => {
-  const inputRef = React19.useRef(null);
-  React19.useImperativeHandle(
+  const inputRef = React20.useRef(null);
+  React20.useImperativeHandle(
     ref,
     () => inputRef.current
   );
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
@@ -1929,6 +2100,7 @@ var Dropdown = ({
   placeholder = "Select\u2026",
   options,
   value,
+  onValueChange,
   onChange,
   defaultValue = null,
   disabled,
@@ -1953,9 +2125,9 @@ var Dropdown = ({
     (next) => {
       const option = options.find((o) => o.value === next) ?? null;
       if (!isControlled) setInternalValue(next);
-      onChange?.(next, option);
+      (onValueChange ?? onChange)?.(next, option);
     },
-    [isControlled, onChange, options]
+    [isControlled, onValueChange, onChange, options]
   );
   useEffect(() => {
     const handleOutsideClick = (e) => {
@@ -2141,6 +2313,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,
@@ -2156,9 +2329,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 = React20.useId();
+  const constraintId = React20.useId();
+  const { todayYear, todayMonth, todayDay } = React20.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     return {
       todayYear: now.getFullYear(),
@@ -2167,7 +2340,7 @@ var DatePicker = ({
     };
   }, []);
   const endYear = endYearProp ?? todayYear + 10;
-  const parsed = React19.useMemo(() => {
+  const parsed = React20.useMemo(() => {
     if (!value) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = value.split("-").map(Number);
     return {
@@ -2176,7 +2349,7 @@ var DatePicker = ({
       day: d || 0
     };
   }, [value]);
-  const min = React19.useMemo(() => {
+  const min = React20.useMemo(() => {
     if (!minDate) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = minDate.split("-").map(Number);
     return {
@@ -2196,7 +2369,7 @@ var DatePicker = ({
       min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1
     )
   );
-  const maxDay = React19.useMemo(() => {
+  const maxDay = React20.useMemo(() => {
     if (!year || !month) return 31;
     const daysInMonth = getDaysInMonth(year, month);
     if (selectableRange === "until-today" && year === todayYear && month === todayMonth) {
@@ -2204,39 +2377,40 @@ var DatePicker = ({
     }
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
-  const yearOptions = React19.useMemo(
+  const yearOptions = React20.useMemo(
     () => range(startYear, maxYear).map((y) => ({
       value: String(y),
       label: String(y)
     })),
     [startYear, maxYear]
   );
-  const monthOptions = React19.useMemo(
+  const monthOptions = React20.useMemo(
     () => range(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
       value: String(m),
       label: pad(m)
     })),
     [minMonth, maxMonth]
   );
-  const dayOptions = React19.useMemo(
+  const dayOptions = React20.useMemo(
     () => range(minDay, Math.max(minDay, maxDay)).map((d) => ({
       value: String(d),
       label: pad(d)
     })),
     [minDay, maxDay]
   );
-  const emit = React19.useCallback(
+  const emit = React20.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 = React19.useCallback(
+  const handleYearChange = React20.useCallback(
     (raw) => {
       if (!raw) return;
       const newYear = Number(raw);
@@ -2253,14 +2427,14 @@ var DatePicker = ({
     },
     [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
   );
-  const handleMonthChange = React19.useCallback(
+  const handleMonthChange = React20.useCallback(
     (raw) => {
       if (!raw || !year) return;
       emit(year, Number(raw), day || void 0);
     },
     [year, day, emit]
   );
-  const handleDayChange = React19.useCallback(
+  const handleDayChange = React20.useCallback(
     (raw) => {
       if (!raw || !year || !month) return;
       emit(year, month, Number(raw));
@@ -2296,7 +2470,7 @@ var DatePicker = ({
               placeholder: yearLabel,
               options: yearOptions,
               value: year ? String(year) : null,
-              onChange: handleYearChange,
+              onValueChange: handleYearChange,
               disabled
             }
           ),
@@ -2309,7 +2483,7 @@ var DatePicker = ({
               placeholder: monthLabel,
               options: monthOptions,
               value: month ? String(month) : null,
-              onChange: handleMonthChange,
+              onValueChange: handleMonthChange,
               disabled: disabled || !year
             }
           ),
@@ -2322,7 +2496,7 @@ var DatePicker = ({
               placeholder: dayLabel,
               options: dayOptions,
               value: day ? String(day) : null,
-              onChange: handleDayChange,
+              onValueChange: handleDayChange,
               disabled: disabled || !month
             }
           )
@@ -2348,16 +2522,15 @@ var FileInput = ({
   onChange,
   ...props
 }) => {
-  const inputId = React19.useId();
-  const helperId = React19.useId();
-  const inputRef = React19.useRef(null);
-  const [previewUrls, setPreviewUrls] = React19.useState([]);
+  const inputId = React20.useId();
+  const helperId = React20.useId();
+  const inputRef = React20.useRef(null);
+  const [previewUrls, setPreviewUrls] = React20.useState([]);
+  const previewUrlsRef = React20.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);
@@ -2370,12 +2543,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();
@@ -2384,18 +2561,19 @@ var FileInput = ({
       URL.revokeObjectURL(url);
     }
     setPreviewUrls([]);
+    previewUrlsRef.current = [];
     if (inputRef.current) {
       inputRef.current.value = "";
     }
     onFiles?.(null);
   };
-  React19.useEffect(() => {
+  React20.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",
@@ -2527,6 +2705,8 @@ var IconButton = ({
   variant = "standard",
   size = "md",
   icon,
+  type = "button",
+  ref,
   className,
   ...props
 }) => {
@@ -2536,7 +2716,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,
@@ -2609,7 +2789,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,
@@ -2686,11 +2866,11 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React19.useRef(null);
-  const titleId = React19.useId();
-  const [shouldRender, setShouldRender] = React19.useState(open);
+  const panelRef = React20.useRef(null);
+  const titleId = React20.useId();
+  const [shouldRender, setShouldRender] = React20.useState(open);
   useFocusTrap(panelRef, open);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (open) setShouldRender(true);
   }, [open]);
   const overlayStyle = useSpring({
@@ -2705,15 +2885,7 @@ var Modal = ({
     transform: open ? "scale(1) translateY(0px)" : "scale(0.96) translateY(-4px)",
     config: { tension: 280, friction: 28, clamp: !open }
   });
-  const handleEscape = React19.useEffectEvent((e) => {
-    if (e.key === "Escape") onClose?.();
-  });
-  React19.useEffect(() => {
-    if (!open) return;
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [open]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -2747,7 +2919,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,
@@ -2785,6 +2960,7 @@ var Modal = ({
 var OtpInput = ({
   length = 6,
   value = "",
+  onValueChange,
   onChange,
   error = false,
   disabled = false,
@@ -2793,12 +2969,12 @@ var OtpInput = ({
   ariaLabel = "OTP \uC785\uB825",
   className
 }) => {
-  const inputsRef = React19.useRef([]);
-  const isTypingRef = React19.useRef(false);
-  React19.useEffect(() => {
+  const inputsRef = React20.useRef([]);
+  const isTypingRef = React20.useRef(false);
+  React20.useEffect(() => {
     if (autoFocus) inputsRef.current[0]?.focus();
   }, [autoFocus]);
-  const digits = React19.useMemo(() => {
+  const digits = React20.useMemo(() => {
     const chars = value.split("").slice(0, length);
     while (chars.length < length) chars.push("");
     return chars;
@@ -2807,7 +2983,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;
@@ -2931,20 +3107,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 = React19.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
+  const items = React20.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"
@@ -2963,7 +3141,7 @@ var Pagination = ({
         {
           type: "button",
           className: buttonClassName,
-          onClick: () => onChange(it),
+          onClick: () => emit?.(it),
           "aria-current": isActive ? "page" : void 0,
           children: it
         }
@@ -2974,7 +3152,7 @@ var Pagination = ({
       {
         type: "button",
         className: "pagination_item",
-        onClick: () => onChange(page + 1),
+        onClick: () => emit?.(page + 1),
         disabled: nextDisabled,
         "aria-label": nextLabel,
         children: "\u203A"
@@ -2982,9 +3160,9 @@ var Pagination = ({
     )
   ] });
 };
-var RadioGroupContext = React19.createContext(null);
+var RadioGroupContext = React20.createContext(null);
 function useRadioGroupContext() {
-  return React19.useContext(RadioGroupContext);
+  return React20.useContext(RadioGroupContext);
 }
 var RadioGroup = ({
   value: controlledValue,
@@ -3002,21 +3180,21 @@ var RadioGroup = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React19.useState(defaultValue);
+  const [internalValue, setInternalValue] = React20.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const generatedName = React19.useId();
+  const generatedName = React20.useId();
   const name = nameProp ?? generatedName;
-  const idPrefix = React19.useId();
+  const idPrefix = React20.useId();
   const labelId = label ? `${idPrefix}-label` : void 0;
   const helperId = supportingText ? `${idPrefix}-help` : void 0;
-  const onChange = React19.useCallback(
+  const onChange = React20.useCallback(
     (next) => {
       if (!isControlled) setInternalValue(next);
       onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
-  const ctx = React19.useMemo(
+  const ctx = React20.useMemo(
     () => ({ name, value, onChange, size, disabled }),
     [name, value, onChange, size, disabled]
   );
@@ -3214,9 +3392,9 @@ var Table = ({
     isEmpty && /* @__PURE__ */ jsx("div", { className: "table_empty", role: "status", children: emptyMessage })
   ] });
 };
-var ThemeContext = React19.createContext(null);
+var ThemeContext = React20.createContext(null);
 var useTheme = () => {
-  const ctx = React19.useContext(ThemeContext);
+  const ctx = React20.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>'
@@ -3240,14 +3418,15 @@ var ThemeProvider = ({
   targetSelector,
   children
 }) => {
-  const [mode, setModeState] = React19.useState(() => {
-    return readStored(storageKey) ?? defaultMode;
-  });
-  const [systemDark, setSystemDark] = React19.useState(() => {
-    if (!isClient) return false;
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  });
-  React19.useEffect(() => {
+  const [mode, setModeState] = React20.useState(defaultMode);
+  const [systemDark, setSystemDark] = React20.useState(false);
+  React20.useEffect(() => {
+    setModeState(readStored(storageKey) ?? defaultMode);
+    if (isClient) {
+      setSystemDark(window.matchMedia("(prefers-color-scheme: dark)").matches);
+    }
+  }, [storageKey, defaultMode]);
+  React20.useEffect(() => {
     if (!isClient) return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => setSystemDark(e.matches);
@@ -3255,7 +3434,7 @@ var ThemeProvider = ({
     return () => mq.removeEventListener("change", handler);
   }, []);
   const resolved = mode === "system" ? systemDark ? "dark" : "light" : mode;
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!isClient) return;
     const target = targetSelector ? document.querySelector(targetSelector) : document.documentElement;
     if (!target) return;
@@ -3265,7 +3444,7 @@ var ThemeProvider = ({
       target.setAttribute("data-theme", mode);
     }
   }, [mode, targetSelector]);
-  const setMode = React19.useCallback(
+  const setMode = React20.useCallback(
     (next) => {
       setModeState(next);
       if (storageKey && isClient) {
@@ -3277,7 +3456,7 @@ var ThemeProvider = ({
     },
     [storageKey]
   );
-  const value = React19.useMemo(
+  const value = React20.useMemo(
     () => ({ mode, resolved, setMode }),
     [mode, resolved, setMode]
   );
@@ -3296,6 +3475,7 @@ var TextField = ({
   fullWidth,
   size = "md",
   className,
+  onValueChange,
   onChangeAction,
   imeStrategy = "delayed",
   value,
@@ -3326,10 +3506,10 @@ var TextField = ({
       setInnerValue(nextValue);
       if (nextValue !== lastEmittedValueRef.current) {
         lastEmittedValueRef.current = nextValue;
-        onChangeAction?.(nextValue);
+        (onValueChange ?? onChangeAction)?.(nextValue);
       }
     },
-    [onChangeAction]
+    [onValueChange, onChangeAction]
   );
   const handleClear = useCallback(() => {
     emit("");
@@ -3379,7 +3559,7 @@ var TextField = ({
                   setInnerValue(rawValue);
                   if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
                     lastEmittedValueRef.current = rawValue;
-                    onChangeAction?.(rawValue);
+                    (onValueChange ?? onChangeAction)?.(rawValue);
                   }
                   return;
                 }
@@ -3409,6 +3589,7 @@ var Textarea = ({
   fullWidth,
   size = "md",
   className,
+  onValueChange,
   onChangeAction,
   imeStrategy = "delayed",
   value,
@@ -3476,7 +3657,7 @@ var Textarea = ({
     setInnerValue(nextValue);
     if (nextValue !== lastEmittedValueRef.current) {
       lastEmittedValueRef.current = nextValue;
-      onChangeAction?.(nextValue);
+      (onValueChange ?? onChangeAction)?.(nextValue);
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
@@ -3508,7 +3689,7 @@ var Textarea = ({
             setInnerValue(rawValue);
             if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
               lastEmittedValueRef.current = rawValue;
-              onChangeAction?.(rawValue);
+              (onValueChange ?? onChangeAction)?.(rawValue);
             }
             return;
           }
@@ -3523,7 +3704,7 @@ var Textarea = ({
   ] });
 };
 Textarea.displayName = "Textarea";
-var ToastContext = React19.createContext(null);
+var ToastContext = React20.createContext(null);
 var VARIANT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
   error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
@@ -3532,15 +3713,15 @@ var VARIANT_ICONS = {
   default: /* @__PURE__ */ jsx(Bell, { size: 18 })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [visible, setVisible] = React19.useState(true);
-  const closingRef = React19.useRef(false);
+  const [visible, setVisible] = React20.useState(true);
+  const closingRef = React20.useRef(false);
   const style = useSpringPresence({
     visible,
     from: "translateX(20px)",
     // 우측에서 슬라이드 인
     onExitComplete: () => onRemove(item.id)
   });
-  const close = React19.useCallback(() => {
+  const close = React20.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setVisible(false);
@@ -3573,22 +3754,23 @@ var ToastProvider = ({
   maxCount = 5,
   closeAriaLabel = "Close"
 }) => {
-  const [toasts, setToasts] = React19.useState([]);
-  const [isMounted, setIsMounted] = React19.useState(false);
-  React19.useEffect(() => {
+  const [toasts, setToasts] = React20.useState([]);
+  const [isMounted, setIsMounted] = React20.useState(false);
+  React20.useEffect(() => {
     setIsMounted(true);
   }, []);
-  const addToast = React19.useCallback(
+  const addToast = React20.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 = React20.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
+  const contextValue = React20.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
@@ -3638,6 +3820,7 @@ var useToast = () => {
 var Toggle = ({
   checked,
   defaultChecked,
+  onCheckedChange,
   onChange,
   size = "sm",
   disabled,
@@ -3647,13 +3830,13 @@ var Toggle = ({
   ...props
 }) => {
   const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React19.useState(!!defaultChecked);
+  const [innerChecked, setInnerChecked] = React20.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",
@@ -3714,6 +3897,7 @@ var Container = ({
   size = "xl",
   center = true,
   as: Tag = "div",
+  ref,
   className,
   children,
   ...props
@@ -3721,6 +3905,7 @@ var Container = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      ref,
       className: cn("container", `container_size_${size}`, center && "container_center", className),
       ...props,
       children
@@ -3731,6 +3916,7 @@ var Section = ({
   spacing: spacing2 = "md",
   bg = "default",
   as: Tag = "section",
+  ref,
   className,
   children,
   ...props
@@ -3738,6 +3924,7 @@ var Section = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      ref,
       className: cn(
         "section",
         `section_spacing_${spacing2}`,
@@ -3756,6 +3943,7 @@ var Stack = ({
   justify,
   wrap,
   as: Tag = "div",
+  ref,
   className,
   children,
   style,
@@ -3764,6 +3952,7 @@ var Stack = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      ref,
       className: cn(
         "stack",
         `stack_${direction}`,
@@ -3786,6 +3975,7 @@ var Grid = ({
   colGap,
   singleColOnMobile = true,
   as: Tag = "div",
+  ref,
   className,
   children,
   style,
@@ -3795,6 +3985,7 @@ var Grid = ({
   return /* @__PURE__ */ jsx(
     Tag,
     {
+      ref,
       className: cn("grid_layout", singleColOnMobile && "grid_layout_mobile_single", className),
       style: {
         "--grid-cols": gridTemplateColumns,
@@ -3809,4 +4000,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, 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, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };