@designbasekorea/ui 0.5.4 → 0.5.6

package/dist/index.js

@@ -4453,7 +4453,7 @@ const Checkbox = React.forwardRef(({ isSelected, defaultSelected, isIndeterminat
 });
 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);
@@ -4598,7 +4598,8 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
     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))) })] }))] }));
 };
@@ -8207,7 +8208,7 @@ const HeroFeature = ({ title, subtitle, description, image, imageAlt, background
     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)
@@ -8598,12 +8599,11 @@ const ImageList = ({ images, layout = 'grid', columns = 3, spacing = 'm', ratio
                 })), 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]);
@@ -8614,7 +8614,7 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
             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];
@@ -8628,6 +8628,12 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
         }
         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;
@@ -8650,9 +8656,7 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
     const handleItemDragEnd = () => {
         setDraggedItem(null);
     };
-    const isItemSelected = (itemId) => {
-        return internalSelectedItems.includes(itemId);
-    };
+    const isItemSelected = (itemId) => internalSelectedItems.includes(itemId);
     const renderBadge = (badge) => {
         if (!badge)
             return null;
@@ -8671,17 +8675,38 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
     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)));
@@ -8693,12 +8718,12 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
         '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, }) => {
@@ -8786,6 +8811,77 @@ const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', varian
 };
 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, }) => {
@@ -10835,14 +10931,34 @@ const ScrollArea = ({ direction = 'vertical', scrollbarStyle = 'auto', maxHeight
     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, }) => {
@@ -11095,11 +11211,11 @@ const Skeleton = React.forwardRef(({ variant = 'text', size = 'm', width, height
         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';
@@ -11111,9 +11227,9 @@ const Skeleton = React.forwardRef(({ variant = 'text', size = 'm', width, height
     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';
         }
@@ -12577,6 +12693,7 @@ exports.Lightbox = Lightbox;
 exports.List = List;
 exports.Logo = Logo;
 exports.MarkdownEditor = MarkdownEditor;
+exports.Marquee = Marquee;
 exports.Masonry = Masonry;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;