@designbasekorea/ui 0.1.4 → 0.1.7

package/dist/index.js

@@ -3458,20 +3458,20 @@ const Spinner = ({ type = 'circular', size = 'm', color, speed = 1, label = '로
     const renderSpinner = () => {
         switch (type) {
             case 'circular':
-                return (jsxRuntimeExports.jsxs("svg", { className: "designbase-spinner__circular", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("circle", { className: "designbase-spinner__circular-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none" }), jsxRuntimeExports.jsx("circle", { className: "designbase-spinner__circular-indicator", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeLinecap: "round" })] }));
+                return (jsxRuntimeExports.jsxs("svg", { className: "designbase-spinner__circular", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [jsxRuntimeExports.jsx("circle", { className: "designbase-spinner__circular-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none" }), jsxRuntimeExports.jsx("circle", { className: "designbase-spinner__circular-indicator", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeLinecap: "round" })] }));
             case 'dots':
-                return (jsxRuntimeExports.jsxs("div", { className: "designbase-spinner__dots", children: [jsxRuntimeExports.jsx("div", { className: "designbase-spinner__dot" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__dot" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__dot" })] }));
+                return (jsxRuntimeExports.jsxs("div", { className: "designbase-spinner__dots", "aria-hidden": "true", children: [jsxRuntimeExports.jsx("div", { className: "designbase-spinner__dot" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__dot" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__dot" })] }));
             case 'bars':
-                return (jsxRuntimeExports.jsxs("div", { className: "designbase-spinner__bars", children: [jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" })] }));
+                return (jsxRuntimeExports.jsxs("div", { className: "designbase-spinner__bars", "aria-hidden": "true", children: [jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" })] }));
             case 'pulse':
-                return (jsxRuntimeExports.jsx("div", { className: "designbase-spinner__pulse" }));
+                return jsxRuntimeExports.jsx("div", { className: "designbase-spinner__pulse", "aria-hidden": "true" });
             case 'ripple':
-                return (jsxRuntimeExports.jsxs("div", { className: "designbase-spinner__ripple", children: [jsxRuntimeExports.jsx("div", { className: "designbase-spinner__ripple-circle" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__ripple-circle" })] }));
+                return (jsxRuntimeExports.jsxs("div", { className: "designbase-spinner__ripple", "aria-hidden": "true", children: [jsxRuntimeExports.jsx("div", { className: "designbase-spinner__ripple-circle" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__ripple-circle" })] }));
             default:
                 return null;
         }
     };
-    return (jsxRuntimeExports.jsxs("div", { className: classes, style: style, role: "status", "aria-label": showLabel ? label : undefined, ...props, children: [renderSpinner(), showLabel && label && (jsxRuntimeExports.jsx("span", { className: "designbase-spinner__label", "aria-hidden": "true", children: label }))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: classes, style: style, role: "status", "aria-live": "polite", "aria-busy": "true", "aria-label": showLabel ? label : undefined, ...props, children: [renderSpinner(), showLabel && label && (jsxRuntimeExports.jsx("span", { className: "designbase-spinner__label", "aria-hidden": "true", children: label }))] }));
 };
 Spinner.displayName = 'Spinner';
 
@@ -3657,7 +3657,7 @@ const Checkbox = React.forwardRef(({ isSelected, defaultSelected, isIndeterminat
 });
 Checkbox.displayName = 'Checkbox';
 
-const Toggle = React.forwardRef(({ isSelected, defaultSelected, isDisabled = false, isReadOnly = false, isRequired = false, hasLabel = true, size = 'm', children, className, name, value, onChange, ...props }, forwardedRef) => {
+const Toggle = React.forwardRef(({ isSelected, defaultSelected, isDisabled = false, isReadOnly = false, size = 'm', children, className, onChange, ...props }, forwardedRef) => {
     const [selected, setSelected] = React.useState(isSelected ?? defaultSelected ?? false);
     React.useEffect(() => {
         if (isSelected !== undefined) {
@@ -3675,9 +3675,9 @@ const Toggle = React.forwardRef(({ isSelected, defaultSelected, isDisabled = fal
         'designbase-toggle--selected': selected,
         'designbase-toggle--disabled': isDisabled,
         'designbase-toggle--readonly': isReadOnly,
-        'designbase-toggle--no-label': !hasLabel,
+        'designbase-toggle--no-label': !children,
     }, className);
-    return (jsxRuntimeExports.jsxs("button", { ...props, ref: forwardedRef, name: name, value: value, className: classes, onClick: handleClick, disabled: isDisabled, type: "button", children: [jsxRuntimeExports.jsx("div", { className: "designbase-toggle__track", children: jsxRuntimeExports.jsx("div", { className: "designbase-toggle__thumb" }) }), children && jsxRuntimeExports.jsx("span", { className: "designbase-toggle__label", children: children })] }));
+    return (jsxRuntimeExports.jsxs("button", { ...props, ref: forwardedRef, className: classes, onClick: handleClick, disabled: isDisabled, type: "button", children: [jsxRuntimeExports.jsx("div", { className: "designbase-toggle__track", children: jsxRuntimeExports.jsx("div", { className: "designbase-toggle__thumb" }) }), children && jsxRuntimeExports.jsx("span", { className: "designbase-toggle__label", children: children })] }));
 });
 Toggle.displayName = 'Toggle';
 
@@ -3785,7 +3785,7 @@ const Toast = ({ id, status = 'info', title, description, icon: Icon, duration =
     const getIconColor = () => {
         const colorMap = {
             success: 'success',
-            error: 'danger',
+            error: 'error',
             warning: 'warning',
             info: 'info',
         };
@@ -4460,77 +4460,6 @@ const Progressbar = ({ value, max = 100, min = 0, size = 'm', variant = 'default
 };
 Progressbar.displayName = 'Progressbar';
 
-const Badge = ({ children, size = 'm', variant = 'primary', style = 'text', count, maxCount = 99, disabled = false, className, ...props }) => {
-    // 숫자 스타일일 때 count 값을 사용
-    const displayContent = style === 'number' && count !== undefined
-        ? (count > maxCount ? `${maxCount}+` : count.toString())
-        : children;
-    const classes = clsx('designbase-badge', `designbase-badge--${size}`, `designbase-badge--${variant}`, `designbase-badge--${style}`, {
-        'designbase-badge--disabled': disabled,
-    }, className);
-    return (jsxRuntimeExports.jsx("span", { className: classes, ...props, children: displayContent }));
-};
-Badge.displayName = 'Badge';
-
-const MenuItem = ({ id, label, href, icon: Icon, active = false, disabled = false, badge, badgeColor = 'primary', variant = 'default', type = 'inline', size = 'm', style = 'dropdown', subItems, expanded = false, expandable = false, depth = 0, onClick, onChildClick, className, }) => {
-    const [internalExpanded, setInternalExpanded] = React.useState(expanded);
-    // expanded prop이 변경될 때 internalExpanded 업데이트
-    React.useEffect(() => {
-        setInternalExpanded(expanded);
-    }, [expanded]);
-    const handleClick = (e) => {
-        e.preventDefault();
-        if (disabled)
-            return;
-        if (expandable && subItems && subItems.length > 0) {
-            setInternalExpanded(!internalExpanded);
-        }
-        onClick?.({
-            id,
-            label,
-            href,
-            icon: Icon,
-            active,
-            disabled,
-            badge,
-            badgeColor,
-            variant,
-            type,
-            size,
-            subItems,
-            expanded: internalExpanded,
-            expandable,
-            onClick,
-            onChildClick,
-            className,
-        });
-    };
-    const handleChildClick = (child) => {
-        if (child.disabled)
-            return;
-        onChildClick?.(child);
-    };
-    const isExpanded = expandable ? internalExpanded : expanded;
-    const hasChildren = subItems && subItems.length > 0;
-    const classes = clsx('designbase-menu-item', `designbase-menu-item--${type}`, `designbase-menu-item--${size}`, `designbase-menu-item--${variant}`, `designbase-menu-item--${style}`, `designbase-menu-item--depth-${depth}`, {
-        'designbase-menu-item--active': active,
-        'designbase-menu-item--disabled': disabled,
-        'designbase-menu-item--expandable': expandable,
-        'designbase-menu-item--expanded': isExpanded,
-        'designbase-menu-item--with-children': hasChildren,
-        'designbase-menu-item--with-badge': badge,
-        'designbase-menu-item--with-icon': Icon,
-    }, className);
-    const contentClasses = clsx('designbase-menu-item__content', {
-        'designbase-menu-item__content--clickable': onClick || href,
-    });
-    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [jsxRuntimeExports.jsxs("div", { className: contentClasses, onClick: handleClick, children: [Icon && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-menu-item__icon', `designbase-menu-item__icon--${variant}`, {
-                            'designbase-menu-item__icon--active': active,
-                            'designbase-menu-item__icon--disabled': disabled,
-                        }), children: jsxRuntimeExports.jsx(Icon, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) })), jsxRuntimeExports.jsx("span", { className: "designbase-menu-item__label", children: label }), badge && (jsxRuntimeExports.jsx(Badge, { count: typeof badge === 'string' ? parseInt(badge) : badge, variant: badgeColor === 'neutral' ? 'secondary' : badgeColor, size: "s", style: "number" })), hasChildren && (jsxRuntimeExports.jsx("div", { className: "designbase-menu-item__expand-icon", children: isExpanded ? (jsxRuntimeExports.jsx(icons.ChevronUpIcon, { size: 16 })) : (jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 16 })) }))] }), hasChildren && isExpanded && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-menu-item__children', `designbase-menu-item__children--${style}`), children: subItems.map((child) => (jsxRuntimeExports.jsx(MenuItem, { id: child.id, label: child.label, href: child.href, icon: child.icon, active: child.active, disabled: child.disabled, badge: child.badge, badgeColor: child.badgeColor, variant: child.variant, type: child.type, size: size, style: child.style || style, subItems: child.subItems, depth: depth + 1, onClick: () => handleChildClick(child), onChildClick: onChildClick }, child.id))) }))] }));
-};
-MenuItem.displayName = 'MenuItem';
-
 const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = icons.SearchIcon, clearIcon: ClearIconComponent = icons.CloseIcon, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...props }) => {
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const inputRef = React.useRef(null);
@@ -4575,6 +4504,18 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
 };
 SearchBar.displayName = 'SearchBar';
 
+const Badge = ({ children, size = 'm', variant = 'primary', style = 'text', count, maxCount = 99, disabled = false, className, ...props }) => {
+    // 숫자 스타일일 때 count 값을 사용
+    const displayContent = style === 'number' && count !== undefined
+        ? (count > maxCount ? `${maxCount}+` : count.toString())
+        : children;
+    const classes = clsx('designbase-badge', `designbase-badge--${size}`, `designbase-badge--${variant}`, `designbase-badge--${style}`, {
+        'designbase-badge--disabled': disabled,
+    }, className);
+    return (jsxRuntimeExports.jsx("span", { className: classes, ...props, children: displayContent }));
+};
+Badge.displayName = 'Badge';
+
 const Avatar = ({ src, alt, initials, icon, size = 'm', variant = 'circle', status, badge, badgeMaxCount = 99, badgeVariant = 'danger', badgeStyle = 'number', badgeText, onClick, disabled = false, className, ...props }) => {
     const [imageError, setImageError] = React.useState(false);
     const [imageLoading, setImageLoading] = React.useState(true);
@@ -4707,8 +4648,65 @@ const Navbar = ({ size = 'm', variant = 'default', position = 'static', logo, on
     const containerClasses = clsx('designbase-navbar__container', {
         'designbase-navbar__container--full-width': fullWidth,
     });
-    const renderNavItem = (item) => (jsxRuntimeExports.jsx("li", { className: "designbase-navbar__nav-item", children: jsxRuntimeExports.jsx(MenuItem, { ...item, type: "inline", style: "dropdown", onClick: () => handleItemClick(item), onChildClick: (child) => handleItemClick(child) }) }, item.id));
-    return (jsxRuntimeExports.jsxs("nav", { className: classes, role: "navigation", "aria-label": "\uBA54\uC778 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: [jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [jsxRuntimeExports.jsx("div", { className: "designbase-navbar__brand", children: jsxRuntimeExports.jsx("div", { className: "designbase-navbar__logo", onClick: onLogoClick, role: onLogoClick ? 'button' : undefined, tabIndex: onLogoClick ? 0 : undefined, children: logo || jsxRuntimeExports.jsx(Logo, { size: size === 's' ? 's' : size === 'l' ? 'l' : 'm' }) }) }), jsxRuntimeExports.jsx("div", { className: "designbase-navbar__nav", children: jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__nav-list", children: items.map(renderNavItem) }) }), showSearch && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__search", children: jsxRuntimeExports.jsx(SearchBar, { placeholder: searchPlaceholder, value: searchQuery, onChange: setSearchQuery, onSearch: onSearch, size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', variant: "outlined" }) })), jsxRuntimeExports.jsx("div", { className: "designbase-navbar__user-menu", children: isAuthenticated && userProfile ? (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__user-dropdown", children: [jsxRuntimeExports.jsxs("button", { className: "designbase-navbar__user-toggle", onClick: handleUserMenuToggle, "aria-expanded": isUserMenuOpen, children: [jsxRuntimeExports.jsx(Avatar, { src: userProfile.avatar, alt: userProfile.name, initials: userProfile.name, size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', badge: userProfile.badge, badgeVariant: userProfile.badgeVariant, badgeStyle: userProfile.badgeStyle, badgeText: userProfile.badgeText }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__user-name", children: userProfile.name }), jsxRuntimeExports.jsx("i", { className: "designbase-icon-chevron-down" })] }), isUserMenuOpen && (jsxRuntimeExports.jsxs("ul", { className: "designbase-navbar__user-dropdown-menu", children: [userProfile.email && (jsxRuntimeExports.jsx("li", { className: "designbase-navbar__user-info", children: jsxRuntimeExports.jsx("span", { className: "designbase-navbar__user-email", children: userProfile.email }) })), userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__user-dropdown-item', {
+    // 재귀적으로 메뉴 아이템을 렌더링하는 함수
+    const renderMenuItem = (item, depth = 0) => {
+        const hasChildren = item.children && item.children.length > 0;
+        const isFirstLevel = depth === 0;
+        const isSecondLevel = depth === 1;
+        if (isFirstLevel) {
+            // 1depth - 메인 네비게이션
+            return (jsxRuntimeExports.jsx("li", { className: "designbase-navbar__nav-item", children: hasChildren ? (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__dropdown", children: [jsxRuntimeExports.jsxs("button", { className: clsx('designbase-navbar__nav-link', 'designbase-navbar__nav-link--has-children', {
+                                'designbase-navbar__nav-link--active': item.active,
+                                'designbase-navbar__nav-link--disabled': item.disabled,
+                            }), onClick: () => handleItemClick(item), disabled: item.disabled, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label, jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 12, className: "designbase-navbar__chevron" })] }), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__dropdown-menu", children: item.children.map((child) => renderMenuItem(child, 1)) })] })) : (jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__nav-link', {
+                        'designbase-navbar__nav-link--active': item.active,
+                        'designbase-navbar__nav-link--disabled': item.disabled,
+                    }), onClick: (e) => {
+                        if (item.disabled) {
+                            e.preventDefault();
+                            return;
+                        }
+                        handleItemClick(item);
+                    }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] })) }, item.id));
+        }
+        else if (isSecondLevel) {
+            // 2depth - 드롭다운 메뉴
+            return (jsxRuntimeExports.jsx("li", { children: hasChildren ? (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__dropdown-item designbase-navbar__dropdown-item--has-children", children: [jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__dropdown-item', {
+                                'designbase-navbar__dropdown-item--active': item.active,
+                                'designbase-navbar__dropdown-item--disabled': item.disabled,
+                            }), onClick: (e) => {
+                                if (item.disabled) {
+                                    e.preventDefault();
+                                    return;
+                                }
+                                handleItemClick(item);
+                            }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label, jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 12, className: "designbase-navbar__chevron" })] }), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__submenu", children: item.children.map((child) => renderMenuItem(child, 2)) })] })) : (jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__dropdown-item', {
+                        'designbase-navbar__dropdown-item--active': item.active,
+                        'designbase-navbar__dropdown-item--disabled': item.disabled,
+                    }), onClick: (e) => {
+                        if (item.disabled) {
+                            e.preventDefault();
+                            return;
+                        }
+                        handleItemClick(item);
+                    }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] })) }, item.id));
+        }
+        else {
+            // 3depth 이상 - 서브메뉴
+            return (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__dropdown-item', {
+                        'designbase-navbar__dropdown-item--active': item.active,
+                        'designbase-navbar__dropdown-item--disabled': item.disabled,
+                    }), onClick: (e) => {
+                        if (item.disabled) {
+                            e.preventDefault();
+                            return;
+                        }
+                        handleItemClick(item);
+                    }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] }) }, item.id));
+        }
+    };
+    const renderNavItem = (item) => renderMenuItem(item, 0);
+    return (jsxRuntimeExports.jsxs("nav", { className: classes, role: "navigation", "aria-label": "\uBA54\uC778 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: [jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [jsxRuntimeExports.jsx("div", { className: "designbase-navbar__brand", children: jsxRuntimeExports.jsx("div", { className: "designbase-navbar__logo", onClick: onLogoClick, role: onLogoClick ? 'button' : undefined, tabIndex: onLogoClick ? 0 : undefined, children: logo || jsxRuntimeExports.jsx(Logo, { size: size === 's' ? 's' : size === 'l' ? 'l' : 'm' }) }) }), jsxRuntimeExports.jsx("div", { className: "designbase-navbar__nav", children: jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__nav-list", children: items.map(renderNavItem) }) }), showSearch && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__search", children: jsxRuntimeExports.jsx(SearchBar, { placeholder: searchPlaceholder, value: searchQuery, onChange: setSearchQuery, onSearch: onSearch, size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', variant: "outlined" }) })), jsxRuntimeExports.jsx("div", { className: "designbase-navbar__user-menu", children: isAuthenticated && userProfile ? (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__user-dropdown", children: [jsxRuntimeExports.jsxs("button", { className: "designbase-navbar__user-toggle", onClick: handleUserMenuToggle, "aria-expanded": isUserMenuOpen, children: [jsxRuntimeExports.jsx(Avatar, { src: userProfile.avatar, alt: userProfile.name, initials: userProfile.name, size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', badge: userProfile.badge, badgeVariant: userProfile.badgeVariant, badgeStyle: userProfile.badgeStyle, badgeText: userProfile.badgeText }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__user-name", children: userProfile.name }), jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 12 })] }), isUserMenuOpen && (jsxRuntimeExports.jsxs("ul", { className: "designbase-navbar__user-dropdown-menu", children: [userProfile.email && (jsxRuntimeExports.jsx("li", { className: "designbase-navbar__user-info", children: jsxRuntimeExports.jsx("span", { className: "designbase-navbar__user-email", children: userProfile.email }) })), userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__user-dropdown-item', {
                                                     'designbase-navbar__user-dropdown-item--disabled': item.disabled,
                                                 }), onClick: (e) => {
                                                     if (item.disabled) {
@@ -4746,6 +4744,65 @@ const Navbar = ({ size = 'm', variant = 'default', position = 'static', logo, on
 };
 Navbar.displayName = 'Navbar';
 
+const MenuItem = ({ id, label, href, icon: Icon, active = false, disabled = false, badge, badgeColor = 'primary', variant = 'default', type = 'inline', size = 'm', style = 'dropdown', subItems, expanded = false, expandable = false, depth = 0, onClick, onChildClick, className, }) => {
+    const [internalExpanded, setInternalExpanded] = React.useState(expanded);
+    // expanded prop이 변경될 때 internalExpanded 업데이트
+    React.useEffect(() => {
+        setInternalExpanded(expanded);
+    }, [expanded]);
+    const handleClick = (e) => {
+        e.preventDefault();
+        if (disabled)
+            return;
+        if (expandable && subItems && subItems.length > 0) {
+            setInternalExpanded(!internalExpanded);
+        }
+        onClick?.({
+            id,
+            label,
+            href,
+            icon: Icon,
+            active,
+            disabled,
+            badge,
+            badgeColor,
+            variant,
+            type,
+            size,
+            subItems,
+            expanded: internalExpanded,
+            expandable,
+            onClick,
+            onChildClick,
+            className,
+        });
+    };
+    const handleChildClick = (child) => {
+        if (child.disabled)
+            return;
+        onChildClick?.(child);
+    };
+    const isExpanded = expandable ? internalExpanded : expanded;
+    const hasChildren = subItems && subItems.length > 0;
+    const classes = clsx('designbase-menu-item', `designbase-menu-item--${type}`, `designbase-menu-item--${size}`, `designbase-menu-item--${variant}`, `designbase-menu-item--${style}`, `designbase-menu-item--depth-${depth}`, {
+        'designbase-menu-item--active': active,
+        'designbase-menu-item--disabled': disabled,
+        'designbase-menu-item--expandable': expandable,
+        'designbase-menu-item--expanded': isExpanded,
+        'designbase-menu-item--with-children': hasChildren,
+        'designbase-menu-item--with-badge': badge,
+        'designbase-menu-item--with-icon': Icon,
+    }, className);
+    const contentClasses = clsx('designbase-menu-item__content', {
+        'designbase-menu-item__content--clickable': onClick || href,
+    });
+    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [jsxRuntimeExports.jsxs("div", { className: contentClasses, onClick: handleClick, children: [Icon && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-menu-item__icon', `designbase-menu-item__icon--${variant}`, {
+                            'designbase-menu-item__icon--active': active,
+                            'designbase-menu-item__icon--disabled': disabled,
+                        }), children: jsxRuntimeExports.jsx(Icon, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) })), jsxRuntimeExports.jsx("span", { className: "designbase-menu-item__label", children: label }), badge && (jsxRuntimeExports.jsx(Badge, { count: typeof badge === 'string' ? parseInt(badge) : badge, variant: badgeColor === 'neutral' ? 'secondary' : badgeColor, size: "s", style: "number" })), hasChildren && (jsxRuntimeExports.jsx("div", { className: "designbase-menu-item__expand-icon", children: isExpanded ? (jsxRuntimeExports.jsx(icons.ChevronUpIcon, { size: 16 })) : (jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 16 })) }))] }), hasChildren && isExpanded && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-menu-item__children', `designbase-menu-item__children--${style}`), children: subItems.map((child) => (jsxRuntimeExports.jsx(MenuItem, { id: child.id, label: child.label, href: child.href, icon: child.icon, active: child.active, disabled: child.disabled, badge: child.badge, badgeColor: child.badgeColor, variant: child.variant, type: child.type, size: size, style: child.style || style, subItems: child.subItems, depth: depth + 1, onClick: () => handleChildClick(child), onChildClick: onChildClick }, child.id))) }))] }));
+};
+MenuItem.displayName = 'MenuItem';
+
 const Sidebar = ({ size = 'm', variant = 'default', position = 'left', logo, onLogoClick, items = [], onItemClick, userProfile, userMenuItems = [], onUserMenuItemClick, collapsed = false, onToggle, collapsible = true, fixed = false, fullHeight = false, shadow = false, className, ...props }) => {
     const [expandedItems, setExpandedItems] = React.useState([]);
     const handleToggle = () => {
@@ -4787,9 +4844,19 @@ const Sidebar = ({ size = 'm', variant = 'default', position = 'left', logo, onL
         const hasChildren = item.children && item.children.length > 0;
         return (jsxRuntimeExports.jsx("li", { className: "designbase-sidebar__item", children: jsxRuntimeExports.jsx(MenuItem, { ...item, type: "block", style: "accordion", depth: level, expanded: isExpanded, expandable: hasChildren, onClick: () => handleItemClick(item), onChildClick: (child) => handleItemClick(child) }) }, item.id));
     };
-    return (jsxRuntimeExports.jsx("aside", { className: classes, role: "complementary", "aria-label": "\uC0AC\uC774\uB4DC\uBC14 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__container", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__header", children: [jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__logo", onClick: onLogoClick, role: onLogoClick ? 'button' : undefined, tabIndex: onLogoClick ? 0 : undefined, children: logo || jsxRuntimeExports.jsx(Logo, { size: size === 's' ? 's' : size === 'l' ? 'l' : 'm' }) }), collapsible && (jsxRuntimeExports.jsx("button", { className: "designbase-sidebar__toggle", onClick: handleToggle, "aria-label": collapsed ? '사이드바 펼치기' : '사이드바 접기', children: jsxRuntimeExports.jsx("i", { className: clsx('designbase-sidebar__toggle-icon', 'designbase-icon-chevron-left', {
+    return (jsxRuntimeExports.jsx("aside", { className: classes, role: "complementary", "aria-label": "\uC0AC\uC774\uB4DC\uBC14 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__container", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__header", children: [jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__logo", onClick: onLogoClick, role: onLogoClick ? 'button' : undefined, tabIndex: onLogoClick ? 0 : undefined, onKeyDown: (e) => {
+                                if (onLogoClick && (e.key === 'Enter' || e.key === ' ')) {
+                                    e.preventDefault();
+                                    onLogoClick();
+                                }
+                            }, children: logo || jsxRuntimeExports.jsx(Logo, { size: size === 's' ? 's' : size === 'l' ? 'l' : 'm' }) }), collapsible && (jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "s", iconOnly: true, className: "designbase-sidebar__toggle", onPress: handleToggle, "aria-label": collapsed ? '사이드바 펼치기' : '사이드바 접기', children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { className: clsx('designbase-sidebar__toggle-icon', {
                                     'designbase-sidebar__toggle-icon--collapsed': collapsed,
-                                }) }) }))] }), jsxRuntimeExports.jsx("nav", { className: "designbase-sidebar__nav", children: jsxRuntimeExports.jsx("ul", { className: "designbase-sidebar__nav-list", children: items.map((item) => renderSidebarItem(item)) }) }), userProfile && !collapsed && (jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__user", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__user-info", children: [userProfile.avatar ? (jsxRuntimeExports.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-sidebar__user-avatar" })) : (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-avatar-placeholder", children: userProfile.name.charAt(0).toUpperCase() })), jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__user-details", children: [jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-name", children: userProfile.name }), userProfile.email && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-email", children: userProfile.email })), userProfile.role && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-role", children: userProfile.role }))] })] }), userMenuItems.length > 0 && (jsxRuntimeExports.jsx("ul", { className: "designbase-sidebar__user-menu", children: userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-sidebar__user-menu-link', {
+                                }) }) }))] }), jsxRuntimeExports.jsx("nav", { className: "designbase-sidebar__nav", children: jsxRuntimeExports.jsx("ul", { className: "designbase-sidebar__nav-list", children: items.map((item) => renderSidebarItem(item)) }) }), userProfile && !collapsed && (jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__user", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__user-info", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' });
+                                }
+                            }, style: { cursor: 'pointer' }, children: [userProfile.avatar ? (jsxRuntimeExports.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-sidebar__user-avatar" })) : (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-avatar-placeholder", children: userProfile.name.charAt(0).toUpperCase() })), jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__user-details", children: [jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-name", children: userProfile.name }), userProfile.email && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-email", children: userProfile.email })), userProfile.role && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-role", children: userProfile.role }))] })] }), userMenuItems.length > 0 && (jsxRuntimeExports.jsx("ul", { className: "designbase-sidebar__user-menu", children: userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-sidebar__user-menu-link', {
                                         'designbase-sidebar__user-menu-link--disabled': item.disabled,
                                     }), onClick: (e) => {
                                         if (item.disabled) {
@@ -4797,7 +4864,12 @@ const Sidebar = ({ size = 'm', variant = 'default', position = 'left', logo, onL
                                             return;
                                         }
                                         handleUserMenuItemClick(item);
-                                    }, children: [item.icon && React.createElement(item.icon, { size: 16 }), item.label] }) }, item.id))) }))] })), userProfile && collapsed && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-collapsed", children: userProfile.avatar ? (jsxRuntimeExports.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-sidebar__user-avatar-collapsed" })) : (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-avatar-placeholder-collapsed", children: userProfile.name.charAt(0).toUpperCase() })) }))] }) }));
+                                    }, children: [item.icon && React.createElement(item.icon, { size: 16 }), item.label] }) }, item.id))) }))] })), userProfile && collapsed && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-collapsed", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' });
+                        }
+                    }, style: { cursor: 'pointer' }, children: userProfile.avatar ? (jsxRuntimeExports.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-sidebar__user-avatar-collapsed" })) : (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-avatar-placeholder-collapsed", children: userProfile.name.charAt(0).toUpperCase() })) }))] }) }));
 };
 Sidebar.displayName = 'Sidebar';
 
@@ -5302,14 +5374,22 @@ const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'd
     const [isVisible, setIsVisible] = React.useState(false);
     const [tooltipStyle, setTooltipStyle] = React.useState({});
     const [arrowStyle, setArrowStyle] = React.useState({});
-    const triggerRef = React.useRef(null);
+    // 🔑 DOM 래퍼(ref/이벤트가 항상 붙도록)
+    const triggerWrapperRef = React.useRef(null);
     const tooltipRef = React.useRef(null);
-    const timeoutRef = React.useRef();
+    // 브라우저 setTimeout은 number 반환
+    const timeoutRef = React.useRef(null);
+    const clearTimer = () => {
+        if (timeoutRef.current !== null) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    };
     // 툴팁 위치 계산
     const calculatePosition = React.useCallback(() => {
-        if (!triggerRef.current || !tooltipRef.current)
+        if (!triggerWrapperRef.current || !tooltipRef.current)
             return;
-        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const triggerRect = triggerWrapperRef.current.getBoundingClientRect();
         const tooltipRect = tooltipRef.current.getBoundingClientRect();
         const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
         const scrollY = window.pageYOffset || document.documentElement.scrollTop;
@@ -5322,129 +5402,131 @@ const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'd
         switch (position) {
             case 'top':
                 top = triggerRect.top + scrollY - tooltipRect.height - 8;
-                left = triggerRect.left + scrollX + (triggerRect.width / 2) - (tooltipRect.width / 2);
-                arrowTop = tooltipRect.height;
-                arrowLeft = tooltipRect.width / 2 - 4;
+                left = triggerRect.left + scrollX + triggerRect.width / 2 - tooltipRect.width / 2;
+                // CSS에서 화살표는 자동으로 중앙에 위치하므로 스타일 제거
+                arrowTop = 0;
+                arrowLeft = 0;
                 break;
             case 'top-start':
                 top = triggerRect.top + scrollY - tooltipRect.height - 8;
                 left = triggerRect.left + scrollX;
-                arrowTop = tooltipRect.height;
-                arrowLeft = 12;
+                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
+                arrowTop = 0;
+                arrowLeft = 0;
                 break;
             case 'top-end':
                 top = triggerRect.top + scrollY - tooltipRect.height - 8;
                 left = triggerRect.right + scrollX - tooltipRect.width;
-                arrowTop = tooltipRect.height;
-                arrowLeft = tooltipRect.width - 12;
+                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
+                arrowTop = 0;
+                arrowLeft = 0;
                 break;
             case 'bottom':
                 top = triggerRect.bottom + scrollY + 8;
-                left = triggerRect.left + scrollX + (triggerRect.width / 2) - (tooltipRect.width / 2);
-                arrowTop = -4;
-                arrowLeft = tooltipRect.width / 2 - 4;
+                left = triggerRect.left + scrollX + triggerRect.width / 2 - tooltipRect.width / 2;
+                // CSS에서 화살표는 자동으로 중앙에 위치하므로 스타일 제거
+                arrowTop = 0;
+                arrowLeft = 0;
                 break;
             case 'bottom-start':
                 top = triggerRect.bottom + scrollY + 8;
                 left = triggerRect.left + scrollX;
-                arrowTop = -4;
-                arrowLeft = 12;
+                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
+                arrowTop = 0;
+                arrowLeft = 0;
                 break;
             case 'bottom-end':
                 top = triggerRect.bottom + scrollY + 8;
                 left = triggerRect.right + scrollX - tooltipRect.width;
-                arrowTop = -4;
-                arrowLeft = tooltipRect.width - 12;
+                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
+                arrowTop = 0;
+                arrowLeft = 0;
                 break;
             case 'left':
-                top = triggerRect.top + scrollY + (triggerRect.height / 2) - (tooltipRect.height / 2);
+                top = triggerRect.top + scrollY + triggerRect.height / 2 - tooltipRect.height / 2;
                 left = triggerRect.left + scrollX - tooltipRect.width - 8;
-                arrowTop = tooltipRect.height / 2 - 4;
-                arrowLeft = tooltipRect.width;
+                // CSS에서 화살표는 자동으로 중앙에 위치하므로 스타일 제거
+                arrowTop = 0;
+                arrowLeft = 0;
                 break;
             case 'left-start':
                 top = triggerRect.top + scrollY;
                 left = triggerRect.left + scrollX - tooltipRect.width - 8;
-                arrowTop = 12;
-                arrowLeft = tooltipRect.width;
+                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
+                arrowTop = 0;
+                arrowLeft = 0;
                 break;
             case 'left-end':
                 top = triggerRect.bottom + scrollY - tooltipRect.height;
                 left = triggerRect.left + scrollX - tooltipRect.width - 8;
-                arrowTop = tooltipRect.height - 12;
-                arrowLeft = tooltipRect.width;
+                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
+                arrowTop = 0;
+                arrowLeft = 0;
                 break;
             case 'right':
-                top = triggerRect.top + scrollY + (triggerRect.height / 2) - (tooltipRect.height / 2);
+                top = triggerRect.top + scrollY + triggerRect.height / 2 - tooltipRect.height / 2;
                 left = triggerRect.right + scrollX + 8;
-                arrowTop = tooltipRect.height / 2 - 4;
-                arrowLeft = -4;
+                // CSS에서 화살표는 자동으로 중앙에 위치하므로 스타일 제거
+                arrowTop = 0;
+                arrowLeft = 0;
                 break;
             case 'right-start':
                 top = triggerRect.top + scrollY;
                 left = triggerRect.right + scrollX + 8;
-                arrowTop = 12;
-                arrowLeft = -4;
+                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
+                arrowTop = 0;
+                arrowLeft = 0;
                 break;
             case 'right-end':
                 top = triggerRect.bottom + scrollY - tooltipRect.height;
                 left = triggerRect.right + scrollX + 8;
-                arrowTop = tooltipRect.height - 12;
-                arrowLeft = -4;
+                // CSS에서 화살표는 자동으로 위치하므로 스타일 제거
+                arrowTop = 0;
+                arrowLeft = 0;
                 break;
         }
         // 화면 경계 체크 및 조정
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
-        // 수평 경계 체크
+        // 수평 경계
         if (left < 8) {
             left = 8;
-            if (isHorizontal) {
+            if (isHorizontal)
                 arrowLeft = Math.max(arrowLeft, 4);
-            }
         }
         else if (left + tooltipRect.width > viewportWidth - 8) {
             left = viewportWidth - tooltipRect.width - 8;
-            if (isHorizontal) {
+            if (isHorizontal)
                 arrowLeft = Math.min(arrowLeft, tooltipRect.width - 4);
-            }
         }
-        // 수직 경계 체크
+        // 수직 경계
         if (top < 8) {
             top = 8;
-            if (isVertical) {
+            if (isVertical)
                 arrowTop = Math.max(arrowTop, 4);
-            }
         }
         else if (top + tooltipRect.height > viewportHeight - 8) {
             top = viewportHeight - tooltipRect.height - 8;
-            if (isVertical) {
+            if (isVertical)
                 arrowTop = Math.min(arrowTop, tooltipRect.height - 4);
-            }
         }
         setTooltipStyle({
             position: 'fixed',
             top: `${top}px`,
             left: `${left}px`,
             maxWidth: `${maxWidth}px`,
-            zIndex: 9999,
-        });
-        setArrowStyle({
-            position: 'absolute',
-            top: `${arrowTop}px`,
-            left: `${arrowLeft}px`,
+            zIndex: 9999
         });
+        // CSS에서 화살표 위치를 자동으로 처리하므로 인라인 스타일 제거
+        setArrowStyle({});
     }, [position, maxWidth]);
     // 툴팁 표시
     const showTooltip = React.useCallback(() => {
         if (disabled || alwaysShow)
             return;
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(() => {
+        clearTimer();
+        timeoutRef.current = window.setTimeout(() => {
             setIsVisible(true);
-            // 위치 계산을 위해 다음 프레임에서 실행
             requestAnimationFrame(() => {
                 calculatePosition();
             });
@@ -5454,89 +5536,57 @@ const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'd
     const hideTooltip = React.useCallback(() => {
         if (disabled || alwaysShow)
             return;
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(() => {
+        clearTimer();
+        timeoutRef.current = window.setTimeout(() => {
             setIsVisible(false);
         }, hideDelay);
     }, [disabled, alwaysShow, hideDelay]);
-    // 이벤트 핸들러 - Tooltip은 항상 hover 기반
-    const handleMouseEnter = React.useCallback(() => {
-        showTooltip();
-    }, [showTooltip]);
-    const handleMouseLeave = React.useCallback(() => {
-        hideTooltip();
-    }, [hideTooltip]);
-    const handleFocus = React.useCallback(() => {
-        showTooltip();
-    }, [showTooltip]);
-    const handleBlur = React.useCallback(() => {
-        hideTooltip();
-    }, [hideTooltip]);
-    // 키보드 이벤트
+    // 키보드 이스케이프
     const handleKeyDown = React.useCallback((e) => {
-        if (e.key === 'Escape') {
+        if (e.key === 'Escape')
             hideTooltip();
-        }
     }, [hideTooltip]);
-    // 윈도우 리사이즈 및 스크롤 이벤트
-    React.useEffect(() => {
-        if (isVisible) {
-            const handleResize = () => calculatePosition();
-            const handleScroll = () => calculatePosition();
-            window.addEventListener('resize', handleResize);
-            window.addEventListener('scroll', handleScroll, true);
-            return () => {
-                window.removeEventListener('resize', handleResize);
-                window.removeEventListener('scroll', handleScroll, true);
-            };
-        }
-    }, [isVisible, calculatePosition]);
-    // 컴포넌트 언마운트 시 타이머 정리
+    // 리사이즈/스크롤 중 위치 업데이트
     React.useEffect(() => {
+        if (!isVisible)
+            return;
+        const onResize = () => calculatePosition();
+        const onScroll = () => calculatePosition();
+        window.addEventListener('resize', onResize);
+        window.addEventListener('scroll', onScroll, true);
         return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
+            window.removeEventListener('resize', onResize);
+            window.removeEventListener('scroll', onScroll, true);
         };
-    }, []);
-    // 항상 표시 모드
+    }, [isVisible, calculatePosition]);
+    // 언마운트 시 타이머 정리
+    React.useEffect(() => () => clearTimer(), []);
+    // 항상표시 모드
     React.useEffect(() => {
         if (alwaysShow && !disabled) {
             setIsVisible(true);
-            requestAnimationFrame(() => {
-                calculatePosition();
-            });
+            requestAnimationFrame(() => calculatePosition());
         }
         else if (!alwaysShow) {
             setIsVisible(false);
         }
     }, [alwaysShow, disabled, calculatePosition]);
-    const classes = clsx('designbase-tooltip', `designbase-tooltip--${size}`, `designbase-tooltip--${variant}`, `designbase-tooltip--${position}`, {
-        'designbase-tooltip--visible': isVisible,
-        'designbase-tooltip--disabled': disabled,
-    }, className);
+    // content가 동적으로 바뀌어도 위치 갱신
+    React.useEffect(() => {
+        if (!isVisible)
+            return;
+        const ro = new ResizeObserver(() => calculatePosition());
+        if (tooltipRef.current)
+            ro.observe(tooltipRef.current);
+        return () => ro.disconnect();
+    }, [isVisible, calculatePosition, content]);
+    const classes = clsx('designbase-tooltip', `designbase-tooltip--${size}`, `designbase-tooltip--${variant}`, `designbase-tooltip--${position}`, { 'designbase-tooltip--visible': isVisible, 'designbase-tooltip--disabled': disabled }, className);
     const arrowClasses = clsx('designbase-tooltip__arrow', `designbase-tooltip__arrow--${position}`);
-    // 자식 요소에 이벤트 핸들러 추가
-    const enhancedChildren = React.cloneElement(children, {
-        ref: triggerRef,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onKeyDown: handleKeyDown,
-        onMouseDown: (e) => {
-            // 클릭으로 인한 focus 방지 (hover 전용 보장)
-            e.preventDefault();
-        },
-        tabIndex: children.props.tabIndex ?? 0,
-    });
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [enhancedChildren, isVisible && (jsxRuntimeExports.jsxs("div", { ref: tooltipRef, className: classes, style: tooltipStyle, role: "tooltip", "aria-hidden": !isVisible, ...props, children: [jsxRuntimeExports.jsx("div", { className: "designbase-tooltip__content", children: content }), showArrow && (jsxRuntimeExports.jsx("div", { className: arrowClasses, style: arrowStyle }))] }))] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { ref: triggerWrapperRef, className: "designbase-tooltip__trigger", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, onKeyDown: handleKeyDown, tabIndex: 0, "aria-describedby": isVisible ? 'designbase-tooltip' : undefined, children: children }), isVisible && (jsxRuntimeExports.jsxs("div", { ref: tooltipRef, className: classes, style: tooltipStyle, role: "tooltip", id: "designbase-tooltip", "aria-hidden": !isVisible, ...props, children: [jsxRuntimeExports.jsx("div", { className: "designbase-tooltip__content", children: content }), showArrow && jsxRuntimeExports.jsx("div", { className: arrowClasses, style: arrowStyle })] }))] }));
 };
 Tooltip.displayName = 'Tooltip';
 
-const Popover = ({ content, children, position = 'top', size = 'm', variant = 'default', trigger = 'click', delay = 200, hideDelay = 0, alwaysShow = false, disabled = false, maxWidth = 300, showArrow = true, closeOnOutsideClick = true, closeOnEscape = true, open: controlledOpen, onOpenChange, className, ...props }) => {
+const Popover = ({ content, children, position = 'top', size = 'm', variant = 'default', trigger = 'click', delay = 200, hideDelay = 0, alwaysShow = false, disabled = false, maxWidth = 300, showArrow = true, closeOnOutsideClick = true, closeOnEscape = true, open: controlledOpen, onOpenChange, showCloseButton = true, className, ...props }) => {
     const [internalOpen, setInternalOpen] = React.useState(false);
     const [popoverStyle, setPopoverStyle] = React.useState({});
     const [arrowStyle, setArrowStyle] = React.useState({});
@@ -5749,6 +5799,12 @@ const Popover = ({ content, children, position = 'top', size = 'm', variant = 'd
             closePopover();
         }
     }, [closeOnEscape, closePopover]);
+    // 닫기 버튼 핸들러
+    const handleCloseClick = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        closePopover();
+    }, [closePopover]);
     // 외부 클릭 처리
     React.useEffect(() => {
         if (isOpen && closeOnOutsideClick) {
@@ -5825,7 +5881,7 @@ const Popover = ({ content, children, position = 'top', size = 'm', variant = 'd
         'aria-expanded': isOpen,
         'aria-haspopup': 'dialog',
     });
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [enhancedChildren, isOpen && (jsxRuntimeExports.jsxs("div", { ref: popoverRef, className: classes, style: popoverStyle, role: "dialog", "aria-modal": "false", ...props, children: [jsxRuntimeExports.jsx("div", { className: "designbase-popover__content", children: content }), showArrow && (jsxRuntimeExports.jsx("div", { className: arrowClasses, style: arrowStyle }))] }))] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [enhancedChildren, isOpen && (jsxRuntimeExports.jsxs("div", { ref: popoverRef, className: classes, style: popoverStyle, role: "dialog", "aria-modal": "false", ...props, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-popover__content", children: [showCloseButton && (jsxRuntimeExports.jsx("button", { className: "designbase-popover__close-button", onClick: handleCloseClick, "aria-label": "\uD31D\uC624\uBC84 \uB2EB\uAE30", type: "button" })), content] }), showArrow && (jsxRuntimeExports.jsx("div", { className: arrowClasses, style: arrowStyle }))] }))] }));
 };
 Popover.displayName = 'Popover';
 
@@ -6911,37 +6967,36 @@ const Reorder = ({ items, variant = 'default', size = 'm', orientation = 'vertic
         setDraggedIndex(index);
         setIsDragging(true);
         setDragOverIndex(-1);
-        // 드래그 이미지 설정 - 원본과 동일하게
+        // 드래그 이미지 설정 - 커스텀 드래그 이미지 사용하지 않음
+        // 브라우저 기본 드래그 이미지를 사용하여 자연스러운 드래그 경험 제공
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', item.id);
+        // 드래그 시작 애니메이션
         const dragElement = itemRefs.current.get(item.id);
         if (dragElement) {
-            const rect = dragElement.getBoundingClientRect();
-            const dragImage = dragElement.cloneNode(true);
-            dragImage.style.position = 'absolute';
-            dragImage.style.top = '-1000px';
-            dragImage.style.opacity = '0.9';
-            dragImage.style.transform = 'none'; // 회전 제거
-            dragImage.style.pointerEvents = 'none';
-            dragImage.style.zIndex = '9999';
-            document.body.appendChild(dragImage);
-            e.dataTransfer.setDragImage(dragImage, rect.width / 2, rect.height / 2);
-            // 드래그 이미지 정리
-            setTimeout(() => {
-                if (document.body.contains(dragImage)) {
-                    document.body.removeChild(dragImage);
-                }
-            }, 0);
+            dragElement.style.animation = 'dragStart 0.2s ease-out forwards';
         }
-        e.dataTransfer.effectAllowed = 'move';
-        e.dataTransfer.setData('text/plain', item.id);
         onDragStart?.(item, index);
     }, [disabled, onDragStart]);
-    // 드래그 오버 핸들러
+    // 드래그 오버 핸들러 - 드래그 방향에 따른 정확한 디바이더 위치 계산
     const handleDragOver = React.useCallback((e, index) => {
         e.preventDefault();
         e.dataTransfer.dropEffect = 'move';
-        if (draggedIndex !== index) {
-            setDragOverIndex(index);
+        if (draggedIndex === -1 || draggedIndex === index) {
+            setDragOverIndex(-1);
+            return;
+        }
+        // 드래그 방향에 따라 디바이더 위치 결정
+        let dropIndex = index;
+        if (draggedIndex < index) {
+            // 아래로 드래그: 현재 아이템 위에 디바이더 표시
+            dropIndex = index;
+        }
+        else if (draggedIndex > index) {
+            // 위로 드래그: 현재 아이템 위에 디바이더 표시 (index 그대로 사용)
+            dropIndex = index;
         }
+        setDragOverIndex(dropIndex);
     }, [draggedIndex]);
     // 드래그 리브 핸들러
     const handleDragLeave = React.useCallback((e) => {
@@ -6954,25 +7009,55 @@ const Reorder = ({ items, variant = 'default', size = 'm', orientation = 'vertic
             setDragOverIndex(-1);
         }
     }, []);
-    // 드롭 핸들러
+    // 드롭 핸들러 - 드래그 방향에 따른 정확한 드롭 위치 사용
     const handleDrop = React.useCallback((e, dropIndex) => {
         e.preventDefault();
         if (draggedIndex === -1 || draggedIndex === dropIndex) {
             setDragOverIndex(-1);
             return;
         }
+        // 드래그 방향에 따라 실제 드롭 위치 계산
+        let actualDropIndex = dropIndex;
+        if (draggedIndex < dropIndex) {
+            // 아래로 드래그: 현재 위치에 삽입
+            actualDropIndex = dropIndex;
+        }
+        else if (draggedIndex > dropIndex) {
+            // 위로 드래그: 현재 위치에 삽입 (dropIndex 그대로 사용)
+            actualDropIndex = dropIndex;
+        }
         const newItems = [...reorderedItems];
         const [draggedItemData] = newItems.splice(draggedIndex, 1);
-        newItems.splice(dropIndex, 0, draggedItemData);
+        newItems.splice(actualDropIndex, 0, draggedItemData);
         setReorderedItems(newItems);
         setDragOverIndex(-1);
         setIsDragging(false);
+        // 드롭 완료 애니메이션
+        const dropElement = itemRefs.current.get(draggedItemData.id);
+        if (dropElement) {
+            dropElement.style.animation = 'dropComplete 0.3s ease-out forwards';
+            setTimeout(() => {
+                dropElement.style.animation = '';
+            }, 300);
+        }
         onReorder?.(newItems);
-        onDragEnd?.(draggedItemData, draggedIndex, dropIndex);
+        onDragEnd?.(draggedItemData, draggedIndex, actualDropIndex);
     }, [reorderedItems, draggedIndex, onReorder, onDragEnd]);
     // 드래그 종료 핸들러
     const handleDragEnd = React.useCallback((e) => {
         e.preventDefault();
+        // 모든 아이템의 스타일 초기화
+        itemRefs.current.forEach((element) => {
+            if (element) {
+                element.style.animation = '';
+                element.style.transform = '';
+                element.style.opacity = '';
+                element.style.zIndex = '';
+                element.style.boxShadow = '';
+                element.style.border = '';
+                element.style.background = '';
+            }
+        });
         setDraggedItem(null);
         setDraggedIndex(-1);
         setDragOverIndex(-1);
@@ -7059,11 +7144,21 @@ const Reorder = ({ items, variant = 'default', size = 'm', orientation = 'vertic
             const isDragged = draggedItem?.id === item.id;
             const isDragOver = dragOverIndex === index;
             const isDisabled = disabled || item.disabled;
+            // 드래그 방향에 따른 디바이더 클래스 (드롭 위치에만 적용)
+            const isDraggingDown = isDragOver && draggedIndex !== -1 && draggedIndex < index;
+            const isDraggingUp = isDragOver && draggedIndex !== -1 && draggedIndex > index;
+            const isDraggingRight = isDragOver && draggedIndex !== -1 && draggedIndex < index;
+            const isDraggingLeft = isDragOver && draggedIndex !== -1 && draggedIndex > index;
             const itemClasses = clsx('designbase-reorder__item', {
                 'designbase-reorder__item--selected': isSelected,
                 'designbase-reorder__item--dragged': isDragged,
                 'designbase-reorder__item--drag-over': isDragOver,
                 'designbase-reorder__item--disabled': isDisabled,
+                // 드래그 방향에 따른 클래스
+                'designbase-reorder__item--drag-down': isDraggingDown,
+                'designbase-reorder__item--drag-up': isDraggingUp,
+                'designbase-reorder__item--drag-right': isDraggingRight,
+                'designbase-reorder__item--drag-left': isDraggingLeft,
             });
             return (jsxRuntimeExports.jsxs("div", { ref: (el) => {
                     if (el) {
@@ -7716,7 +7811,7 @@ const VideoPlayer = ({ src, poster, title, description, size = 'm', variant = 'd
         'designbase-video-player--show-controls': showControlsOverlay,
     }, className);
     const currentSrc = playlist.length > 0 ? playlist[playlistIndex] : src;
-    return (jsxRuntimeExports.jsxs("div", { ref: containerRef, className: classes, onMouseEnter: () => setShowControlsOverlay(true), onMouseLeave: () => setShowControlsOverlay(false), children: [jsxRuntimeExports.jsxs("video", { ref: videoRef, src: currentSrc, poster: poster, autoPlay: autoPlay, loop: loop, muted: muted, playsInline: true, className: "designbase-video-player__video", children: [subtitles.map((subtitle, index) => (jsxRuntimeExports.jsx("track", { kind: "subtitles", src: subtitle.src, srcLang: subtitle.lang, label: subtitle.label, default: subtitle.label === currentSubtitle }, index))), "\uBE44\uB514\uC624\uB97C \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uBE0C\uB77C\uC6B0\uC800\uC785\uB2C8\uB2E4."] }), isLoading && (jsxRuntimeExports.jsx("div", { className: "designbase-video-player__loading", children: jsxRuntimeExports.jsx("div", { className: "designbase-video-player__spinner" }) })), error && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__error", children: [jsxRuntimeExports.jsx("p", { children: error }), jsxRuntimeExports.jsx("button", { onClick: () => window.location.reload(), children: "\uB2E4\uC2DC \uC2DC\uB3C4" })] })), showControls && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__overlay", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__top-controls", children: [title && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__title", children: [jsxRuntimeExports.jsx("h3", { children: title }), description && jsxRuntimeExports.jsx("p", { children: description })] })), showSettings && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__settings", children: [jsxRuntimeExports.jsx("button", { className: "designbase-video-player__settings-button", onClick: () => setShowSettingsMenu(!showSettingsMenu), children: jsxRuntimeExports.jsx(icons.SettingsIcon, { size: 20 }) }), showSettingsMenu && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__settings-menu", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__setting-group", children: [jsxRuntimeExports.jsx("label", { children: "\uC7AC\uC0DD \uC18D\uB3C4" }), jsxRuntimeExports.jsx("select", { value: playbackRate, onChange: (e) => handlePlaybackRateChange(parseFloat(e.target.value)), children: playbackRates.map(rate => (jsxRuntimeExports.jsxs("option", { value: rate, children: [rate, "x"] }, rate))) })] }), qualities.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__setting-group", children: [jsxRuntimeExports.jsx("label", { children: "\uD488\uC9C8" }), jsxRuntimeExports.jsx("select", { value: currentQuality, onChange: (e) => handleQualityChange(e.target.value), children: qualities.map(quality => (jsxRuntimeExports.jsx("option", { value: quality.value, children: quality.label }, quality.value))) })] })), subtitles.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__setting-group", children: [jsxRuntimeExports.jsx("label", { children: "\uC790\uB9C9" }), jsxRuntimeExports.jsxs("select", { value: currentSubtitle, onChange: (e) => handleSubtitleChange(e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: "\uC790\uB9C9 \uC5C6\uC74C" }), subtitles.map(subtitle => (jsxRuntimeExports.jsx("option", { value: subtitle.label, children: subtitle.label }, subtitle.label)))] })] }))] }))] }))] }), jsxRuntimeExports.jsx("div", { className: "designbase-video-player__center-controls", children: jsxRuntimeExports.jsx("button", { className: "designbase-video-player__play-button", onClick: togglePlay, children: isPlaying ? jsxRuntimeExports.jsx(icons.PauseIcon, { size: 48 }) : jsxRuntimeExports.jsx(icons.PlayIcon, { size: 48 }) }) }), jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__bottom-controls", children: [showProgress && (jsxRuntimeExports.jsxs("div", { ref: progressRef, className: "designbase-video-player__progress", onClick: handleProgressChange, children: [jsxRuntimeExports.jsx("div", { className: "designbase-video-player__progress-bar", style: { width: `${progressPercentage}%` } }), jsxRuntimeExports.jsx("div", { className: "designbase-video-player__progress-handle", style: { left: `${progressPercentage}%` } })] })), jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__controls", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__left-controls", children: [jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", onClick: togglePlay, children: isPlaying ? jsxRuntimeExports.jsx(icons.PauseIcon, { size: 20 }) : jsxRuntimeExports.jsx(icons.PlayIcon, { size: 20 }) }), showVolume && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__volume", children: [jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", onClick: toggleMute, onMouseEnter: () => setShowVolumeSlider(true), onMouseLeave: () => setShowVolumeSlider(false), children: isMuted || volume === 0 ? jsxRuntimeExports.jsx(icons.MuteFilledIcon, { size: 20 }) : jsxRuntimeExports.jsx(icons.VolumeUpIcon, { size: 20 }) }), showVolumeSlider && (jsxRuntimeExports.jsx("div", { ref: volumeRef, className: "designbase-video-player__volume-slider", children: jsxRuntimeExports.jsx("input", { type: "range", min: "0", max: "1", step: "0.1", value: volume, onChange: handleVolumeSliderChange }) }))] })), showTime && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__time", children: [jsxRuntimeExports.jsx("span", { children: formatTime(currentTime) }), jsxRuntimeExports.jsx("span", { children: "/" }), jsxRuntimeExports.jsx("span", { children: formatTime(duration) })] }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__right-controls", children: [playlist.length > 1 && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__playlist-controls", children: [jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", disabled: playlistIndex === 0, onClick: () => handlePlaylistChange(playlistIndex - 1), children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: 16 }) }), jsxRuntimeExports.jsxs("span", { children: [playlistIndex + 1, " / ", playlist.length] }), jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", disabled: playlistIndex === playlist.length - 1, onClick: () => handlePlaylistChange(playlistIndex + 1), children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 16 }) })] })), enableFullscreen && (jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", onClick: toggleFullscreen, children: isFullscreen ? jsxRuntimeExports.jsx(icons.ShrinkIcon, { size: 20 }) : jsxRuntimeExports.jsx(icons.ExpandIcon, { size: 20 }) }))] })] })] })] }))] }));
+    return (jsxRuntimeExports.jsxs("div", { ref: containerRef, className: classes, onMouseEnter: () => setShowControlsOverlay(true), onMouseLeave: () => setShowControlsOverlay(false), children: [jsxRuntimeExports.jsxs("video", { ref: videoRef, src: currentSrc, poster: poster, autoPlay: autoPlay, loop: loop, muted: muted, playsInline: true, className: "designbase-video-player__video", children: [subtitles.map((subtitle, index) => (jsxRuntimeExports.jsx("track", { kind: "subtitles", src: subtitle.src, srcLang: subtitle.lang, label: subtitle.label, default: subtitle.label === currentSubtitle }, index))), "\uBE44\uB514\uC624\uB97C \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uBE0C\uB77C\uC6B0\uC800\uC785\uB2C8\uB2E4."] }), isLoading && (jsxRuntimeExports.jsx("div", { className: "designbase-video-player__loading", children: jsxRuntimeExports.jsx("div", { className: "designbase-video-player__spinner" }) })), error && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__error", children: [jsxRuntimeExports.jsx("p", { children: error }), jsxRuntimeExports.jsx("button", { onClick: () => window.location.reload(), children: "\uB2E4\uC2DC \uC2DC\uB3C4" })] })), showControls && (jsxRuntimeExports.jsx("div", { className: "designbase-video-player__dim-overlay" })), showControls && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__overlay", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__top-controls", children: [title && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__title", children: [jsxRuntimeExports.jsx("h3", { children: title }), description && jsxRuntimeExports.jsx("p", { children: description })] })), showSettings && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__settings", children: [jsxRuntimeExports.jsx("button", { className: "designbase-video-player__settings-button", onClick: () => setShowSettingsMenu(!showSettingsMenu), children: jsxRuntimeExports.jsx(icons.SettingsIcon, { size: 20 }) }), showSettingsMenu && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__settings-menu", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__setting-group", children: [jsxRuntimeExports.jsx("label", { children: "\uC7AC\uC0DD \uC18D\uB3C4" }), jsxRuntimeExports.jsx("select", { value: playbackRate, onChange: (e) => handlePlaybackRateChange(parseFloat(e.target.value)), children: playbackRates.map(rate => (jsxRuntimeExports.jsxs("option", { value: rate, children: [rate, "x"] }, rate))) })] }), qualities.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__setting-group", children: [jsxRuntimeExports.jsx("label", { children: "\uD488\uC9C8" }), jsxRuntimeExports.jsx("select", { value: currentQuality, onChange: (e) => handleQualityChange(e.target.value), children: qualities.map(quality => (jsxRuntimeExports.jsx("option", { value: quality.value, children: quality.label }, quality.value))) })] })), subtitles.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__setting-group", children: [jsxRuntimeExports.jsx("label", { children: "\uC790\uB9C9" }), jsxRuntimeExports.jsxs("select", { value: currentSubtitle, onChange: (e) => handleSubtitleChange(e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: "\uC790\uB9C9 \uC5C6\uC74C" }), subtitles.map(subtitle => (jsxRuntimeExports.jsx("option", { value: subtitle.label, children: subtitle.label }, subtitle.label)))] })] }))] }))] }))] }), jsxRuntimeExports.jsx("div", { className: "designbase-video-player__center-controls", children: jsxRuntimeExports.jsx("button", { className: "designbase-video-player__play-button", onClick: togglePlay, children: isPlaying ? jsxRuntimeExports.jsx(icons.PauseIcon, { size: 48 }) : jsxRuntimeExports.jsx(icons.PlayIcon, { size: 48 }) }) }), jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__bottom-controls", children: [showProgress && (jsxRuntimeExports.jsxs("div", { ref: progressRef, className: "designbase-video-player__progress", onClick: handleProgressChange, children: [jsxRuntimeExports.jsx("div", { className: "designbase-video-player__progress-bar", style: { width: `${progressPercentage}%` } }), jsxRuntimeExports.jsx("div", { className: "designbase-video-player__progress-handle", style: { left: `${progressPercentage}%` } })] })), jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__controls", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__left-controls", children: [jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", onClick: togglePlay, children: isPlaying ? jsxRuntimeExports.jsx(icons.PauseIcon, { size: 20 }) : jsxRuntimeExports.jsx(icons.PlayIcon, { size: 20 }) }), showVolume && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__volume", children: [jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", onClick: toggleMute, onMouseEnter: () => setShowVolumeSlider(true), onMouseLeave: () => setShowVolumeSlider(false), children: isMuted || volume === 0 ? jsxRuntimeExports.jsx(icons.MuteFilledIcon, { size: 20 }) : jsxRuntimeExports.jsx(icons.VolumeUpIcon, { size: 20 }) }), showVolumeSlider && (jsxRuntimeExports.jsx("div", { ref: volumeRef, className: "designbase-video-player__volume-slider", children: jsxRuntimeExports.jsx("input", { type: "range", min: "0", max: "1", step: "0.1", value: volume, onChange: handleVolumeSliderChange }) }))] })), showTime && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__time", children: [jsxRuntimeExports.jsx("span", { children: formatTime(currentTime) }), jsxRuntimeExports.jsx("span", { children: "/" }), jsxRuntimeExports.jsx("span", { children: formatTime(duration) })] }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__right-controls", children: [playlist.length > 1 && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__playlist-controls", children: [jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", disabled: playlistIndex === 0, onClick: () => handlePlaylistChange(playlistIndex - 1), children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: 16 }) }), jsxRuntimeExports.jsxs("span", { children: [playlistIndex + 1, " / ", playlist.length] }), jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", disabled: playlistIndex === playlist.length - 1, onClick: () => handlePlaylistChange(playlistIndex + 1), children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 16 }) })] })), enableFullscreen && (jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", onClick: toggleFullscreen, children: isFullscreen ? jsxRuntimeExports.jsx(icons.ShrinkIcon, { size: 20 }) : jsxRuntimeExports.jsx(icons.ExpandIcon, { size: 20 }) }))] })] })] })] }))] }));
 };
 
 const AudioPlayer = ({ src, title, artist, album, albumArt, size = 'm', variant = 'default', theme = 'auto', autoPlay = false, loop = false, muted = false, showControls = true, enableKeyboard = true, showProgress = true, showTime = true, showVolume = true, showSettings = false, playlist = [], currentIndex = 0, autoPause = true, playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2], defaultPlaybackRate = 1, repeatMode = 'none', shuffle = false, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onPlaylistChange, onPlaybackRateChange, onRepeatModeChange, onShuffleChange, onError, className, }) => {
@@ -8445,7 +8540,7 @@ const Toolbar = ({ items, size = 'm', variant = 'default', position = 'top', ful
                 return (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-toolbar__item', 'designbase-toolbar__item--dropdown', {
                         'designbase-toolbar__item--open': openDropdown === item.id,
                         'designbase-toolbar__item--disabled': item.disabled,
-                    }), children: [jsxRuntimeExports.jsxs("button", { className: "designbase-toolbar__dropdown-trigger", onClick: () => handleItemClick(item), disabled: item.disabled, title: item.tooltip, children: [item.icon && (jsxRuntimeExports.jsx("span", { className: "designbase-toolbar__item-icon", children: item.icon })), item.label && (jsxRuntimeExports.jsx("span", { className: "designbase-toolbar__item-label", children: item.label })), jsxRuntimeExports.jsx("span", { className: "designbase-toolbar__dropdown-arrow", children: jsxRuntimeExports.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: jsxRuntimeExports.jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), openDropdown === item.id && item.options && (jsxRuntimeExports.jsx("div", { className: "designbase-toolbar__dropdown-menu", children: item.options.map((option) => (jsxRuntimeExports.jsxs("button", { className: clsx('designbase-toolbar__dropdown-option', {
+                    }), children: [jsxRuntimeExports.jsxs("button", { className: "designbase-toolbar__dropdown-trigger", onClick: () => handleItemClick(item), disabled: item.disabled, title: item.tooltip, children: [item.icon && (jsxRuntimeExports.jsx("span", { className: "designbase-toolbar__item-icon", children: item.icon })), item.label && (jsxRuntimeExports.jsx("span", { className: "designbase-toolbar__item-label", children: item.label })), jsxRuntimeExports.jsx("span", { className: "designbase-toolbar__dropdown-arrow", children: jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: 12 }) })] }), openDropdown === item.id && item.options && (jsxRuntimeExports.jsx("div", { className: "designbase-toolbar__dropdown-menu", children: item.options.map((option) => (jsxRuntimeExports.jsxs("button", { className: clsx('designbase-toolbar__dropdown-option', {
                                     'designbase-toolbar__dropdown-option--selected': item.selectedValue === option.value,
                                     'designbase-toolbar__dropdown-option--disabled': option.disabled,
                                 }), onClick: () => handleOptionClick(item, option.value), disabled: option.disabled, children: [option.icon && (jsxRuntimeExports.jsx("span", { className: "designbase-toolbar__dropdown-option-icon", children: option.icon })), jsxRuntimeExports.jsx("span", { className: "designbase-toolbar__dropdown-option-label", children: option.label })] }, option.value))) }))] }, item.id));
@@ -11803,8 +11898,26 @@ const ResizablePanels = ({ children, initialWidth = '100%', initialHeight = '100
                 return { ...baseStyle, bottom: 0, right: 0 };
         }
     }, [handlePosition, handleSize, handleColor, direction]);
-    // 기본 리사이즈 핸들 아이콘
-    const defaultHandleIcon = (jsxRuntimeExports.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: [jsxRuntimeExports.jsx("path", { d: "M12 12H8L10 10L12 12Z" }), jsxRuntimeExports.jsx("path", { d: "M8 8H4L6 6L8 8Z" }), jsxRuntimeExports.jsx("path", { d: "M4 4H0L2 2L4 4Z" })] }));
+    // 방향에 따른 기본 리사이즈 핸들 아이콘
+    const getDefaultHandleIcon = () => {
+        const iconSize = Math.max(12, handleSize - 4);
+        switch (handlePosition) {
+            case 'bottom-right':
+                return jsxRuntimeExports.jsx(icons.ArrowDownRightIcon, { size: iconSize });
+            case 'bottom-left':
+                return jsxRuntimeExports.jsx(icons.ArrowDownLeftIcon, { size: iconSize });
+            case 'top-right':
+                return jsxRuntimeExports.jsx(icons.ArrowUpRightIcon, { size: iconSize });
+            case 'top-left':
+                return jsxRuntimeExports.jsx(icons.ArrowUpLeftIcon, { size: iconSize });
+            case 'right':
+                return jsxRuntimeExports.jsx(icons.ArrowRightIcon, { size: iconSize });
+            case 'bottom':
+                return jsxRuntimeExports.jsx(icons.ArrowDownIcon, { size: iconSize });
+            default:
+                return direction === 'both' ? jsxRuntimeExports.jsx(icons.MoveIcon, { size: iconSize }) : jsxRuntimeExports.jsx(icons.ExpandIcon, { size: iconSize });
+        }
+    };
     const classes = classNames('designbase-resizable-panels', {
         'designbase-resizable-panels--resizing': isResizing,
         'designbase-resizable-panels--border': showBorder,
@@ -11822,7 +11935,7 @@ const ResizablePanels = ({ children, initialWidth = '100%', initialHeight = '100
                 }, onMouseLeave: (e) => {
                     const target = e.currentTarget;
                     target.style.backgroundColor = handleColor;
-                }, children: handleIcon || defaultHandleIcon })] }));
+                }, children: handleIcon || getDefaultHandleIcon() })] }));
 };
 
 /**