@designbasekorea/ui 0.1.46 → 0.1.47

package/dist/index.umd.js

@@ -2456,7 +2456,7 @@
                 return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { type: "circular", size: size === 'xs' ? 'xs' : size === 's' ? 's' : 'm', color: getIconColor(), speed: 1, showLabel: false }), !iconOnly && jsxRuntime.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(),
@@ -2575,7 +2575,77 @@
     };
     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 = React.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] = React.useState(calculateTimeRemaining());
+        React.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 (jsxRuntime.jsxs("div", { className: "designbase-countdown__unit", children: [jsxRuntime.jsx("div", { className: "designbase-countdown__value", children: formatNumber(value) }), showLabels && (jsxRuntime.jsx("div", { className: "designbase-countdown__label", children: label }))] }));
+        };
+        const renderSeparator = () => {
+            if (variant === 'minimal')
+                return null;
+            return jsxRuntime.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 (jsxRuntime.jsx("div", { className: classes, children: units.map((unit, index) => (jsxRuntime.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] = React.useState(true);
         const [progress, setProgress] = React.useState(100);
         React.useEffect(() => {
@@ -2606,6 +2676,7 @@
         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 = {
@@ -2628,12 +2699,13 @@
                 success: 'success',
                 warning: 'warning',
                 error: 'error',
-                gradient: 'sunset',
             };
             return schemeMap[variant];
         };
         // 배너 컨텐츠
-        const bannerContent = (jsxRuntime.jsxs("div", { className: "designbase-ad-banner__content", children: [jsxRuntime.jsx("button", { className: "designbase-ad-banner__close", onClick: handleClose, "aria-label": "\uB2EB\uAE30", children: jsxRuntime.jsx(icons.CloseIcon, { size: type === 'hero' ? 20 : 18 }) }), type === 'hero' && !useRandomGradient && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--top" }), jsxRuntime.jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--bottom" })] })), jsxRuntime.jsxs("div", { className: "designbase-ad-banner__main", children: [jsxRuntime.jsxs("div", { className: "designbase-ad-banner__icon", children: [displayIcon, type === 'topbar' && (jsxRuntime.jsx("span", { className: "designbase-ad-banner__label", children: "\uD2B9\uBCC4 \uC774\uBCA4\uD2B8" })), type === 'floating' && (jsxRuntime.jsx("span", { className: "designbase-ad-banner__badge", children: "HOT DEAL" }))] }), jsxRuntime.jsxs("div", { className: "designbase-ad-banner__text", children: [jsxRuntime.jsx("h2", { className: "designbase-ad-banner__title", children: displayTitle }), jsxRuntime.jsx("p", { className: "designbase-ad-banner__subtitle", children: displaySubtitle })] }), jsxRuntime.jsx("div", { className: "designbase-ad-banner__actions", children: jsxRuntime.jsxs(Button, { variant: "primary", size: type === 'hero' ? 'l' : type === 'card' ? 's' : 'm', onPress: handleCtaClick, className: "designbase-ad-banner__cta", fullWidth: type === 'floating', children: [displayCtaText, jsxRuntime.jsx(icons.ArrowRightIcon, { size: type === 'hero' ? 20 : 16 })] }) })] }), autoClose && (jsxRuntime.jsx("div", { className: "designbase-ad-banner__progress", children: jsxRuntime.jsx("div", { className: "designbase-ad-banner__progress-bar", style: { width: `${progress}%` } }) }))] }));
+        const bannerContent = (jsxRuntime.jsxs("div", { className: "designbase-ad-banner__content", children: [jsxRuntime.jsx("button", { className: "designbase-ad-banner__close", onClick: handleClose, "aria-label": "\uB2EB\uAE30", children: jsxRuntime.jsx(icons.CloseIcon, { size: 20 }) }), jsxRuntime.jsxs("div", { className: "designbase-ad-banner__main", children: [jsxRuntime.jsxs("div", { className: "designbase-ad-banner__icon", children: [displayIcon, type === 'topbar' && (jsxRuntime.jsx("span", { className: "designbase-ad-banner__label", children: "\uD2B9\uBCC4 \uC774\uBCA4\uD2B8" })), type === 'floating' && (jsxRuntime.jsx("span", { className: "designbase-ad-banner__badge", children: "HOT DEAL" }))] }), jsxRuntime.jsxs("div", { className: "designbase-ad-banner__text", children: [jsxRuntime.jsx("h2", { className: "designbase-ad-banner__title", children: displayTitle }), jsxRuntime.jsx("p", { className: "designbase-ad-banner__subtitle", children: displaySubtitle }), showCountdown && countdownEndDate && (jsxRuntime.jsx("div", { className: "designbase-ad-banner__countdown", children: jsxRuntime.jsx(Countdown, { endDate: countdownEndDate, size: "s", variant: "compact", showLabels: false, onComplete: () => {
+                                            console.log('카운트다운 완료!');
+                                        } }) }))] }), jsxRuntime.jsx("div", { className: "designbase-ad-banner__actions", children: jsxRuntime.jsxs(Button, { variant: "primary", size: type === 'hero' ? 'l' : type === 'card' ? 's' : 'm', onPress: handleCtaClick, className: "designbase-ad-banner__cta", fullWidth: type === 'floating', children: [displayCtaText, jsxRuntime.jsx(icons.ArrowRightIcon, { size: type === 'hero' ? 20 : 16 })] }) })] }), autoClose && (jsxRuntime.jsx("div", { className: "designbase-ad-banner__progress", children: jsxRuntime.jsx("div", { className: "designbase-ad-banner__progress-bar", style: { width: `${progress}%` } }) }))] }));
         return (jsxRuntime.jsx("div", { className: classes, children: useRandomGradient ? (jsxRuntime.jsx(RandomGradient, { scheme: getGradientScheme(), tone: gradientTone, animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-ad-banner__gradient-bg", children: bannerContent })) : (bannerContent) }));
     };
     // 기본 텍스트 헬퍼
@@ -4773,6 +4845,58 @@
     });
     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] = React.useState(0);
+        const timerRef = React.useRef(null);
+        const startRef = React.useRef(0);
+        React.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 (jsxRuntime.jsxs("div", { className: classes, role: "progressbar", "aria-valuenow": current + 1, "aria-valuemin": 1, "aria-valuemax": total, children: [jsxRuntime.jsx("span", { className: "designbase-indicator__current", children: current + 1 }), jsxRuntime.jsx("span", { className: "designbase-indicator__separator", children: "/" }), jsxRuntime.jsx("span", { className: "designbase-indicator__total", children: total })] }));
+        }
+        // 라인 타입 (가로 progress bar)
+        if (type === 'line') {
+            return (jsxRuntime.jsx("div", { className: classes, role: "progressbar", "aria-valuenow": current + 1, "aria-valuemin": 1, "aria-valuemax": total, children: Array.from({ length: total }, (_, i) => (jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "designbase-indicator__line-fill", style: { transform: `scaleX(${progress})` } })) }, i))) }));
+        }
+        // 점(dot) 타입 + 원형 애니메이션
+        return (jsxRuntime.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 (jsxRuntime.jsx("button", { className: clsx('designbase-indicator__dot', { 'designbase-indicator__dot--active': active }), onClick: () => handleStepClick(i), disabled: !clickable, children: timer && active && (jsxRuntime.jsxs("svg", { className: "designbase-indicator__circle", viewBox: "0 0 36 36", children: [jsxRuntime.jsx("circle", { className: "designbase-indicator__circle-bg", cx: "18", cy: "18", r: "15.9155", fill: "none", stroke: "var(--db-border-base)", strokeWidth: "2" }), jsxRuntime.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;
@@ -5041,10 +5165,6 @@
                 willChange: isDragging ? 'transform' : 'auto',
             };
         };
-        // 인디케이터 활성 상태 확인
-        const isIndicatorActive = (index) => {
-            return index === currentIndex;
-        };
         // 네비게이션 버튼 비활성화 상태
         const isPrevDisabled = !infinite && currentIndex === 0;
         const isNextDisabled = !infinite && currentIndex === items.length - 1;
@@ -5083,9 +5203,7 @@
                                                 }, title: "\uACF5\uC720", children: jsxRuntime.jsx(icons.ShareAltIcon, { size: iconSize, color: "currentColor" }) })), enableDownload && item.image && (jsxRuntime.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: jsxRuntime.jsx(icons.DownloadIcon, { size: iconSize, color: "currentColor" }) }))] })] }, item.id))) }), showNavigation && items.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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: jsxRuntime.jsx(icons.ChevronLeftIcon, { size: iconSize, color: "currentColor" }) }), jsxRuntime.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: jsxRuntime.jsx(icons.ChevronRightIcon, { size: iconSize, color: "currentColor" }) })] })), enablePaging && items.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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: jsxRuntime.jsx(icons.ArrowLeftIcon, { size: iconSize, color: "currentColor" }) }), jsxRuntime.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: jsxRuntime.jsx(icons.ArrowRightIcon, { size: iconSize, color: "currentColor" }) })] })), enableFullscreen && (jsxRuntime.jsx("button", { className: "designbase-carousel__fullscreen-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsxRuntime.jsx(icons.ShrinkIcon, { size: iconSize, color: "currentColor" }) : jsxRuntime.jsx(icons.ExpandIcon, { size: iconSize, color: "currentColor" }) }))] }), jsxRuntime.jsxs("div", { className: "designbase-carousel__controls", children: [showIndicators && items.length > 1 && (jsxRuntime.jsx("div", { className: "designbase-carousel__indicators", children: items.map((item, index) => (jsxRuntime.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 ? (jsxRuntime.jsx("img", { src: item.thumbnail, alt: item.title || `썸네일 ${index + 1}`, className: "designbase-carousel__indicator-thumbnail" })) : indicatorStyle === 'numbers' ? (jsxRuntime.jsx("span", { className: "designbase-carousel__indicator-number", children: index + 1 })) : indicatorStyle === 'lines' ? (jsxRuntime.jsx("span", { className: "designbase-carousel__indicator-line" })) : (jsxRuntime.jsx("span", { className: "designbase-carousel__indicator-dot" })) }, index))) })), showAutoPlayControl && items.length > 1 && (jsxRuntime.jsx("button", { className: "designbase-carousel__autoplay-button", onClick: handleAutoPlayToggle, disabled: disabled || readonly, title: isAutoPlaying ? "자동 재생 정지" : "자동 재생 시작", type: "button", children: isAutoPlaying ? jsxRuntime.jsx(icons.PauseIcon, { size: iconSize, color: "currentColor" }) : jsxRuntime.jsx(icons.PlayIcon, { size: iconSize, color: "currentColor" }) }))] })] }));
+                                                }, title: "\uB2E4\uC6B4\uB85C\uB4DC", children: jsxRuntime.jsx(icons.DownloadIcon, { size: iconSize, color: "currentColor" }) }))] })] }, item.id))) }), showNavigation && items.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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: jsxRuntime.jsx(icons.ChevronLeftIcon, { size: iconSize, color: "currentColor" }) }), jsxRuntime.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: jsxRuntime.jsx(icons.ChevronRightIcon, { size: iconSize, color: "currentColor" }) })] })), enablePaging && items.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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: jsxRuntime.jsx(icons.ArrowLeftIcon, { size: iconSize, color: "currentColor" }) }), jsxRuntime.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: jsxRuntime.jsx(icons.ArrowRightIcon, { size: iconSize, color: "currentColor" }) })] })), enableFullscreen && (jsxRuntime.jsx("button", { className: "designbase-carousel__fullscreen-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsxRuntime.jsx(icons.ShrinkIcon, { size: iconSize, color: "currentColor" }) : jsxRuntime.jsx(icons.ExpandIcon, { size: iconSize, color: "currentColor" }) }))] }), jsxRuntime.jsxs("div", { className: "designbase-carousel__controls", children: [showIndicators && items.length > 1 && (jsxRuntime.jsx("div", { className: "designbase-carousel__indicators", children: jsxRuntime.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 && (jsxRuntime.jsx("button", { className: "designbase-carousel__autoplay-button", onClick: handleAutoPlayToggle, disabled: disabled || readonly, title: isAutoPlaying ? "자동 재생 정지" : "자동 재생 시작", type: "button", children: isAutoPlaying ? jsxRuntime.jsx(icons.PauseIcon, { size: iconSize, color: "currentColor" }) : jsxRuntime.jsx(icons.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 }) => {
@@ -5503,76 +5621,6 @@
     };
     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 = React.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] = React.useState(calculateTimeRemaining());
-        React.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 (jsxRuntime.jsxs("div", { className: "designbase-countdown__unit", children: [jsxRuntime.jsx("div", { className: "designbase-countdown__value", children: formatNumber(value) }), showLabels && (jsxRuntime.jsx("div", { className: "designbase-countdown__label", children: label }))] }));
-        };
-        const renderSeparator = () => {
-            if (variant === 'minimal')
-                return null;
-            return jsxRuntime.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 (jsxRuntime.jsx("div", { className: classes, children: units.map((unit, index) => (jsxRuntime.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 = () => {
@@ -6591,67 +6639,70 @@
     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] = React.useState([]);
         const [isUploading, setIsUploading] = React.useState(false);
-        // 파일 선택 처리
-        const handleFileSelect = React.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 = React.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 = React.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 = React.useCallback((fileId) => {
             if (disabled || readonly)
@@ -6659,17 +6710,16 @@
             setUploadedFiles(prev => prev.filter(f => f.id !== fileId));
             onRemove?.(fileId);
         }, [disabled, readonly, onRemove]);
-        // 파일 재시도
+        // 재시도
         const handleRetry = React.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 = React.useCallback((bytes) => {
             if (bytes === 0)
                 return '0 Bytes';
@@ -6682,7 +6732,7 @@
         const getStatusIcon = React.useCallback((status) => {
             switch (status) {
                 case 'pending':
-                    return jsxRuntime.jsx(icons.ClockIcon, { size: 20 });
+                    return jsxRuntime.jsx(icons.FileBlankIcon, { size: 20 });
                 case 'uploading':
                     return jsxRuntime.jsx(Spinner, { type: "circular", size: "s" });
                 case 'success':
@@ -6693,10 +6743,13 @@
                     return null;
             }
         }, []);
+        // ────────────────────────────────────────────────
+        // 렌더링
+        // ────────────────────────────────────────────────
         return (jsxRuntime.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: [jsxRuntime.jsx(Dropzone, { size: size, variant: variant, accept: accept, maxSize: maxSize, multiple: multiple, disabled: disabled, readonly: readonly, onFileSelect: handleFileSelect }), showFileList && uploadedFiles.length > 0 && (jsxRuntime.jsxs("div", { className: "designbase-file-uploader__file-list", children: [jsxRuntime.jsxs("div", { className: "designbase-file-uploader__file-list-title", children: ["\uC5C5\uB85C\uB4DC\uB41C \uD30C\uC77C\uB4E4 (", uploadedFiles.length, "\uAC1C)"] }), jsxRuntime.jsx("div", { className: "designbase-file-uploader__file-items", children: uploadedFiles.map((uploadFile) => (jsxRuntime.jsxs("div", { className: clsx('designbase-file-uploader__file-item', `designbase-file-uploader__file-item--${uploadFile.status}`), children: [jsxRuntime.jsxs("div", { className: "designbase-file-uploader__file-info", children: [jsxRuntime.jsx("div", { className: "designbase-file-uploader__file-icon", children: getStatusIcon(uploadFile.status) }), jsxRuntime.jsxs("div", { className: "designbase-file-uploader__file-details", children: [jsxRuntime.jsx("div", { className: "designbase-file-uploader__file-name", children: uploadFile.file.name }), jsxRuntime.jsx("div", { className: "designbase-file-uploader__file-size", children: formatFileSize(uploadFile.file.size) }), uploadFile.error && (jsxRuntime.jsx("div", { className: "designbase-file-uploader__file-error", children: uploadFile.error }))] })] }), showProgress && uploadFile.status === 'uploading' && (jsxRuntime.jsx("div", { className: "designbase-file-uploader__progress", children: jsxRuntime.jsx(Progressbar, { value: uploadFile.progress || 0, size: "s", variant: "primary", style: "solid", showLabel: true, labelPosition: "inside", fullWidth: true }) })), jsxRuntime.jsxs("div", { className: "designbase-file-uploader__file-actions", children: [uploadFile.status === 'error' && (jsxRuntime.jsx("button", { className: "designbase-file-uploader__retry-button", onClick: () => handleRetry(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC7AC\uC2DC\uB3C4" })), jsxRuntime.jsx("button", { className: "designbase-file-uploader__remove-button", onClick: () => handleRemove(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC0AD\uC81C" })] })] }, uploadFile.id))) })] }))] }));
+            }, className), children: [jsxRuntime.jsx(Dropzone, { size: size, variant: variant, accept: accept, maxSize: maxSize, multiple: multiple, disabled: disabled, readonly: readonly, onFileSelect: handleFileSelect }), showFileList && uploadedFiles.length > 0 && (jsxRuntime.jsxs("div", { className: "designbase-file-uploader__file-list", children: [jsxRuntime.jsxs("div", { className: "designbase-file-uploader__file-list-title", children: ["\uC5C5\uB85C\uB4DC\uB41C \uD30C\uC77C\uB4E4 (", uploadedFiles.length, "\uAC1C)"] }), jsxRuntime.jsx("div", { className: "designbase-file-uploader__file-items", children: uploadedFiles.map(uploadFile => (jsxRuntime.jsxs("div", { className: clsx('designbase-file-uploader__file-item', `designbase-file-uploader__file-item--${uploadFile.status}`), children: [jsxRuntime.jsxs("div", { className: "designbase-file-uploader__file-info", children: [jsxRuntime.jsx("div", { className: "designbase-file-uploader__file-icon", children: getStatusIcon(uploadFile.status) }), jsxRuntime.jsxs("div", { className: "designbase-file-uploader__file-details", children: [jsxRuntime.jsx("div", { className: "designbase-file-uploader__file-name", children: uploadFile.file.name }), jsxRuntime.jsx("div", { className: "designbase-file-uploader__file-size", children: formatFileSize(uploadFile.file.size) }), uploadFile.error && (jsxRuntime.jsx("div", { className: "designbase-file-uploader__file-error", children: uploadFile.error }))] })] }), showProgress && uploadFile.status === 'uploading' && (jsxRuntime.jsx("div", { className: "designbase-file-uploader__progress", children: jsxRuntime.jsx(Progressbar, { value: uploadFile.progress || 0, size: "s", variant: "primary", style: "solid", showLabel: true, labelPosition: "inside", fullWidth: true }) })), jsxRuntime.jsxs("div", { className: "designbase-file-uploader__file-actions", children: [uploadFile.status === 'error' && (jsxRuntime.jsx("button", { className: "designbase-file-uploader__retry-button", onClick: () => handleRetry(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC7AC\uC2DC\uB3C4" })), jsxRuntime.jsx("button", { className: "designbase-file-uploader__remove-button", onClick: () => handleRemove(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC0AD\uC81C" })] })] }, uploadFile.id))) })] }))] }));
     };
 
     const FloatingActionButton = React.forwardRef(({ size = 'm', variant = 'primary', icon, loading = false, disabled = false, onClick, className, style, ...props }, forwardedRef) => {
@@ -8358,6 +8411,229 @@
                     })), currentIndex: selectedImageIndex, isOpen: true, onOpenChange: handleLightboxClose, onImageChange: handleLightboxNavigate }))] }));
     };
 
+    const OnboardingModal = ({ steps, currentStep = 0, isOpen, onClose, onStepChange, onComplete, showCloseButton = true, showIndicator = true, closeIcon: CloseIconComponent = icons.CloseIcon, prevIcon: PrevIconComponent = icons.ChevronLeftIcon, nextIcon: NextIconComponent = icons.ChevronRightIcon, indicatorType = 'dots', indicatorSize = 'm', className, ...props }) => {
+        const [internalStep, setInternalStep] = React.useState(currentStep);
+        React.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 (jsxRuntime.jsxs("div", { className: classes, onKeyDown: handleKeyDown, tabIndex: -1, role: "dialog", "aria-modal": "true", "aria-labelledby": "onboarding-title", "aria-describedby": "onboarding-description", ...props, children: [jsxRuntime.jsx("div", { className: "designbase-onboarding-modal__overlay", onClick: onClose }), jsxRuntime.jsxs("div", { className: "designbase-onboarding-modal__content", children: [showCloseButton && (jsxRuntime.jsx("button", { type: "button", className: "designbase-onboarding-modal__close-button", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: jsxRuntime.jsx(CloseIconComponent, { size: 20 }) })), jsxRuntime.jsxs("div", { className: "designbase-onboarding-modal__main", children: [currentStepData.image && (jsxRuntime.jsx("div", { className: "designbase-onboarding-modal__image", children: typeof currentStepData.image === 'string' ? (jsxRuntime.jsx("img", { src: currentStepData.image, alt: currentStepData.title || '온보딩 이미지' })) : (currentStepData.image) })), jsxRuntime.jsxs("div", { className: "designbase-onboarding-modal__text", children: [currentStepData.title && (jsxRuntime.jsx("h2", { id: "onboarding-title", className: "designbase-onboarding-modal__title", children: currentStepData.title })), currentStepData.description && (jsxRuntime.jsx("p", { id: "onboarding-description", className: "designbase-onboarding-modal__description", children: currentStepData.description })), currentStepData.content && (jsxRuntime.jsx("div", { className: "designbase-onboarding-modal__content-area", children: currentStepData.content }))] })] }), jsxRuntime.jsxs("div", { className: "designbase-onboarding-modal__navigation", children: [jsxRuntime.jsx(Button, { variant: "secondary", size: "m", startIcon: PrevIconComponent, onClick: handlePrev, disabled: isFirstStep, "aria-label": "\uC774\uC804", children: "\uC774\uC804" }), showIndicator && (jsxRuntime.jsx(Indicator, { current: internalStep, total: steps.length, type: indicatorType, size: indicatorSize, clickable: true, onStepClick: (step) => {
+                                        setInternalStep(step);
+                                        onStepChange?.(step);
+                                    } })), jsxRuntime.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 = icons.CloseIcon, prevIcon: PrevIconComponent = icons.ChevronLeftIcon, nextIcon: NextIconComponent = icons.ChevronRightIcon, className, ...props }) => {
+        const [internalStep, setInternalStep] = React.useState(currentStep);
+        const [targetElement, setTargetElement] = React.useState(null);
+        const [popoverPosition, setPopoverPosition] = React.useState({ top: 0, left: 0 });
+        const [popoverPlacement, setPopoverPlacement] = React.useState('bottom');
+        const overlayRef = React.useRef(null);
+        const popoverRef = React.useRef(null);
+        const currentStepData = steps[internalStep];
+        const isFirstStep = internalStep === 0;
+        const isLastStep = internalStep === steps.length - 1;
+        // 타겟 요소 찾기 및 위치 계산
+        const updateTargetElement = React.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]);
+        // 단계 변경 시 타겟 업데이트
+        React.useEffect(() => {
+            if (isActive && currentStepData) {
+                updateTargetElement();
+            }
+        }, [internalStep, isActive, updateTargetElement]);
+        // 튜토리얼 비활성화 시 모든 강조 스타일 제거
+        React.useEffect(() => {
+            if (!isActive && targetElement) {
+                targetElement.classList.remove('designbase-tutorial__target');
+                targetElement.style.position = '';
+                targetElement.style.zIndex = '';
+                setTargetElement(null);
+            }
+        }, [isActive, targetElement]);
+        // 윈도우 리사이즈 시 위치 재계산
+        React.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 (jsxRuntime.jsxs("div", { className: classes, onKeyDown: handleKeyDown, tabIndex: -1, role: "dialog", "aria-modal": "true", "aria-labelledby": "tutorial-title", "aria-describedby": "tutorial-content", ...props, children: [jsxRuntime.jsx("div", { ref: overlayRef, className: "designbase-tutorial__overlay", onClick: handleEnd }), jsxRuntime.jsxs("div", { ref: popoverRef, className: clsx('designbase-tutorial__popover', `designbase-tutorial__popover--${popoverPlacement}`), style: {
+                        top: popoverPosition.top,
+                        left: popoverPosition.left
+                    }, children: [jsxRuntime.jsx("button", { type: "button", className: "designbase-tutorial__close-button", onClick: handleEnd, "aria-label": "\uD29C\uD1A0\uB9AC\uC5BC \uC885\uB8CC", children: jsxRuntime.jsx(CloseIconComponent, { size: 16 }) }), jsxRuntime.jsxs("div", { className: "designbase-tutorial__content", children: [(currentStepData.title || currentStepData.content || currentStepData.children) && (jsxRuntime.jsxs("div", { className: "designbase-tutorial__text", children: [currentStepData.title && (jsxRuntime.jsx("h3", { id: "tutorial-title", className: "designbase-tutorial__title", children: currentStepData.title })), currentStepData.content && (jsxRuntime.jsx("p", { id: "tutorial-content", className: "designbase-tutorial__description", children: currentStepData.content })), currentStepData.children && (jsxRuntime.jsx("div", { className: "designbase-tutorial__children", children: currentStepData.children }))] })), jsxRuntime.jsxs("div", { className: "designbase-tutorial__navigation", children: [!isFirstStep && (jsxRuntime.jsx(Button, { variant: "secondary", size: "s", startIcon: jsxRuntime.jsx(PrevIconComponent, { size: 16 }), onPress: handlePrev, "aria-label": "\uC774\uC804 \uB2E8\uACC4", children: "\uC774\uC804" })), jsxRuntime.jsx(Indicator, { current: internalStep, total: steps.length, type: indicatorType, size: indicatorSize }), jsxRuntime.jsx(Button, { variant: "primary", size: "s", endIcon: !isLastStep ? jsxRuntime.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 = icons.SearchIcon, clearIcon: ClearIconComponent = icons.CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', suggestedSearches = [], suggestionRollingInterval = 5000, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...props }) => {
         const [internalValue, setInternalValue] = React.useState(defaultValue);
         const [recentSearches, setRecentSearches] = React.useState([]);
@@ -11413,6 +11689,7 @@
     exports.HeroFeature = HeroFeature;
     exports.Image = Image$1;
     exports.ImageList = ImageList;
+    exports.Indicator = Indicator;
     exports.Input = Input;
     exports.Label = Label;
     exports.Lightbox = Lightbox;
@@ -11426,6 +11703,7 @@
     exports.ModalFooter = ModalFooter;
     exports.ModalHeader = ModalHeader;
     exports.Navbar = Navbar;
+    exports.OnboardingModal = OnboardingModal;
     exports.Pagination = Pagination;
     exports.Popover = Popover;
     exports.Progress = Progress;
@@ -11459,6 +11737,7 @@
     exports.Toggle = Toggle;
     exports.Toolbar = Toolbar;
     exports.Tooltip = Tooltip;
+    exports.Tutorial = Tutorial;
     exports.VideoPlayer = VideoPlayer;
     exports.YouTubePlayer = YouTubePlayer;
     exports.getTheme = getTheme;