@designbasekorea/ui 0.5.4 → 0.5.6

package/dist/index.umd.js

@@ -4451,7 +4451,7 @@
     });
     Checkbox.displayName = 'Checkbox';
 
-    const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = icons.SearchIcon, clearIcon: ClearIconComponent = icons.CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', suggestedSearches = [], suggestionRollingInterval = 5000, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...rest }) => {
+    const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = icons.SearchIcon, clearIcon: ClearIconComponent = icons.CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', suggestedSearches = [], suggestionRollingInterval = 5000, onChange, onSearch, onFocus, onBlur, onKeyDown, showShortcut = false, shortcutLabel = '⌘K', className, ...rest }) => {
         const [internalValue, setInternalValue] = React.useState(defaultValue);
         const [recentSearches, setRecentSearches] = React.useState([]);
         const [showRecentSearches, setShowRecentSearches] = React.useState(false);
@@ -4596,7 +4596,8 @@
         const currentPlaceholder = suggestedSearches.length > 0 && !currentValue && currentValue === ''
             ? suggestedSearches[currentSuggestion]
             : placeholder;
-        return (jsxRuntime.jsxs("div", { className: classes, role: "search", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__container", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__search-icon", children: jsxRuntime.jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: inputClasses, value: currentValue, placeholder: currentPlaceholder, disabled: disabled, readOnly: readOnly, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825", ...rest }), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsxRuntime.jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }), showRecentSearches && recentSearches.length > 0 && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-searches", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-header", children: [jsxRuntime.jsx("span", { className: "designbase-search-bar__recent-title", children: "\uCD5C\uADFC \uAC80\uC0C9\uC5B4" }), jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-all-button", onClick: handleClearAllRecentSearches, "aria-label": "\uBAA8\uB4E0 \uCD5C\uADFC \uAC80\uC0C9\uC5B4 \uC0AD\uC81C", children: "\uC804\uCCB4 \uC0AD\uC81C" })] }), jsxRuntime.jsx("div", { className: "designbase-search-bar__recent-list", children: recentSearches.map((searchTerm, index) => (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-item", children: [jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-search-button", onClick: () => handleRecentSearchClick(searchTerm), children: searchTerm }), jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-remove-button", onClick: () => handleRemoveRecentSearch(searchTerm), "aria-label": `${searchTerm} 삭제`, children: jsxRuntime.jsx(icons.CloseIcon, { size: 16 }) })] }, index))) })] })), suggestedSearches.length > 0 && isFocused && !currentValue && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__suggestions", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-header", children: jsxRuntime.jsx("span", { className: "designbase-search-bar__suggestions-title", children: "\uCD94\uCC9C \uAC80\uC0C9\uC5B4" }) }), jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-list", children: suggestedSearches.map((suggestion, index) => (jsxRuntime.jsx("button", { type: "button", className: clsx('designbase-search-bar__suggestion-item', {
+        const shortcutBadgeSize = size === 'l' ? 'm' : 's';
+        return (jsxRuntime.jsxs("div", { className: classes, role: "search", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__container", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__search-icon", children: jsxRuntime.jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: inputClasses, value: currentValue, placeholder: currentPlaceholder, disabled: disabled, readOnly: readOnly, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825", ...rest }), showShortcut && !currentValue && !disabled && !readOnly && (jsxRuntime.jsx(Badge, { className: "designbase-search-bar__shortcut-badge", size: shortcutBadgeSize, variant: "secondary", style: "text", "aria-hidden": "true", children: shortcutLabel })), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsxRuntime.jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }), showRecentSearches && recentSearches.length > 0 && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-searches", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-header", children: [jsxRuntime.jsx("span", { className: "designbase-search-bar__recent-title", children: "\uCD5C\uADFC \uAC80\uC0C9\uC5B4" }), jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-all-button", onClick: handleClearAllRecentSearches, "aria-label": "\uBAA8\uB4E0 \uCD5C\uADFC \uAC80\uC0C9\uC5B4 \uC0AD\uC81C", children: "\uC804\uCCB4 \uC0AD\uC81C" })] }), jsxRuntime.jsx("div", { className: "designbase-search-bar__recent-list", children: recentSearches.map((searchTerm, index) => (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-item", children: [jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-search-button", onClick: () => handleRecentSearchClick(searchTerm), children: searchTerm }), jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-remove-button", onClick: () => handleRemoveRecentSearch(searchTerm), "aria-label": `${searchTerm} 삭제`, children: jsxRuntime.jsx(icons.CloseIcon, { size: 16 }) })] }, index))) })] })), suggestedSearches.length > 0 && isFocused && !currentValue && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__suggestions", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-header", children: jsxRuntime.jsx("span", { className: "designbase-search-bar__suggestions-title", children: "\uCD94\uCC9C \uAC80\uC0C9\uC5B4" }) }), jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-list", children: suggestedSearches.map((suggestion, index) => (jsxRuntime.jsx("button", { type: "button", className: clsx('designbase-search-bar__suggestion-item', {
                                     'designbase-search-bar__suggestion-item--active': index === currentSuggestion
                                 }), onClick: () => handleSuggestionClick(suggestion), children: suggestion }, index))) })] }))] }));
     };
@@ -8205,7 +8206,7 @@
         const renderButtons = () => {
             if (buttons.length === 0)
                 return null;
-            return (jsxRuntime.jsx("div", { className: "designbase-hero-feature__buttons", children: buttons.map((button, index) => (jsxRuntime.jsx(Button, { href: button.href, variant: button.variant || 'primary', size: button.size || 'md', onClick: button.onClick, target: button.external ? '_blank' : undefined, rel: button.external ? 'noopener noreferrer' : undefined, icon: button.icon, children: button.text }, index))) }));
+            return (jsxRuntime.jsx("div", { className: "designbase-hero-feature__buttons", children: buttons.map((button, index) => (jsxRuntime.jsx(Button, { href: button.href, variant: button.variant || 'primary', size: button.size || 'm', onClick: button.onClick, target: button.external ? '_blank' : undefined, rel: button.external ? 'noopener noreferrer' : undefined, icon: button.icon, children: button.text }, index))) }));
         };
         const renderStats = () => {
             if (stats.length === 0)
@@ -8596,12 +8597,11 @@
                     })), currentIndex: selectedImageIndex, isOpen: true, onOpenChange: handleLightboxClose, onImageChange: handleLightboxNavigate }))] }));
     };
 
-    const List = ({ items, size = 'm', variant = 'default', itemType = 'default', layout = 'vertical', selectable = false, multiple = false, selectedItems = [], draggable = false, spacing = 'm', alignment = 'start', onItemClick, onItemSelect, onItemDrag, emptyState, loading = false, loadingCount = 3, className, }) => {
+    const List = ({ items, size = 'm', variant = 'navigation', itemType = 'default', layout = 'vertical', selectable = false, multiple = false, selectedItems = [], draggable = false, spacing = 's', alignment = 'start', showLeadingIcon = true, showDescription = false, showMeta = false, showBadge = true, showArrow = true, clickableArea = 'item', onItemClick, onItemSelect, onItemDrag, emptyState, loading = false, loadingCount = 3, className, }) => {
         const [internalSelectedItems, setInternalSelectedItems] = React.useState(selectedItems);
         const [draggedItem, setDraggedItem] = React.useState(null);
-        // 아이콘 크기 계산 (m이 기본값)
         const iconSize = size === 's' ? 16 : size === 'l' ? 24 : 20;
-        // 외부에서 선택된 아이템이 변경되면 내부 상태 업데이트
+        const shouldShowArrow = showArrow;
         React.useEffect(() => {
             setInternalSelectedItems(selectedItems);
         }, [selectedItems]);
@@ -8612,7 +8612,7 @@
                 let newSelectedItems;
                 if (multiple) {
                     if (internalSelectedItems.includes(item.id)) {
-                        newSelectedItems = internalSelectedItems.filter(id => id !== item.id);
+                        newSelectedItems = internalSelectedItems.filter((id) => id !== item.id);
                     }
                     else {
                         newSelectedItems = [...internalSelectedItems, item.id];
@@ -8626,6 +8626,12 @@
             }
             onItemClick?.(item, index);
         };
+        const handleItemKeyDown = (e, item, index) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleItemClick(item, index);
+            }
+        };
         const handleItemDragStart = (e, itemId) => {
             if (!draggable)
                 return;
@@ -8648,9 +8654,7 @@
         const handleItemDragEnd = () => {
             setDraggedItem(null);
         };
-        const isItemSelected = (itemId) => {
-            return internalSelectedItems.includes(itemId);
-        };
+        const isItemSelected = (itemId) => internalSelectedItems.includes(itemId);
         const renderBadge = (badge) => {
             if (!badge)
                 return null;
@@ -8669,17 +8673,38 @@
         const renderItem = (item, index) => {
             const isSelected = isItemSelected(item.id);
             const isDragging = draggedItem === item.id;
+            const isClickable = Boolean(onItemClick || selectable);
+            const hasDescription = showDescription && Boolean(item.description);
+            const hasMeta = showMeta && Boolean(item.meta?.length);
+            const hasSecondaryInfo = hasDescription || hasMeta;
+            const hasLeadingVisual = Boolean(item.image || (showLeadingIcon && item.icon));
+            const hasTrailing = Boolean((showBadge && item.badge) ||
+                item.actions?.length ||
+                shouldShowArrow ||
+                draggable);
             const itemClasses = clsx('designbase-list__item', `designbase-list__item--size-${size}`, `designbase-list__item--variant-${variant}`, `designbase-list__item--type-${itemType}`, `designbase-list__item--layout-${layout}`, `designbase-list__item--spacing-${spacing}`, `designbase-list__item--alignment-${alignment}`, {
                 'designbase-list__item--selected': isSelected,
                 'designbase-list__item--disabled': item.disabled,
                 'designbase-list__item--dragging': isDragging,
-                'designbase-list__item--clickable': onItemClick || selectable,
+                'designbase-list__item--clickable': isClickable,
                 'designbase-list__item--draggable': draggable,
+                'designbase-list__item--with-leading': hasLeadingVisual,
+                'designbase-list__item--with-secondary': hasSecondaryInfo,
+                'designbase-list__item--with-trailing': hasTrailing,
             });
-            return (jsxRuntime.jsxs("div", { className: itemClasses, onClick: () => handleItemClick(item, index), draggable: draggable, onDragStart: (e) => handleItemDragStart(e, item.id), onDragOver: handleItemDragOver, onDrop: (e) => handleItemDrop(e, item.id), onDragEnd: handleItemDragEnd, role: selectable ? 'button' : undefined, tabIndex: selectable ? 0 : undefined, "aria-selected": selectable ? isSelected : undefined, children: [selectable && (jsxRuntime.jsx("div", { className: "designbase-list__item-checkbox", children: jsxRuntime.jsx("input", { type: multiple ? 'checkbox' : 'radio', checked: isSelected, onChange: () => handleItemClick(item, index), disabled: item.disabled }) })), item.icon && (jsxRuntime.jsx("div", { className: "designbase-list__item-icon", children: React.isValidElement(item.icon) ? (React.cloneElement(item.icon, {
-                            size: iconSize,
-                            color: 'currentColor'
-                        })) : item.icon })), item.image && (jsxRuntime.jsx("div", { className: "designbase-list__item-image", children: jsxRuntime.jsx("img", { src: item.image, alt: item.title }) })), jsxRuntime.jsxs("div", { className: "designbase-list__item-content", children: [jsxRuntime.jsxs("div", { className: "designbase-list__item-header", children: [jsxRuntime.jsx("h4", { className: "designbase-list__item-title", children: item.title }), item.badge && renderBadge(item.badge)] }), item.description && (jsxRuntime.jsx("p", { className: "designbase-list__item-description", children: item.description })), item.meta && renderMeta(item.meta)] }), item.actions && renderActions(item.actions), draggable && (jsxRuntime.jsx("div", { className: "designbase-list__item-drag-handle", children: "\u22EE\u22EE" }))] }, item.id));
+            const itemIsInteractive = clickableArea === 'item' && isClickable && !item.disabled;
+            const contentIsInteractive = clickableArea === 'content' && isClickable && !item.disabled;
+            return (jsxRuntime.jsxs("div", { className: itemClasses, onClick: itemIsInteractive ? () => handleItemClick(item, index) : undefined, onKeyDown: itemIsInteractive ? (e) => handleItemKeyDown(e, item, index) : undefined, draggable: draggable, onDragStart: (e) => handleItemDragStart(e, item.id), onDragOver: handleItemDragOver, onDrop: (e) => handleItemDrop(e, item.id), onDragEnd: handleItemDragEnd, role: itemIsInteractive ? 'button' : undefined, tabIndex: itemIsInteractive ? 0 : undefined, "aria-selected": selectable ? isSelected : undefined, children: [selectable && (jsxRuntime.jsx("div", { className: "designbase-list__item-checkbox", onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsx("input", { type: multiple ? 'checkbox' : 'radio', checked: isSelected, onChange: (e) => {
+                                e.stopPropagation();
+                                handleItemClick(item, index);
+                            }, disabled: item.disabled }) })), showLeadingIcon && item.icon && !item.image && (jsxRuntime.jsx("div", { className: "designbase-list__item-icon", children: React.isValidElement(item.icon)
+                            ? React.cloneElement(item.icon, {
+                                size: iconSize,
+                                color: 'currentColor',
+                            })
+                            : item.icon })), item.image && (jsxRuntime.jsx("div", { className: "designbase-list__item-image", children: jsxRuntime.jsx("img", { src: item.image, alt: item.title }) })), jsxRuntime.jsxs("div", { className: clsx('designbase-list__item-content', {
+                            'designbase-list__item-content--clickable': contentIsInteractive,
+                        }), onClick: contentIsInteractive ? () => handleItemClick(item, index) : undefined, onKeyDown: contentIsInteractive ? (e) => handleItemKeyDown(e, item, index) : undefined, role: contentIsInteractive ? 'button' : undefined, tabIndex: contentIsInteractive ? 0 : undefined, children: [jsxRuntime.jsx("div", { className: "designbase-list__item-header", children: jsxRuntime.jsx("h4", { className: "designbase-list__item-title", children: item.title }) }), hasDescription && jsxRuntime.jsx("p", { className: "designbase-list__item-description", children: item.description }), hasMeta && renderMeta(item.meta)] }), (showBadge && item.badge) || item.actions || shouldShowArrow || draggable ? (jsxRuntime.jsxs("div", { className: "designbase-list__item-trailing", children: [showBadge && item.badge && renderBadge(item.badge), item.actions && renderActions(item.actions), shouldShowArrow && (jsxRuntime.jsx("div", { className: "designbase-list__item-arrow", "aria-hidden": "true", children: jsxRuntime.jsx(icons.ChevronRightIcon, { size: 16 }) })), draggable && jsxRuntime.jsx("div", { className: "designbase-list__item-drag-handle", children: "\u22EE\u22EE" })] })) : null] }, item.id));
         };
         const renderLoadingSkeleton = () => {
             return Array.from({ length: loadingCount }, (_, index) => (jsxRuntime.jsx("div", { className: "designbase-list__item designbase-list__item--loading", children: jsxRuntime.jsxs("div", { className: "designbase-list__item-skeleton", children: [jsxRuntime.jsx("div", { className: "designbase-list__item-skeleton-icon" }), jsxRuntime.jsxs("div", { className: "designbase-list__item-skeleton-content", children: [jsxRuntime.jsx("div", { className: "designbase-list__item-skeleton-title" }), jsxRuntime.jsx("div", { className: "designbase-list__item-skeleton-description" })] })] }) }, index)));
@@ -8691,12 +8716,12 @@
             'designbase-list--loading': loading,
         }, className);
         if (loading) {
-            return (jsxRuntime.jsx("div", { className: classes, children: renderLoadingSkeleton() }));
+            return jsxRuntime.jsx("div", { className: classes, children: renderLoadingSkeleton() });
         }
         if (items.length === 0 && emptyState) {
             return (jsxRuntime.jsx("div", { className: classes, children: jsxRuntime.jsx("div", { className: "designbase-list__empty", children: emptyState }) }));
         }
-        return (jsxRuntime.jsx("div", { className: classes, children: items.map((item, index) => renderItem(item, index)) }));
+        return jsxRuntime.jsx("div", { className: classes, children: items.map((item, index) => renderItem(item, index)) });
     };
 
     const DesignBaseLogo = ({ width = 193, height = 40, color, className, }) => {
@@ -8784,6 +8809,77 @@
     };
     Logo.displayName = 'Logo';
 
+    const Marquee = ({ children, items, direction = 'left', duration = 20, speed = 1, size = 'm', variant = 'default', bordered, pauseOnHover = true, fadeEdges = false, fadeWidth = 48, edgePadding, gap = 24, alignY = 'center', className, ariaLabel = 'Scrolling content', }) => {
+        const containerRef = React.useRef(null);
+        const baseGroupRef = React.useRef(null);
+        const [containerWidth, setContainerWidth] = React.useState(0);
+        const [baseGroupWidth, setBaseGroupWidth] = React.useState(0);
+        const resolvedItems = React.useMemo(() => ((items && items.length > 0) ? items : (children ? [children] : [])), [items, children]);
+        if (resolvedItems.length === 0) {
+            return null;
+        }
+        const resolvedSpeed = Number.isFinite(speed) && speed > 0 ? speed : 1;
+        const resolvedDuration = Math.max(duration, 1) / resolvedSpeed;
+        const resolvedFadeWidth = Math.max(fadeWidth, 0);
+        const resolvedEdgePadding = edgePadding !== undefined
+            ? Math.max(edgePadding, 0)
+            : (fadeEdges ? resolvedFadeWidth : 0);
+        const resolvedGap = Math.max(gap, 0);
+        React.useEffect(() => {
+            const updateSize = () => {
+                const nextContainerWidth = Math.ceil(containerRef.current?.clientWidth ?? 0);
+                const nextBaseGroupWidth = Math.ceil(baseGroupRef.current?.scrollWidth ?? 0);
+                setContainerWidth((prev) => (prev !== nextContainerWidth ? nextContainerWidth : prev));
+                setBaseGroupWidth((prev) => (prev !== nextBaseGroupWidth ? nextBaseGroupWidth : prev));
+            };
+            updateSize();
+            const observer = new ResizeObserver(updateSize);
+            if (containerRef.current)
+                observer.observe(containerRef.current);
+            if (baseGroupRef.current)
+                observer.observe(baseGroupRef.current);
+            const images = baseGroupRef.current?.querySelectorAll('img') ?? [];
+            images.forEach((img) => {
+                img.addEventListener('load', updateSize);
+                img.addEventListener('error', updateSize);
+            });
+            return () => {
+                observer.disconnect();
+                images.forEach((img) => {
+                    img.removeEventListener('load', updateSize);
+                    img.removeEventListener('error', updateSize);
+                });
+            };
+        }, [resolvedItems, resolvedGap, size, fadeEdges, resolvedEdgePadding]);
+        const duplicateCount = React.useMemo(() => {
+            if (baseGroupWidth <= 0)
+                return 1;
+            return Math.max(1, Math.ceil(containerWidth / baseGroupWidth));
+        }, [containerWidth, baseGroupWidth]);
+        const isReady = baseGroupWidth > 0;
+        const classes = clsx('designbase-marquee', `designbase-marquee--size-${size}`, `designbase-marquee--variant-${variant}`, `designbase-marquee--align-${alignY}`, {
+            'designbase-marquee--pause-on-hover': pauseOnHover,
+            'designbase-marquee--fade-edges': fadeEdges,
+            'designbase-marquee--right': direction === 'right',
+            'designbase-marquee--bordered': bordered ?? variant === 'outlined',
+            'designbase-marquee--ready': isReady,
+        }, className);
+        const style = {
+            '--db-marquee-duration': `${resolvedDuration}s`,
+            // 그룹간 간격까지 포함해 이동 거리를 맞춰야 루프 경계 점프가 사라짐
+            '--db-marquee-shift': `${baseGroupWidth + resolvedGap}px`,
+            '--db-marquee-gap': `${resolvedGap}px`,
+            '--db-marquee-fade-width': `${resolvedFadeWidth}px`,
+            '--db-marquee-edge-padding': `${resolvedEdgePadding}px`,
+        };
+        const screenReaderText = (items && items.length > 0)
+            ? items.filter((item) => typeof item === 'string').join(' • ') || ariaLabel
+            : (typeof children === 'string' ? children : ariaLabel);
+        const renderGroup = (key, ref) => (jsxRuntime.jsx("div", { className: "designbase-marquee__group", "aria-hidden": "true", ref: ref, children: resolvedItems.map((item, index) => (jsxRuntime.jsx("div", { className: "designbase-marquee__item", children: item }, `${key}-${index}`))) }, key));
+        return (jsxRuntime.jsxs("div", { className: classes, style: style, role: "region", "aria-label": ariaLabel, ref: containerRef, children: [jsxRuntime.jsx("span", { className: "designbase-marquee__sr-only", children: screenReaderText }), jsxRuntime.jsxs("div", { className: "designbase-marquee__track", children: [renderGroup('base', baseGroupRef), Array.from({ length: duplicateCount }).map((_, index) => renderGroup(`dup-${index}`))] })] }));
+    };
+    Marquee.displayName = 'Marquee';
+
     const MarkdownEditor = ({ size = 'm', variant = 'default', mode = 'preview', // 기본값을 preview로 변경
     theme = 'light', value = '', placeholder = '마크다운을 입력하세요...', minHeight = 200, maxHeight = 600, autoHeight = false, readonly = false, disabled = false, showToolbar = true, toolbarItems = [], showStatus = true, showWordCount = true, showLineCount = true, autoSave = false, autoSaveInterval = 30000, // 30초
     onFileUpload, onChange, onSave, onFocus, onBlur, className, }) => {
@@ -10833,14 +10929,34 @@
         return (jsxRuntime.jsx("div", { className: classes, style: style, children: jsxRuntime.jsx("div", { ref: scrollRef, className: "designbase-scroll-area__content", children: children }) }));
     };
 
-    const Section = ({ title, subtitle, description, size = 'm', variant = 'default', header, footer, actions, noPadding = false, fullWidth = false, fullHeight = false, className, children, }) => {
+    const Section = ({ title, subtitle, description = '', size = 'm', variant = 'default', header, footer, actions, noPadding = false, fullWidth = false, fullHeight = false, className, children, }) => {
+        const normalizeActionButtonSize = (node) => {
+            if (!React.isValidElement(node))
+                return node;
+            const element = node;
+            const elementType = element.type;
+            const isButtonComponent = elementType?.displayName === 'Button' || elementType?.name === 'Button';
+            // Button이고 size가 지정되지 않았으면 기본값 m 적용
+            if (isButtonComponent && element.props?.size === undefined) {
+                return React.cloneElement(element, { size: 'm' });
+            }
+            if (element.props?.children) {
+                return React.cloneElement(element, {
+                    children: React.Children.map(element.props.children, normalizeActionButtonSize),
+                });
+            }
+            return element;
+        };
+        const normalizedActions = actions
+            ? React.Children.map(actions, normalizeActionButtonSize)
+            : actions;
         const classes = clsx('designbase-section', `designbase-section--size-${size}`, `designbase-section--variant-${variant}`, {
             'designbase-section--no-padding': noPadding,
             'designbase-section--full-width': fullWidth,
             'designbase-section--full-height': fullHeight,
         }, className);
-        const hasHeader = title || subtitle || description || header || actions;
-        return (jsxRuntime.jsxs("section", { className: classes, children: [hasHeader && (jsxRuntime.jsx("div", { className: "designbase-section__header", children: header || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: "designbase-section__title-area", children: [title && (jsxRuntime.jsx("h2", { className: "designbase-section__title", children: title })), subtitle && (jsxRuntime.jsx("h3", { className: "designbase-section__subtitle", children: subtitle })), description && (jsxRuntime.jsx("p", { className: "designbase-section__description", children: description }))] })), actions && (jsxRuntime.jsx("div", { className: "designbase-section__actions", children: actions }))] })) })), jsxRuntime.jsx("div", { className: "designbase-section__content", children: children }), footer && (jsxRuntime.jsx("div", { className: "designbase-section__footer", children: footer }))] }));
+        const hasHeader = title || subtitle || description || header || normalizedActions;
+        return (jsxRuntime.jsxs("section", { className: classes, children: [hasHeader && (jsxRuntime.jsx("div", { className: "designbase-section__header", children: header || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: "designbase-section__title-area", children: [title && (jsxRuntime.jsx("h2", { className: "designbase-section__title", children: title })), subtitle && (jsxRuntime.jsx("h3", { className: "designbase-section__subtitle", children: subtitle })), description && (jsxRuntime.jsx("p", { className: "designbase-section__description", children: description }))] })), normalizedActions && (jsxRuntime.jsx("div", { className: "designbase-section__actions", children: normalizedActions }))] })) })), jsxRuntime.jsx("div", { className: "designbase-section__content", children: children }), footer && (jsxRuntime.jsx("div", { className: "designbase-section__footer", children: footer }))] }));
     };
 
     const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant = 'button', size = 'm', position = 'bottom', platforms = ['facebook', 'x', 'linkedin', 'whatsapp', 'email', 'link'], customPlatforms = {}, buttonText = '공유', buttonIcon = icons.ShareAltIcon, modalTitle = '공유하기', copySuccessMessage = '링크가 클립보드에 복사되었습니다!', showQrCode = true, qrCodeSize = 200, className, style, onShare, onShareError, onCopySuccess, onCopyError, }) => {
@@ -11093,11 +11209,11 @@
             switch (size) {
                 case 'xs':
                     return variant === 'circular' ? '16px' : '12px';
-                case 'sm':
+                case 's':
                     return variant === 'circular' ? '24px' : '16px';
-                case 'md':
+                case 'm':
                     return variant === 'circular' ? '32px' : '20px';
-                case 'lg':
+                case 'l':
                     return variant === 'circular' ? '48px' : '24px';
                 case 'xl':
                     return variant === 'circular' ? '64px' : '32px';
@@ -11109,9 +11225,9 @@
         const getTextLineHeight = () => {
             switch (size) {
                 case 'xs': return '12px';
-                case 'sm': return '16px';
-                case 'md': return '20px';
-                case 'lg': return '24px';
+                case 's': return '16px';
+                case 'm': return '20px';
+                case 'l': return '24px';
                 case 'xl': return '32px';
                 default: return '20px';
             }
@@ -12575,6 +12691,7 @@
     exports.List = List;
     exports.Logo = Logo;
     exports.MarkdownEditor = MarkdownEditor;
+    exports.Marquee = Marquee;
     exports.Masonry = Masonry;
     exports.MenuItem = MenuItem;
     exports.Modal = Modal;