@designbasekorea/ui 0.4.0 → 0.5.1

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, createContext } 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, EyedropperIcon, 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, CaretUpdownFilledIcon, DeleteIcon, WarningIcon, InfoIcon } 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, EyedropperIcon, 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, CaretUpdownFilledIcon, WarningIcon, InfoIcon } 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}
@@ -2897,197 +2897,429 @@ var classnames = {exports: {}};
 var classnamesExports = classnames.exports;
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-const AnimationBackground = ({ type = 'gradient', speed = 3000, repeat = 0, delay = 0, direction = 'left', colors = ['#667eea', '#764ba2', '#f093fb', '#f5576c'], width = '100%', height = '200px', borderRadius = 0, opacity = 1, blendMode = 'normal', particleCount = 50, particleSize = 2, starCount = 100, starSize = 2, clickable = false, disabled = false, className, onClick, children, }) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const containerRef = useRef(null);
-    const canvasRef = useRef(null);
-    useEffect(() => {
-        if (delay > 0) {
-            const timer = setTimeout(() => {
-                setIsVisible(true);
-            }, delay);
-            return () => clearTimeout(timer);
-        }
-        else {
-            setIsVisible(true);
+/**
+ * Canvas 렌더러: particles, stars, wave, pulse
+ */
+const hexToRgb$1 = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
         }
-    }, [delay]);
-    // 반복 애니메이션
-    useEffect(() => {
-        if (repeat > 0) {
-            let repeatCount = 0;
-            const repeatAnimation = () => {
-                setIsAnimating(true);
-                setTimeout(() => {
-                    setIsAnimating(false);
-                    repeatCount++;
-                    if (repeatCount < repeat) {
-                        setTimeout(repeatAnimation, speed);
-                    }
-                }, speed);
-            };
-            if (isVisible) {
-                setTimeout(repeatAnimation, speed);
+        : { r: 0, g: 0, b: 0 };
+};
+const drawParticles = (ctx, width, height, particlesRef, options) => {
+    if (particlesRef.current.length !== options.count) {
+        particlesRef.current = Array.from({ length: options.count }).map(() => ({
+            x: Math.random() * width,
+            y: Math.random() * height,
+            vx: (Math.random() - 0.5) * 1.5,
+            vy: (Math.random() - 0.5) * 1.5,
+            size: Math.random() * options.size + 1,
+            color: options.colors[Math.floor(Math.random() * options.colors.length)],
+        }));
+    }
+    const particles = particlesRef.current;
+    const interactionRadius = 150;
+    particles.forEach((p, i) => {
+        p.x += p.vx;
+        p.y += p.vy;
+        if (p.x < 0 || p.x > width)
+            p.vx *= -1;
+        if (p.y < 0 || p.y > height)
+            p.vy *= -1;
+        if (options.clickable) {
+            const dx = options.mouse.x - p.x;
+            const dy = options.mouse.y - p.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance < interactionRadius) {
+                const force = (interactionRadius - distance) / interactionRadius;
+                p.vx += (dx / distance) * force * 0.5;
+                p.vy += (dy / distance) * force * 0.5;
+            }
+            const maxSpeed = 3;
+            const speed = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
+            if (speed > maxSpeed) {
+                p.vx = (p.vx / speed) * maxSpeed;
+                p.vy = (p.vy / speed) * maxSpeed;
+            }
+        }
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+        ctx.fillStyle = p.color;
+        ctx.fill();
+        for (let j = i + 1; j < particles.length; j++) {
+            const p2 = particles[j];
+            const dx = p.x - p2.x;
+            const dy = p.y - p2.y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist < 100) {
+                ctx.beginPath();
+                ctx.strokeStyle = p.color;
+                ctx.globalAlpha = 1 - dist / 100;
+                ctx.lineWidth = 0.5;
+                ctx.moveTo(p.x, p.y);
+                ctx.lineTo(p2.x, p2.y);
+                ctx.stroke();
+                ctx.globalAlpha = 1;
             }
         }
-    }, [repeat, speed, isVisible]);
-    // Canvas 애니메이션 (particles, stars 타입용)
-    useEffect(() => {
-        if ((type === 'particles' || type === 'stars') && canvasRef.current && isVisible) {
-            const canvas = canvasRef.current;
-            const ctx = canvas.getContext('2d');
-            if (!ctx)
-                return;
-            const resizeCanvas = () => {
-                const rect = containerRef.current?.getBoundingClientRect();
-                if (rect) {
-                    canvas.width = rect.width;
-                    canvas.height = rect.height;
-                }
-            };
-            resizeCanvas();
-            window.addEventListener('resize', resizeCanvas);
-            const particles = [];
-            // 파티클 초기화
-            const initParticles = () => {
-                particles.length = 0;
-                const count = type === 'particles' ? particleCount : starCount;
-                const size = type === 'particles' ? particleSize : starSize;
-                for (let i = 0; i < count; i++) {
-                    particles.push({
-                        x: Math.random() * canvas.width,
-                        y: Math.random() * canvas.height,
-                        vx: (Math.random() - 0.5) * 2,
-                        vy: (Math.random() - 0.5) * 2,
-                        size: Math.random() * size + 1,
-                        color: colors[Math.floor(Math.random() * colors.length)],
-                    });
-                }
-            };
-            initParticles();
-            const animate = () => {
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                particles.forEach(particle => {
-                    // 위치 업데이트
-                    particle.x += particle.vx;
-                    particle.y += particle.vy;
-                    // 경계 처리
-                    if (particle.x < 0 || particle.x > canvas.width)
-                        particle.vx *= -1;
-                    if (particle.y < 0 || particle.y > canvas.height)
-                        particle.vy *= -1;
-                    // 그리기
-                    ctx.beginPath();
-                    ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
-                    ctx.fillStyle = particle.color;
-                    ctx.fill();
+    });
+};
+const drawStars = (ctx, width, height, starsRef, options) => {
+    if (starsRef.current.length !== options.count) {
+        starsRef.current = Array.from({ length: options.count }).map(() => ({
+            x: Math.random() * width,
+            y: Math.random() * height,
+            size: Math.random() * options.size,
+            blinkSpeed: Math.random() * 0.05 + 0.01,
+            color: options.colors[Math.floor(Math.random() * options.colors.length)],
+        }));
+    }
+    starsRef.current.forEach(star => {
+        star.y -= 0.05;
+        if (star.y < 0)
+            star.y = height;
+        const opacity = 0.5 + Math.sin(options.time * star.blinkSpeed) * 0.5;
+        ctx.beginPath();
+        ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
+        ctx.fillStyle = star.color;
+        ctx.globalAlpha = opacity;
+        ctx.fill();
+        ctx.globalAlpha = 1;
+    });
+};
+const drawWaves = (ctx, width, height, options) => {
+    const { colors, offset, speedFactor } = options;
+    offset.current += 0.02 * speedFactor;
+    colors.forEach((color, i) => {
+        ctx.beginPath();
+        ctx.moveTo(0, height);
+        const freq = 0.003 + i * 0.001;
+        const amp = 30 + i * 20;
+        const phase = offset.current + i * 2;
+        for (let x = 0; x <= width; x += 10) {
+            const y = height / 2 +
+                Math.sin(x * freq + phase) * amp +
+                Math.sin(x * 0.001 + phase * 0.5) * 50;
+            ctx.lineTo(x, y);
+        }
+        ctx.lineTo(width, height);
+        ctx.lineTo(0, height);
+        ctx.closePath();
+        ctx.fillStyle = color;
+        ctx.fill();
+    });
+};
+const drawPulse = (ctx, width, height, options) => {
+    const { colors, time, intensity } = options;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const maxRadius = Math.max(width, height) * 0.8;
+    const intensityMap = { subtle: 0.5, medium: 1, vivid: 1.5 };
+    const factor = intensityMap[intensity];
+    colors.forEach((color, i) => {
+        const t = time * 0.02 * factor + (i * (Math.PI * 2)) / colors.length;
+        const radius = (Math.sin(t) * 0.2 + 0.5) * maxRadius;
+        const alpha = (Math.sin(t + Math.PI) * 0.2 + 0.3) * factor;
+        const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
+        const rgb = hexToRgb$1(color);
+        gradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
+        gradient.addColorStop(0.5, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha * 0.5})`);
+        gradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, width, height);
+    });
+};
+
+const CanvasLayer = ({ type, colors, speed, particleCount, particleSize, starCount, starSize, intensity, clickable, }) => {
+    const canvasRef = useRef(null);
+    const containerRef = useRef(null);
+    const requestRef = useRef(undefined);
+    const frameCountRef = useRef(0);
+    const mouseRef = useRef({ x: -9999, y: -9999 });
+    const particlesRef = useRef([]);
+    const starsRef = useRef([]);
+    const waveOffsetRef = useRef(0);
+    const handleResize = useCallback(() => {
+        const canvas = canvasRef.current;
+        const container = containerRef.current;
+        if (!canvas || !container)
+            return;
+        const dpr = window.devicePixelRatio || 1;
+        const rect = container.getBoundingClientRect();
+        canvas.width = rect.width * dpr;
+        canvas.height = rect.height * dpr;
+        canvas.style.width = `${rect.width}px`;
+        canvas.style.height = `${rect.height}px`;
+        const ctx = canvas.getContext('2d');
+        if (ctx)
+            ctx.scale(dpr, dpr);
+    }, []);
+    const animate = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const dpr = window.devicePixelRatio || 1;
+        const width = canvas.width / dpr;
+        const height = canvas.height / dpr;
+        ctx.clearRect(0, 0, width, height);
+        const time = frameCountRef.current * (3000 / (speed || 3000));
+        frameCountRef.current += 1;
+        switch (type) {
+            case 'particles':
+                drawParticles(ctx, width, height, particlesRef, {
+                    count: particleCount,
+                    colors,
+                    size: particleSize,
+                    mouse: mouseRef.current,
+                    clickable,
                 });
-                requestAnimationFrame(animate);
-            };
-            animate();
-            return () => {
-                window.removeEventListener('resize', resizeCanvas);
-            };
-        }
-    }, [type, isVisible, colors, particleCount, particleSize, starCount, starSize]);
-    const handleClick = () => {
-        if (clickable && !disabled && onClick) {
-            onClick();
-        }
-    };
-    const getGradientStyle = () => {
-        if (type === 'gradient' || type === 'rainbow') {
-            const gradientColors = type === 'rainbow'
-                ? ['#ff0000', '#ff8000', '#ffff00', '#80ff00', '#00ff00', '#00ff80', '#00ffff', '#0080ff', '#0000ff', '#8000ff', '#ff00ff', '#ff0080']
-                : colors;
-            if (direction === 'radial') {
-                return {
-                    background: `radial-gradient(circle, ${gradientColors.join(', ')})`,
-                    backgroundSize: '400% 400%',
-                };
-            }
-            else {
-                const angle = direction === 'left' ? '90deg' :
-                    direction === 'right' ? '270deg' :
-                        direction === 'up' ? '0deg' :
-                            direction === 'down' ? '180deg' :
-                                direction === 'diagonal' ? '45deg' : '90deg';
-                return {
-                    background: `linear-gradient(${angle}, ${gradientColors.join(', ')})`,
-                    backgroundSize: '400% 400%',
-                };
-            }
-        }
-        return {};
-    };
-    const getWaveStyle = () => {
-        if (type === 'wave') {
-            return {
-                '--wave-colors': colors.join(', '),
-            };
-        }
-        return {};
-    };
-    const getAuroraStyle = () => {
-        if (type === 'aurora') {
-            return {
-                '--aurora-colors': colors.join(', '),
-            };
-        }
-        return {};
-    };
-    const getFireStyle = () => {
-        if (type === 'fire') {
-            return {
-                '--fire-colors': colors.join(', '),
-            };
+                break;
+            case 'stars':
+                drawStars(ctx, width, height, starsRef, {
+                    count: starCount,
+                    colors,
+                    size: starSize,
+                    time,
+                });
+                break;
+            case 'wave':
+                drawWaves(ctx, width, height, {
+                    colors,
+                    offset: waveOffsetRef,
+                    speedFactor: 10000 / (speed || 5000),
+                });
+                break;
+            case 'pulse':
+                drawPulse(ctx, width, height, {
+                    colors,
+                    time,
+                    intensity,
+                });
+                break;
         }
-        return {};
+        requestRef.current = requestAnimationFrame(animate);
+    }, [
+        type,
+        colors,
+        speed,
+        particleCount,
+        particleSize,
+        starCount,
+        starSize,
+        intensity,
+        clickable,
+    ]);
+    useEffect(() => {
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        particlesRef.current = [];
+        starsRef.current = [];
+        waveOffsetRef.current = 0;
+        frameCountRef.current = 0;
+        requestRef.current = requestAnimationFrame(animate);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (requestRef.current)
+                cancelAnimationFrame(requestRef.current);
+        };
+    }, [animate, handleResize]);
+    const handleMouseMove = (e) => {
+        if (!containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        mouseRef.current = {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+        };
     };
-    const getOceanStyle = () => {
-        if (type === 'ocean') {
-            return {
-                '--ocean-colors': colors.join(', '),
-            };
-        }
-        return {};
+    const handleMouseLeave = () => {
+        mouseRef.current = { x: -9999, y: -9999 };
     };
-    const getSunsetStyle = () => {
-        if (type === 'sunset') {
+    return (jsx("div", { ref: containerRef, className: "designbase-animation-background__canvas-layer", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, children: jsx("canvas", { ref: canvasRef, className: "designbase-animation-background__canvas" }) }));
+};
+
+const CSSGradientLayer = ({ type, direction, colors, speed, }) => {
+    const getBackgroundStyle = () => {
+        const safeColors = colors.length > 0 ? colors : ['#ccc'];
+        const gradientStr = safeColors.join(', ');
+        if (type === 'gradient') {
+            let angle = '90deg';
+            switch (direction) {
+                case 'up':
+                    angle = '0deg';
+                    break;
+                case 'down':
+                    angle = '180deg';
+                    break;
+                case 'left':
+                    angle = '270deg';
+                    break;
+                case 'right':
+                    angle = '90deg';
+                    break;
+                case 'diagonal':
+                    angle = '45deg';
+                    break;
+                case 'radial':
+                    return {
+                        backgroundImage: `radial-gradient(circle, ${gradientStr})`,
+                        backgroundSize: '200% 200%',
+                    };
+            }
             return {
-                '--sunset-colors': colors.join(', '),
+                backgroundImage: `linear-gradient(${angle}, ${gradientStr})`,
+                backgroundSize: '200% 200%',
             };
         }
         return {};
     };
-    const classes = classNames('designbase-animation-background', `designbase-animation-background--${type}`, `designbase-animation-background--${direction}`, {
-        'designbase-animation-background--visible': isVisible,
-        'designbase-animation-background--animating': isAnimating,
-        'designbase-animation-background--clickable': clickable,
-        'designbase-animation-background--disabled': disabled,
-    }, className);
+    const duration = `${Math.max(2, speed / 1000)}s`;
+    return (jsx("div", { className: "designbase-animation-background__css-layer", style: {
+            ...getBackgroundStyle(),
+            animation: `designbase-gradient-move ${duration} ease infinite`,
+        }, children: jsx("style", { children: `
+                @keyframes designbase-gradient-move {
+                    0% { background-position: 0% 50%; }
+                    50% { background-position: 100% 50%; }
+                    100% { background-position: 0% 50%; }
+                }
+            ` }) }));
+};
+
+const MeshAuroraLayer = ({ colors, speed, blur, intensity, theme, }) => {
+    const baseOpacity = intensity === 'subtle' ? 0.3 : intensity === 'medium' ? 0.6 : 0.8;
+    const duration = Math.max(5, speed / 1000);
+    const palette = colors.length >= 3
+        ? colors
+        : ['#4f46e5', '#ec4899', '#06b6d4', '#8b5cf6'];
+    const blendMode = theme === 'dark' ? 'screen' : 'multiply';
+    const filterStyle = `blur(${blur}px)`;
+    const blobBaseClass = 'designbase-animation-background__aurora-blob';
+    return (jsxs("div", { className: "designbase-animation-background__aurora-mesh", children: [jsx("div", { className: blobBaseClass, style: {
+                    backgroundColor: palette[0],
+                    filter: filterStyle,
+                    opacity: baseOpacity,
+                    animationDuration: `${duration}s`,
+                    top: '-10%',
+                    left: '-10%',
+                    animationDelay: '0s',
+                    mixBlendMode: blendMode,
+                } }), jsx("div", { className: blobBaseClass, style: {
+                    backgroundColor: palette[1],
+                    filter: filterStyle,
+                    opacity: baseOpacity,
+                    animationDuration: `${duration * 1.2}s`,
+                    top: '-10%',
+                    right: '-10%',
+                    animationDelay: '2s',
+                    mixBlendMode: blendMode,
+                } }), jsx("div", { className: blobBaseClass, style: {
+                    backgroundColor: palette[2],
+                    filter: filterStyle,
+                    opacity: baseOpacity,
+                    animationDuration: `${duration * 1.5}s`,
+                    bottom: '-20%',
+                    left: '20%',
+                    animationDelay: '4s',
+                    mixBlendMode: blendMode,
+                } }), palette[3] && (jsx("div", { className: blobBaseClass, style: {
+                    backgroundColor: palette[3],
+                    filter: filterStyle,
+                    opacity: baseOpacity,
+                    animationDuration: `${duration * 1.1}s`,
+                    bottom: '-10%',
+                    right: '-10%',
+                    animationDelay: '1s',
+                    mixBlendMode: blendMode,
+                } })), jsx("div", { className: "designbase-animation-background__aurora-noise", style: {
+                    opacity: theme === 'dark' ? 0.03 : 0.05,
+                    backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
+                } })] }));
+};
+
+const GridOverlay = ({ size = 40, color = '#ffffff', opacity = 0.1, }) => {
     const style = {
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        zIndex: 1,
+        backgroundImage: `
+            linear-gradient(to right, ${color} 1px, transparent 1px),
+            linear-gradient(to bottom, ${color} 1px, transparent 1px)
+        `,
+        backgroundSize: `${size}px ${size}px`,
+        opacity,
+        // 은은하게 전체에 라인 유지, 맨 아래만 살짝 페이드
+        maskImage: 'linear-gradient(to bottom, black 0%, black 92%, transparent 100%)',
+        WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 92%, transparent 100%)',
+    };
+    return jsx("div", { className: "designbase-animation-background__grid-overlay", style: style });
+};
+
+const AnimationBackground = ({ type = 'gradient', theme = 'dark', intensity = 'subtle', blur = 80, speed = 3000, repeat = 0, direction = 'left', colors = ['#667eea', '#764ba2', '#f093fb'], width = '100%', height = '100%', borderRadius = 0, opacity = 1, blendMode = 'normal', particleCount = 50, particleSize = 2, starCount = 100, starSize = 1.5, clickable = false, disabled = false, className = '', onClick, children, showGrid = false, gridSize = 40, gridColor, gridOpacity = 0.1, }) => {
+    const backgroundColor = theme === 'dark' ? 'var(--db-surface-base, #0f172a)' : 'var(--db-surface-base, #ffffff)';
+    const effectiveGridColor = gridColor ?? (theme === 'dark' ? '#ffffff' : '#000000');
+    const containerStyle = {
         width: typeof width === 'number' ? `${width}px` : width,
         height: typeof height === 'number' ? `${height}px` : height,
         borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius,
         opacity,
         mixBlendMode: blendMode,
-        ...getGradientStyle(),
-        ...getWaveStyle(),
-        ...getAuroraStyle(),
-        ...getFireStyle(),
-        ...getOceanStyle(),
-        ...getSunsetStyle(),
-        '--db-animation-speed': `${speed}ms`,
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundColor: type !== 'gradient' ? backgroundColor : undefined,
     };
-    const renderContent = () => {
-        if (type === 'particles' || type === 'stars') {
-            return (jsx("canvas", { ref: canvasRef, className: "designbase-animation-background__canvas", style: { width: '100%', height: '100%' } }));
+    const content = useMemo(() => {
+        if (disabled)
+            return null;
+        switch (type) {
+            case 'particles':
+            case 'stars':
+            case 'wave':
+            case 'pulse':
+                return (jsx(CanvasLayer, { type: type, colors: colors, speed: speed, particleCount: particleCount, particleSize: particleSize, starCount: starCount, starSize: starSize, intensity: intensity, clickable: clickable }));
+            case 'aurora':
+                return (jsx(MeshAuroraLayer, { colors: colors, speed: speed, blur: blur, intensity: intensity, theme: theme }));
+            case 'gradient':
+                return (jsx(CSSGradientLayer, { type: type, direction: direction, colors: colors, speed: speed }));
+            default:
+                return null;
         }
-        return children;
-    };
-    return (jsx("div", { ref: containerRef, className: classes, style: style, onClick: handleClick, children: renderContent() }));
+    }, [
+        type,
+        disabled,
+        colors,
+        speed,
+        intensity,
+        blur,
+        theme,
+        particleCount,
+        particleSize,
+        starCount,
+        starSize,
+        clickable,
+        direction,
+    ]);
+    const classes = classNames('designbase-animation-background', `designbase-animation-background--${type}`, {
+        'designbase-animation-background--clickable': clickable,
+        'designbase-animation-background--disabled': disabled,
+    }, className);
+    return (jsxs("div", { className: classes, style: containerStyle, onClick: clickable && !disabled ? onClick : undefined, children: [jsx("div", { className: "designbase-animation-background__layers", style: {
+                    position: 'absolute',
+                    inset: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: 0,
+                }, children: content }), showGrid && (jsx(GridOverlay, { size: gridSize, color: effectiveGridColor, opacity: gridOpacity })), children && (jsx("div", { className: "designbase-animation-background__content", style: { position: 'relative', zIndex: 10, width: '100%', height: '100%' }, children: children }))] }));
 };
 
 const AnimationText = ({ children, type = 'fade', speed = 1000, repeat = 0, delay = 0, direction = 'left', size = 'm', color = 'primary', customColor, weight = 'normal', align = 'left', gradientColors = ['#667eea', '#764ba2'], waveColors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'], glowColor = '#667eea', clickable = false, disabled = false, className, onClick, }) => {
@@ -4253,7 +4485,7 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
 };
 SearchBar.displayName = 'SearchBar';
 
-const Select = ({ value, defaultValue, options, label, placeholder = '선택하세요', multiple = false, searchable = false, disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, size = 'm', fullWidth = false, dropdownWidth = 'auto', position = 'bottom', maxHeight = 200, showClearButton = true, className, onChange, onFocus, onBlur, ...props }) => {
+const Select = ({ value, defaultValue, options, label, placeholder = '선택하세요', multiple = false, searchable = false, disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, size = 'm', fullWidth = false, dropdownWidth = 'auto', position = 'bottom', maxHeight = 200, showClearButton = true, useMobileBottomSheet = false, className, onChange, onFocus, onBlur, ...props }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState(value ?? defaultValue ?? (multiple ? [] : ''));
     const [searchTerm, setSearchTerm] = useState('');
@@ -4412,6 +4644,7 @@ const Select = ({ value, defaultValue, options, label, placeholder = '선택하
     });
     const dropdownClasses = clsx('designbase-select__dropdown', `designbase-select__dropdown--${dropdownWidth}`, `designbase-select__dropdown--${position}`, {
         'designbase-select__dropdown--open': isOpen,
+        'designbase-select__dropdown--mobile-sheet': useMobileBottomSheet,
     });
     const filteredOptions = getFilteredOptions();
     const selectedLabels = getSelectedLabels();
@@ -7812,7 +8045,7 @@ const Stat = ({ value, label, icon, iconPosition = 'left', size = 'm', variant =
             return;
         onClick?.();
     };
-    return (jsxs("div", { className: classes, style: customStyle, onClick: handleClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, children: [icon && (jsx("div", { className: clsx('designbase-stat__icon', `designbase-stat__icon--${iconPosition}`), children: icon })), jsxs("div", { className: "designbase-stat__content", children: [jsxs("div", { className: "designbase-stat__main", children: [jsx("div", { className: "designbase-stat__value", children: value }), jsx("div", { className: "designbase-stat__label", children: label })] }), showChange && change && (jsx("div", { className: clsx('designbase-stat__change', getChangeClass()), children: getChangeText() })), showDescription && description && (jsx("div", { className: "designbase-stat__description", children: description }))] }), showProgress && typeof progress === 'number' && (jsx("div", { className: "designbase-stat__progress", children: jsx(Progressbar, { value: Math.min(Math.max(progress, 0), 100), size: "s", variant: color === 'primary' ? 'primary' : color === 'success' ? 'success' : color === 'warning' ? 'warning' : color === 'error' ? 'danger' : 'default' }) }))] }));
+    return (jsxs("div", { className: classes, style: customStyle, onClick: handleClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, children: [icon && (jsx("div", { className: clsx('designbase-stat__icon', `designbase-stat__icon--${iconPosition}`), children: icon })), jsxs("div", { className: "designbase-stat__content", children: [jsx("div", { className: "designbase-stat__main", children: variant === 'iconBox' ? (jsxs(Fragment, { children: [jsx("div", { className: "designbase-stat__label", children: label }), jsx("div", { className: "designbase-stat__value", children: value })] })) : (jsxs(Fragment, { children: [jsx("div", { className: "designbase-stat__value", children: value }), jsx("div", { className: "designbase-stat__label", children: label })] })) }), showChange && change && (jsx("div", { className: clsx('designbase-stat__change', getChangeClass()), children: getChangeText() })), showDescription && description && (jsx("div", { className: "designbase-stat__description", children: description }))] }), showProgress && typeof progress === 'number' && (jsx("div", { className: "designbase-stat__progress", children: jsx(Progressbar, { value: Math.min(Math.max(progress, 0), 100), size: "s", variant: color === 'primary' ? 'primary' : color === 'success' ? 'success' : color === 'warning' ? 'warning' : color === 'error' ? 'danger' : 'default' }) }))] }));
 };
 
 const HeroFeature = ({ title, subtitle, description, image, imageAlt, backgroundImage, backgroundVideo, overlayColor, overlayOpacity = 0.5, buttons = [], badge, stats = [], icon, size = 'l', variant = 'default', theme = 'light', alignment = 'left', animated = false, parallax = false, fullHeight = false, minHeight, maxHeight, className, }) => {
@@ -8338,22 +8571,26 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
     return (jsx("div", { className: classes, children: items.map((item, index) => renderItem(item, index)) }));
 };
 
-const DesignBaseLogo = ({ width = 193, height = 40, color = 'currentColor', className, }) => {
-    return (jsx("svg", { width: width, height: height, viewBox: "0 0 386 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-label": "DesignBase Logo", children: jsxs("g", { fill: color, children: [jsx("polygon", { points: "58.4,23.6 77.3,23.6 77.3,16.2 58.4,16.2 58.4,7.7 79.4,7.7 79.4,0.4 49.5,0.4 49.5,39.6 80,39.6 80,32.3 58.4,32.3" }), jsx("path", { d: "M95.6,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3c-4.5-2.8-9.6-4.2-14.9-4.2c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.2,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C116.5,13.9,95.6,18,95.6,10.8z" }), jsx("rect", { x: "122.7", y: "0.4", width: "8.8", height: "39.2" }), jsx("path", { d: "M158.8,7.8c4,0.1,7.8,1.7,10.8,4.4l5-6.3c-4.4-3.7-10-5.7-15.7-5.7c-12.2,0-21.4,8.5-21.4,19.9s9,20,20.9,20 c5.7-0.1,11.2-1.9,15.9-5.1V19.8h-7.6v10.3c-2.4,1.3-5,2-7.7,2.1h-0.4c-6.7-0.1-12.1-5.6-12-12.3v-0.4 C146.7,13,152.2,7.7,158.8,7.8z" }), jsx("polygon", { points: "209.1,25.6 190.1,0.4 182,0.4 182,39.6 190.5,39.6 190.5,14.5 209.5,39.6 217.5,39.6 217.5,0.4 209.1,0.4" }), jsx("path", { d: "M263.3,18.8c4-0.9,6.9-4.5,6.8-8.6c0-6-5.4-9.8-14-9.8h-24.5v6.5l6.4,1v31.8h18.7c9.1,0,14.8-4.2,14.8-10.9 C271.7,23.8,268.2,19.5,263.3,18.8z M246.9,7.6h8.7c3.4-0.1,5.4,1.5,5.4,4.2s-2,4.4-5.4,4.4h-8.7V7.6z M255.7,32.4h-8.7v-9.3h8.7 c4.1,0,6.7,1.7,6.7,4.5C262.4,30.6,259.8,32.4,255.7,32.4z" }), jsx("path", { d: "M290.5,0.4l-17,39.2h9.1l3.1-7.6h18.2l3,7.6h9.5L299.6,0.4H290.5z M288.6,24.9l6.2-15.2l6.2,15.2L288.6,24.9z" }), jsx("path", { d: "M328.9,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3C345,1.4,339.9,0,334.6,0c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.1,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C349.8,13.9,328.9,18,328.9,10.8z" }), jsx("polygon", { points: "364.4,32.3 364.4,23.6 383.3,23.6 383.3,16.2 364.4,16.2 364.4,7.7 385.4,7.7 385.4,0.4 355.5,0.4 355.5,39.6 386,39.6 386,32.3" }), jsx("path", { d: "M23.1,0.4H0v6.5l6.5,1v31.8h16.3c12.4,0,21-8.1,21-19.6S35.2,0.4,23.1,0.4z M34.7,20.1c0,7.2-4.8,12.1-11.4,12.1h-8V7.8H23 C29.8,7.8,34.8,12.8,34.7,20.1L34.7,20.1z" })] }) }));
+const DesignBaseLogo = ({ width = 193, height = 40, color, className, }) => {
+    // color가 전달되지 않으면 원본 색상(검정) 사용, 전달되면 해당 색상 사용
+    const fillColor = color || '#000000';
+    return (jsx("svg", { width: width, height: height, viewBox: "0 0 386 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-label": "DesignBase Logo", children: jsxs("g", { fill: fillColor, children: [jsx("polygon", { points: "58.4,23.6 77.3,23.6 77.3,16.2 58.4,16.2 58.4,7.7 79.4,7.7 79.4,0.4 49.5,0.4 49.5,39.6 80,39.6 80,32.3 58.4,32.3" }), jsx("path", { d: "M95.6,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3c-4.5-2.8-9.6-4.2-14.9-4.2c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.2,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C116.5,13.9,95.6,18,95.6,10.8z" }), jsx("rect", { x: "122.7", y: "0.4", width: "8.8", height: "39.2" }), jsx("path", { d: "M158.8,7.8c4,0.1,7.8,1.7,10.8,4.4l5-6.3c-4.4-3.7-10-5.7-15.7-5.7c-12.2,0-21.4,8.5-21.4,19.9s9,20,20.9,20 c5.7-0.1,11.2-1.9,15.9-5.1V19.8h-7.6v10.3c-2.4,1.3-5,2-7.7,2.1h-0.4c-6.7-0.1-12.1-5.6-12-12.3v-0.4 C146.7,13,152.2,7.7,158.8,7.8z" }), jsx("polygon", { points: "209.1,25.6 190.1,0.4 182,0.4 182,39.6 190.5,39.6 190.5,14.5 209.5,39.6 217.5,39.6 217.5,0.4 209.1,0.4" }), jsx("path", { d: "M263.3,18.8c4-0.9,6.9-4.5,6.8-8.6c0-6-5.4-9.8-14-9.8h-24.5v6.5l6.4,1v31.8h18.7c9.1,0,14.8-4.2,14.8-10.9 C271.7,23.8,268.2,19.5,263.3,18.8z M246.9,7.6h8.7c3.4-0.1,5.4,1.5,5.4,4.2s-2,4.4-5.4,4.4h-8.7V7.6z M255.7,32.4h-8.7v-9.3h8.7 c4.1,0,6.7,1.7,6.7,4.5C262.4,30.6,259.8,32.4,255.7,32.4z" }), jsx("path", { d: "M290.5,0.4l-17,39.2h9.1l3.1-7.6h18.2l3,7.6h9.5L299.6,0.4H290.5z M288.6,24.9l6.2-15.2l6.2,15.2L288.6,24.9z" }), jsx("path", { d: "M328.9,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3C345,1.4,339.9,0,334.6,0c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.1,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C349.8,13.9,328.9,18,328.9,10.8z" }), jsx("polygon", { points: "364.4,32.3 364.4,23.6 383.3,23.6 383.3,16.2 364.4,16.2 364.4,7.7 385.4,7.7 385.4,0.4 355.5,0.4 355.5,39.6 386,39.6 386,32.3" }), jsx("path", { d: "M23.1,0.4H0v6.5l6.5,1v31.8h16.3c12.4,0,21-8.1,21-19.6S35.2,0.4,23.1,0.4z M34.7,20.1c0,7.2-4.8,12.1-11.4,12.1h-8V7.8H23 C29.8,7.8,34.8,12.8,34.7,20.1L34.7,20.1z" })] }) }));
 };
 DesignBaseLogo.displayName = 'DesignBaseLogo';
 
-const DesignBaseLogoMark = ({ size = 38, color = 'currentColor', className, }) => {
+const DesignBaseLogoMark = ({ size = 38, color, className, }) => {
     // 원본 비율 유지: 95:100
     const aspectRatio = 95 / 100;
     const width = size * aspectRatio;
     const height = size;
-    return (jsx("svg", { width: width, height: height, viewBox: "0 0 95 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-label": "DesignBase Mark", children: jsx("path", { fill: color, d: "M45,0H0V8l10,2V90L0,92v8H45A50,50,0,0,0,45,0ZM43.12,90H20V10H38.33a15,15,0,0,1,0,30H30.11V50h13a20,20,0,0,1,0,40ZM71.4,80A30,30,0,0,0,55.83,42.83,24.93,24.93,0,0,0,60.27,13,40,40,0,0,1,71.4,80Z" }) }));
+    // color가 전달되지 않으면 원본 색상(검정) 사용, 전달되면 해당 색상 사용
+    const fillColor = color || '#000000';
+    return (jsx("svg", { width: width, height: height, viewBox: "0 0 95 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-label": "DesignBase Mark", children: jsx("path", { fill: fillColor, d: "M45,0H0V8l10,2V90L0,92v8H45A50,50,0,0,0,45,0ZM43.12,90H20V10H38.33a15,15,0,0,1,0,30H30.11V50h13a20,20,0,0,1,0,40ZM71.4,80A30,30,0,0,0,55.83,42.83,24.93,24.93,0,0,0,60.27,13,40,40,0,0,1,71.4,80Z" }) }));
 };
 DesignBaseLogoMark.displayName = 'DesignBaseLogoMark';
 
-const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', variant = 'default', clickable = false, href, target = '_self', fullWidth = false, className, onClick, ...props }) => {
-    const classes = clsx('designbase-logo', `designbase-logo--${size}`, `designbase-logo--${variant}`, {
+const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', variant = 'original', clickable = false, href, target = '_self', fullWidth = false, className, onClick, ...props }) => {
+    const classes = clsx('designbase-logo', `designbase-logo--${size}`, variant && `designbase-logo--${variant}`, {
         'designbase-logo--clickable': clickable || href,
         'designbase-logo--full-width': fullWidth,
         'designbase-logo--svg': type !== 'custom',
@@ -8379,12 +8616,18 @@ const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', varian
     };
     // variant별 색상 매핑
     const getLogoColor = () => {
+        // original일 때는 undefined를 반환하여 SVG 원본 색상(검정) 사용
+        // color prop을 전달하지 않으면 SVG 로고 컴포넌트가 원본 색상을 사용
+        if (variant === 'original') {
+            return undefined;
+        }
         const colors = {
+            light: '#ffffff', // 밝은 색상 (흰색)
+            dark: '#000000', // 어두운 색상 (검정)
             default: 'var(--db-text-primary)',
             primary: 'var(--db-brand-primary)',
             secondary: 'var(--db-text-secondary)',
-            white: 'var(--db-text-inverse-primary)',
-            dark: 'var(--db-text-primary)',
+            white: '#ffffff', // white는 light와 동일하게 처리
         };
         return colors[variant];
     };
@@ -8393,11 +8636,11 @@ const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', varian
         const color = getLogoColor();
         // DesignBase 풀 로고
         if (type === 'designbase') {
-            return (jsx(DesignBaseLogo, { width: width, height: height, color: color, className: "designbase-logo__svg" }));
+            return (jsx(DesignBaseLogo, { width: width, height: height, ...(color !== undefined && { color }), className: "designbase-logo__svg" }));
         }
         // DesignBase 심볼 마크
         if (type === 'designbase-mark') {
-            return (jsx(DesignBaseLogoMark, { size: markSize, color: color, className: "designbase-logo__svg" }));
+            return (jsx(DesignBaseLogoMark, { size: markSize, ...(color !== undefined && { color }), className: "designbase-logo__svg" }));
         }
         // 커스텀 로고
         if (src) {
@@ -11480,7 +11723,7 @@ const Toast = ({ id, status = 'info', title, description, icon: Icon, duration =
         // 기본 상태 아이콘 (아이콘 패키지에서 가져온 아이콘 사용)
         const iconMap = {
             success: CircleCheckFilledIcon,
-            error: DeleteIcon,
+            error: ErrorIcon,
             warning: WarningIcon,
             info: InfoIcon,
         };