@designbasekorea/ui 0.1.45 → 0.1.47

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useCallback, useEffect, useRef, useMemo, useContext, useLayoutEffect, forwardRef, useId } from 'react';
-import { ChevronDownIcon, StarIcon, TrendingUpIcon, StarFilledIcon, CartIcon, CloseIcon, ArrowRightIcon, InfoFilledIcon, ErrorFilledIcon, WarningFilledIcon, CircleCheckFilledIcon, RefreshIcon, ChevronLeftIcon, PauseIcon, PlayIcon, ChevronRightIcon, RepeatIcon, MuteFilledIcon, VolumeUpIcon, SettingsIcon, UserIcon, HideIcon, ShowIcon, SearchIcon, ChevronUpIcon, GalleryIcon, HeartIcon, BookmarkIcon, ShareAltIcon, DownloadIcon, ArrowLeftIcon, ShrinkIcon, ExpandIcon, DoneIcon as DoneIcon$1, CopyIcon, BulbIcon, CloudCloseIcon, BellActiveIcon, AwardIcon, CalendarIcon, PlusIcon, ErrorIcon, ClockIcon, MinusIcon as MinusIcon$1, VideoIcon, CodeIcon, WriteIcon, UploadIcon, ArrowBarLeftIcon, ArrowBarRightIcon, StarHalfIcon, MoveIcon, MoreVerticalIcon, ArrowDownIcon, ArrowUpLeftIcon, ArrowUpRightIcon, ArrowDownLeftIcon, ArrowDownRightIcon, FacebookIcon, XIcon, InstagramIcon, LinkedinIcon, PinterestIcon, WhatsappIcon, TelegramIcon, MailIcon, LinkIcon, ScanQrcodeIcon, VerticalArrowsIcon, CaretUpdownFilledIcon } from '@designbasekorea/icons';
+import { ChevronDownIcon, StarIcon, TrendingUpIcon, StarFilledIcon, CartIcon, CloseIcon, ArrowRightIcon, InfoFilledIcon, ErrorFilledIcon, WarningFilledIcon, CircleCheckFilledIcon, RefreshIcon, ChevronLeftIcon, PauseIcon, PlayIcon, ChevronRightIcon, RepeatIcon, MuteFilledIcon, VolumeUpIcon, SettingsIcon, UserIcon, HideIcon, ShowIcon, SearchIcon, ChevronUpIcon, GalleryIcon, HeartIcon, BookmarkIcon, ShareAltIcon, DownloadIcon, ArrowLeftIcon, ShrinkIcon, ExpandIcon, DoneIcon as DoneIcon$1, CopyIcon, BulbIcon, CloudCloseIcon, BellActiveIcon, AwardIcon, CalendarIcon, PlusIcon, ErrorIcon, FileBlankIcon, ClockIcon, MinusIcon as MinusIcon$1, VideoIcon, CodeIcon, WriteIcon, UploadIcon, ArrowBarLeftIcon, ArrowBarRightIcon, StarHalfIcon, MoveIcon, MoreVerticalIcon, ArrowDownIcon, ArrowUpLeftIcon, ArrowUpRightIcon, ArrowDownLeftIcon, ArrowDownRightIcon, FacebookIcon, XIcon, InstagramIcon, LinkedinIcon, PinterestIcon, WhatsappIcon, TelegramIcon, MailIcon, LinkIcon, ScanQrcodeIcon, VerticalArrowsIcon, CaretUpdownFilledIcon } from '@designbasekorea/icons';
 import { flushSync, createPortal } from 'react-dom';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -2455,7 +2455,7 @@ const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth
             return (jsxs(Fragment, { children: [jsx(Spinner, { type: "circular", size: size === 'xs' ? 'xs' : size === 's' ? 's' : 'm', color: getIconColor(), speed: 1, showLabel: false }), !iconOnly && jsx("span", { children: "\uB85C\uB529 \uC911..." })] }));
         }
         // iconOnly 버튼일 때는 children을 아이콘으로 처리
-        if (iconOnly && children) {
+        if (iconOnly && children && React.isValidElement(children)) {
             return React.cloneElement(children, {
                 size: iconSize,
                 color: getIconColor(),
@@ -2574,7 +2574,77 @@ const RandomGradient = ({ scheme = 'primary', tone = 'vivid', width = '100%', he
 };
 RandomGradient.displayName = 'RandomGradient';
 
-const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText, onCtaClick, onClose, autoClose = false, closeDelay = 5000, icon, useRandomGradient = false, gradientScheme, gradientTone = 'vivid', gradientAnimated = true, className, }) => {
+const Countdown = ({ endDate, duration, size = 'm', variant = 'default', showDays = true, showHours = true, showMinutes = true, showSeconds = true, showLabels = true, labels = {
+    days: '일',
+    hours: '시간',
+    minutes: '분',
+    seconds: '초',
+}, onComplete, onTick, className, }) => {
+    // 종료 시간 계산
+    const targetTime = useMemo(() => {
+        if (endDate) {
+            return typeof endDate === 'string' ? new Date(endDate).getTime() : endDate.getTime();
+        }
+        if (duration) {
+            return Date.now() + duration * 1000;
+        }
+        return Date.now();
+    }, [endDate, duration]);
+    // 남은 시간 계산 함수
+    const calculateTimeRemaining = () => {
+        const now = Date.now();
+        const total = targetTime - now;
+        if (total <= 0) {
+            return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
+        }
+        const seconds = Math.floor((total / 1000) % 60);
+        const minutes = Math.floor((total / 1000 / 60) % 60);
+        const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
+        const days = Math.floor(total / (1000 * 60 * 60 * 24));
+        return { days, hours, minutes, seconds, total };
+    };
+    const [timeRemaining, setTimeRemaining] = useState(calculateTimeRemaining());
+    useEffect(() => {
+        const timer = setInterval(() => {
+            const newTimeRemaining = calculateTimeRemaining();
+            setTimeRemaining(newTimeRemaining);
+            onTick?.(newTimeRemaining);
+            if (newTimeRemaining.total <= 0) {
+                clearInterval(timer);
+                onComplete?.();
+            }
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [targetTime, onComplete, onTick]);
+    const classes = clsx('designbase-countdown', `designbase-countdown--${size}`, `designbase-countdown--${variant}`, {
+        'designbase-countdown--with-labels': showLabels,
+        'designbase-countdown--expired': timeRemaining.total <= 0,
+    }, className);
+    // 숫자를 두 자리로 포맷
+    const formatNumber = (num) => {
+        return num.toString().padStart(2, '0');
+    };
+    const renderTimeUnit = (value, label, show) => {
+        if (!show)
+            return null;
+        return (jsxs("div", { className: "designbase-countdown__unit", children: [jsx("div", { className: "designbase-countdown__value", children: formatNumber(value) }), showLabels && (jsx("div", { className: "designbase-countdown__label", children: label }))] }));
+    };
+    const renderSeparator = () => {
+        if (variant === 'minimal')
+            return null;
+        return jsx("div", { className: "designbase-countdown__separator", children: ":" });
+    };
+    const units = [
+        { value: timeRemaining.days, label: labels.days || '일', show: showDays },
+        { value: timeRemaining.hours, label: labels.hours || '시간', show: showHours },
+        { value: timeRemaining.minutes, label: labels.minutes || '분', show: showMinutes },
+        { value: timeRemaining.seconds, label: labels.seconds || '초', show: showSeconds },
+    ].filter(unit => unit.show);
+    return (jsx("div", { className: classes, children: units.map((unit, index) => (jsxs(React.Fragment, { children: [renderTimeUnit(unit.value, unit.label, unit.show), index < units.length - 1 && renderSeparator()] }, unit.label))) }));
+};
+Countdown.displayName = 'Countdown';
+
+const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText, onCtaClick, onClose, autoClose = false, closeDelay = 5000, icon, useRandomGradient = false, gradientScheme, gradientTone = 'vivid', gradientAnimated = true, countdownEndDate, showCountdown = false, className, }) => {
     const [isVisible, setIsVisible] = useState(true);
     const [progress, setProgress] = useState(100);
     useEffect(() => {
@@ -2605,6 +2675,7 @@ const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText
     const classes = clsx('designbase-ad-banner', `designbase-ad-banner--type-${type}`, `designbase-ad-banner--variant-${variant}`, {
         'designbase-ad-banner--auto-close': autoClose,
         'designbase-ad-banner--with-gradient': useRandomGradient,
+        'designbase-ad-banner--gradient-light': useRandomGradient && gradientTone === 'light',
     }, className);
     // 기본 아이콘
     const defaultIcons = {
@@ -2627,12 +2698,13 @@ const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText
             success: 'success',
             warning: 'warning',
             error: 'error',
-            gradient: 'sunset',
         };
         return schemeMap[variant];
     };
     // 배너 컨텐츠
-    const bannerContent = (jsxs("div", { className: "designbase-ad-banner__content", children: [jsx("button", { className: "designbase-ad-banner__close", onClick: handleClose, "aria-label": "\uB2EB\uAE30", children: jsx(CloseIcon, { size: type === 'hero' ? 20 : 18 }) }), type === 'hero' && !useRandomGradient && (jsxs(Fragment, { children: [jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--top" }), jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--bottom" })] })), jsxs("div", { className: "designbase-ad-banner__main", children: [jsxs("div", { className: "designbase-ad-banner__icon", children: [displayIcon, type === 'topbar' && (jsx("span", { className: "designbase-ad-banner__label", children: "\uD2B9\uBCC4 \uC774\uBCA4\uD2B8" })), type === 'floating' && (jsx("span", { className: "designbase-ad-banner__badge", children: "HOT DEAL" }))] }), jsxs("div", { className: "designbase-ad-banner__text", children: [jsx("h2", { className: "designbase-ad-banner__title", children: displayTitle }), jsx("p", { className: "designbase-ad-banner__subtitle", children: displaySubtitle })] }), jsx("div", { className: "designbase-ad-banner__actions", children: jsxs(Button, { variant: "primary", size: type === 'hero' ? 'l' : type === 'card' ? 's' : 'm', onPress: handleCtaClick, className: "designbase-ad-banner__cta", fullWidth: type === 'floating', children: [displayCtaText, jsx(ArrowRightIcon, { size: type === 'hero' ? 20 : 16 })] }) })] }), autoClose && (jsx("div", { className: "designbase-ad-banner__progress", children: jsx("div", { className: "designbase-ad-banner__progress-bar", style: { width: `${progress}%` } }) }))] }));
+    const bannerContent = (jsxs("div", { className: "designbase-ad-banner__content", children: [jsx("button", { className: "designbase-ad-banner__close", onClick: handleClose, "aria-label": "\uB2EB\uAE30", children: jsx(CloseIcon, { size: 20 }) }), jsxs("div", { className: "designbase-ad-banner__main", children: [jsxs("div", { className: "designbase-ad-banner__icon", children: [displayIcon, type === 'topbar' && (jsx("span", { className: "designbase-ad-banner__label", children: "\uD2B9\uBCC4 \uC774\uBCA4\uD2B8" })), type === 'floating' && (jsx("span", { className: "designbase-ad-banner__badge", children: "HOT DEAL" }))] }), jsxs("div", { className: "designbase-ad-banner__text", children: [jsx("h2", { className: "designbase-ad-banner__title", children: displayTitle }), jsx("p", { className: "designbase-ad-banner__subtitle", children: displaySubtitle }), showCountdown && countdownEndDate && (jsx("div", { className: "designbase-ad-banner__countdown", children: jsx(Countdown, { endDate: countdownEndDate, size: "s", variant: "compact", showLabels: false, onComplete: () => {
+                                        console.log('카운트다운 완료!');
+                                    } }) }))] }), jsx("div", { className: "designbase-ad-banner__actions", children: jsxs(Button, { variant: "primary", size: type === 'hero' ? 'l' : type === 'card' ? 's' : 'm', onPress: handleCtaClick, className: "designbase-ad-banner__cta", fullWidth: type === 'floating', children: [displayCtaText, jsx(ArrowRightIcon, { size: type === 'hero' ? 20 : 16 })] }) })] }), autoClose && (jsx("div", { className: "designbase-ad-banner__progress", children: jsx("div", { className: "designbase-ad-banner__progress-bar", style: { width: `${progress}%` } }) }))] }));
     return (jsx("div", { className: classes, children: useRandomGradient ? (jsx(RandomGradient, { scheme: getGradientScheme(), tone: gradientTone, animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-ad-banner__gradient-bg", children: bannerContent })) : (bannerContent) }));
 };
 // 기본 텍스트 헬퍼
@@ -4772,6 +4844,58 @@ const Card = forwardRef(function Card({ title, subtitle, description, children,
 });
 Card.displayName = 'Card';
 
+const Indicator = ({ current, total, type = 'dots', direction = 'horizontal', size = 'm', clickable = false, onStepClick, timer = false, timerDuration = 3000, onTimerComplete, className, ...props }) => {
+    const [progress, setProgress] = useState(0);
+    const timerRef = useRef(null);
+    const startRef = useRef(0);
+    useEffect(() => {
+        if (!timer)
+            return;
+        setProgress(0);
+        startRef.current = Date.now();
+        const animate = () => {
+            const elapsed = Date.now() - startRef.current;
+            const ratio = Math.min(elapsed / timerDuration, 1);
+            setProgress(ratio);
+            if (ratio < 1) {
+                timerRef.current = requestAnimationFrame(animate);
+            }
+            else {
+                onTimerComplete?.();
+            }
+        };
+        timerRef.current = requestAnimationFrame(animate);
+        return () => {
+            if (timerRef.current)
+                cancelAnimationFrame(timerRef.current);
+        };
+    }, [current, timer, timerDuration, onTimerComplete]);
+    const handleStepClick = (i) => {
+        if (clickable && onStepClick)
+            onStepClick(i);
+    };
+    const classes = clsx('designbase-indicator', `designbase-indicator--${type}`, `designbase-indicator--${direction}`, `designbase-indicator--${size}`, { 'designbase-indicator--clickable': clickable }, className);
+    // 숫자 타입
+    if (type === 'numbers') {
+        return (jsxs("div", { className: classes, role: "progressbar", "aria-valuenow": current + 1, "aria-valuemin": 1, "aria-valuemax": total, children: [jsx("span", { className: "designbase-indicator__current", children: current + 1 }), jsx("span", { className: "designbase-indicator__separator", children: "/" }), jsx("span", { className: "designbase-indicator__total", children: total })] }));
+    }
+    // 라인 타입 (가로 progress bar)
+    if (type === 'line') {
+        return (jsx("div", { className: classes, role: "progressbar", "aria-valuenow": current + 1, "aria-valuemin": 1, "aria-valuemax": total, children: Array.from({ length: total }, (_, i) => (jsx("div", { className: clsx('designbase-indicator__line-segment', {
+                    'designbase-indicator__line-segment--active': i < current,
+                    'designbase-indicator__line-segment--current': i === current
+                }), children: timer && i === current && (jsx("div", { className: "designbase-indicator__line-fill", style: { transform: `scaleX(${progress})` } })) }, i))) }));
+    }
+    // 점(dot) 타입 + 원형 애니메이션
+    return (jsx("div", { className: classes, role: "progressbar", "aria-valuenow": current + 1, "aria-valuemin": 1, "aria-valuemax": total, children: Array.from({ length: total }, (_, i) => {
+            const active = i === current;
+            const circumference = 2 * Math.PI * 15.9155;
+            const offset = circumference * (1 - progress);
+            return (jsx("button", { className: clsx('designbase-indicator__dot', { 'designbase-indicator__dot--active': active }), onClick: () => handleStepClick(i), disabled: !clickable, children: timer && active && (jsxs("svg", { className: "designbase-indicator__circle", viewBox: "0 0 36 36", children: [jsx("circle", { className: "designbase-indicator__circle-bg", cx: "18", cy: "18", r: "15.9155", fill: "none", stroke: "var(--db-border-base)", strokeWidth: "2" }), jsx("circle", { className: "designbase-indicator__circle-progress", cx: "18", cy: "18", r: "15.9155", fill: "none", stroke: "var(--db-brand-primary)", strokeWidth: "2", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round" })] })) }, i));
+        }) }));
+};
+Indicator.displayName = 'Indicator';
+
 const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', transition = 'slide', autoPlay = false, autoPlayInterval = 5000, infinite = true, itemsPerView = 1, gap = 16, showNavigation = true, showIndicators = true, indicatorStyle = 'dots', showAutoPlayControl = true, showTitle = true, showDescription = true, enableTouch = true, enableKeyboard = true, enableWheel = false, enableFullscreen = false, enableDownload = false, enableShare = false, enableLike = false, enableBookmark = false, readonly = false, disabled = false, enablePaging = false, swipeSensitivity = 50, transitionDuration = 300, onItemClick, onSlideChange, onLike, onBookmark, onShare, onDownload, onFullscreenChange, className, }) => {
     // 아이콘 크기 계산 (m이 기본값)
     const iconSize = size === 's' ? 16 : size === 'l' ? 24 : size === 'xl' ? 28 : 20;
@@ -5040,10 +5164,6 @@ const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', tra
             willChange: isDragging ? 'transform' : 'auto',
         };
     };
-    // 인디케이터 활성 상태 확인
-    const isIndicatorActive = (index) => {
-        return index === currentIndex;
-    };
     // 네비게이션 버튼 비활성화 상태
     const isPrevDisabled = !infinite && currentIndex === 0;
     const isNextDisabled = !infinite && currentIndex === items.length - 1;
@@ -5082,9 +5202,7 @@ const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', tra
                                             }, title: "\uACF5\uC720", children: jsx(ShareAltIcon, { size: iconSize, color: "currentColor" }) })), enableDownload && item.image && (jsx("button", { className: "designbase-carousel__action-button designbase-carousel__action-button--download", onClick: (e) => {
                                                 e.stopPropagation();
                                                 handleDownload(item, index);
-                                            }, title: "\uB2E4\uC6B4\uB85C\uB4DC", children: jsx(DownloadIcon, { size: iconSize, color: "currentColor" }) }))] })] }, item.id))) }), showNavigation && items.length > 1 && (jsxs(Fragment, { children: [jsx("button", { className: clsx('designbase-carousel__nav-button', 'designbase-carousel__nav-button--prev'), onClick: goToPrevious, disabled: disabled || readonly || isPrevDisabled, title: "\uC774\uC804 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsx(ChevronLeftIcon, { size: iconSize, color: "currentColor" }) }), jsx("button", { className: clsx('designbase-carousel__nav-button', 'designbase-carousel__nav-button--next'), onClick: goToNext, disabled: disabled || readonly || isNextDisabled, title: "\uB2E4\uC74C \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsx(ChevronRightIcon, { size: iconSize, color: "currentColor" }) })] })), enablePaging && items.length > 1 && (jsxs(Fragment, { children: [jsx("button", { className: "designbase-carousel__quick-nav-button designbase-carousel__quick-nav-button--first", onClick: goToFirst, disabled: disabled || readonly || currentIndex === 0, title: "\uCCAB \uBC88\uC9F8 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsx(ArrowLeftIcon, { size: iconSize, color: "currentColor" }) }), jsx("button", { className: "designbase-carousel__quick-nav-button designbase-carousel__quick-nav-button--last", onClick: goToLast, disabled: disabled || readonly || currentIndex === items.length - 1, title: "\uB9C8\uC9C0\uB9C9 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsx(ArrowRightIcon, { size: iconSize, color: "currentColor" }) })] })), enableFullscreen && (jsx("button", { className: "designbase-carousel__fullscreen-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsx(ShrinkIcon, { size: iconSize, color: "currentColor" }) : jsx(ExpandIcon, { size: iconSize, color: "currentColor" }) }))] }), jsxs("div", { className: "designbase-carousel__controls", children: [showIndicators && items.length > 1 && (jsx("div", { className: "designbase-carousel__indicators", children: items.map((item, index) => (jsx("button", { className: clsx('designbase-carousel__indicator', {
-                                'designbase-carousel__indicator--active': isIndicatorActive(index),
-                            }), onClick: () => goToSlide(index), disabled: disabled || readonly, title: `슬라이드 ${index + 1}로 이동`, type: "button", children: indicatorStyle === 'thumbnails' && item.thumbnail ? (jsx("img", { src: item.thumbnail, alt: item.title || `썸네일 ${index + 1}`, className: "designbase-carousel__indicator-thumbnail" })) : indicatorStyle === 'numbers' ? (jsx("span", { className: "designbase-carousel__indicator-number", children: index + 1 })) : indicatorStyle === 'lines' ? (jsx("span", { className: "designbase-carousel__indicator-line" })) : (jsx("span", { className: "designbase-carousel__indicator-dot" })) }, index))) })), showAutoPlayControl && items.length > 1 && (jsx("button", { className: "designbase-carousel__autoplay-button", onClick: handleAutoPlayToggle, disabled: disabled || readonly, title: isAutoPlaying ? "자동 재생 정지" : "자동 재생 시작", type: "button", children: isAutoPlaying ? jsx(PauseIcon, { size: iconSize, color: "currentColor" }) : jsx(PlayIcon, { size: iconSize, color: "currentColor" }) }))] })] }));
+                                            }, title: "\uB2E4\uC6B4\uB85C\uB4DC", children: jsx(DownloadIcon, { size: iconSize, color: "currentColor" }) }))] })] }, item.id))) }), showNavigation && items.length > 1 && (jsxs(Fragment, { children: [jsx("button", { className: clsx('designbase-carousel__nav-button', 'designbase-carousel__nav-button--prev'), onClick: goToPrevious, disabled: disabled || readonly || isPrevDisabled, title: "\uC774\uC804 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsx(ChevronLeftIcon, { size: iconSize, color: "currentColor" }) }), jsx("button", { className: clsx('designbase-carousel__nav-button', 'designbase-carousel__nav-button--next'), onClick: goToNext, disabled: disabled || readonly || isNextDisabled, title: "\uB2E4\uC74C \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsx(ChevronRightIcon, { size: iconSize, color: "currentColor" }) })] })), enablePaging && items.length > 1 && (jsxs(Fragment, { children: [jsx("button", { className: "designbase-carousel__quick-nav-button designbase-carousel__quick-nav-button--first", onClick: goToFirst, disabled: disabled || readonly || currentIndex === 0, title: "\uCCAB \uBC88\uC9F8 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsx(ArrowLeftIcon, { size: iconSize, color: "currentColor" }) }), jsx("button", { className: "designbase-carousel__quick-nav-button designbase-carousel__quick-nav-button--last", onClick: goToLast, disabled: disabled || readonly || currentIndex === items.length - 1, title: "\uB9C8\uC9C0\uB9C9 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsx(ArrowRightIcon, { size: iconSize, color: "currentColor" }) })] })), enableFullscreen && (jsx("button", { className: "designbase-carousel__fullscreen-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsx(ShrinkIcon, { size: iconSize, color: "currentColor" }) : jsx(ExpandIcon, { size: iconSize, color: "currentColor" }) }))] }), jsxs("div", { className: "designbase-carousel__controls", children: [showIndicators && items.length > 1 && (jsx("div", { className: "designbase-carousel__indicators", children: jsx(Indicator, { current: currentIndex, total: items.length, type: indicatorStyle === 'lines' ? 'line' : indicatorStyle === 'numbers' ? 'numbers' : 'dots', size: "s", clickable: true, onStepClick: goToSlide }) })), showAutoPlayControl && items.length > 1 && (jsx("button", { className: "designbase-carousel__autoplay-button", onClick: handleAutoPlayToggle, disabled: disabled || readonly, title: isAutoPlaying ? "자동 재생 정지" : "자동 재생 시작", type: "button", children: isAutoPlaying ? jsx(PauseIcon, { size: iconSize, color: "currentColor" }) : jsx(PlayIcon, { size: iconSize, color: "currentColor" }) }))] })] }));
 };
 
 const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', deletable = false, onDelete, onClick, startIcon, endIcon, disabled = false, selected = false, fullWidth = false, className, ...props }) => {
@@ -5502,76 +5620,6 @@ const Confirm = ({ open, title, children, confirmText = '확인', cancelText = '
 };
 Confirm.displayName = 'Confirm';
 
-const Countdown = ({ endDate, duration, size = 'm', variant = 'default', showDays = true, showHours = true, showMinutes = true, showSeconds = true, showLabels = true, labels = {
-    days: '일',
-    hours: '시간',
-    minutes: '분',
-    seconds: '초',
-}, onComplete, onTick, className, }) => {
-    // 종료 시간 계산
-    const targetTime = useMemo(() => {
-        if (endDate) {
-            return typeof endDate === 'string' ? new Date(endDate).getTime() : endDate.getTime();
-        }
-        if (duration) {
-            return Date.now() + duration * 1000;
-        }
-        return Date.now();
-    }, [endDate, duration]);
-    // 남은 시간 계산 함수
-    const calculateTimeRemaining = () => {
-        const now = Date.now();
-        const total = targetTime - now;
-        if (total <= 0) {
-            return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
-        }
-        const seconds = Math.floor((total / 1000) % 60);
-        const minutes = Math.floor((total / 1000 / 60) % 60);
-        const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
-        const days = Math.floor(total / (1000 * 60 * 60 * 24));
-        return { days, hours, minutes, seconds, total };
-    };
-    const [timeRemaining, setTimeRemaining] = useState(calculateTimeRemaining());
-    useEffect(() => {
-        const timer = setInterval(() => {
-            const newTimeRemaining = calculateTimeRemaining();
-            setTimeRemaining(newTimeRemaining);
-            onTick?.(newTimeRemaining);
-            if (newTimeRemaining.total <= 0) {
-                clearInterval(timer);
-                onComplete?.();
-            }
-        }, 1000);
-        return () => clearInterval(timer);
-    }, [targetTime, onComplete, onTick]);
-    const classes = clsx('designbase-countdown', `designbase-countdown--${size}`, `designbase-countdown--${variant}`, {
-        'designbase-countdown--with-labels': showLabels,
-        'designbase-countdown--expired': timeRemaining.total <= 0,
-    }, className);
-    // 숫자를 두 자리로 포맷
-    const formatNumber = (num) => {
-        return num.toString().padStart(2, '0');
-    };
-    const renderTimeUnit = (value, label, show) => {
-        if (!show)
-            return null;
-        return (jsxs("div", { className: "designbase-countdown__unit", children: [jsx("div", { className: "designbase-countdown__value", children: formatNumber(value) }), showLabels && (jsx("div", { className: "designbase-countdown__label", children: label }))] }));
-    };
-    const renderSeparator = () => {
-        if (variant === 'minimal')
-            return null;
-        return jsx("div", { className: "designbase-countdown__separator", children: ":" });
-    };
-    const units = [
-        { value: timeRemaining.days, label: labels.days || '일', show: showDays },
-        { value: timeRemaining.hours, label: labels.hours || '시간', show: showHours },
-        { value: timeRemaining.minutes, label: labels.minutes || '분', show: showMinutes },
-        { value: timeRemaining.seconds, label: labels.seconds || '초', show: showSeconds },
-    ].filter(unit => unit.show);
-    return (jsx("div", { className: classes, children: units.map((unit, index) => (jsxs(React.Fragment, { children: [renderTimeUnit(unit.value, unit.label, unit.show), index < units.length - 1 && renderSeparator()] }, unit.label))) }));
-};
-Countdown.displayName = 'Countdown';
-
 const Container = ({ size = 'l', maxWidth, variant = 'plain', padding = 'm', margin = 'none', backgroundColor, border = false, rounded = false, shadow = false, className, children, }) => {
     // 크기별 최대 폭 설정 (토큰 기반)
     const getMaxWidth = () => {
@@ -6590,67 +6638,70 @@ Progressbar.displayName = 'Progressbar';
 const FileUploader = ({ size = 'm', variant = 'default', accept, maxSize, multiple = false, showFileList = true, showProgress = true, disabled = false, readonly = false, onUpload, onRemove, onRetry, className, }) => {
     const [uploadedFiles, setUploadedFiles] = useState([]);
     const [isUploading, setIsUploading] = useState(false);
-    // 파일 선택 처리
-    const handleFileSelect = useCallback((files) => {
-        if (disabled || readonly)
-            return;
-        const newUploadFiles = files.map(file => ({
-            file,
-            id: `${Date.now()}-${Math.random()}`,
-            status: 'pending',
-            progress: 0,
-        }));
-        if (multiple) {
-            setUploadedFiles(prev => [...prev, ...newUploadFiles]);
-        }
-        else {
-            setUploadedFiles(newUploadFiles);
-        }
-        // 시뮬레이션된 업로드 진행
-        simulateUpload(newUploadFiles);
-    }, [disabled, readonly, multiple]);
-    // 업로드 시뮬레이션
+    // ────────────────────────────────────────────────
+    // 업로드 시뮬레이션 (먼저 정의해야 함!)
+    // ────────────────────────────────────────────────
     const simulateUpload = useCallback((files) => {
         setIsUploading(true);
         files.forEach((uploadFile, index) => {
             // 업로드 시작
-            setUploadedFiles(prev => prev.map(f => f.id === uploadFile.id
-                ? { ...f, status: 'uploading' }
-                : f));
-            // 진행률 시뮬레이션
+            setUploadedFiles(prev => prev.map(f => f.id === uploadFile.id ? { ...f, status: 'uploading' } : f));
             let progress = 0;
             const interval = setInterval(() => {
                 progress += Math.random() * 20;
                 if (progress >= 100) {
                     progress = 100;
                     clearInterval(interval);
-                    // 업로드 완료
+                    // 완료 처리
                     setTimeout(() => {
                         setUploadedFiles(prev => prev.map(f => f.id === uploadFile.id
                             ? {
                                 ...f,
                                 status: 'success',
                                 progress: 100,
-                                uploadedAt: new Date()
+                                uploadedAt: new Date(),
                             }
                             : f));
-                        // 모든 파일 업로드 완료 확인
+                        // 모든 업로드 완료 확인
                         setTimeout(() => {
-                            const allCompleted = uploadedFiles.every(f => f.status === 'success');
-                            if (allCompleted) {
-                                setIsUploading(false);
-                            }
-                        }, 500);
+                            setUploadedFiles(prev => {
+                                const allDone = prev.every(f => f.status === 'success');
+                                if (allDone)
+                                    setIsUploading(false);
+                                return prev;
+                            });
+                        }, 300);
                     }, 200);
                 }
                 else {
-                    setUploadedFiles(prev => prev.map(f => f.id === uploadFile.id
-                        ? { ...f, progress }
-                        : f));
+                    setUploadedFiles(prev => prev.map(f => f.id === uploadFile.id ? { ...f, progress } : f));
                 }
-            }, 100 + index * 50); // 각 파일마다 약간의 지연
+            }, 100 + index * 50);
         });
-    }, [uploadedFiles]);
+    }, []);
+    // ────────────────────────────────────────────────
+    // 파일 선택 시 처리
+    // ────────────────────────────────────────────────
+    const handleFileSelect = useCallback((files) => {
+        if (disabled || readonly)
+            return;
+        const newUploadFiles = files.map(file => ({
+            file,
+            id: `${Date.now()}-${Math.random()}`,
+            status: 'pending',
+            progress: 0,
+        }));
+        if (multiple) {
+            setUploadedFiles(prev => [...prev, ...newUploadFiles]);
+        }
+        else {
+            setUploadedFiles(newUploadFiles);
+        }
+        // ✅ 부모 콜백 즉시 실행 (파일 업로드 감지용)
+        onUpload?.(newUploadFiles);
+        // 진행률 애니메이션
+        simulateUpload(newUploadFiles);
+    }, [disabled, readonly, multiple, onUpload, simulateUpload]);
     // 파일 제거
     const handleRemove = useCallback((fileId) => {
         if (disabled || readonly)
@@ -6658,17 +6709,16 @@ const FileUploader = ({ size = 'm', variant = 'default', accept, maxSize, multip
         setUploadedFiles(prev => prev.filter(f => f.id !== fileId));
         onRemove?.(fileId);
     }, [disabled, readonly, onRemove]);
-    // 파일 재시도
+    // 재시도
     const handleRetry = useCallback((fileId) => {
         if (disabled || readonly)
             return;
         const file = uploadedFiles.find(f => f.id === fileId);
-        if (file) {
+        if (file)
             simulateUpload([file]);
-        }
         onRetry?.(fileId);
     }, [disabled, readonly, uploadedFiles, simulateUpload, onRetry]);
-    // 파일 크기 포맷팅
+    // 파일 크기 표시
     const formatFileSize = useCallback((bytes) => {
         if (bytes === 0)
             return '0 Bytes';
@@ -6681,7 +6731,7 @@ const FileUploader = ({ size = 'm', variant = 'default', accept, maxSize, multip
     const getStatusIcon = useCallback((status) => {
         switch (status) {
             case 'pending':
-                return jsx(ClockIcon, { size: 20 });
+                return jsx(FileBlankIcon, { size: 20 });
             case 'uploading':
                 return jsx(Spinner, { type: "circular", size: "s" });
             case 'success':
@@ -6692,10 +6742,13 @@ const FileUploader = ({ size = 'm', variant = 'default', accept, maxSize, multip
                 return null;
         }
     }, []);
+    // ────────────────────────────────────────────────
+    // 렌더링
+    // ────────────────────────────────────────────────
     return (jsxs("div", { className: clsx('designbase-file-uploader', `designbase-file-uploader--size-${size}`, `designbase-file-uploader--variant-${variant}`, {
             'designbase-file-uploader--disabled': disabled,
             'designbase-file-uploader--readonly': readonly,
-        }, className), children: [jsx(Dropzone, { size: size, variant: variant, accept: accept, maxSize: maxSize, multiple: multiple, disabled: disabled, readonly: readonly, onFileSelect: handleFileSelect }), showFileList && uploadedFiles.length > 0 && (jsxs("div", { className: "designbase-file-uploader__file-list", children: [jsxs("div", { className: "designbase-file-uploader__file-list-title", children: ["\uC5C5\uB85C\uB4DC\uB41C \uD30C\uC77C\uB4E4 (", uploadedFiles.length, "\uAC1C)"] }), jsx("div", { className: "designbase-file-uploader__file-items", children: uploadedFiles.map((uploadFile) => (jsxs("div", { className: clsx('designbase-file-uploader__file-item', `designbase-file-uploader__file-item--${uploadFile.status}`), children: [jsxs("div", { className: "designbase-file-uploader__file-info", children: [jsx("div", { className: "designbase-file-uploader__file-icon", children: getStatusIcon(uploadFile.status) }), jsxs("div", { className: "designbase-file-uploader__file-details", children: [jsx("div", { className: "designbase-file-uploader__file-name", children: uploadFile.file.name }), jsx("div", { className: "designbase-file-uploader__file-size", children: formatFileSize(uploadFile.file.size) }), uploadFile.error && (jsx("div", { className: "designbase-file-uploader__file-error", children: uploadFile.error }))] })] }), showProgress && uploadFile.status === 'uploading' && (jsx("div", { className: "designbase-file-uploader__progress", children: jsx(Progressbar, { value: uploadFile.progress || 0, size: "s", variant: "primary", style: "solid", showLabel: true, labelPosition: "inside", fullWidth: true }) })), jsxs("div", { className: "designbase-file-uploader__file-actions", children: [uploadFile.status === 'error' && (jsx("button", { className: "designbase-file-uploader__retry-button", onClick: () => handleRetry(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC7AC\uC2DC\uB3C4" })), jsx("button", { className: "designbase-file-uploader__remove-button", onClick: () => handleRemove(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC0AD\uC81C" })] })] }, uploadFile.id))) })] }))] }));
+        }, className), children: [jsx(Dropzone, { size: size, variant: variant, accept: accept, maxSize: maxSize, multiple: multiple, disabled: disabled, readonly: readonly, onFileSelect: handleFileSelect }), showFileList && uploadedFiles.length > 0 && (jsxs("div", { className: "designbase-file-uploader__file-list", children: [jsxs("div", { className: "designbase-file-uploader__file-list-title", children: ["\uC5C5\uB85C\uB4DC\uB41C \uD30C\uC77C\uB4E4 (", uploadedFiles.length, "\uAC1C)"] }), jsx("div", { className: "designbase-file-uploader__file-items", children: uploadedFiles.map(uploadFile => (jsxs("div", { className: clsx('designbase-file-uploader__file-item', `designbase-file-uploader__file-item--${uploadFile.status}`), children: [jsxs("div", { className: "designbase-file-uploader__file-info", children: [jsx("div", { className: "designbase-file-uploader__file-icon", children: getStatusIcon(uploadFile.status) }), jsxs("div", { className: "designbase-file-uploader__file-details", children: [jsx("div", { className: "designbase-file-uploader__file-name", children: uploadFile.file.name }), jsx("div", { className: "designbase-file-uploader__file-size", children: formatFileSize(uploadFile.file.size) }), uploadFile.error && (jsx("div", { className: "designbase-file-uploader__file-error", children: uploadFile.error }))] })] }), showProgress && uploadFile.status === 'uploading' && (jsx("div", { className: "designbase-file-uploader__progress", children: jsx(Progressbar, { value: uploadFile.progress || 0, size: "s", variant: "primary", style: "solid", showLabel: true, labelPosition: "inside", fullWidth: true }) })), jsxs("div", { className: "designbase-file-uploader__file-actions", children: [uploadFile.status === 'error' && (jsx("button", { className: "designbase-file-uploader__retry-button", onClick: () => handleRetry(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC7AC\uC2DC\uB3C4" })), jsx("button", { className: "designbase-file-uploader__remove-button", onClick: () => handleRemove(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC0AD\uC81C" })] })] }, uploadFile.id))) })] }))] }));
 };
 
 const FloatingActionButton = forwardRef(({ size = 'm', variant = 'primary', icon, loading = false, disabled = false, onClick, className, style, ...props }, forwardedRef) => {
@@ -8357,6 +8410,229 @@ const Masonry = ({ images, columns = 3, spacing = 'm', ratio = 'auto', fit = 'co
                 })), currentIndex: selectedImageIndex, isOpen: true, onOpenChange: handleLightboxClose, onImageChange: handleLightboxNavigate }))] }));
 };
 
+const OnboardingModal = ({ steps, currentStep = 0, isOpen, onClose, onStepChange, onComplete, showCloseButton = true, showIndicator = true, closeIcon: CloseIconComponent = CloseIcon, prevIcon: PrevIconComponent = ChevronLeftIcon, nextIcon: NextIconComponent = ChevronRightIcon, indicatorType = 'dots', indicatorSize = 'm', className, ...props }) => {
+    const [internalStep, setInternalStep] = useState(currentStep);
+    useEffect(() => {
+        setInternalStep(currentStep);
+    }, [currentStep]);
+    const currentStepData = steps[internalStep];
+    const isFirstStep = internalStep === 0;
+    const isLastStep = internalStep === steps.length - 1;
+    const handlePrev = () => {
+        if (!isFirstStep) {
+            const newStep = internalStep - 1;
+            setInternalStep(newStep);
+            onStepChange?.(newStep);
+        }
+    };
+    const handleNext = () => {
+        if (isLastStep) {
+            onComplete?.();
+        }
+        else {
+            const newStep = internalStep + 1;
+            setInternalStep(newStep);
+            onStepChange?.(newStep);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            onClose();
+        }
+        else if (e.key === 'ArrowLeft' && !isFirstStep) {
+            handlePrev();
+        }
+        else if (e.key === 'ArrowRight' && !isLastStep) {
+            handleNext();
+        }
+    };
+    if (!isOpen || !currentStepData) {
+        return null;
+    }
+    const classes = clsx('designbase-onboarding-modal', className);
+    return (jsxs("div", { className: classes, onKeyDown: handleKeyDown, tabIndex: -1, role: "dialog", "aria-modal": "true", "aria-labelledby": "onboarding-title", "aria-describedby": "onboarding-description", ...props, children: [jsx("div", { className: "designbase-onboarding-modal__overlay", onClick: onClose }), jsxs("div", { className: "designbase-onboarding-modal__content", children: [showCloseButton && (jsx("button", { type: "button", className: "designbase-onboarding-modal__close-button", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: jsx(CloseIconComponent, { size: 20 }) })), jsxs("div", { className: "designbase-onboarding-modal__main", children: [currentStepData.image && (jsx("div", { className: "designbase-onboarding-modal__image", children: typeof currentStepData.image === 'string' ? (jsx("img", { src: currentStepData.image, alt: currentStepData.title || '온보딩 이미지' })) : (currentStepData.image) })), jsxs("div", { className: "designbase-onboarding-modal__text", children: [currentStepData.title && (jsx("h2", { id: "onboarding-title", className: "designbase-onboarding-modal__title", children: currentStepData.title })), currentStepData.description && (jsx("p", { id: "onboarding-description", className: "designbase-onboarding-modal__description", children: currentStepData.description })), currentStepData.content && (jsx("div", { className: "designbase-onboarding-modal__content-area", children: currentStepData.content }))] })] }), jsxs("div", { className: "designbase-onboarding-modal__navigation", children: [jsx(Button, { variant: "secondary", size: "m", startIcon: PrevIconComponent, onClick: handlePrev, disabled: isFirstStep, "aria-label": "\uC774\uC804", children: "\uC774\uC804" }), showIndicator && (jsx(Indicator, { current: internalStep, total: steps.length, type: indicatorType, size: indicatorSize, clickable: true, onStepClick: (step) => {
+                                    setInternalStep(step);
+                                    onStepChange?.(step);
+                                } })), jsx(Button, { variant: "primary", size: "m", endIcon: !isLastStep ? NextIconComponent : undefined, onClick: handleNext, "aria-label": isLastStep ? '완료' : '다음', children: isLastStep ? '완료' : '다음' })] })] })] }));
+};
+OnboardingModal.displayName = 'OnboardingModal';
+
+const Tutorial = ({ steps, currentStep = 0, isActive, onStart, onEnd, onStepChange, onNext, onPrev, indicatorType = 'numbers', indicatorSize = 'm', closeIcon: CloseIconComponent = CloseIcon, prevIcon: PrevIconComponent = ChevronLeftIcon, nextIcon: NextIconComponent = ChevronRightIcon, className, ...props }) => {
+    const [internalStep, setInternalStep] = useState(currentStep);
+    const [targetElement, setTargetElement] = useState(null);
+    const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 });
+    const [popoverPlacement, setPopoverPlacement] = useState('bottom');
+    const overlayRef = useRef(null);
+    const popoverRef = useRef(null);
+    const currentStepData = steps[internalStep];
+    const isFirstStep = internalStep === 0;
+    const isLastStep = internalStep === steps.length - 1;
+    // 타겟 요소 찾기 및 위치 계산
+    const updateTargetElement = useCallback(() => {
+        if (!currentStepData?.target)
+            return;
+        // 이전 타겟 요소의 강조 스타일 제거
+        if (targetElement) {
+            targetElement.classList.remove('designbase-tutorial__target');
+            targetElement.style.position = '';
+            targetElement.style.zIndex = '';
+        }
+        const element = document.querySelector(currentStepData.target);
+        if (!element)
+            return;
+        setTargetElement(element);
+        // 타겟 요소에 강조 스타일 적용
+        element.style.position = 'relative';
+        element.style.zIndex = '1000';
+        element.classList.add('designbase-tutorial__target');
+        // 팝오버 위치 계산
+        const rect = element.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const popoverWidth = 300;
+        const popoverHeight = 200;
+        const margin = 16;
+        let placement = 'bottom';
+        let top = rect.bottom + margin;
+        let left = rect.left + (rect.width / 2) - (popoverWidth / 2);
+        // 자동 배치 로직
+        if (currentStepData.placement === 'auto') {
+            // 위쪽 공간 확인
+            if (rect.top - popoverHeight - margin > 0) {
+                placement = 'top';
+                top = rect.top - popoverHeight - margin;
+            }
+            // 아래쪽 공간 확인
+            else if (rect.bottom + popoverHeight + margin < viewportHeight) {
+                placement = 'bottom';
+                top = rect.bottom + margin;
+            }
+            // 왼쪽 공간 확인
+            else if (rect.left - popoverWidth - margin > 0) {
+                placement = 'left';
+                top = rect.top + (rect.height / 2) - (popoverHeight / 2);
+                left = rect.left - popoverWidth - margin;
+            }
+            // 오른쪽 공간 확인
+            else if (rect.right + popoverWidth + margin < viewportWidth) {
+                placement = 'right';
+                top = rect.top + (rect.height / 2) - (popoverHeight / 2);
+                left = rect.right + margin;
+            }
+        }
+        else {
+            placement = currentStepData.placement || 'bottom';
+            switch (placement) {
+                case 'top':
+                    top = rect.top - popoverHeight - margin;
+                    break;
+                case 'bottom':
+                    top = rect.bottom + margin;
+                    break;
+                case 'left':
+                    top = rect.top + (rect.height / 2) - (popoverHeight / 2);
+                    left = rect.left - popoverWidth - margin;
+                    break;
+                case 'right':
+                    top = rect.top + (rect.height / 2) - (popoverHeight / 2);
+                    left = rect.right + margin;
+                    break;
+            }
+        }
+        // 뷰포트 경계 확인 및 조정
+        left = Math.max(margin, Math.min(left, viewportWidth - popoverWidth - margin));
+        top = Math.max(margin, Math.min(top, viewportHeight - popoverHeight - margin));
+        setPopoverPosition({ top, left });
+        setPopoverPlacement(placement);
+    }, [currentStepData]);
+    // 단계 변경 시 타겟 업데이트
+    useEffect(() => {
+        if (isActive && currentStepData) {
+            updateTargetElement();
+        }
+    }, [internalStep, isActive, updateTargetElement]);
+    // 튜토리얼 비활성화 시 모든 강조 스타일 제거
+    useEffect(() => {
+        if (!isActive && targetElement) {
+            targetElement.classList.remove('designbase-tutorial__target');
+            targetElement.style.position = '';
+            targetElement.style.zIndex = '';
+            setTargetElement(null);
+        }
+    }, [isActive, targetElement]);
+    // 윈도우 리사이즈 시 위치 재계산
+    useEffect(() => {
+        if (!isActive)
+            return;
+        const handleResize = () => {
+            updateTargetElement();
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [isActive, updateTargetElement]);
+    const handleNext = () => {
+        if (isLastStep) {
+            handleEnd();
+        }
+        else {
+            // 이전 타겟 요소의 강조 스타일 제거
+            if (targetElement) {
+                targetElement.classList.remove('designbase-tutorial__target');
+                targetElement.style.position = '';
+                targetElement.style.zIndex = '';
+            }
+            const newStep = internalStep + 1;
+            setInternalStep(newStep);
+            onStepChange?.(newStep);
+            onNext?.();
+        }
+    };
+    const handlePrev = () => {
+        if (!isFirstStep) {
+            // 이전 타겟 요소의 강조 스타일 제거
+            if (targetElement) {
+                targetElement.classList.remove('designbase-tutorial__target');
+                targetElement.style.position = '';
+                targetElement.style.zIndex = '';
+            }
+            const newStep = internalStep - 1;
+            setInternalStep(newStep);
+            onStepChange?.(newStep);
+            onPrev?.();
+        }
+    };
+    const handleEnd = () => {
+        // 타겟 요소에서 강조 스타일 제거
+        if (targetElement) {
+            targetElement.classList.remove('designbase-tutorial__target');
+            targetElement.style.position = '';
+            targetElement.style.zIndex = '';
+        }
+        setTargetElement(null);
+        onEnd?.();
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            handleEnd();
+        }
+        else if (e.key === 'ArrowLeft' && !isFirstStep) {
+            handlePrev();
+        }
+        else if (e.key === 'ArrowRight' && !isLastStep) {
+            handleNext();
+        }
+    };
+    if (!isActive || !currentStepData) {
+        return null;
+    }
+    const classes = clsx('designbase-tutorial', className);
+    return (jsxs("div", { className: classes, onKeyDown: handleKeyDown, tabIndex: -1, role: "dialog", "aria-modal": "true", "aria-labelledby": "tutorial-title", "aria-describedby": "tutorial-content", ...props, children: [jsx("div", { ref: overlayRef, className: "designbase-tutorial__overlay", onClick: handleEnd }), jsxs("div", { ref: popoverRef, className: clsx('designbase-tutorial__popover', `designbase-tutorial__popover--${popoverPlacement}`), style: {
+                    top: popoverPosition.top,
+                    left: popoverPosition.left
+                }, children: [jsx("button", { type: "button", className: "designbase-tutorial__close-button", onClick: handleEnd, "aria-label": "\uD29C\uD1A0\uB9AC\uC5BC \uC885\uB8CC", children: jsx(CloseIconComponent, { size: 16 }) }), jsxs("div", { className: "designbase-tutorial__content", children: [(currentStepData.title || currentStepData.content || currentStepData.children) && (jsxs("div", { className: "designbase-tutorial__text", children: [currentStepData.title && (jsx("h3", { id: "tutorial-title", className: "designbase-tutorial__title", children: currentStepData.title })), currentStepData.content && (jsx("p", { id: "tutorial-content", className: "designbase-tutorial__description", children: currentStepData.content })), currentStepData.children && (jsx("div", { className: "designbase-tutorial__children", children: currentStepData.children }))] })), jsxs("div", { className: "designbase-tutorial__navigation", children: [!isFirstStep && (jsx(Button, { variant: "secondary", size: "s", startIcon: jsx(PrevIconComponent, { size: 16 }), onPress: handlePrev, "aria-label": "\uC774\uC804 \uB2E8\uACC4", children: "\uC774\uC804" })), jsx(Indicator, { current: internalStep, total: steps.length, type: indicatorType, size: indicatorSize }), jsx(Button, { variant: "primary", size: "s", endIcon: !isLastStep ? jsx(NextIconComponent, { size: 16 }) : undefined, onPress: handleNext, "aria-label": isLastStep ? '완료' : '다음 단계', children: isLastStep ? '완료' : '다음' })] })] })] })] }));
+};
+Tutorial.displayName = 'Tutorial';
+
 const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = SearchIcon, clearIcon: ClearIconComponent = CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', suggestedSearches = [], suggestionRollingInterval = 5000, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...props }) => {
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [recentSearches, setRecentSearches] = useState([]);
@@ -8380,9 +8656,9 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
             }
         }
     }, [enableRecentSearches, recentSearchesKey]);
-    // 추천 검색어 롤링 (포커스 없이도 계속)
+    // 추천 검색어 롤링 (value가 없을 때만)
     useEffect(() => {
-        if (suggestedSearches.length > 0 && !currentValue) {
+        if (suggestedSearches.length > 0 && !currentValue && currentValue === '') {
             suggestionIntervalRef.current = setInterval(() => {
                 setCurrentSuggestion(prev => (prev + 1) % suggestedSearches.length);
             }, suggestionRollingInterval);
@@ -8481,6 +8757,11 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
     const handleSuggestionClick = (suggestion) => {
         setInternalValue(suggestion);
         onChange?.(suggestion);
+        // 롤링 중단
+        if (suggestionIntervalRef.current) {
+            clearInterval(suggestionIntervalRef.current);
+            suggestionIntervalRef.current = null;
+        }
         handleSearch(suggestion);
     };
     const classes = clsx('designbase-search-bar', `designbase-search-bar--${size}`, `designbase-search-bar--${variant}`, {
@@ -8493,8 +8774,8 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
         'designbase-search-bar__input--disabled': disabled,
         'designbase-search-bar__input--readonly': readOnly,
     });
-    // 현재 플레이스홀더 (추천 검색어가 있으면 롤링)
-    const currentPlaceholder = suggestedSearches.length > 0 && !currentValue
+    // 현재 플레이스홀더 (value가 없을 때만 추천 검색어 롤링)
+    const currentPlaceholder = suggestedSearches.length > 0 && !currentValue && currentValue === ''
         ? suggestedSearches[currentSuggestion]
         : placeholder;
     return (jsxs("div", { className: classes, role: "search", children: [jsxs("div", { className: "designbase-search-bar__container", children: [jsx("div", { className: "designbase-search-bar__search-icon", children: jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), 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", ...props }), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }), showRecentSearches && recentSearches.length > 0 && (jsxs("div", { className: "designbase-search-bar__recent-searches", children: [jsxs("div", { className: "designbase-search-bar__recent-header", children: [jsx("span", { className: "designbase-search-bar__recent-title", children: "\uCD5C\uADFC \uAC80\uC0C9\uC5B4" }), 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" })] }), jsx("div", { className: "designbase-search-bar__recent-list", children: recentSearches.map((searchTerm, index) => (jsxs("div", { className: "designbase-search-bar__recent-item", children: [jsx("button", { type: "button", className: "designbase-search-bar__recent-search-button", onClick: () => handleRecentSearchClick(searchTerm), children: searchTerm }), jsx("button", { type: "button", className: "designbase-search-bar__recent-remove-button", onClick: () => handleRemoveRecentSearch(searchTerm), "aria-label": `${searchTerm} 삭제`, children: jsx(CloseIcon, { size: 16 }) })] }, index))) })] })), suggestedSearches.length > 0 && isFocused && !currentValue && (jsxs("div", { className: "designbase-search-bar__suggestions", children: [jsx("div", { className: "designbase-search-bar__suggestions-header", children: jsx("span", { className: "designbase-search-bar__suggestions-title", children: "\uCD94\uCC9C \uAC80\uC0C9\uC5B4" }) }), jsx("div", { className: "designbase-search-bar__suggestions-list", children: suggestedSearches.map((suggestion, index) => (jsx("button", { type: "button", className: clsx('designbase-search-bar__suggestion-item', {
@@ -11370,5 +11651,5 @@ const toggleTheme = () => {
     console.log('toggleTheme called');
 };
 
-export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme };
+export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, Tutorial, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme };
 //# sourceMappingURL=index.esm.js.map