@designbasekorea/ui 0.4.1 → 0.5.2

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@designbasekorea/icons'), require('react-dom')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@designbasekorea/icons', 'react-dom'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DesignbaseUI = {}, global.jsxRuntime, global.React, global.icons, global.ReactDOM));
-})(this, (function (exports, jsxRuntime, React, icons, $4AOtR$reactdom) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@designbasekorea/icons'), require('react-dom'), require('@designbasekorea/theme')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@designbasekorea/icons', 'react-dom', '@designbasekorea/theme'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DesignbaseUI = {}, global.jsxRuntime, global.React, global.icons, global.ReactDOM, global.theme));
+})(this, (function (exports, jsxRuntime, React, icons, $4AOtR$reactdom, theme) { 'use strict';
 
     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}
 
@@ -2898,256 +2898,584 @@
     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] = React.useState(false);
-        const [isAnimating, setIsAnimating] = React.useState(false);
-        const containerRef = React.useRef(null);
-        const canvasRef = React.useRef(null);
-        React.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]);
-        // 반복 애니메이션
-        React.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 타입용)
-        React.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.005 * speedFactor; // Slower, smoother movement
+        colors.forEach((color, i) => {
+            const rgb = hexToRgb$1(color);
+            const gradient = ctx.createLinearGradient(0, 0, 0, height);
+            // Gradient from color to transparent for depth
+            gradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
+            gradient.addColorStop(0.5, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.5)`);
+            gradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.8)`);
+            ctx.fillStyle = gradient;
+            ctx.beginPath();
+            ctx.moveTo(0, height);
+            // Organic wave generation
+            for (let x = 0; x <= width; x += 5) {
+                const freq1 = 0.002 + i * 0.0005;
+                const freq2 = 0.005 + i * 0.001;
+                const phase = offset.current + i * 1.5;
+                // Combine two sine waves for more natural look
+                const y1 = Math.sin(x * freq1 + phase) * (40 + i * 15);
+                const y2 = Math.sin(x * freq2 + phase * 1.2) * (20 + i * 5);
+                const y = height / 1.5 + y1 + y2 + (i * 30); // Base height + waves + layering offset
+                ctx.lineTo(x, y);
+            }
+            ctx.lineTo(width, height);
+            ctx.lineTo(0, height);
+            ctx.closePath();
+            // Add subtle blur for "dreamy" effect
+            // Note: filter can be expensive, use sparingly. 
+            // If performance is an issue, remove this toggle or reduce canvas size.
+            // ctx.filter = 'blur(4px)'; 
+            ctx.globalAlpha = 0.6; // Base transparency
+            ctx.fill();
+            ctx.globalAlpha = 1.0;
+            // ctx.filter = 'none';
+        });
+    };
+    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.6; // Slightly reduced max radius to keep it contained
+        const intensityMap = { subtle: 0.8, medium: 1.2, vivid: 1.8 }; // Increased base intensity
+        const factor = intensityMap[intensity];
+        colors.forEach((color, i) => {
+            // Offset time for each color layer
+            const t = time * 0.002 * factor + (i * (Math.PI / 1.5));
+            // Breathing effect for radius
+            const radius = (Math.sin(t) * 0.15 + 0.6) * maxRadius;
+            // Breathing effect for opacity
+            const alpha = (Math.sin(t + Math.PI / 2) * 0.3 + 0.5) * factor; // Higher base alpha (0.2->0.8 range)
+            // Clamp alpha max to 1
+            const safeAlpha = Math.min(Math.max(alpha, 0), 1);
+            if (safeAlpha <= 0.01)
+                return;
+            const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
+            const rgb = hexToRgb$1(color);
+            // Harder center, softer edge
+            gradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
+            gradient.addColorStop(0.2, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${safeAlpha * 0.2})`);
+            gradient.addColorStop(0.6, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${safeAlpha * 0.6})`);
+            gradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
+            ctx.fillStyle = gradient;
+            // Use globalCompositeOperation to blend nicely
+            ctx.globalCompositeOperation = 'screen';
+            ctx.fillRect(0, 0, width, height);
+            ctx.globalCompositeOperation = 'source-over';
+        });
+    };
+
+    const CanvasLayer = ({ type, colors, speed, particleCount, particleSize, starCount, starSize, intensity, clickable, }) => {
+        const canvasRef = React.useRef(null);
+        const containerRef = React.useRef(null);
+        const requestRef = React.useRef(undefined);
+        const frameCountRef = React.useRef(0);
+        const mouseRef = React.useRef({ x: -9999, y: -9999 });
+        const particlesRef = React.useRef([]);
+        const starsRef = React.useRef([]);
+        const waveOffsetRef = React.useRef(0);
+        const handleResize = React.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 = React.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,
+        ]);
+        React.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 (jsxRuntime.jsx("div", { ref: containerRef, className: "designbase-animation-background__canvas-layer", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, children: jsxRuntime.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 (jsxRuntime.jsx("div", { className: "designbase-animation-background__css-layer", style: {
+                ...getBackgroundStyle(),
+                animation: `designbase-gradient-move ${duration} ease infinite`,
+            }, children: jsxRuntime.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 (jsxRuntime.jsxs("div", { className: "designbase-animation-background__aurora-mesh", children: [jsxRuntime.jsx("div", { className: blobBaseClass, style: {
+                        backgroundColor: palette[0],
+                        filter: filterStyle,
+                        opacity: baseOpacity,
+                        animationDuration: `${duration}s`,
+                        top: '-10%',
+                        left: '-10%',
+                        animationDelay: '0s',
+                        mixBlendMode: blendMode,
+                    } }), jsxRuntime.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,
+                    } }), jsxRuntime.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] && (jsxRuntime.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,
+                    } })), jsxRuntime.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 jsxRuntime.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 (jsxRuntime.jsx("canvas", { ref: canvasRef, className: "designbase-animation-background__canvas", style: { width: '100%', height: '100%' } }));
+        const content = React.useMemo(() => {
+            if (disabled)
+                return null;
+            switch (type) {
+                case 'particles':
+                case 'stars':
+                case 'wave':
+                case 'pulse':
+                    return (jsxRuntime.jsx(CanvasLayer, { type: type, colors: colors, speed: speed, particleCount: particleCount, particleSize: particleSize, starCount: starCount, starSize: starSize, intensity: intensity, clickable: clickable }));
+                case 'aurora':
+                    return (jsxRuntime.jsx(MeshAuroraLayer, { colors: colors, speed: speed, blur: blur, intensity: intensity, theme: theme }));
+                case 'gradient':
+                    return (jsxRuntime.jsx(CSSGradientLayer, { type: type, direction: direction, colors: colors, speed: speed }));
+                default:
+                    return null;
             }
-            return children;
-        };
-        return (jsxRuntime.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 (jsxRuntime.jsxs("div", { className: classes, style: containerStyle, onClick: clickable && !disabled ? onClick : undefined, children: [jsxRuntime.jsx("div", { className: "designbase-animation-background__layers", style: {
+                        position: 'absolute',
+                        inset: 0,
+                        width: '100%',
+                        height: '100%',
+                        zIndex: 0,
+                    }, children: content }), showGrid && (jsxRuntime.jsx(GridOverlay, { size: gridSize, color: effectiveGridColor, opacity: gridOpacity })), children && (jsxRuntime.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, }) => {
+    const AnimationText = ({ children, trigger = 'mount', type = 'fade', speed = 1000, repeat = 1, 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, }) => {
         const [isVisible, setIsVisible] = React.useState(false);
-        const [currentIndex, setCurrentIndex] = React.useState(0);
         const [isAnimating, setIsAnimating] = React.useState(false);
+        // Initialize with full text unless it's a mount trigger for typing/decode
+        const [displayText, setDisplayText] = React.useState((type === 'decode' || type === 'typing') && trigger === 'mount' ? '' : children);
+        const [currentRepeat, setCurrentRepeat] = React.useState(0);
         const textRef = React.useRef(null);
-        React.useRef(null);
-        // 타이핑 애니메이션을 위한 상태
-        const [displayText, setDisplayText] = React.useState('');
+        const observerRef = React.useRef(null);
+        // Initial trigger logic
         React.useEffect(() => {
-            if (delay > 0) {
+            if (trigger === 'mount') {
                 const timer = setTimeout(() => {
                     setIsVisible(true);
+                    startAnimation();
                 }, delay);
                 return () => clearTimeout(timer);
             }
-            else {
-                setIsVisible(true);
+            else if (trigger === 'in-view' && textRef.current) {
+                observerRef.current = new IntersectionObserver((entries) => {
+                    if (entries[0].isIntersecting) {
+                        setTimeout(() => {
+                            setIsVisible(true);
+                            startAnimation();
+                        }, delay);
+                        observerRef.current?.disconnect();
+                    }
+                });
+                observerRef.current.observe(textRef.current);
+                return () => observerRef.current?.disconnect();
             }
-        }, [delay]);
-        // 타이핑 애니메이션
+        }, [trigger, delay]);
+        // Update initial text visibility when props change
         React.useEffect(() => {
-            if (type === 'typing' && isVisible) {
-                setDisplayText('');
-                setCurrentIndex(0);
-                const typeInterval = setInterval(() => {
-                    setCurrentIndex(prev => {
-                        if (prev >= children.length) {
-                            clearInterval(typeInterval);
-                            return prev;
-                        }
-                        setDisplayText(children.slice(0, prev + 1));
-                        return prev + 1;
-                    });
-                }, speed / children.length);
-                return () => clearInterval(typeInterval);
+            if ((type === 'typing' || type === 'decode') && trigger === 'mount') ;
+            else {
+                // For hover/click, ensure text is visible when not animating
+                if (!isAnimating) {
+                    setDisplayText(children);
+                }
             }
-        }, [type, isVisible, children, speed]);
-        // 반복 애니메이션
-        React.useEffect(() => {
-            if (repeat > 0 && type !== 'typing') {
-                let repeatCount = 0;
-                const repeatAnimation = () => {
-                    setIsAnimating(true);
-                    setTimeout(() => {
+        }, [children, type, trigger]);
+        const startAnimation = () => {
+            setIsAnimating(true);
+            setCurrentRepeat(0);
+            if (type === 'typing') {
+                startTyping(0);
+            }
+            else if (type === 'decode') {
+                startDecoding(0);
+            }
+        };
+        const startTyping = (iteration) => {
+            setDisplayText('');
+            let currentIndex = 0;
+            const interval = setInterval(() => {
+                if (currentIndex >= children.length) {
+                    clearInterval(interval);
+                    // Repetition logic
+                    if (repeat === 0 || iteration < repeat - 1) {
+                        setTimeout(() => {
+                            startTyping(iteration + 1);
+                        }, 500);
+                    }
+                    else {
                         setIsAnimating(false);
-                        repeatCount++;
-                        if (repeatCount < repeat) {
-                            setTimeout(repeatAnimation, speed);
-                        }
-                    }, speed);
-                };
-                if (isVisible) {
-                    setTimeout(repeatAnimation, speed);
+                    }
+                    return;
+                }
+                setDisplayText(children.slice(0, currentIndex + 1));
+                currentIndex++;
+            }, speed / children.length);
+        };
+        const startDecoding = (iteration) => {
+            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+';
+            let iterations = 0;
+            const interval = setInterval(() => {
+                setDisplayText(children.split('').map((char, index) => {
+                    if (index < iterations) {
+                        return children[index];
+                    }
+                    return characters[Math.floor(Math.random() * characters.length)];
+                }).join(''));
+                if (iterations >= children.length) {
+                    clearInterval(interval);
+                    setDisplayText(children);
+                    // Repetition logic
+                    if (repeat === 0 || iteration < repeat - 1) {
+                        setTimeout(() => {
+                            startDecoding(iteration + 1);
+                        }, 500);
+                    }
+                    else {
+                        setIsAnimating(false);
+                    }
                 }
+                iterations += 1 / 3;
+            }, 30);
+        };
+        const handleMouseEnter = () => {
+            if (trigger === 'hover') {
+                setIsVisible(true);
+                startAnimation();
             }
-        }, [repeat, type, speed, isVisible]);
+        };
+        const handleMouseLeave = () => {
+            if (trigger === 'hover') {
+                setIsVisible(false);
+                setIsAnimating(false);
+                if (type === 'typing' || type === 'decode') {
+                    setDisplayText(children);
+                }
+            }
+        };
         const handleClick = () => {
+            if (trigger === 'click') {
+                setIsVisible(!isVisible);
+                if (isVisible) {
+                    setIsAnimating(false);
+                    if (type === 'typing' || type === 'decode') {
+                        setDisplayText(children);
+                    }
+                }
+                else {
+                    startAnimation();
+                }
+            }
             if (clickable && !disabled && onClick) {
                 onClick();
             }
@@ -3164,14 +3492,6 @@
             }
             return {};
         };
-        const getWaveStyle = () => {
-            if (type === 'wave') {
-                return {
-                    '--wave-colors': waveColors.join(', '),
-                };
-            }
-            return {};
-        };
         const getGlowStyle = () => {
             if (type === 'glow') {
                 return {
@@ -3180,26 +3500,52 @@
             }
             return {};
         };
-        const classes = classNames('designbase-animation-text', `designbase-animation-text--${type}`, `designbase-animation-text--${size}`, `designbase-animation-text--${color}`, `designbase-animation-text--${weight}`, `designbase-animation-text--${align}`, `designbase-animation-text--${direction}`, {
+        // For typing, the class should be applied to the inner element to handle caret correctly with ghost element
+        const containerClasses = classNames('designbase-animation-text', 
+        // Exclude typing logic from outer container to prevent caret on full-width ghost container
+        type !== 'typing' && `designbase-animation-text--${type}`, `designbase-animation-text--${size}`, `designbase-animation-text--${color}`, `designbase-animation-text--${weight}`, `designbase-animation-text--${align}`, `designbase-animation-text--${direction}`, {
             'designbase-animation-text--visible': isVisible,
             'designbase-animation-text--animating': isAnimating,
-            'designbase-animation-text--clickable': clickable,
+            'designbase-animation-text--clickable': clickable || trigger === 'click',
             'designbase-animation-text--disabled': disabled,
         }, className);
         const style = {
             ...getGradientStyle(),
-            ...getWaveStyle(),
             ...getGlowStyle(),
             '--db-animation-speed': `${speed}ms`,
             '--db-text-custom': customColor,
+            '--db-wave-colors': waveColors.join(', '),
+            '--db-animation-iteration-count': repeat === 0 ? 'infinite' : repeat,
         };
-        const renderText = () => {
-            if (type === 'typing') {
-                return displayText;
-            }
-            return children;
-        };
-        return (jsxRuntime.jsx("div", { ref: textRef, className: classes, style: style, onClick: handleClick, children: renderText() }));
+        const renderContent = () => {
+            if (type === 'wave' || type === 'shake') {
+                if (!isVisible && !isAnimating)
+                    return children;
+                return children.split('').map((char, index) => (jsxRuntime.jsx("span", { style: {
+                        animationDelay: `${index * 0.05}s`,
+                        display: 'inline-block'
+                    }, children: char === ' ' ? '\u00A0' : char }, index)));
+            }
+            return displayText;
+        };
+        return (jsxRuntime.jsxs("div", { ref: textRef, className: containerClasses, style: style, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [jsxRuntime.jsx("span", { "aria-hidden": "true", style: {
+                        visibility: 'hidden',
+                        pointerEvents: 'none',
+                        userSelect: 'none',
+                        whiteSpace: type === 'typing' ? 'pre-wrap' : undefined
+                    }, children: children }), jsxRuntime.jsx("span", { className: classNames({
+                        'designbase-animation-text--typing': type === 'typing',
+                        'designbase-animation-text--animating': isAnimating && type === 'typing' // Ensure animating class is passed for typing caret
+                    }), style: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        // For typing, we want width to be auto so caret follows text
+                        // For others, width 100% matches ghost element
+                        width: type === 'typing' ? 'auto' : '100%',
+                        height: '100%',
+                        whiteSpace: type === 'typing' ? 'pre-wrap' : undefined // Ensure pre-wrap behavior matches
+                    }, children: renderContent() })] }));
     };
 
     const AudioPlayer = ({ src, title, artist, album, albumArt, size = 'm', variant = 'default', theme = 'auto', autoPlay = false, loop = false, muted = false, showControls = true, enableKeyboard = true, showProgress = true, showTime = true, showVolume = true, showSettings = false, playlist = [], currentIndex = 0, autoPause = true, playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2], defaultPlaybackRate = 1, repeatMode = 'none', shuffle = false, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onPlaylistChange, onPlaybackRateChange, onRepeatModeChange, onShuffleChange, onError, className, }) => {
@@ -3961,6 +4307,7 @@
 
     const Modal = ({ isOpen, onClose, title, size = 'm', closeOnOutsideClick = true, closeOnEscape = true, children, className, overlayClassName, }) => {
         const modalRef = React.useRef(null);
+        const titleId = React.useId();
         // 아이콘 크기 계산 (m이 기본값)
         const iconSize = size === 's' ? 16 : size === 'l' ? 20 : size === 'xl' ? 24 : 18;
         // Prevent scrolling while modal is open
@@ -3992,11 +4339,11 @@
             return null;
         const modalClasses = clsx('designbase-modal', `designbase-modal--${size}`, className);
         const overlayClasses = clsx('designbase-modal__overlay', overlayClassName);
-        return (jsxRuntime.jsx("div", { className: overlayClasses, onClick: closeOnOutsideClick ? onClose : undefined, children: jsxRuntime.jsxs("div", { ref: modalRef, className: modalClasses, onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? 'modal-title' : undefined, children: [title && (jsxRuntime.jsx(ModalHeader, { title: title, showCloseButton: true, onClose: onClose, iconSize: iconSize })), jsxRuntime.jsx("div", { className: "designbase-modal__content", children: children })] }) }));
+        return (jsxRuntime.jsx("div", { className: overlayClasses, onClick: closeOnOutsideClick ? onClose : undefined, children: jsxRuntime.jsxs("div", { ref: modalRef, className: modalClasses, onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, children: [title && (jsxRuntime.jsx(ModalHeader, { title: title, titleId: titleId, showCloseButton: true, onClose: onClose, iconSize: iconSize })), jsxRuntime.jsx("div", { className: "designbase-modal__content", children: children })] }) }));
     };
-    const ModalHeader = ({ title, showCloseButton = true, onClose, iconSize = 20, className, children, }) => {
+    const ModalHeader = ({ title, titleId, showCloseButton = true, onClose, iconSize = 20, className, children, }) => {
         const classes = clsx('designbase-modal__header', className);
-        return (jsxRuntime.jsxs("div", { className: classes, children: [jsxRuntime.jsxs("div", { className: "designbase-modal__header-content", children: [title && (jsxRuntime.jsx("h2", { id: "modal-title", className: "designbase-modal__title", children: title })), children] }), showCloseButton && onClose && (jsxRuntime.jsx("button", { type: "button", onClick: onClose, "aria-label": "\uBAA8\uB2EC \uB2EB\uAE30", className: "designbase-modal__close-button", children: jsxRuntime.jsx(icons.CloseIcon, { size: iconSize, color: "currentColor" }) }))] }));
+        return (jsxRuntime.jsxs("div", { className: classes, children: [jsxRuntime.jsxs("div", { className: "designbase-modal__header-content", children: [title && (jsxRuntime.jsx("h2", { id: titleId || 'modal-title', className: "designbase-modal__title", children: title })), children] }), showCloseButton && onClose && (jsxRuntime.jsx("button", { type: "button", onClick: onClose, "aria-label": "\uBAA8\uB2EC \uB2EB\uAE30", className: "designbase-modal__close-button", children: jsxRuntime.jsx(icons.CloseIcon, { size: iconSize, color: "currentColor" }) }))] }));
     };
     const ModalBody = ({ className, children, }) => {
         const classes = clsx('designbase-modal__body', className);
@@ -4254,11 +4601,12 @@
     };
     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] = React.useState(false);
         const [selectedValue, setSelectedValue] = React.useState(value ?? defaultValue ?? (multiple ? [] : ''));
         const [searchTerm, setSearchTerm] = React.useState('');
         const [focusedIndex, setFocusedIndex] = React.useState(-1);
+        const labelId = React.useId();
         const containerRef = React.useRef(null);
         const inputRef = React.useRef(null);
         const dropdownRef = React.useRef(null);
@@ -4413,11 +4761,12 @@
         });
         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();
         const hasValue = multiple ? selectedValue.length > 0 : selectedValue !== '';
-        return (jsxRuntime.jsxs("div", { className: classes, ref: containerRef, children: [label && (jsxRuntime.jsxs("label", { className: "designbase-select__label", children: [label, required && jsxRuntime.jsx("span", { className: "designbase-select__required", children: "*" })] })), jsxRuntime.jsxs("div", { className: triggerClasses, onClick: handleToggle, onFocus: onFocus, onBlur: onBlur, tabIndex: disabled || readOnly ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-labelledby": label ? 'select-label' : undefined, ...props, children: [jsxRuntime.jsx("div", { className: "designbase-select__value", children: multiple ? (jsxRuntime.jsx("div", { className: "designbase-select__tags", ref: tagsContainerRef, children: selectedValue.map((value) => {
+        return (jsxRuntime.jsxs("div", { className: classes, ref: containerRef, children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "designbase-select__label", children: [label, required && jsxRuntime.jsx("span", { className: "designbase-select__required", children: "*" })] })), jsxRuntime.jsxs("div", { className: triggerClasses, onClick: handleToggle, onFocus: onFocus, onBlur: onBlur, tabIndex: disabled || readOnly ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-labelledby": label ? labelId : undefined, ...props, children: [jsxRuntime.jsx("div", { className: "designbase-select__value", children: multiple ? (jsxRuntime.jsx("div", { className: "designbase-select__tags", ref: tagsContainerRef, children: selectedValue.map((value) => {
                                     const option = options.find(opt => opt.value === value);
                                     return (jsxRuntime.jsxs("span", { className: "designbase-select__tag", children: [jsxRuntime.jsx("span", { className: "designbase-select__tag-label", children: option?.label || value }), jsxRuntime.jsx("button", { type: "button", className: "designbase-select__tag-remove", onClick: (e) => {
                                                     e.stopPropagation();
@@ -5037,7 +5386,7 @@
                 return null;
             return (jsxRuntime.jsx("div", { className: "designbase-card__actions", children: actions.map((action, index) => {
                     const ActionIcon = action.icon;
-                    return (jsxRuntime.jsx(Button, { variant: action.variant || 'primary', size: action.size || 's', onClick: () => handleActionClick(action, index), disabled: action.disabled || disabled, loading: !!action.loading, icon: ActionIcon, children: action.label }, index));
+                    return (jsxRuntime.jsx(Button, { variant: action.variant || 'primary', size: action.size || 's', onClick: () => handleActionClick(action, index), disabled: action.disabled || disabled, loading: !!action.loading, startIcon: ActionIcon, children: action.label }, index));
                 }) }));
         };
         const renderContent = () => (jsxRuntime.jsxs("div", { className: "designbase-card__content", children: [renderIcon(), (title || subtitle) && (jsxRuntime.jsxs("div", { className: "designbase-card__header", children: [title && jsxRuntime.jsx("h3", { className: "designbase-card__title", children: title }), subtitle && jsxRuntime.jsx("p", { className: "designbase-card__subtitle", children: subtitle })] })), description && jsxRuntime.jsx("p", { className: "designbase-card__description", children: description }), children && jsxRuntime.jsx("div", { className: "designbase-card__body", children: children }), renderTags(), renderMeta(), renderActions()] }));
@@ -7813,7 +8162,7 @@
                 return;
             onClick?.();
         };
-        return (jsxRuntime.jsxs("div", { className: classes, style: customStyle, onClick: handleClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, children: [icon && (jsxRuntime.jsx("div", { className: clsx('designbase-stat__icon', `designbase-stat__icon--${iconPosition}`), children: icon })), jsxRuntime.jsxs("div", { className: "designbase-stat__content", children: [jsxRuntime.jsxs("div", { className: "designbase-stat__main", children: [jsxRuntime.jsx("div", { className: "designbase-stat__value", children: value }), jsxRuntime.jsx("div", { className: "designbase-stat__label", children: label })] }), showChange && change && (jsxRuntime.jsx("div", { className: clsx('designbase-stat__change', getChangeClass()), children: getChangeText() })), showDescription && description && (jsxRuntime.jsx("div", { className: "designbase-stat__description", children: description }))] }), showProgress && typeof progress === 'number' && (jsxRuntime.jsx("div", { className: "designbase-stat__progress", children: jsxRuntime.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 (jsxRuntime.jsxs("div", { className: classes, style: customStyle, onClick: handleClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, children: [icon && (jsxRuntime.jsx("div", { className: clsx('designbase-stat__icon', `designbase-stat__icon--${iconPosition}`), children: icon })), jsxRuntime.jsxs("div", { className: "designbase-stat__content", children: [jsxRuntime.jsx("div", { className: "designbase-stat__main", children: variant === 'iconBox' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "designbase-stat__label", children: label }), jsxRuntime.jsx("div", { className: "designbase-stat__value", children: value })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "designbase-stat__value", children: value }), jsxRuntime.jsx("div", { className: "designbase-stat__label", children: label })] })) }), showChange && change && (jsxRuntime.jsx("div", { className: clsx('designbase-stat__change', getChangeClass()), children: getChangeText() })), showDescription && description && (jsxRuntime.jsx("div", { className: "designbase-stat__description", children: description }))] }), showProgress && typeof progress === 'number' && (jsxRuntime.jsx("div", { className: "designbase-stat__progress", children: jsxRuntime.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, }) => {
@@ -10665,7 +11014,7 @@
         }
     };
 
-    const Sidebar = ({ size = 'm', variant = 'default', position = 'left', logo, onLogoClick, items = [], onItemClick, userProfile, userMenuItems = [], onUserMenuItemClick, collapsed = false, onToggle, collapsible = true, fixed = false, fullHeight = false, shadow = false, className, ...props }) => {
+    const Sidebar = ({ size = 'm', variant = 'default', position = 'left', showLogo = false, logo, onLogoClick, items = [], onItemClick, userProfile, userMenuItems = [], onUserMenuItemClick, collapsed = false, onToggle, collapsible = true, fixed = false, fullHeight = false, shadow = false, className, ...props }) => {
         const [expandedItems, setExpandedItems] = React.useState([]);
         const handleToggle = () => {
             if (onToggle) {
@@ -10706,24 +11055,24 @@
             const hasChildren = item.children && item.children.length > 0;
             return (jsxRuntime.jsx("li", { className: "designbase-sidebar__item", children: jsxRuntime.jsx(MenuItem, { ...item, type: "block", style: "accordion", depth: level, expanded: isExpanded, expandable: hasChildren, onClick: () => handleItemClick(item), onChildClick: (child) => handleItemClick(child) }) }, item.id));
         };
-        return (jsxRuntime.jsx("aside", { className: classes, role: "complementary", "aria-label": "\uC0AC\uC774\uB4DC\uBC14 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: jsxRuntime.jsxs("div", { className: "designbase-sidebar__container", children: [jsxRuntime.jsxs("div", { className: "designbase-sidebar__header", children: [jsxRuntime.jsx("div", { className: "designbase-sidebar__logo", onClick: onLogoClick, role: onLogoClick ? 'button' : undefined, tabIndex: onLogoClick ? 0 : undefined, onKeyDown: (e) => {
+        return (jsxRuntime.jsx("aside", { className: classes, role: "complementary", "aria-label": "\uC0AC\uC774\uB4DC\uBC14 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: jsxRuntime.jsxs("div", { className: "designbase-sidebar__container", children: [showLogo && (jsxRuntime.jsxs("div", { className: "designbase-sidebar__header", children: [jsxRuntime.jsx("div", { className: "designbase-sidebar__logo", onClick: onLogoClick, role: onLogoClick ? 'button' : undefined, tabIndex: onLogoClick ? 0 : undefined, onKeyDown: (e) => {
                                     if (onLogoClick && (e.key === 'Enter' || e.key === ' ')) {
                                         e.preventDefault();
                                         onLogoClick();
                                     }
                                 }, children: logo || jsxRuntime.jsx(Logo, { size: "s" }) }), collapsible && (jsxRuntime.jsx(Button, { variant: "ghost", size: "s", iconOnly: true, className: "designbase-sidebar__toggle", onPress: handleToggle, "aria-label": collapsed ? '사이드바 펼치기' : '사이드바 접기', children: jsxRuntime.jsx(icons.ChevronLeftIcon, { className: clsx('designbase-sidebar__toggle-icon', {
                                         'designbase-sidebar__toggle-icon--collapsed': collapsed,
-                                    }) }) }))] }), jsxRuntime.jsx("nav", { className: "designbase-sidebar__nav", children: jsxRuntime.jsx("ul", { className: "designbase-sidebar__nav-list", children: items.map((item) => renderSidebarItem(item)) }) }), userProfile && !collapsed && (jsxRuntime.jsxs("div", { className: "designbase-sidebar__user", children: [jsxRuntime.jsxs("div", { className: "designbase-sidebar__user-info", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                                    }) }) }))] })), jsxRuntime.jsx("nav", { className: "designbase-sidebar__nav", children: jsxRuntime.jsx("ul", { className: "designbase-sidebar__nav-list", children: items.map((item) => renderSidebarItem(item)) }) }), userProfile && !collapsed && (jsxRuntime.jsxs("div", { className: "designbase-sidebar__user", children: [jsxRuntime.jsxs("div", { className: "designbase-sidebar__user-info", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
                                     if (e.key === 'Enter' || e.key === ' ') {
                                         e.preventDefault();
                                         onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' });
                                     }
-                                }, style: { cursor: 'pointer' }, children: [userProfile.avatar ? (jsxRuntime.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-sidebar__user-avatar" })) : (jsxRuntime.jsx("div", { className: "designbase-sidebar__user-avatar-placeholder", children: userProfile.name.charAt(0).toUpperCase() })), jsxRuntime.jsxs("div", { className: "designbase-sidebar__user-details", children: [jsxRuntime.jsx("div", { className: "designbase-sidebar__user-name", children: userProfile.name }), userProfile.email && (jsxRuntime.jsx("div", { className: "designbase-sidebar__user-email", children: userProfile.email })), userProfile.role && (jsxRuntime.jsx("div", { className: "designbase-sidebar__user-role", children: userProfile.role }))] })] }), userMenuItems.length > 0 && (jsxRuntime.jsx("ul", { className: "designbase-sidebar__user-menu", children: userMenuItems.map((item) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(MenuItem, { id: item.id, label: item.label, href: item.href, icon: item.icon, disabled: item.disabled, type: "block", style: "accordion", onClick: () => handleUserMenuItemClick(item) }) }, item.id))) }))] })), userProfile && collapsed && (jsxRuntime.jsx("div", { className: "designbase-sidebar__user-collapsed", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                                }, style: { cursor: 'pointer' }, children: [jsxRuntime.jsx(Avatar, { src: userProfile.avatar, initials: userProfile.name, alt: userProfile.name, size: "s", className: "designbase-sidebar__user-avatar" }), jsxRuntime.jsxs("div", { className: "designbase-sidebar__user-details", children: [jsxRuntime.jsx("div", { className: "designbase-sidebar__user-name", children: userProfile.name }), userProfile.email && (jsxRuntime.jsx("div", { className: "designbase-sidebar__user-email", children: userProfile.email })), userProfile.role && (jsxRuntime.jsx("div", { className: "designbase-sidebar__user-role", children: userProfile.role }))] })] }), userMenuItems.length > 0 && (jsxRuntime.jsx("ul", { className: "designbase-sidebar__user-menu", children: userMenuItems.map((item) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(MenuItem, { id: item.id, label: item.label, href: item.href, icon: item.icon, disabled: item.disabled, type: "block", style: "accordion", onClick: () => handleUserMenuItemClick(item) }) }, item.id))) }))] })), userProfile && collapsed && (jsxRuntime.jsx("div", { className: "designbase-sidebar__user-collapsed", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
                             if (e.key === 'Enter' || e.key === ' ') {
                                 e.preventDefault();
                                 onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' });
                             }
-                        }, style: { cursor: 'pointer' }, children: userProfile.avatar ? (jsxRuntime.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-sidebar__user-avatar-collapsed" })) : (jsxRuntime.jsx("div", { className: "designbase-sidebar__user-avatar-placeholder-collapsed", children: userProfile.name.charAt(0).toUpperCase() })) }))] }) }));
+                        }, style: { cursor: 'pointer' }, children: jsxRuntime.jsx(Avatar, { src: userProfile.avatar, initials: userProfile.name, alt: userProfile.name, size: "s", className: "designbase-sidebar__user-avatar-collapsed" }) }))] }) }));
     };
     Sidebar.displayName = 'Sidebar';
 
@@ -11491,7 +11840,7 @@
             // 기본 상태 아이콘 (아이콘 패키지에서 가져온 아이콘 사용)
             const iconMap = {
                 success: icons.CircleCheckFilledIcon,
-                error: icons.DeleteIcon,
+                error: icons.ErrorIcon,
                 warning: icons.WarningIcon,
                 info: icons.InfoIcon,
             };
@@ -12158,25 +12507,18 @@
     };
     YouTubePlayer.displayName = 'YouTubePlayer';
 
-    /**
-     * Designbase UI 컴포넌트 라이브러리 메인 엔트리 포인트
-     *
-     * 목적: 모든 UI 컴포넌트와 타입을 내보냄
-     * 기능: Tree-shaking 가능한 개별 컴포넌트 내보내기
-     * 사용법: import { Button, Input } from '@designbasekorea/ui'
-     */
-    // 테마 CSS 자동 로드 (로컬 복사본 사용)
-    // 테마 관련 유틸리티 재내보내기
-    const setTheme = (theme) => {
-        console.log('setTheme called with:', theme);
-    };
-    const getTheme = () => {
-        return 'light';
-    };
-    const toggleTheme = () => {
-        console.log('toggleTheme called');
-    };
-
+    Object.defineProperty(exports, 'getTheme', {
+        enumerable: true,
+        get: function () { return theme.getTheme; }
+    });
+    Object.defineProperty(exports, 'setTheme', {
+        enumerable: true,
+        get: function () { return theme.setTheme; }
+    });
+    Object.defineProperty(exports, 'toggleTheme', {
+        enumerable: true,
+        get: function () { return theme.toggleTheme; }
+    });
     exports.Accordion = Accordion;
     exports.AdBanner = AdBanner;
     exports.Alert = Alert;
@@ -12269,9 +12611,6 @@
     exports.Tutorial = Tutorial;
     exports.VideoPlayer = VideoPlayer;
     exports.YouTubePlayer = YouTubePlayer;
-    exports.getTheme = getTheme;
-    exports.setTheme = setTheme;
-    exports.toggleTheme = toggleTheme;
     exports.useToast = useToast;
 
 }));