@designbasekorea/ui 0.1.11 → 0.1.12

package/dist/index.esm.js

@@ -1381,7 +1381,7 @@ var jsxRuntimeExports = jsxRuntime.exports;
 
 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}
 
-const Accordion$1 = ({ items, style = 'default', size = 'm', allowMultiple = false, defaultExpandedItems = [], defaultItemType = 'none', onItemChange, className, }) => {
+const Accordion = ({ items, style = 'default', size = 'm', allowMultiple = false, defaultExpandedItems = [], defaultItemType = 'none', onItemChange, className, }) => {
     const [expandedItems, setExpandedItems] = useState(() => {
         if (allowMultiple) {
             return defaultExpandedItems;
@@ -1472,9 +1472,7 @@ const Accordion$1 = ({ items, style = 'default', size = 'm', allowMultiple = fal
             return (jsxRuntimeExports.jsxs("div", { className: itemClasses, children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "designbase-accordion__trigger", onClick: () => !item.disabled && handleItemToggle(item.id), disabled: item.disabled, "aria-expanded": expanded, "aria-controls": `accordion-content-${item.id}`, children: [renderItemPrefix(item, index), jsxRuntimeExports.jsx("span", { className: "designbase-accordion__title", children: item.title }), jsxRuntimeExports.jsx("div", { className: "designbase-accordion__chevron", children: jsxRuntimeExports.jsx(ChevronDownIcon, { size: iconSize, color: "var(--db-icon-primary)" }) })] }), jsxRuntimeExports.jsx("div", { id: `accordion-content-${item.id}`, className: "designbase-accordion__content", "aria-hidden": !expanded, children: jsxRuntimeExports.jsx("div", { className: "designbase-accordion__content-inner", children: item.content }) })] }, item.id));
         }) }));
 };
-Accordion$1.displayName = 'Accordion';
-
-Accordion;
+Accordion.displayName = 'Accordion';
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -3542,7 +3540,7 @@ function $701a24aa0da5b062$export$ea18c227d4417cc3(props, ref) {
     };
 }
 
-const Spinner$1 = ({ type = 'circular', size = 'm', color, speed = 1, label = '로딩 중...', showLabel = false, className, ...props }) => {
+const Spinner = ({ type = 'circular', size = 'm', color, speed = 1, label = '로딩 중...', showLabel = false, className, ...props }) => {
     const classes = clsx('designbase-spinner', `designbase-spinner--${type}`, `designbase-spinner--${size}`, className);
     const style = {
         '--spinner-color': color,
@@ -3566,7 +3564,7 @@ const Spinner$1 = ({ type = 'circular', size = 'm', color, speed = 1, label = '
     };
     return (jsxRuntimeExports.jsxs("div", { className: classes, style: style, role: "status", "aria-live": "polite", "aria-busy": "true", "aria-label": showLabel ? label : undefined, ...props, children: [renderSpinner(), showLabel && label && (jsxRuntimeExports.jsx("span", { className: "designbase-spinner__label", "aria-hidden": "true", children: label }))] }));
 };
-Spinner$1.displayName = 'Spinner';
+Spinner.displayName = 'Spinner';
 
 const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth = false, disabled = false, loading = false, iconOnly = false, startIcon: StartIcon, endIcon: EndIcon, className, children, onPress, type = 'button', ...props }, forwardedRef) => {
     const ref = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
@@ -3620,7 +3618,7 @@ const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth
     };
     const renderContent = () => {
         if (loading) {
-            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Spinner$1, { type: "circular", size: size === 'xs' ? 'xs' : size === 's' ? 's' : 'm', color: getIconColor(), speed: 1, showLabel: false }), !iconOnly && jsxRuntimeExports.jsx("span", { children: "\uB85C\uB529 \uC911..." })] }));
+            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Spinner, { type: "circular", size: size === 'xs' ? 'xs' : size === 's' ? 's' : 'm', color: getIconColor(), speed: 1, showLabel: false }), !iconOnly && jsxRuntimeExports.jsx("span", { children: "\uB85C\uB529 \uC911..." })] }));
         }
         // iconOnly 버튼일 때는 children을 아이콘으로 처리
         if (iconOnly && children) {
@@ -3638,7 +3636,7 @@ const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth
 });
 Button.displayName = 'Button';
 
-const Alert$1 = ({ title, children, variant = 'info', size = 'm', showIcon = true, closable = false, actions, actionButtons, onClose, className, ...props }) => {
+const Alert = ({ title, children, variant = 'info', size = 'm', showIcon = true, closable = false, actions, actionButtons, onClose, className, ...props }) => {
     const [isVisible, setIsVisible] = useState(true);
     const handleClose = () => {
         setIsVisible(false);
@@ -3675,9 +3673,7 @@ const Alert$1 = ({ title, children, variant = 'info', size = 'm', showIcon = tru
     }, className);
     return (jsxRuntimeExports.jsxs("div", { className: classes, role: "alert", "aria-live": "polite", ...props, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-alert__content", children: [showIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-alert__icon", children: getIcon() })), jsxRuntimeExports.jsxs("div", { className: "designbase-alert__body", children: [title && (jsxRuntimeExports.jsx("div", { className: "designbase-alert__title", children: title })), jsxRuntimeExports.jsx("div", { className: "designbase-alert__message", children: children })] }), closable && (jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-alert__close", onClick: handleClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: jsxRuntimeExports.jsx(CloseIcon, { size: iconSize }) }))] }), (actions || actionButtons) && (jsxRuntimeExports.jsx("div", { className: "designbase-alert__actions", children: actionButtons ? (jsxRuntimeExports.jsx("div", { className: "designbase-alert__action-buttons", children: actionButtons.map((action, index) => (jsxRuntimeExports.jsx(Button, { size: action.size || size, variant: action.variant || 'secondary', onClick: action.onClick, disabled: action.disabled, children: action.label }, index))) })) : (actions) }))] }));
 };
-Alert$1.displayName = 'Alert';
-
-Alert;
+Alert.displayName = 'Alert';
 
 var classnames = {exports: {}};
 
@@ -4355,7 +4351,7 @@ const AudioPlayer = ({ src, title, artist, album, albumArt, size = 'm', variant
                             }), onClick: () => handlePlaylistChange(index), children: [track.albumArt && (jsxRuntimeExports.jsx("img", { src: track.albumArt, alt: track.title || 'Album Art' })), jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__playlist-track-info", children: [jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__playlist-track-title", children: track.title || 'Unknown Track' }), jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__playlist-track-artist", children: track.artist || 'Unknown Artist' })] })] }, index))) })] }))] }));
 };
 
-const Badge$1 = ({ children, size = 'm', variant = 'primary', style = 'text', count, maxCount = 99, disabled = false, className, ...props }) => {
+const Badge = ({ children, size = 'm', variant = 'primary', style = 'text', count, maxCount = 99, disabled = false, className, ...props }) => {
     // 숫자 스타일일 때 count 값을 사용
     const displayContent = style === 'number' && count !== undefined
         ? (count > maxCount ? `${maxCount}+` : count.toString())
@@ -4365,9 +4361,9 @@ const Badge$1 = ({ children, size = 'm', variant = 'primary', style = 'text', co
     }, className);
     return (jsxRuntimeExports.jsx("span", { className: classes, ...props, children: displayContent }));
 };
-Badge$1.displayName = 'Badge';
+Badge.displayName = 'Badge';
 
-const Avatar$1 = ({ src, alt, initials, icon, size = 'm', variant = 'circle', status, badge, badgeMaxCount = 99, badgeVariant = 'danger', badgeStyle = 'number', badgeText, onClick, disabled = false, className, ...props }) => {
+const Avatar = ({ src, alt, initials, icon, size = 'm', variant = 'circle', status, badge, badgeMaxCount = 99, badgeVariant = 'danger', badgeStyle = 'number', badgeText, onClick, disabled = false, className, ...props }) => {
     const [imageError, setImageError] = useState(false);
     const [imageLoading, setImageLoading] = useState(true);
     // 아이콘 크기 계산 (m이 기본값)
@@ -4444,11 +4440,9 @@ const Avatar$1 = ({ src, alt, initials, icon, size = 'm', variant = 'circle', st
         }, ...props, children: [imageLoading && shouldShowImage && (jsxRuntimeExports.jsx("div", { className: "designbase-avatar__loading", children: jsxRuntimeExports.jsx("div", { className: "designbase-avatar__skeleton" }) })), shouldShowImage && (jsxRuntimeExports.jsx("img", { src: src, alt: alt || '아바타 이미지', className: "designbase-avatar__image", onLoad: handleImageLoad, onError: handleImageError, loading: "lazy" })), shouldShowInitials && (jsxRuntimeExports.jsx("div", { className: "designbase-avatar__initials", style: generateRandomColor(initials || ''), children: getInitials() })), shouldShowIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-avatar__icon", children: icon ? (React.isValidElement(icon) ? (React.cloneElement(icon, {
                     size: iconSize,
                     color: 'currentColor'
-                })) : icon) : (jsxRuntimeExports.jsx(UserIcon, { size: iconSize, color: "currentColor" })) })), status && (jsxRuntimeExports.jsx("span", { className: clsx('designbase-avatar__status', `designbase-avatar__status--${status}`) })), badge !== undefined && (jsxRuntimeExports.jsx("div", { className: "designbase-avatar__badge", children: jsxRuntimeExports.jsx(Badge$1, { count: badgeStyle === 'text' ? undefined : badge, maxCount: badgeMaxCount, variant: badgeVariant, style: badgeStyle, size: size === 'xs' || size === 's' ? 's' : size === 'l' || size === 'xl' || size === '2xl' ? 'l' : 'm', children: badgeStyle === 'text' ? badgeText : undefined }) }))] }));
+                })) : icon) : (jsxRuntimeExports.jsx(UserIcon, { size: iconSize, color: "currentColor" })) })), status && (jsxRuntimeExports.jsx("span", { className: clsx('designbase-avatar__status', `designbase-avatar__status--${status}`) })), badge !== undefined && (jsxRuntimeExports.jsx("div", { className: "designbase-avatar__badge", children: jsxRuntimeExports.jsx(Badge, { count: badgeStyle === 'text' ? undefined : badge, maxCount: badgeMaxCount, variant: badgeVariant, style: badgeStyle, size: size === 'xs' || size === 's' ? 's' : size === 'l' || size === 'xl' || size === '2xl' ? 'l' : 'm', children: badgeStyle === 'text' ? badgeText : undefined }) }))] }));
 };
-Avatar$1.displayName = 'Avatar';
-
-Avatar;
+Avatar.displayName = 'Avatar';
 
 const Backdrop = forwardRef(({ open = false, onClick, disableBackdropClick = false, disableEscapeKeyDown = false, backgroundColor, opacity = 0.5, blur = false, blurAmount = 4, animation = 'fade', animationDuration = 300, zIndex = 1000, className, style, children, ...props }, forwardedRef) => {
     // ESC 키 처리
@@ -4496,8 +4490,6 @@ const Backdrop = forwardRef(({ open = false, onClick, disableBackdropClick = fal
 });
 Backdrop.displayName = 'Backdrop';
 
-Badge;
-
 const Banner = ({ title, description, icon, image, imageAlt, actions = [], dismissible = false, autoDismiss, size = 'm', variant = 'default', style = 'solid', position = 'top', alignment = 'left', animated = false, fullWidth = false, shadow = false, rounded = true, backgroundImage, overlayColor, overlayOpacity = 0.1, onDismiss, className, }) => {
     const [isVisible, setIsVisible] = React.useState(true);
     // 아이콘 크기 계산 (m이 기본값)
@@ -4683,7 +4675,7 @@ const BottomSheet = forwardRef(({ open = false, onClose, title, subtitle, size =
 });
 BottomSheet.displayName = 'BottomSheet';
 
-const Breadcrumbs$1 = ({ items, size = 'm', breadcrumbStyle = 'default', separator = jsxRuntimeExports.jsx(ChevronRightIcon, { size: 16 }), onItemClick, maxItems, collapseOnMobile = true, className, ...props }) => {
+const Breadcrumbs = ({ items, size = 'm', breadcrumbStyle = 'default', separator = jsxRuntimeExports.jsx(ChevronRightIcon, { size: 16 }), onItemClick, maxItems, collapseOnMobile = true, className, ...props }) => {
     const handleItemClick = (item, e) => {
         if (item.disabled || item.active) {
             e.preventDefault();
@@ -4725,11 +4717,9 @@ const Breadcrumbs$1 = ({ items, size = 'm', breadcrumbStyle = 'default', separat
     };
     return (jsxRuntimeExports.jsx("nav", { className: classes, "aria-label": "\uBE0C\uB808\uB4DC\uD06C\uB7FC \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: jsxRuntimeExports.jsx("ol", { className: "designbase-breadcrumbs__list", children: visibleItems.map(renderItem) }) }));
 };
-Breadcrumbs$1.displayName = 'Breadcrumbs';
-
-Breadcrumbs;
+Breadcrumbs.displayName = 'Breadcrumbs';
 
-const SegmentControl$1 = ({ options, defaultValue, value, size = 'm', fullWidth = false, disabled = false, className, onChange, ...props }) => {
+const SegmentControl = ({ options, defaultValue, value, size = 'm', fullWidth = false, disabled = false, className, onChange, ...props }) => {
     const [selectedValue, setSelectedValue] = useState(value ?? defaultValue ?? options[0]?.value ?? '');
     const [focusedIndex, setFocusedIndex] = useState(-1);
     const containerRef = useRef(null);
@@ -4830,7 +4820,7 @@ const SegmentControl$1 = ({ options, defaultValue, value, size = 'm', fullWidth
                     width: `${100 / options.length}%`,
                 } })] }));
 };
-SegmentControl$1.displayName = 'SegmentControl';
+SegmentControl.displayName = 'SegmentControl';
 
 const Modal = ({ isOpen, onClose, title, size = 'm', closeOnOutsideClick = true, closeOnEscape = true, children, className, overlayClassName, }) => {
     const modalRef = useRef(null);
@@ -4944,7 +4934,7 @@ const Checkbox = forwardRef(({ isSelected, defaultSelected, isIndeterminate = fa
 });
 Checkbox.displayName = 'Checkbox';
 
-const Select$1 = ({ 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', 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', maxHeight = 200, showClearButton = true, className, onChange, onFocus, onBlur, ...props }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState(value ?? defaultValue ?? (multiple ? [] : ''));
     const [searchTerm, setSearchTerm] = useState('');
@@ -5126,7 +5116,7 @@ const Select$1 = ({ value, defaultValue, options, label, placeholder = '선택
                             }), onClick: () => handleOptionSelect(option), role: "option", "aria-selected": isSelected, children: [multiple && (jsxRuntimeExports.jsx("div", { className: "designbase-select__checkbox", children: jsxRuntimeExports.jsx(Checkbox, { isSelected: isSelected, isDisabled: option.disabled, size: "s", hasLabel: false, onChange: () => handleOptionSelect(option) }) })), jsxRuntimeExports.jsx("span", { className: "designbase-select__option-label", children: option.label })] }, option.value));
                     })) }) }), helperText && !error && (jsxRuntimeExports.jsx("p", { className: "designbase-select__helper-text", children: helperText })), error && errorMessage && (jsxRuntimeExports.jsx("p", { className: "designbase-select__error-message", children: errorMessage }))] }));
 };
-Select$1.displayName = 'Select';
+Select.displayName = 'Select';
 
 const Calendar = ({ currentDate = new Date(), view = 'month', events = [], onEventAdd, onEventEdit, onEventDelete, onDateClick, onEventClick, onViewChange, onMonthChange, onYearChange, showWeekends = true, highlightToday = true, showOutsideDays = true, locale = 'ko-KR', className, style, ...props }) => {
     const [selectedDate, setSelectedDate] = useState(currentDate);
@@ -5475,7 +5465,7 @@ const Calendar = ({ currentDate = new Date(), view = 'month', events = [], onEve
                                     else {
                                         handleMonthChange('next');
                                     }
-                                }, "aria-label": "\uB2E4\uC74C", children: "\u2192" })] }), jsxRuntimeExports.jsx(SegmentControl$1, { options: [
+                                }, "aria-label": "\uB2E4\uC74C", children: "\u2192" })] }), jsxRuntimeExports.jsx(SegmentControl, { options: [
                             { value: 'year', label: '년' },
                             { value: 'month', label: '월' },
                             { value: 'week', label: '주' },
@@ -5558,7 +5548,7 @@ const Calendar = ({ currentDate = new Date(), view = 'month', events = [], onEve
                                         }) })] })] }))] }), jsxRuntimeExports.jsxs(Modal, { isOpen: showEventModal, onClose: handleCloseModal, title: isEditing ? '일정 편집' : '새 일정 추가', size: "l", children: [jsxRuntimeExports.jsx(ModalBody, { children: jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__event-form", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__form-row", children: [jsxRuntimeExports.jsx("label", { children: "\uC81C\uBAA9 *" }), jsxRuntimeExports.jsx(Input, { value: eventForm.title, onChange: (value) => setEventForm(prev => ({ ...prev, title: value })), placeholder: "\uC77C\uC815 \uC81C\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694" })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__form-row", children: [jsxRuntimeExports.jsx("label", { children: "\uC124\uBA85" }), jsxRuntimeExports.jsx(Input, { value: eventForm.description, onChange: (value) => setEventForm(prev => ({ ...prev, description: value })), placeholder: "\uC77C\uC815 \uC124\uBA85\uC744 \uC785\uB825\uD558\uC138\uC694" })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__form-row", children: [jsxRuntimeExports.jsx("label", { children: "\uB0A0\uC9DC" }), jsxRuntimeExports.jsx(Input, { type: "date", value: selectedDate.toISOString().split('T')[0], onChange: (value) => {
                                                 const newDate = new Date(value);
                                                 setSelectedDate(newDate);
-                                            } })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__form-row", children: [jsxRuntimeExports.jsx("label", { children: "\uC77C\uC815 \uD0C0\uC785" }), jsxRuntimeExports.jsx(Select$1, { value: eventForm.type, onChange: (value) => {
+                                            } })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__form-row", children: [jsxRuntimeExports.jsx("label", { children: "\uC77C\uC815 \uD0C0\uC785" }), jsxRuntimeExports.jsx(Select, { value: eventForm.type, onChange: (value) => {
                                                 const selectedValue = Array.isArray(value) ? value[0] : value;
                                                 setEventForm(prev => ({ ...prev, type: selectedValue }));
                                             }, options: [
@@ -6061,7 +6051,7 @@ const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', tra
                             }), onClick: () => goToSlide(index), disabled: disabled || readonly, title: `슬라이드 ${index + 1}로 이동`, type: "button", children: indicatorStyle === 'thumbnails' && item.thumbnail ? (jsxRuntimeExports.jsx("img", { src: item.thumbnail, alt: item.title || `썸네일 ${index + 1}`, className: "designbase-carousel__indicator-thumbnail" })) : indicatorStyle === 'numbers' ? (jsxRuntimeExports.jsx("span", { className: "designbase-carousel__indicator-number", children: index + 1 })) : indicatorStyle === 'lines' ? (jsxRuntimeExports.jsx("span", { className: "designbase-carousel__indicator-line" })) : (jsxRuntimeExports.jsx("span", { className: "designbase-carousel__indicator-dot" })) }, index))) })), showAutoPlayControl && items.length > 1 && (jsxRuntimeExports.jsx("button", { className: "designbase-carousel__autoplay-button", onClick: handleAutoPlayToggle, disabled: disabled || readonly, title: isAutoPlaying ? "자동 재생 정지" : "자동 재생 시작", type: "button", children: isAutoPlaying ? jsxRuntimeExports.jsx(PauseIcon, { size: iconSize, color: "currentColor" }) : jsxRuntimeExports.jsx(PlayIcon, { size: iconSize, color: "currentColor" }) }))] })] }));
 };
 
-const Chip$1 = ({ label, size = 'm', variant = 'default', color = 'primary', deletable = false, onDelete, onClick, startIcon, endIcon, disabled = false, selected = false, fullWidth = false, className, ...props }) => {
+const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', deletable = false, onDelete, onClick, startIcon, endIcon, disabled = false, selected = false, fullWidth = false, className, ...props }) => {
     const handleDelete = (e) => {
         e.stopPropagation();
         if (!disabled && onDelete) {
@@ -6087,11 +6077,9 @@ const Chip$1 = ({ label, size = 'm', variant = 'default', color = 'primary', del
             }
         }, ...props, children: [startIcon && (jsxRuntimeExports.jsx("span", { className: "designbase-chip__start-icon", children: startIcon })), jsxRuntimeExports.jsx("span", { className: "designbase-chip__label", children: label }), endIcon && !deletable && (jsxRuntimeExports.jsx("span", { className: "designbase-chip__end-icon", children: endIcon })), deletable && (jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-chip__delete-button", onClick: handleDelete, disabled: disabled, "aria-label": `${label} 삭제`, children: jsxRuntimeExports.jsx("i", { className: "designbase-icon-x" }) }))] }));
 };
-Chip$1.displayName = 'Chip';
+Chip.displayName = 'Chip';
 
-Chip;
-
-const Confirm$1 = ({ open, title, children, confirmText = '확인', cancelText = '취소', confirmVariant = 'primary', variant = 'info', size = 'm', showIcon = true, confirmDisabled = false, cancelDisabled = false, onConfirm, onCancel, onClose, closeOnEscape = true, closeOnOverlayClick = true, className, ...props }) => {
+const Confirm = ({ open, title, children, confirmText = '확인', cancelText = '취소', confirmVariant = 'primary', variant = 'info', size = 'm', showIcon = true, confirmDisabled = false, cancelDisabled = false, onConfirm, onCancel, onClose, closeOnEscape = true, closeOnOverlayClick = true, className, ...props }) => {
     const modalRef = useRef(null);
     // ESC 키 처리
     useEffect(() => {
@@ -6189,11 +6177,9 @@ const Confirm$1 = ({ open, title, children, confirmText = '확인', cancelText =
     const modalClasses = clsx('designbase-confirm__modal', `designbase-confirm__modal--${variant}`, `designbase-confirm__modal--${size}`);
     return (jsxRuntimeExports.jsx("div", { className: "designbase-confirm__overlay", onClick: handleOverlayClick, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? 'confirm-title' : undefined, "aria-describedby": "confirm-content", children: jsxRuntimeExports.jsxs("div", { ref: modalRef, className: modalClasses, ...props, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-confirm__header", children: [showIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-confirm__icon", children: getIcon() })), jsxRuntimeExports.jsx("div", { className: "designbase-confirm__title-area", children: title && (jsxRuntimeExports.jsx("h2", { id: "confirm-title", className: "designbase-confirm__title", children: title })) })] }), jsxRuntimeExports.jsx("div", { id: "confirm-content", className: "designbase-confirm__content", children: children }), jsxRuntimeExports.jsxs("div", { className: "designbase-confirm__footer", children: [jsxRuntimeExports.jsx(Button, { variant: "outlined", onClick: handleCancel, disabled: cancelDisabled, children: cancelText }), jsxRuntimeExports.jsx(Button, { variant: confirmVariant, onClick: handleConfirm, disabled: confirmDisabled, children: confirmText })] })] }) }));
 };
-Confirm$1.displayName = 'Confirm';
-
-Confirm;
+Confirm.displayName = 'Confirm';
 
-const Container$1 = ({ size = 'l', maxWidth, variant = 'plain', padding = 'm', margin = 'none', backgroundColor, border = false, rounded = false, shadow = false, className, children, }) => {
+const Container = ({ size = 'l', maxWidth, variant = 'plain', padding = 'm', margin = 'none', backgroundColor, border = false, rounded = false, shadow = false, className, children, }) => {
     // 크기별 최대 폭 설정 (토큰 기반)
     const getMaxWidth = () => {
         if (maxWidth)
@@ -6263,9 +6249,7 @@ const Container$1 = ({ size = 'l', maxWidth, variant = 'plain', padding = 'm', m
     return (jsxRuntimeExports.jsx("div", { className: classes, style: style, children: children }));
 };
 
-Container;
-
-const MenuItem$1 = ({ id, label, href, icon: Icon, active = false, disabled = false, badge, badgeColor = 'primary', variant = 'default', type = 'inline', size = 'm', style = 'dropdown', subItems, expanded = false, expandable = false, depth = 0, onClick, onChildClick, className, }) => {
+const MenuItem = ({ id, label, href, icon: Icon, active = false, disabled = false, badge, badgeColor = 'primary', variant = 'default', type = 'inline', size = 'm', style = 'dropdown', subItems, expanded = false, expandable = false, depth = 0, onClick, onChildClick, className, }) => {
     const [internalExpanded, setInternalExpanded] = useState(expanded);
     // expanded prop이 변경될 때 internalExpanded 업데이트
     useEffect(() => {
@@ -6320,11 +6304,11 @@ const MenuItem$1 = ({ id, label, href, icon: Icon, active = false, disabled = fa
     return (jsxRuntimeExports.jsxs("div", { className: classes, children: [jsxRuntimeExports.jsxs("div", { className: contentClasses, onClick: handleClick, children: [Icon && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-menu-item__icon', `designbase-menu-item__icon--${variant}`, {
                             'designbase-menu-item__icon--active': active,
                             'designbase-menu-item__icon--disabled': disabled,
-                        }), children: jsxRuntimeExports.jsx(Icon, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) })), jsxRuntimeExports.jsx("span", { className: "designbase-menu-item__label", children: label }), badge && (jsxRuntimeExports.jsx(Badge$1, { count: typeof badge === 'string' ? parseInt(badge) : badge, variant: badgeColor === 'neutral' ? 'secondary' : badgeColor, size: "s", style: "number" })), hasChildren && (jsxRuntimeExports.jsx("div", { className: "designbase-menu-item__expand-icon", children: isExpanded ? (jsxRuntimeExports.jsx(ChevronUpIcon, { size: 16 })) : (jsxRuntimeExports.jsx(ChevronDownIcon, { size: 16 })) }))] }), hasChildren && isExpanded && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-menu-item__children', `designbase-menu-item__children--${style}`), children: subItems.map((child) => (jsxRuntimeExports.jsx(MenuItem$1, { id: child.id, label: child.label, href: child.href, icon: child.icon, active: child.active, disabled: child.disabled, badge: child.badge, badgeColor: child.badgeColor, variant: child.variant, type: child.type, size: size, style: child.style || style, subItems: child.subItems, depth: depth + 1, onClick: () => handleChildClick(child), onChildClick: onChildClick }, child.id))) }))] }));
+                        }), children: jsxRuntimeExports.jsx(Icon, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) })), jsxRuntimeExports.jsx("span", { className: "designbase-menu-item__label", children: label }), badge && (jsxRuntimeExports.jsx(Badge, { count: typeof badge === 'string' ? parseInt(badge) : badge, variant: badgeColor === 'neutral' ? 'secondary' : badgeColor, size: "s", style: "number" })), hasChildren && (jsxRuntimeExports.jsx("div", { className: "designbase-menu-item__expand-icon", children: isExpanded ? (jsxRuntimeExports.jsx(ChevronUpIcon, { size: 16 })) : (jsxRuntimeExports.jsx(ChevronDownIcon, { size: 16 })) }))] }), hasChildren && isExpanded && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-menu-item__children', `designbase-menu-item__children--${style}`), children: subItems.map((child) => (jsxRuntimeExports.jsx(MenuItem, { id: child.id, label: child.label, href: child.href, icon: child.icon, active: child.active, disabled: child.disabled, badge: child.badge, badgeColor: child.badgeColor, variant: child.variant, type: child.type, size: size, style: child.style || style, subItems: child.subItems, depth: depth + 1, onClick: () => handleChildClick(child), onChildClick: onChildClick }, child.id))) }))] }));
 };
-MenuItem$1.displayName = 'MenuItem';
+MenuItem.displayName = 'MenuItem';
 
-const Divider$1 = ({ orientation = 'horizontal', thickness = 1, color, length, variant = 'solid', margin, className = '', style, ...props }) => {
+const Divider = ({ orientation = 'horizontal', thickness = 1, color, length, variant = 'solid', margin, className = '', style, ...props }) => {
     const baseClass = 'designbase-divider';
     const dividerClasses = [
         baseClass,
@@ -6349,7 +6333,7 @@ const Divider$1 = ({ orientation = 'horizontal', thickness = 1, color, length, v
     return (jsxRuntimeExports.jsx("div", { className: dividerClasses, style: dividerStyle, role: "separator", "aria-orientation": orientation, ...props }));
 };
 
-const ContextMenu$1 = ({ items, open, x, y, onClose, className, }) => {
+const ContextMenu = ({ items, open, x, y, onClose, className, }) => {
     const [menuStyle, setMenuStyle] = useState({});
     const [activeSubMenu, setActiveSubMenu] = useState(null);
     const menuRef = useRef(null);
@@ -6441,11 +6425,11 @@ const ContextMenu$1 = ({ items, open, x, y, onClose, className, }) => {
     }, [onClose]);
     const renderMenuItem = useCallback((item, index) => {
         if (item.isDivider) {
-            return jsxRuntimeExports.jsx(Divider$1, {}, `divider-${index}`);
+            return jsxRuntimeExports.jsx(Divider, {}, `divider-${index}`);
         }
         const hasSubMenu = item.subItems && item.subItems.length > 0;
         const isSubMenuOpen = activeSubMenu === item.id;
-        return (jsxRuntimeExports.jsxs("div", { className: "designbase-context-menu__item-wrapper", children: [jsxRuntimeExports.jsx(MenuItem$1, { id: item.id, label: item.label || '', icon: item.icon, onClick: () => handleItemClick(item), disabled: item.disabled, variant: item.variant, className: item.className }), hasSubMenu && (jsxRuntimeExports.jsx("div", { ref: (el) => (subMenuRefs.current[item.id] = el), className: clsx('designbase-context-menu__submenu', {
+        return (jsxRuntimeExports.jsxs("div", { className: "designbase-context-menu__item-wrapper", children: [jsxRuntimeExports.jsx(MenuItem, { id: item.id, label: item.label || '', icon: item.icon, onClick: () => handleItemClick(item), disabled: item.disabled, variant: item.variant, className: item.className }), hasSubMenu && (jsxRuntimeExports.jsx("div", { ref: (el) => (subMenuRefs.current[item.id] = el), className: clsx('designbase-context-menu__submenu', {
                         'designbase-context-menu__submenu--open': isSubMenuOpen,
                     }), onMouseEnter: () => setActiveSubMenu(item.id), onMouseLeave: handleSubMenuClose, children: item.subItems.map((subItem, subIndex) => renderMenuItem(subItem, subIndex)) }))] }, item.id));
     }, [activeSubMenu, handleItemClick, handleSubMenuOpen, handleSubMenuClose]);
@@ -6454,9 +6438,7 @@ const ContextMenu$1 = ({ items, open, x, y, onClose, className, }) => {
     const classes = clsx('designbase-context-menu', className);
     return (jsxRuntimeExports.jsx("div", { ref: menuRef, className: classes, style: menuStyle, role: "menu", "aria-orientation": "vertical", children: items.map((item, index) => renderMenuItem(item, index)) }));
 };
-ContextMenu$1.displayName = 'ContextMenu';
-
-ContextMenu;
+ContextMenu.displayName = 'ContextMenu';
 
 const DatePicker = ({ mode = 'single', value, onChange, minDate, maxDate, events = [], showOutsideDays = true, startOfWeek = 'sunday', size = 'm', variant = 'default', highlightWeekends = true, highlightHolidays = false, today = new Date(), locale = 'ko-KR', format = 'yyyy-MM-dd', className, disabled = false, readonly = false, 
 // 드롭다운 관련 props
@@ -6720,8 +6702,6 @@ inline = false, }) => {
         }, className), children: [jsxRuntimeExports.jsxs("div", { className: "designbase-date-picker__header", children: [jsxRuntimeExports.jsx("button", { className: "designbase-date-picker__nav-button", onClick: goToPreviousMonth, disabled: disabled || readonly, type: "button", "aria-label": "\uC774\uC804 \uB2EC", children: jsxRuntimeExports.jsx(ChevronLeftIcon, { size: iconSize, color: "currentColor" }) }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__current-month", children: currentDate.toLocaleDateString(locale, { year: 'numeric', month: 'long' }) }), jsxRuntimeExports.jsx("button", { className: "designbase-date-picker__nav-button", onClick: goToNextMonth, disabled: disabled || readonly, type: "button", "aria-label": "\uB2E4\uC74C \uB2EC", children: jsxRuntimeExports.jsx(ChevronRightIcon, { size: iconSize, color: "currentColor" }) })] }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__weekdays", children: weekdays.map(day => (jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__weekday", children: day }, day))) }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__grid", children: calendarGrid.map(date => renderDateCell(date)) }), jsxRuntimeExports.jsx("div", { className: "designbase-date-picker__footer", children: jsxRuntimeExports.jsx("button", { className: "designbase-date-picker__today-button", onClick: goToToday, disabled: disabled || readonly, type: "button", children: "\uC624\uB298" }) })] }));
 };
 
-Divider;
-
 const Drawer = ({ isOpen, onClose, title, children, position = 'right', size = 'm', showCloseButton = true, closeOnBackdropClick = true, closeOnEscape = true, animationDuration = 300, showOverlay = true, overlayClosable = true, className, style, zIndex = 1000, trapFocus = true, id, ...props }) => {
     // 아이콘 크기 계산 (m이 기본값)
     const iconSize = size === 's' ? 16 : size === 'l' ? 20 : size === 'xl' ? 24 : 18;
@@ -6799,7 +6779,7 @@ const Drawer = ({ isOpen, onClose, title, children, position = 'right', size = '
                 }), onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? `${id || 'drawer'}-title` : undefined, "aria-describedby": id ? `${id}-content` : undefined, tabIndex: -1, id: id, children: [(title || showCloseButton) && (jsxRuntimeExports.jsxs("div", { className: "designbase-drawer__header", children: [title && (jsxRuntimeExports.jsx("h2", { className: "designbase-drawer__title", id: id ? `${id}-title` : undefined, children: title })), showCloseButton && (jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "s", onClick: handleClose, className: "designbase-drawer__close-button", "aria-label": "\uB2EB\uAE30", children: jsxRuntimeExports.jsx(CloseIcon, { size: iconSize, color: "currentColor" }) }))] })), jsxRuntimeExports.jsx("div", { className: "designbase-drawer__content", id: id ? `${id}-content` : undefined, children: children })] })] }), document.body);
 };
 
-const Dropdown$1 = ({ items, trigger, label = '메뉴', size = 'm', placement = 'bottom-left', fullWidth = false, disabled = false, className, isOpen: controlledIsOpen, onToggle, ...props }) => {
+const Dropdown = ({ items, trigger, label = '메뉴', size = 'm', placement = 'bottom-left', fullWidth = false, disabled = false, className, isOpen: controlledIsOpen, onToggle, ...props }) => {
     // 아이콘 크기 계산 (m이 기본값)
     const iconSize = size === 's' ? 14 : size === 'l' ? 18 : 16;
     const [isOpen, setIsOpen] = useState(false);
@@ -6954,9 +6934,7 @@ const Dropdown$1 = ({ items, trigger, label = '메뉴', size = 'm', placement =
                         }, className: itemClasses, role: "menuitem", disabled: isDisabled, onClick: () => handleItemClick(item), onFocus: () => setFocusedIndex(index), children: [item.icon && (jsxRuntimeExports.jsx("span", { className: "designbase-dropdown__item-icon", children: jsxRuntimeExports.jsx(item.icon, { size: iconSize, color: "currentColor" }) })), jsxRuntimeExports.jsx("span", { className: "designbase-dropdown__item-label", children: item.label })] }, item.id));
                 }) })] }));
 };
-Dropdown$1.displayName = 'Dropdown';
-
-Dropdown;
+Dropdown.displayName = 'Dropdown';
 
 const Dropzone = ({ size = 'm', variant = 'default', showIcon = true, icon, image, title = '파일을 드래그하여 업로드하거나 클릭하여 선택하세요', description, buttonText = '파일 선택', showButton = false, accept, maxSize, multiple = false, isDragOver: controlledIsDragOver, disabled = false, readonly = false, onFileSelect, onDragOver, onDragLeave, onDrop, onClick, className, children, }) => {
     const [internalIsDragOver, setInternalIsDragOver] = useState(false);
@@ -7073,7 +7051,7 @@ const Dropzone = ({ size = 'm', variant = 'default', showIcon = true, icon, imag
         }, className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, children: [jsxRuntimeExports.jsx("input", { ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileInputChange, disabled: disabled || readonly, style: { display: 'none' } }), children || (jsxRuntimeExports.jsxs("div", { className: "designbase-dropzone__content", children: [image ? (jsxRuntimeExports.jsx("div", { className: "designbase-dropzone__image", children: jsxRuntimeExports.jsx("img", { src: image, alt: "Upload illustration" }) })) : showIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-dropzone__icon", children: icon || defaultIcon })), title && (jsxRuntimeExports.jsx("div", { className: "designbase-dropzone__title", children: title })), getDescription() && (jsxRuntimeExports.jsx("div", { className: "designbase-dropzone__description", children: getDescription() })), showButton && (jsxRuntimeExports.jsx("button", { className: "designbase-dropzone__button", type: "button", disabled: disabled || readonly, children: buttonText }))] }))] }));
 };
 
-const EmptyState$1 = ({ variant = 'no-data', size = 'm', title, description, icon: CustomIcon, iconSize, actionText, onAction, secondaryActionText, onSecondaryAction, action, image, imageAlt, className, }) => {
+const EmptyState = ({ variant = 'no-data', size = 'm', title, description, icon: CustomIcon, iconSize, actionText, onAction, secondaryActionText, onSecondaryAction, action, image, imageAlt, className, }) => {
     const getDefaultIcon = () => {
         const defaultIconSize = iconSize || (() => {
             switch (size) {
@@ -7106,11 +7084,9 @@ const EmptyState$1 = ({ variant = 'no-data', size = 'm', title, description, ico
     const classes = clsx('designbase-empty-state', `designbase-empty-state--${variant}`, `designbase-empty-state--${size}`, className);
     return (jsxRuntimeExports.jsx("div", { className: classes, role: "status", "aria-live": "polite", children: jsxRuntimeExports.jsxs("div", { className: "designbase-empty-state__content", children: [image ? (jsxRuntimeExports.jsx("div", { className: "designbase-empty-state__image", children: jsxRuntimeExports.jsx("img", { src: image, alt: imageAlt || title, className: "designbase-empty-state__image-element" }) })) : (jsxRuntimeExports.jsx("div", { className: "designbase-empty-state__icon", children: getDefaultIcon() })), jsxRuntimeExports.jsx("h3", { className: "designbase-empty-state__title", children: title }), description && (jsxRuntimeExports.jsx("div", { className: "designbase-empty-state__description", children: description })), (action || actionText || secondaryActionText) && (jsxRuntimeExports.jsx("div", { className: "designbase-empty-state__actions", children: action ? (action) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [actionText && onAction && (jsxRuntimeExports.jsx(Button, { variant: variant === 'onboarding' ? 'primary' : 'secondary', size: size, onPress: onAction, children: actionText })), secondaryActionText && onSecondaryAction && (jsxRuntimeExports.jsx(Button, { variant: "tertiary", size: size, onPress: onSecondaryAction, children: secondaryActionText }))] })) }))] }) }));
 };
-EmptyState$1.displayName = 'EmptyState';
-
-EmptyState;
+EmptyState.displayName = 'EmptyState';
 
-const Progressbar$1 = ({ value, max = 100, min = 0, size = 'm', variant = 'default', style = 'solid', showLabel = false, label, labelPosition = 'top', fullWidth = false, disabled = false, className, ...props }) => {
+const Progressbar = ({ value, max = 100, min = 0, size = 'm', variant = 'default', style = 'solid', showLabel = false, label, labelPosition = 'top', fullWidth = false, disabled = false, className, ...props }) => {
     // 값 범위 제한
     const clampedValue = Math.max(min, Math.min(max, value));
     const percentage = ((clampedValue - min) / (max - min)) * 100;
@@ -7136,7 +7112,7 @@ const Progressbar$1 = ({ value, max = 100, min = 0, size = 'm', variant = 'defau
     const displayLabel = getDisplayLabel();
     return (jsxRuntimeExports.jsx("div", { className: classes, role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": min, "aria-valuemax": max, "aria-label": label || `진행률 ${Math.round(percentage)}%`, ...props, children: jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [displayLabel && labelPosition === 'top' && (jsxRuntimeExports.jsx("div", { className: labelClasses, children: displayLabel })), jsxRuntimeExports.jsx("div", { className: trackClasses, children: jsxRuntimeExports.jsx("div", { className: fillClasses, style: { width: `${percentage}%` }, children: displayLabel && labelPosition === 'inside' && (jsxRuntimeExports.jsx("span", { className: "designbase-progressbar__fill-label", children: displayLabel })) }) }), displayLabel && labelPosition === 'bottom' && (jsxRuntimeExports.jsx("div", { className: labelClasses, children: displayLabel }))] }) }));
 };
-Progressbar$1.displayName = 'Progressbar';
+Progressbar.displayName = 'Progressbar';
 
 const FileUploader = ({ size = 'm', variant = 'default', accept, maxSize, multiple = false, showFileList = true, showProgress = true, disabled = false, readonly = false, onUpload, onRemove, onRetry, className, }) => {
     const [uploadedFiles, setUploadedFiles] = useState([]);
@@ -7234,7 +7210,7 @@ const FileUploader = ({ size = 'm', variant = 'default', accept, maxSize, multip
             case 'pending':
                 return (jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntimeExports.jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2", fill: "none" }) }));
             case 'uploading':
-                return jsxRuntimeExports.jsx(Spinner$1, { type: "circular", size: "s" });
+                return jsxRuntimeExports.jsx(Spinner, { type: "circular", size: "s" });
             case 'success':
                 return (jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntimeExports.jsx("path", { d: "M13 5L6 12L3 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
             case 'error':
@@ -7246,7 +7222,7 @@ const FileUploader = ({ size = 'm', variant = 'default', accept, maxSize, multip
     return (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-file-uploader', `designbase-file-uploader--size-${size}`, `designbase-file-uploader--variant-${variant}`, {
             'designbase-file-uploader--disabled': disabled,
             'designbase-file-uploader--readonly': readonly,
-        }, className), children: [jsxRuntimeExports.jsx(Dropzone, { size: size, variant: variant, accept: accept, maxSize: maxSize, multiple: multiple, disabled: disabled, readonly: readonly, onFileSelect: handleFileSelect }), showFileList && uploadedFiles.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-list", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-list-title", children: ["\uC5C5\uB85C\uB4DC\uB41C \uD30C\uC77C\uB4E4 (", uploadedFiles.length, "\uAC1C)"] }), jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-items", children: uploadedFiles.map((uploadFile) => (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-file-uploader__file-item', `designbase-file-uploader__file-item--${uploadFile.status}`), children: [jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-info", children: [jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-icon", children: getStatusIcon(uploadFile.status) }), jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-details", children: [jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-name", children: uploadFile.file.name }), jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-size", children: formatFileSize(uploadFile.file.size) }), uploadFile.error && (jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-error", children: uploadFile.error }))] })] }), showProgress && uploadFile.status === 'uploading' && (jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__progress", children: jsxRuntimeExports.jsx(Progressbar$1, { value: uploadFile.progress || 0, size: "s", variant: "primary", style: "solid", showLabel: true, labelPosition: "inside", fullWidth: true }) })), jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-actions", children: [uploadFile.status === 'error' && (jsxRuntimeExports.jsx("button", { className: "designbase-file-uploader__retry-button", onClick: () => handleRetry(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC7AC\uC2DC\uB3C4" })), jsxRuntimeExports.jsx("button", { className: "designbase-file-uploader__remove-button", onClick: () => handleRemove(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC0AD\uC81C" })] })] }, uploadFile.id))) })] }))] }));
+        }, className), children: [jsxRuntimeExports.jsx(Dropzone, { size: size, variant: variant, accept: accept, maxSize: maxSize, multiple: multiple, disabled: disabled, readonly: readonly, onFileSelect: handleFileSelect }), showFileList && uploadedFiles.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-list", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-list-title", children: ["\uC5C5\uB85C\uB4DC\uB41C \uD30C\uC77C\uB4E4 (", uploadedFiles.length, "\uAC1C)"] }), jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-items", children: uploadedFiles.map((uploadFile) => (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-file-uploader__file-item', `designbase-file-uploader__file-item--${uploadFile.status}`), children: [jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-info", children: [jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-icon", children: getStatusIcon(uploadFile.status) }), jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-details", children: [jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-name", children: uploadFile.file.name }), jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-size", children: formatFileSize(uploadFile.file.size) }), uploadFile.error && (jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__file-error", children: uploadFile.error }))] })] }), showProgress && uploadFile.status === 'uploading' && (jsxRuntimeExports.jsx("div", { className: "designbase-file-uploader__progress", children: jsxRuntimeExports.jsx(Progressbar, { value: uploadFile.progress || 0, size: "s", variant: "primary", style: "solid", showLabel: true, labelPosition: "inside", fullWidth: true }) })), jsxRuntimeExports.jsxs("div", { className: "designbase-file-uploader__file-actions", children: [uploadFile.status === 'error' && (jsxRuntimeExports.jsx("button", { className: "designbase-file-uploader__retry-button", onClick: () => handleRetry(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC7AC\uC2DC\uB3C4" })), jsxRuntimeExports.jsx("button", { className: "designbase-file-uploader__remove-button", onClick: () => handleRemove(uploadFile.id), disabled: disabled || readonly, type: "button", children: "\uC0AD\uC81C" })] })] }, uploadFile.id))) })] }))] }));
 };
 
 const FloatingActionButton = forwardRef(({ size = 'm', variant = 'primary', icon, disabled = false, onClick, className, style, ...props }, forwardedRef) => {
@@ -7465,7 +7441,7 @@ const Form = ({ fields, layout = 'vertical', size = 'm', variant = 'default', on
             case 'textarea':
                 return (jsxRuntimeExports.jsx(Textarea, { ...commonProps, rows: 4, maxLength: field.maxLength, minLength: field.minLength }));
             case 'select':
-                return (jsxRuntimeExports.jsx(Select$1, { ...commonProps, options: field.options || [], multiple: field.multiple }));
+                return (jsxRuntimeExports.jsx(Select, { ...commonProps, options: field.options || [], multiple: field.multiple }));
             case 'radio':
                 if (field.radioGroup) {
                     return (jsxRuntimeExports.jsx("div", { className: "designbase-form__radio-group", children: field.options?.map((option, index) => (jsxRuntimeExports.jsx(Radio, { name: field.name, value: option.value, isSelected: fieldValue === option.value, isDisabled: option.disabled || field.disabled, onChange: () => handleFieldChange(field.name, option.value), children: option.label }, `${field.name}-${option.value}`))) }));
@@ -7502,7 +7478,7 @@ const Form = ({ fields, layout = 'vertical', size = 'm', variant = 'default', on
     return (jsxRuntimeExports.jsxs("form", { ref: formRef, className: classes, style: style, onSubmit: handleSubmit, children: [(title || description) && (jsxRuntimeExports.jsxs("div", { className: "designbase-form__header", children: [title && jsxRuntimeExports.jsx("h3", { className: "designbase-form__title", children: title }), description && jsxRuntimeExports.jsx("p", { className: "designbase-form__description", children: description })] })), jsxRuntimeExports.jsx("div", { className: "designbase-form__fields", children: fields.map(field => (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-form__field-wrapper', `designbase-form__field-wrapper--${field.type}`), children: [field.label && (jsxRuntimeExports.jsxs("label", { className: "designbase-form__label", htmlFor: field.name, children: [field.label, field.required && jsxRuntimeExports.jsx("span", { className: "designbase-form__required", children: "*" })] })), renderField(field), touched[field.name] && errors[field.name] && (jsxRuntimeExports.jsx("div", { className: "designbase-form__error", children: errors[field.name] })), field.helpText && !errors[field.name] && (jsxRuntimeExports.jsx("div", { className: "designbase-form__help", children: field.helpText }))] }, field.name))) }), jsxRuntimeExports.jsxs("div", { className: "designbase-form__actions", children: [jsxRuntimeExports.jsx(Button, { type: "submit", variant: "primary", size: size, loading: submitLoading, disabled: submitDisabled, children: submitText }), showReset && (jsxRuntimeExports.jsx(Button, { type: "button", variant: "secondary", size: size, onClick: handleReset, children: resetText }))] })] }));
 };
 
-const Gradient$1 = ({ colors, direction = 'to-right', size = 'm', variant = 'default', animationDuration = 3, animationDelay = 0, fullWidth = false, fullHeight = false, className, children, }) => {
+const Gradient = ({ colors, direction = 'to-right', size = 'm', variant = 'default', animationDuration = 3, animationDelay = 0, fullWidth = false, fullHeight = false, className, children, }) => {
     const generateGradientStyle = () => {
         if (colors.length === 0)
             return {};
@@ -7595,8 +7571,6 @@ const Gradient$1 = ({ colors, direction = 'to-right', size = 'm', variant = 'def
     return (jsxRuntimeExports.jsx("div", { className: classes, style: getStyle(), children: children }));
 };
 
-Gradient;
-
 const Grid = ({ fixed = false, noPadding = false, className, style, children, }) => {
     const classes = clsx('designbase-grid', {
         'designbase-grid--fixed': fixed,
@@ -7664,7 +7638,7 @@ const HeroFeature = ({ title, subtitle, description, image, imageAlt, background
                 default: return 'text';
             }
         };
-        return (jsxRuntimeExports.jsx(Badge$1, { variant: getBadgeVariant(badge.color || 'primary'), style: getBadgeStyle(badge.variant || 'solid'), size: "m", className: "designbase-hero-feature__badge", children: badge.text }));
+        return (jsxRuntimeExports.jsx(Badge, { variant: getBadgeVariant(badge.color || 'primary'), style: getBadgeStyle(badge.variant || 'solid'), size: "m", className: "designbase-hero-feature__badge", children: badge.text }));
     };
     const renderButtons = () => {
         if (buttons.length === 0)
@@ -8186,7 +8160,7 @@ const DesignBaseLogoMark = ({ size = 38, color = 'currentColor', className, }) =
 };
 DesignBaseLogoMark.displayName = 'DesignBaseLogoMark';
 
-const Logo$1 = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', variant = 'default', clickable = false, href, target = '_self', fullWidth = false, className, onClick, ...props }) => {
+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}`, {
         'designbase-logo--clickable': clickable || href,
         'designbase-logo--full-width': fullWidth,
@@ -8245,9 +8219,7 @@ const Logo$1 = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', vari
     }
     return logoContent;
 };
-Logo$1.displayName = 'Logo';
-
-Logo;
+Logo.displayName = 'Logo';
 
 const MarkdownEditor = ({ size = 'm', variant = 'default', mode = 'preview', // 기본값을 preview로 변경
 theme = 'light', value = '', placeholder = '마크다운을 입력하세요...', minHeight = 200, maxHeight = 600, autoHeight = false, readonly = false, disabled = false, showToolbar = true, toolbarItems = [], showStatus = true, showWordCount = true, showLineCount = true, autoSave = false, autoSaveInterval = 30000, // 30초
@@ -8676,9 +8648,7 @@ const Masonry = ({ images, columns = 3, spacing = 'md', ratio = 'auto', fit = 'c
                 })), currentIndex: selectedImageIndex, isOpen: true, onOpenChange: handleLightboxClose, onImageChange: handleLightboxNavigate }))] }));
 };
 
-MenuItem;
-
-const SearchBar$1 = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = SearchIcon, clearIcon: ClearIconComponent = CloseIcon, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...props }) => {
+const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = SearchIcon, clearIcon: ClearIconComponent = CloseIcon, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...props }) => {
     const [internalValue, setInternalValue] = useState(defaultValue);
     const inputRef = useRef(null);
     const currentValue = value !== undefined ? value : internalValue;
@@ -8720,9 +8690,9 @@ const SearchBar$1 = ({ value, defaultValue = '', placeholder = '검색...', size
     });
     return (jsxRuntimeExports.jsx("div", { className: classes, role: "search", children: jsxRuntimeExports.jsxs("div", { className: "designbase-search-bar__container", children: [jsxRuntimeExports.jsx("div", { className: "designbase-search-bar__search-icon", children: jsxRuntimeExports.jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsxRuntimeExports.jsx("input", { ref: inputRef, type: "text", className: inputClasses, value: currentValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825", ...props }), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsxRuntimeExports.jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }) }));
 };
-SearchBar$1.displayName = 'SearchBar';
+SearchBar.displayName = 'SearchBar';
 
-const Navbar$1 = ({ size = 'm', variant = 'default', position = 'static', logo, onLogoClick, items = [], onItemClick, userMenuItems = [], onUserMenuItemClick, userProfile, onAuthClick, isAuthenticated = false, showSearch = false, onSearch, searchPlaceholder = '검색...', fullWidth = false, shadow = false, className, ...props }) => {
+const Navbar = ({ size = 'm', variant = 'default', position = 'static', logo, onLogoClick, items = [], onItemClick, userMenuItems = [], onUserMenuItemClick, userProfile, onAuthClick, isAuthenticated = false, showSearch = false, onSearch, searchPlaceholder = '검색...', fullWidth = false, shadow = false, className, ...props }) => {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
@@ -8819,7 +8789,7 @@ const Navbar$1 = ({ size = 'm', variant = 'default', position = 'static', logo,
         }
     };
     const renderNavItem = (item) => renderMenuItem(item, 0);
-    return (jsxRuntimeExports.jsxs("nav", { className: classes, role: "navigation", "aria-label": "\uBA54\uC778 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: [jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [jsxRuntimeExports.jsx("div", { className: "designbase-navbar__brand", children: jsxRuntimeExports.jsx("div", { className: "designbase-navbar__logo", onClick: onLogoClick, role: onLogoClick ? 'button' : undefined, tabIndex: onLogoClick ? 0 : undefined, children: logo || jsxRuntimeExports.jsx(Logo$1, { size: size === 's' ? 's' : size === 'l' ? 'l' : 'm' }) }) }), jsxRuntimeExports.jsx("div", { className: "designbase-navbar__nav", children: jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__nav-list", children: items.map(renderNavItem) }) }), showSearch && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__search", children: jsxRuntimeExports.jsx(SearchBar$1, { placeholder: searchPlaceholder, value: searchQuery, onChange: setSearchQuery, onSearch: onSearch, size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', variant: "outlined" }) })), jsxRuntimeExports.jsx("div", { className: "designbase-navbar__user-menu", children: isAuthenticated && userProfile ? (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__user-dropdown", children: [jsxRuntimeExports.jsxs("button", { className: "designbase-navbar__user-toggle", onClick: handleUserMenuToggle, "aria-expanded": isUserMenuOpen, children: [jsxRuntimeExports.jsx(Avatar$1, { src: userProfile.avatar, alt: userProfile.name, initials: userProfile.name, size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', badge: userProfile.badge, badgeVariant: userProfile.badgeVariant, badgeStyle: userProfile.badgeStyle, badgeText: userProfile.badgeText }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__user-name", children: userProfile.name }), jsxRuntimeExports.jsx(ChevronDownIcon, { size: 12 })] }), isUserMenuOpen && (jsxRuntimeExports.jsxs("ul", { className: "designbase-navbar__user-dropdown-menu", children: [userProfile.email && (jsxRuntimeExports.jsx("li", { className: "designbase-navbar__user-info", children: jsxRuntimeExports.jsx("span", { className: "designbase-navbar__user-email", children: userProfile.email }) })), userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__user-dropdown-item', {
+    return (jsxRuntimeExports.jsxs("nav", { className: classes, role: "navigation", "aria-label": "\uBA54\uC778 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: [jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [jsxRuntimeExports.jsx("div", { className: "designbase-navbar__brand", children: jsxRuntimeExports.jsx("div", { className: "designbase-navbar__logo", onClick: onLogoClick, role: onLogoClick ? 'button' : undefined, tabIndex: onLogoClick ? 0 : undefined, children: logo || jsxRuntimeExports.jsx(Logo, { size: size === 's' ? 's' : size === 'l' ? 'l' : 'm' }) }) }), jsxRuntimeExports.jsx("div", { className: "designbase-navbar__nav", children: jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__nav-list", children: items.map(renderNavItem) }) }), showSearch && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__search", children: jsxRuntimeExports.jsx(SearchBar, { placeholder: searchPlaceholder, value: searchQuery, onChange: setSearchQuery, onSearch: onSearch, size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', variant: "outlined" }) })), jsxRuntimeExports.jsx("div", { className: "designbase-navbar__user-menu", children: isAuthenticated && userProfile ? (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__user-dropdown", children: [jsxRuntimeExports.jsxs("button", { className: "designbase-navbar__user-toggle", onClick: handleUserMenuToggle, "aria-expanded": isUserMenuOpen, children: [jsxRuntimeExports.jsx(Avatar, { src: userProfile.avatar, alt: userProfile.name, initials: userProfile.name, size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', badge: userProfile.badge, badgeVariant: userProfile.badgeVariant, badgeStyle: userProfile.badgeStyle, badgeText: userProfile.badgeText }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__user-name", children: userProfile.name }), jsxRuntimeExports.jsx(ChevronDownIcon, { size: 12 })] }), isUserMenuOpen && (jsxRuntimeExports.jsxs("ul", { className: "designbase-navbar__user-dropdown-menu", children: [userProfile.email && (jsxRuntimeExports.jsx("li", { className: "designbase-navbar__user-info", children: jsxRuntimeExports.jsx("span", { className: "designbase-navbar__user-email", children: userProfile.email }) })), userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__user-dropdown-item', {
                                                     'designbase-navbar__user-dropdown-item--disabled': item.disabled,
                                                 }), onClick: (e) => {
                                                     if (item.disabled) {
@@ -8827,7 +8797,7 @@ const Navbar$1 = ({ size = 'm', variant = 'default', position = 'static', logo,
                                                         return;
                                                     }
                                                     handleUserMenuItemClick(item);
-                                                }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] }) }, item.id)))] }))] })) : (jsxRuntimeExports.jsx("button", { className: "designbase-navbar__auth-button", onClick: onAuthClick, children: "\uB85C\uADF8\uC778" })) }), jsxRuntimeExports.jsxs("button", { className: "designbase-navbar__mobile-toggle", onClick: handleMobileMenuToggle, "aria-expanded": isMobileMenuOpen, "aria-label": "\uBA54\uB274 \uC5F4\uAE30", children: [jsxRuntimeExports.jsx("span", { className: "designbase-navbar__mobile-toggle-line" }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__mobile-toggle-line" }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__mobile-toggle-line" })] })] }), isMobileMenuOpen && (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-menu", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-menu-header", children: [jsxRuntimeExports.jsx("h3", { children: "\uBA54\uB274" }), jsxRuntimeExports.jsx("button", { className: "designbase-navbar__mobile-menu-close", onClick: handleMobileMenuToggle, "aria-label": "\uBA54\uB274 \uB2EB\uAE30", children: jsxRuntimeExports.jsx("i", { className: "designbase-icon-x" }) })] }), showSearch && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-search", children: jsxRuntimeExports.jsx(SearchBar$1, { placeholder: searchPlaceholder, value: searchQuery, onChange: setSearchQuery, onSearch: onSearch, size: "s", variant: "outlined", fullWidth: true }) })), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__mobile-nav-list", children: items.map((item) => (jsxRuntimeExports.jsxs("li", { className: "designbase-navbar__mobile-nav-item", children: [jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__mobile-nav-link', {
+                                                }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] }) }, item.id)))] }))] })) : (jsxRuntimeExports.jsx("button", { className: "designbase-navbar__auth-button", onClick: onAuthClick, children: "\uB85C\uADF8\uC778" })) }), jsxRuntimeExports.jsxs("button", { className: "designbase-navbar__mobile-toggle", onClick: handleMobileMenuToggle, "aria-expanded": isMobileMenuOpen, "aria-label": "\uBA54\uB274 \uC5F4\uAE30", children: [jsxRuntimeExports.jsx("span", { className: "designbase-navbar__mobile-toggle-line" }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__mobile-toggle-line" }), jsxRuntimeExports.jsx("span", { className: "designbase-navbar__mobile-toggle-line" })] })] }), isMobileMenuOpen && (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-menu", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-menu-header", children: [jsxRuntimeExports.jsx("h3", { children: "\uBA54\uB274" }), jsxRuntimeExports.jsx("button", { className: "designbase-navbar__mobile-menu-close", onClick: handleMobileMenuToggle, "aria-label": "\uBA54\uB274 \uB2EB\uAE30", children: jsxRuntimeExports.jsx("i", { className: "designbase-icon-x" }) })] }), showSearch && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-search", children: jsxRuntimeExports.jsx(SearchBar, { placeholder: searchPlaceholder, value: searchQuery, onChange: setSearchQuery, onSearch: onSearch, size: "s", variant: "outlined", fullWidth: true }) })), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__mobile-nav-list", children: items.map((item) => (jsxRuntimeExports.jsxs("li", { className: "designbase-navbar__mobile-nav-item", children: [jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__mobile-nav-link', {
                                         'designbase-navbar__mobile-nav-link--active': item.active,
                                         'designbase-navbar__mobile-nav-link--disabled': item.disabled,
                                     }), onClick: (e) => {
@@ -8855,11 +8825,9 @@ const Navbar$1 = ({ size = 'm', variant = 'default', position = 'static', logo,
                                             handleUserMenuItemClick(item);
                                         }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] }) }, item.id))) })] }))] }))] }));
 };
-Navbar$1.displayName = 'Navbar';
+Navbar.displayName = 'Navbar';
 
-Navbar;
-
-const Pagination$1 = ({ currentPage, totalPages, totalItems, pageSize = 10, pageSizeOptions = [10, 20, 50, 100], onPageChange, onPageSizeChange, size = 'm', variant = 'default', alignment = 'center', siblingCount = 1, boundaryCount = 1, showPreviousNext = true, showFirstLast = false, showPageSizeSelector = false, showTotal = false, totalTemplate, disabled = false, fullWidth = false, className, ...props }) => {
+const Pagination = ({ currentPage, totalPages, totalItems, pageSize = 10, pageSizeOptions = [10, 20, 50, 100], onPageChange, onPageSizeChange, size = 'm', variant = 'default', alignment = 'center', siblingCount = 1, boundaryCount = 1, showPreviousNext = true, showFirstLast = false, showPageSizeSelector = false, showTotal = false, totalTemplate, disabled = false, fullWidth = false, className, ...props }) => {
     // 페이지 범위 계산
     const getPageNumbers = () => {
         const totalNumbers = siblingCount * 2 + 3; // 이전, 다음, 현재, 경계 페이지들
@@ -8924,7 +8892,7 @@ const Pagination$1 = ({ currentPage, totalPages, totalItems, pageSize = 10, page
                     'designbase-pagination__button--active': isActive,
                 }), onClick: () => handlePageClick(pageNumber), disabled: disabled, "aria-current": isActive ? 'page' : undefined, "aria-label": `페이지 ${pageNumber}로 이동`, children: pageNumber }) }, pageNumber));
     };
-    return (jsxRuntimeExports.jsx("div", { className: classes, role: "navigation", "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [showTotal && totalItems && (jsxRuntimeExports.jsx("div", { className: "designbase-pagination__total", children: getTotalTemplate() })), jsxRuntimeExports.jsx("nav", { className: "designbase-pagination__nav", "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: jsxRuntimeExports.jsxs("ul", { className: "designbase-pagination__list", children: [showFirstLast && !isFirstPage && (jsxRuntimeExports.jsx("li", { className: "designbase-pagination__item", children: jsxRuntimeExports.jsx("button", { className: "designbase-pagination__button designbase-pagination__button--first", onClick: () => handlePageClick(1), disabled: disabled, "aria-label": "\uCCAB \uD398\uC774\uC9C0\uB85C \uC774\uB3D9", children: jsxRuntimeExports.jsx(ArrowBarLeftIcon, { size: 16 }) }) })), showPreviousNext && !isFirstPage && (jsxRuntimeExports.jsx("li", { className: "designbase-pagination__item", children: jsxRuntimeExports.jsx("button", { className: "designbase-pagination__button designbase-pagination__button--previous", onClick: () => handlePageClick(currentPage - 1), disabled: disabled, "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0\uB85C \uC774\uB3D9", children: jsxRuntimeExports.jsx(ChevronLeftIcon, { size: 16 }) }) })), pageNumbers.map(renderPageButton), showPreviousNext && !isLastPage && (jsxRuntimeExports.jsx("li", { className: "designbase-pagination__item", children: jsxRuntimeExports.jsx("button", { className: "designbase-pagination__button designbase-pagination__button--next", onClick: () => handlePageClick(currentPage + 1), disabled: disabled, "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0\uB85C \uC774\uB3D9", children: jsxRuntimeExports.jsx(ChevronRightIcon, { size: 16 }) }) })), showFirstLast && !isLastPage && (jsxRuntimeExports.jsx("li", { className: "designbase-pagination__item", children: jsxRuntimeExports.jsx("button", { className: "designbase-pagination__button designbase-pagination__button--last", onClick: () => handlePageClick(totalPages), disabled: disabled, "aria-label": "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0\uB85C \uC774\uB3D9", children: jsxRuntimeExports.jsx(ArrowBarRightIcon, { size: 16 }) }) }))] }) }), showPageSizeSelector && onPageSizeChange && (jsxRuntimeExports.jsx("div", { className: "designbase-pagination__page-size", children: jsxRuntimeExports.jsxs("label", { className: "designbase-pagination__page-size-label", children: ["\uD398\uC774\uC9C0\uB2F9:", jsxRuntimeExports.jsx(Select$1, { value: pageSize.toString(), options: pageSizeOptions.map(option => ({
+    return (jsxRuntimeExports.jsx("div", { className: classes, role: "navigation", "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [showTotal && totalItems && (jsxRuntimeExports.jsx("div", { className: "designbase-pagination__total", children: getTotalTemplate() })), jsxRuntimeExports.jsx("nav", { className: "designbase-pagination__nav", "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: jsxRuntimeExports.jsxs("ul", { className: "designbase-pagination__list", children: [showFirstLast && !isFirstPage && (jsxRuntimeExports.jsx("li", { className: "designbase-pagination__item", children: jsxRuntimeExports.jsx("button", { className: "designbase-pagination__button designbase-pagination__button--first", onClick: () => handlePageClick(1), disabled: disabled, "aria-label": "\uCCAB \uD398\uC774\uC9C0\uB85C \uC774\uB3D9", children: jsxRuntimeExports.jsx(ArrowBarLeftIcon, { size: 16 }) }) })), showPreviousNext && !isFirstPage && (jsxRuntimeExports.jsx("li", { className: "designbase-pagination__item", children: jsxRuntimeExports.jsx("button", { className: "designbase-pagination__button designbase-pagination__button--previous", onClick: () => handlePageClick(currentPage - 1), disabled: disabled, "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0\uB85C \uC774\uB3D9", children: jsxRuntimeExports.jsx(ChevronLeftIcon, { size: 16 }) }) })), pageNumbers.map(renderPageButton), showPreviousNext && !isLastPage && (jsxRuntimeExports.jsx("li", { className: "designbase-pagination__item", children: jsxRuntimeExports.jsx("button", { className: "designbase-pagination__button designbase-pagination__button--next", onClick: () => handlePageClick(currentPage + 1), disabled: disabled, "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0\uB85C \uC774\uB3D9", children: jsxRuntimeExports.jsx(ChevronRightIcon, { size: 16 }) }) })), showFirstLast && !isLastPage && (jsxRuntimeExports.jsx("li", { className: "designbase-pagination__item", children: jsxRuntimeExports.jsx("button", { className: "designbase-pagination__button designbase-pagination__button--last", onClick: () => handlePageClick(totalPages), disabled: disabled, "aria-label": "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0\uB85C \uC774\uB3D9", children: jsxRuntimeExports.jsx(ArrowBarRightIcon, { size: 16 }) }) }))] }) }), showPageSizeSelector && onPageSizeChange && (jsxRuntimeExports.jsx("div", { className: "designbase-pagination__page-size", children: jsxRuntimeExports.jsxs("label", { className: "designbase-pagination__page-size-label", children: ["\uD398\uC774\uC9C0\uB2F9:", jsxRuntimeExports.jsx(Select, { value: pageSize.toString(), options: pageSizeOptions.map(option => ({
                                     value: option.toString(),
                                     label: option.toString()
                                 })), onChange: (value) => {
@@ -8935,11 +8903,9 @@ const Pagination$1 = ({ currentPage, totalPages, totalItems, pageSize = 10, page
                                     }
                                 }, disabled: disabled, size: size, className: "designbase-pagination__page-size-select", searchable: false, multiple: false, showClearButton: false })] }) }))] }) }));
 };
-Pagination$1.displayName = 'Pagination';
-
-Pagination;
+Pagination.displayName = 'Pagination';
 
-const Popover$1 = ({ content, children, position = 'top', size = 'm', variant = 'default', trigger = 'click', delay = 200, hideDelay = 0, alwaysShow = false, disabled = false, maxWidth = 300, showArrow = true, closeOnOutsideClick = true, closeOnEscape = true, open: controlledOpen, onOpenChange, showCloseButton = true, className, ...props }) => {
+const Popover = ({ content, children, position = 'top', size = 'm', variant = 'default', trigger = 'click', delay = 200, hideDelay = 0, alwaysShow = false, disabled = false, maxWidth = 300, showArrow = true, closeOnOutsideClick = true, closeOnEscape = true, open: controlledOpen, onOpenChange, showCloseButton = true, className, ...props }) => {
     const [internalOpen, setInternalOpen] = useState(false);
     const [popoverStyle, setPopoverStyle] = useState({});
     const [arrowStyle, setArrowStyle] = useState({});
@@ -9236,11 +9202,9 @@ const Popover$1 = ({ content, children, position = 'top', size = 'm', variant =
     });
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [enhancedChildren, isOpen && (jsxRuntimeExports.jsxs("div", { ref: popoverRef, className: classes, style: popoverStyle, role: "dialog", "aria-modal": "false", ...props, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-popover__content", children: [showCloseButton && (jsxRuntimeExports.jsx("button", { className: "designbase-popover__close-button", onClick: handleCloseClick, "aria-label": "\uD31D\uC624\uBC84 \uB2EB\uAE30", type: "button" })), content] }), showArrow && (jsxRuntimeExports.jsx("div", { className: arrowClasses, style: arrowStyle }))] }))] }));
 };
-Popover$1.displayName = 'Popover';
+Popover.displayName = 'Popover';
 
-Popover;
-
-const Progress$1 = ({ value, max = 100, size = 'm', variant = 'default', type = 'linear', showValue = false, valueFormatter, animated = false, striped = false, className, }) => {
+const Progress = ({ value, max = 100, size = 'm', variant = 'default', type = 'linear', showValue = false, valueFormatter, animated = false, striped = false, className, }) => {
     const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
     const classes = clsx('designbase-progress', `designbase-progress--size-${size}`, `designbase-progress--variant-${variant}`, `designbase-progress--type-${type}`, {
         'designbase-progress--animated': animated,
@@ -9258,8 +9222,6 @@ const Progress$1 = ({ value, max = 100, size = 'm', variant = 'default', type =
     return (jsxRuntimeExports.jsx("div", { className: classes, children: type === 'linear' ? renderLinearProgress() : renderCircularProgress() }));
 };
 
-Progress;
-
 const ProgressStep = ({ items, variant = 'default', size = 'm', layout = 'vertical', currentStep = 0, clickable = false, fullWidth = false, disabled = false, className, style, onStepClick, }) => {
     const handleStepClick = (item, index) => {
         if (disabled || item.disabled || !clickable)
@@ -9298,9 +9260,7 @@ const ProgressStep = ({ items, variant = 'default', size = 'm', layout = 'vertic
         }) }));
 };
 
-Progressbar;
-
-const RangeSlider$1 = ({ value, range, min = 0, max = 100, step = 1, size = 'm', variant = 'default', showValue = false, showMarks = false, marks = [], markLabels = {}, disabled = false, readOnly = false, fullWidth = false, vertical = false, onChange, onRangeChange, className, ...props }) => {
+const RangeSlider = ({ value, range, min = 0, max = 100, step = 1, size = 'm', variant = 'default', showValue = false, showMarks = false, marks = [], markLabels = {}, disabled = false, readOnly = false, fullWidth = false, vertical = false, onChange, onRangeChange, className, ...props }) => {
     const [internalValue, setInternalValue] = useState(value ?? min);
     const [internalRange, setInternalRange] = useState(range ?? [min, max]);
     const [isDragging, setIsDragging] = useState(false);
@@ -9515,9 +9475,7 @@ const RangeSlider$1 = ({ value, range, min = 0, max = 100, step = 1, size = 'm',
                                 [vertical ? 'bottom' : 'left']: `${getPercentage(currentValue)}%`,
                             }, onPointerDown: handlePointerDown, onKeyDown: handleKeyDown, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": currentValue, tabIndex: disabled || readOnly ? -1 : 0, draggable: false }))] }) })] }));
 };
-RangeSlider$1.displayName = 'RangeSlider';
-
-RangeSlider;
+RangeSlider.displayName = 'RangeSlider';
 
 const Rating = ({ value, maxValue = 5, size = 'm', variant = 'default', type = 'star', display = 'stars', reviewCount, ratingText, reviewText, allowHalf = false, readonly = false, disabled = false, clickable = false, color = 'primary', customColor, animated = false, hoverEffect = true, onChange, onHover, onClick, className, }) => {
     const [hoverValue, setHoverValue] = useState(null);
@@ -10108,7 +10066,7 @@ const ResizablePanels = ({ children, initialWidth = '100%', initialHeight = '100
                 }, children: handleIcon || getDefaultHandleIcon() })] }));
 };
 
-const ScrollArea$1 = ({ direction = 'vertical', scrollbarStyle = 'auto', maxHeight, maxWidth, minHeight, minWidth, fullWidth = false, fullHeight = false, alwaysShowScrollbar = false, scrollbarColor, scrollbarTrackColor, className, children, }) => {
+const ScrollArea = ({ direction = 'vertical', scrollbarStyle = 'auto', maxHeight, maxWidth, minHeight, minWidth, fullWidth = false, fullHeight = false, alwaysShowScrollbar = false, scrollbarColor, scrollbarTrackColor, className, children, }) => {
     const scrollRef = useRef(null);
     const [hasVerticalScroll, setHasVerticalScroll] = useState(false);
     const [hasHorizontalScroll, setHasHorizontalScroll] = useState(false);
@@ -10149,11 +10107,7 @@ const ScrollArea$1 = ({ direction = 'vertical', scrollbarStyle = 'auto', maxHeig
     return (jsxRuntimeExports.jsx("div", { className: classes, style: style, children: jsxRuntimeExports.jsx("div", { ref: scrollRef, className: "designbase-scroll-area__content", children: children }) }));
 };
 
-ScrollArea;
-
-SearchBar;
-
-const Section$1 = ({ title, subtitle, description, size = 'm', variant = 'default', header, footer, actions, noPadding = false, fullWidth = false, fullHeight = false, className, children, }) => {
+const Section = ({ title, subtitle, description, size = 'm', variant = 'default', header, footer, actions, noPadding = false, fullWidth = false, fullHeight = false, className, children, }) => {
     const classes = clsx('designbase-section', `designbase-section--size-${size}`, `designbase-section--variant-${variant}`, {
         'designbase-section--no-padding': noPadding,
         'designbase-section--full-width': fullWidth,
@@ -10163,12 +10117,6 @@ const Section$1 = ({ title, subtitle, description, size = 'm', variant = 'defaul
     return (jsxRuntimeExports.jsxs("section", { className: classes, children: [hasHeader && (jsxRuntimeExports.jsx("div", { className: "designbase-section__header", children: header || (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [(title || subtitle) && (jsxRuntimeExports.jsxs("div", { className: "designbase-section__title-area", children: [title && (jsxRuntimeExports.jsx("h2", { className: "designbase-section__title", children: title })), subtitle && (jsxRuntimeExports.jsx("h3", { className: "designbase-section__subtitle", children: subtitle })), description && (jsxRuntimeExports.jsx("p", { className: "designbase-section__description", children: description }))] })), actions && (jsxRuntimeExports.jsx("div", { className: "designbase-section__actions", children: actions }))] })) })), jsxRuntimeExports.jsx("div", { className: "designbase-section__content", children: children }), footer && (jsxRuntimeExports.jsx("div", { className: "designbase-section__footer", children: footer }))] }));
 };
 
-Section;
-
-SegmentControl;
-
-Select;
-
 const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant = 'button', size = 'm', position = 'bottom', platforms = ['facebook', 'twitter', 'linkedin', 'whatsapp', 'email', 'link'], customPlatforms = {}, buttonText = '공유', buttonIcon = ShareAltIcon, modalTitle = '공유하기', copySuccessMessage = '링크가 클립보드에 복사되었습니다!', showQrCode = true, qrCodeSize = 200, className, style, onShare, onShareError, onCopySuccess, onCopyError, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [isCopied, setIsCopied] = useState(false);
@@ -10330,7 +10278,7 @@ const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant
     // 변형별 렌더링
     switch (variant) {
         case 'dropdown':
-            return (jsxRuntimeExports.jsx("div", { className: clsx('designbase-share', `designbase-share--${variant}`, className), style: style, children: jsxRuntimeExports.jsx(Dropdown$1, { items: activePlatforms.map(platform => {
+            return (jsxRuntimeExports.jsx("div", { className: clsx('designbase-share', `designbase-share--${variant}`, className), style: style, children: jsxRuntimeExports.jsx(Dropdown, { items: activePlatforms.map(platform => {
                         const config = platformConfigs[platform];
                         const PlatformIcon = config?.icon;
                         return {
@@ -10351,7 +10299,7 @@ const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant
     }
 };
 
-const Sidebar$1 = ({ 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', logo, onLogoClick, items = [], onItemClick, userProfile, userMenuItems = [], onUserMenuItemClick, collapsed = false, onToggle, collapsible = true, fixed = false, fullHeight = false, shadow = false, className, ...props }) => {
     const [expandedItems, setExpandedItems] = useState([]);
     const handleToggle = () => {
         if (onToggle) {
@@ -10390,14 +10338,14 @@ const Sidebar$1 = ({ size = 'm', variant = 'default', position = 'left', logo, o
     const renderSidebarItem = (item, level = 0) => {
         const isExpanded = expandedItems.includes(item.id);
         const hasChildren = item.children && item.children.length > 0;
-        return (jsxRuntimeExports.jsx("li", { className: "designbase-sidebar__item", children: jsxRuntimeExports.jsx(MenuItem$1, { ...item, type: "block", style: "accordion", depth: level, expanded: isExpanded, expandable: hasChildren, onClick: () => handleItemClick(item), onChildClick: (child) => handleItemClick(child) }) }, item.id));
+        return (jsxRuntimeExports.jsx("li", { className: "designbase-sidebar__item", children: jsxRuntimeExports.jsx(MenuItem, { ...item, type: "block", style: "accordion", depth: level, expanded: isExpanded, expandable: hasChildren, onClick: () => handleItemClick(item), onChildClick: (child) => handleItemClick(child) }) }, item.id));
     };
     return (jsxRuntimeExports.jsx("aside", { className: classes, role: "complementary", "aria-label": "\uC0AC\uC774\uB4DC\uBC14 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__container", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__header", children: [jsxRuntimeExports.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 || jsxRuntimeExports.jsx(Logo$1, { size: size === 's' ? 's' : size === 'l' ? 'l' : 'm' }) }), collapsible && (jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "s", iconOnly: true, className: "designbase-sidebar__toggle", onPress: handleToggle, "aria-label": collapsed ? '사이드바 펼치기' : '사이드바 접기', children: jsxRuntimeExports.jsx(ChevronLeftIcon, { className: clsx('designbase-sidebar__toggle-icon', {
+                            }, children: logo || jsxRuntimeExports.jsx(Logo, { size: size === 's' ? 's' : size === 'l' ? 'l' : 'm' }) }), collapsible && (jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "s", iconOnly: true, className: "designbase-sidebar__toggle", onPress: handleToggle, "aria-label": collapsed ? '사이드바 펼치기' : '사이드바 접기', children: jsxRuntimeExports.jsx(ChevronLeftIcon, { className: clsx('designbase-sidebar__toggle-icon', {
                                     'designbase-sidebar__toggle-icon--collapsed': collapsed,
                                 }) }) }))] }), jsxRuntimeExports.jsx("nav", { className: "designbase-sidebar__nav", children: jsxRuntimeExports.jsx("ul", { className: "designbase-sidebar__nav-list", children: items.map((item) => renderSidebarItem(item)) }) }), userProfile && !collapsed && (jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__user", children: [jsxRuntimeExports.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 === ' ') {
@@ -10419,9 +10367,7 @@ const Sidebar$1 = ({ size = 'm', variant = 'default', position = 'left', logo, o
                         }
                     }, style: { cursor: 'pointer' }, children: userProfile.avatar ? (jsxRuntimeExports.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-sidebar__user-avatar-collapsed" })) : (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-avatar-placeholder-collapsed", children: userProfile.name.charAt(0).toUpperCase() })) }))] }) }));
 };
-Sidebar$1.displayName = 'Sidebar';
-
-Sidebar;
+Sidebar.displayName = 'Sidebar';
 
 const Skeleton = forwardRef(({ variant = 'text', size = 'm', width, height, animation = 'pulse', lines = 1, lineSpacing = '8px', lastLineWidth = '60%', className, style, 'aria-label': ariaLabel, ...props }, forwardedRef) => {
     // 기본 크기 결정
@@ -10475,9 +10421,7 @@ const Skeleton = forwardRef(({ variant = 'text', size = 'm', width, height, anim
 });
 Skeleton.displayName = 'Skeleton';
 
-Spinner;
-
-const SplitView$1 = ({ direction = 'horizontal', mode = 'ratio', initialSplit = 0.5, firstSize = 200, minSize = 100, maxSize, splitterSize = 4, splitterColor, splitterHoverColor, first, second, fullWidth = false, fullHeight = false, className, }) => {
+const SplitView = ({ direction = 'horizontal', mode = 'ratio', initialSplit = 0.5, firstSize = 200, minSize = 100, maxSize, splitterSize = 4, splitterColor, splitterHoverColor, first, second, fullWidth = false, fullHeight = false, className, }) => {
     const [split, setSplit] = useState(initialSplit);
     const [isDragging, setIsDragging] = useState(false);
     const containerRef = useRef(null);
@@ -10575,9 +10519,7 @@ const SplitView$1 = ({ direction = 'horizontal', mode = 'ratio', initialSplit =
     return (jsxRuntimeExports.jsxs("div", { ref: containerRef, className: classes, style: style, children: [jsxRuntimeExports.jsx("div", { className: "designbase-split-view__first", children: first }), jsxRuntimeExports.jsx("div", { ref: splitterRef, className: splitterClasses, onMouseDown: handleMouseDown }), jsxRuntimeExports.jsx("div", { className: "designbase-split-view__second", children: second })] }));
 };
 
-SplitView;
-
-const Stack$1 = ({ direction = 'vertical', alignment = 'start', justify = 'start', spacing = 'md', fullWidth = false, fullHeight = false, wrap = false, className, children, }) => {
+const Stack = ({ direction = 'vertical', alignment = 'start', justify = 'start', spacing = 'md', fullWidth = false, fullHeight = false, wrap = false, className, children, }) => {
     const classes = clsx('designbase-stack', `designbase-stack--direction-${direction}`, `designbase-stack--alignment-${alignment}`, `designbase-stack--justify-${justify}`, `designbase-stack--spacing-${spacing}`, {
         'designbase-stack--full-width': fullWidth,
         'designbase-stack--full-height': fullHeight,
@@ -10586,9 +10528,7 @@ const Stack$1 = ({ direction = 'vertical', alignment = 'start', justify = 'start
     return (jsxRuntimeExports.jsx("div", { className: classes, children: children }));
 };
 
-Stack;
-
-const Stepper$1 = ({ value = 0, min = 0, max = 100, step = 1, size = 'm', variant = 'default', disabled = false, readonly = false, onChange, onMinReached, onMaxReached, className, }) => {
+const Stepper = ({ value = 0, min = 0, max = 100, step = 1, size = 'm', variant = 'default', disabled = false, readonly = false, onChange, onMinReached, onMaxReached, className, }) => {
     const [internalValue, setInternalValue] = useState(value);
     const currentValue = value !== undefined ? value : internalValue;
     const isMinReached = currentValue <= min;
@@ -10656,9 +10596,7 @@ const Stepper$1 = ({ value = 0, min = 0, max = 100, step = 1, size = 'm', varian
     return (jsxRuntimeExports.jsxs("div", { className: classes, children: [jsxRuntimeExports.jsx("button", { type: "button", className: decrementClasses, onClick: handleDecrement, disabled: disabled || readonly || isMinReached, "aria-label": "\uAC10\uC18C", "aria-describedby": "stepper-description", children: jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntimeExports.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }) }), jsxRuntimeExports.jsx("div", { className: "designbase-stepper__value", children: jsxRuntimeExports.jsx("span", { className: "designbase-stepper__value-text", children: currentValue }) }), jsxRuntimeExports.jsx("button", { type: "button", className: incrementClasses, onClick: handleIncrement, disabled: disabled || readonly || isMaxReached, "aria-label": "\uC99D\uAC00", "aria-describedby": "stepper-description", children: jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsxRuntimeExports.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), jsxRuntimeExports.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }) }), jsxRuntimeExports.jsxs("div", { id: "stepper-description", className: "sr-only", children: ["\uC22B\uC790 \uC870\uC815\uAE30. \uD654\uC0B4\uD45C \uD0A4\uB098 +/- \uD0A4\uB97C \uC0AC\uC6A9\uD558\uC5EC \uAC12\uC744 \uC870\uC815\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uD604\uC7AC \uAC12: ", currentValue, ", \uCD5C\uC18C\uAC12: ", min, ", \uCD5C\uB300\uAC12: ", max, ", \uB2E8\uACC4: ", step] })] }));
 };
 
-Stepper;
-
-const Table$1 = ({ data, columns, title, showCountBadge = false, showFilter = false, filterOptions = [], onFilterChange, size = 'm', variant = 'default', selectable = false, multiSelect = false, selectedRows = [], onSelectionChange, sortable = false, sortColumn, sortDirection, onSortChange, loading = false, emptyMessage = '데이터가 없습니다.', onRowClick, rowKey = 'id', height, scrollable = false, className, ...props }) => {
+const Table = ({ data, columns, title, showCountBadge = false, showFilter = false, filterOptions = [], onFilterChange, size = 'm', variant = 'default', selectable = false, multiSelect = false, selectedRows = [], onSelectionChange, sortable = false, sortColumn, sortDirection, onSortChange, loading = false, emptyMessage = '데이터가 없습니다.', onRowClick, rowKey = 'id', height, scrollable = false, className, ...props }) => {
     const [internalSelectedRows, setInternalSelectedRows] = useState(selectedRows);
     const getRowKey = (item, index) => {
         if (typeof rowKey === 'string') {
@@ -10742,7 +10680,7 @@ const Table$1 = ({ data, columns, title, showCountBadge = false, showFilter = fa
     if (loading) {
         return (jsxRuntimeExports.jsx("div", { className: classes, ...props, children: jsxRuntimeExports.jsxs("div", { className: "designbase-table__loading", children: [jsxRuntimeExports.jsx("div", { className: "designbase-table__loading-spinner" }), jsxRuntimeExports.jsx("span", { children: "\uB85C\uB529 \uC911..." })] }) }));
     }
-    return (jsxRuntimeExports.jsxs("div", { className: classes, style: { height }, ...props, children: [(title || showCountBadge || showFilter) && (jsxRuntimeExports.jsxs("div", { className: "designbase-table__header", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-table__header-left", children: [title && (jsxRuntimeExports.jsx("h3", { className: "designbase-table__title", children: title })), showCountBadge && (jsxRuntimeExports.jsx(Badge$1, { count: data.length, style: "number", variant: "primary", size: "s" }))] }), showFilter && filterOptions.length > 0 && (jsxRuntimeExports.jsx("div", { className: "designbase-table__header-right", children: jsxRuntimeExports.jsx(Select$1, { placeholder: "\uD544\uD130 \uC120\uD0DD", options: filterOptions, onChange: (value) => onFilterChange?.(Array.isArray(value) ? value[0] : value), size: size, showClearButton: false, searchable: false, multiple: false }) }))] })), jsxRuntimeExports.jsx("div", { className: "designbase-table__container", children: jsxRuntimeExports.jsxs("table", { className: tableClasses, children: [jsxRuntimeExports.jsx("thead", { className: "designbase-table__thead", children: jsxRuntimeExports.jsxs("tr", { className: "designbase-table__tr", children: [selectable && (jsxRuntimeExports.jsx("th", { className: "designbase-table__th designbase-table__th--checkbox", children: jsxRuntimeExports.jsx(Checkbox, { isSelected: isAllSelected, isIndeterminate: isIndeterminate, onChange: (checked) => handleSelectAll(checked), size: "s", hasLabel: false }) })), columns.map((column) => (jsxRuntimeExports.jsx("th", { className: clsx('designbase-table__th', {
+    return (jsxRuntimeExports.jsxs("div", { className: classes, style: { height }, ...props, children: [(title || showCountBadge || showFilter) && (jsxRuntimeExports.jsxs("div", { className: "designbase-table__header", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-table__header-left", children: [title && (jsxRuntimeExports.jsx("h3", { className: "designbase-table__title", children: title })), showCountBadge && (jsxRuntimeExports.jsx(Badge, { count: data.length, style: "number", variant: "primary", size: "s" }))] }), showFilter && filterOptions.length > 0 && (jsxRuntimeExports.jsx("div", { className: "designbase-table__header-right", children: jsxRuntimeExports.jsx(Select, { placeholder: "\uD544\uD130 \uC120\uD0DD", options: filterOptions, onChange: (value) => onFilterChange?.(Array.isArray(value) ? value[0] : value), size: size, showClearButton: false, searchable: false, multiple: false }) }))] })), jsxRuntimeExports.jsx("div", { className: "designbase-table__container", children: jsxRuntimeExports.jsxs("table", { className: tableClasses, children: [jsxRuntimeExports.jsx("thead", { className: "designbase-table__thead", children: jsxRuntimeExports.jsxs("tr", { className: "designbase-table__tr", children: [selectable && (jsxRuntimeExports.jsx("th", { className: "designbase-table__th designbase-table__th--checkbox", children: jsxRuntimeExports.jsx(Checkbox, { isSelected: isAllSelected, isIndeterminate: isIndeterminate, onChange: (checked) => handleSelectAll(checked), size: "s", hasLabel: false }) })), columns.map((column) => (jsxRuntimeExports.jsx("th", { className: clsx('designbase-table__th', {
                                             'designbase-table__th--sortable': sortable && column.sortable,
                                             'designbase-table__th--sorted': sortColumn === column.key,
                                             [`designbase-table__th--${column.align || 'left'}`]: column.align,
@@ -10761,11 +10699,9 @@ const Table$1 = ({ data, columns, title, showCountBadge = false, showFilter = fa
                                             }), children: renderCell(column, item, index) }, column.key)))] }, key));
                             })) })] }) })] }));
 };
-Table$1.displayName = 'Table';
+Table.displayName = 'Table';
 
-Table;
-
-const Tabs$1 = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal', size = 'm', fullWidth = false, variant = 'default', className, onTabChange, ...props }) => {
+const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal', size = 'm', fullWidth = false, variant = 'default', className, onTabChange, ...props }) => {
     const [activeTabId, setActiveTabId] = useState(selectedId ?? defaultSelectedId ?? items[0]?.id ?? '');
     const [focusedTabId, setFocusedTabId] = useState('');
     const tabListRef = useRef(null);
@@ -10880,11 +10816,9 @@ const Tabs$1 = ({ items, defaultSelectedId, selectedId, orientation = 'horizonta
                         }, className: tabClasses, role: "tab", "aria-selected": isSelected, "aria-disabled": isDisabled, "aria-controls": `panel-${item.id}`, id: `tab-${item.id}`, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, onClick: () => handleTabSelect(item.id), onKeyDown: (e) => handleKeyDown(e, item.id), onFocus: () => handleTabFocus(item.id), onBlur: handleTabBlur, children: [item.icon && (jsxRuntimeExports.jsx("span", { className: "designbase-tabs__tab-icon", children: jsxRuntimeExports.jsx(item.icon, { size: size === 's' ? 16 : size === 'l' ? 20 : 18 }) })), jsxRuntimeExports.jsx("span", { className: "designbase-tabs__tab-label", children: item.label })] }, item.id));
                 }) }), activeTab && (jsxRuntimeExports.jsx("div", { className: "designbase-tabs__panel", role: "tabpanel", id: `panel-${activeTab.id}`, "aria-labelledby": `tab-${activeTab.id}`, tabIndex: 0, children: activeTab.content }))] }));
 };
-Tabs$1.displayName = 'Tabs';
-
-Tabs;
+Tabs.displayName = 'Tabs';
 
-const TimePicker$1 = ({ value, onChange, format = '24h', mode = 'dropdown', hourStep = 1, minuteStep = 15, minTime, maxTime, size = 'm', variant = 'default', disabled = false, readonly = false, placeholder = '시간을 선택하세요', displayFormat, className, }) => {
+const TimePicker = ({ value, onChange, format = '24h', mode = 'dropdown', hourStep = 1, minuteStep = 15, minTime, maxTime, size = 'm', variant = 'default', disabled = false, readonly = false, placeholder = '시간을 선택하세요', displayFormat, className, }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedHour, setSelectedHour] = React.useState(() => {
         if (value) {
@@ -11077,8 +11011,6 @@ const TimePicker$1 = ({ value, onChange, format = '24h', mode = 'dropdown', hour
                                     }) })] }))] }) }))] }));
 };
 
-TimePicker;
-
 const Timeline = ({ items, position = 'alternate', variant = 'default', size = 'm', color = 'primary', clickable = false, fullWidth = false, disabled = false, className, style, onItemClick, }) => {
     const handleItemClick = (item, index) => {
         if (disabled || item.disabled || !clickable)
@@ -11133,7 +11065,7 @@ const Timeline = ({ items, position = 'alternate', variant = 'default', size = '
             }) }) }));
 };
 
-const Toast$1 = ({ id, status = 'info', title, description, icon: Icon, duration = 5000, showProgress = false, showCloseButton = true, position = 'top-right', onClose, className, }) => {
+const Toast = ({ id, status = 'info', title, description, icon: Icon, duration = 5000, showProgress = false, showCloseButton = true, position = 'top-right', onClose, className, }) => {
     const [isVisible, setIsVisible] = useState(false);
     const [progress, setProgress] = useState(100);
     const progressRef = useRef(null);
@@ -11212,9 +11144,7 @@ const Toast$1 = ({ id, status = 'info', title, description, icon: Icon, duration
     };
     return (jsxRuntimeExports.jsxs("div", { className: classes, role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: [duration > 0 && showProgress && (jsxRuntimeExports.jsx("div", { className: "designbase-toast__progress", children: jsxRuntimeExports.jsx("div", { ref: progressRef, className: "designbase-toast__progress-bar", style: { width: `${progress}%` } }) })), jsxRuntimeExports.jsx("div", { className: `designbase-toast__icon designbase-toast__icon--${getIconColor()}`, children: getStatusIcon() }), jsxRuntimeExports.jsxs("div", { className: "designbase-toast__content", children: [jsxRuntimeExports.jsx("div", { className: "designbase-toast__title", children: title }), description && (jsxRuntimeExports.jsx("div", { className: "designbase-toast__description", children: description }))] }), showCloseButton && (jsxRuntimeExports.jsx("button", { type: "button", onClick: handleCloseClick, className: "designbase-toast__close-button", "aria-label": "\uD1A0\uC2A4\uD2B8 \uB2EB\uAE30", children: jsxRuntimeExports.jsx(CloseIcon, { size: 16 }) }))] }));
 };
-Toast$1.displayName = 'Toast';
-
-Toast;
+Toast.displayName = 'Toast';
 
 const Toggle = forwardRef(({ isSelected, defaultSelected, isDisabled = false, isReadOnly = false, size = 'm', children, className, onChange, ...props }, forwardedRef) => {
     const [selected, setSelected] = React.useState(isSelected ?? defaultSelected ?? false);
@@ -11240,7 +11170,7 @@ const Toggle = forwardRef(({ isSelected, defaultSelected, isDisabled = false, is
 });
 Toggle.displayName = 'Toggle';
 
-const Toolbar$1 = ({ items, size = 'm', variant = 'default', position = 'top', fullWidth = false, fixed = false, shadow = true, rounded = true, className, children, }) => {
+const Toolbar = ({ items, size = 'm', variant = 'default', position = 'top', fullWidth = false, fixed = false, shadow = true, rounded = true, className, children, }) => {
     const [openDropdown, setOpenDropdown] = React.useState(null);
     const handleItemClick = (item) => {
         if (item.disabled)
@@ -11299,9 +11229,7 @@ const Toolbar$1 = ({ items, size = 'm', variant = 'default', position = 'top', f
     return (jsxRuntimeExports.jsx("div", { className: classes, children: jsxRuntimeExports.jsxs("div", { className: "designbase-toolbar__content", children: [Object.entries(groupedItems).map(([groupName, groupItems], groupIndex) => (jsxRuntimeExports.jsxs("div", { className: "designbase-toolbar__group", children: [groupItems.map(renderItem), groupIndex < Object.keys(groupedItems).length - 1 && (jsxRuntimeExports.jsx("div", { className: "designbase-toolbar__group-separator" }))] }, groupName))), children && (jsxRuntimeExports.jsx("div", { className: "designbase-toolbar__children", children: children }))] }) }));
 };
 
-Toolbar;
-
-const Tooltip$1 = ({ content, children, position = 'top', size = 'm', variant = 'default', delay = 200, hideDelay = 0, alwaysShow = false, disabled = false, maxWidth = 200, showArrow = true, className, ...props }) => {
+const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'default', delay = 200, hideDelay = 0, alwaysShow = false, disabled = false, maxWidth = 200, showArrow = true, className, ...props }) => {
     const [isVisible, setIsVisible] = useState(false);
     const [tooltipStyle, setTooltipStyle] = useState({});
     const [arrowStyle, setArrowStyle] = useState({});
@@ -11515,9 +11443,7 @@ const Tooltip$1 = ({ content, children, position = 'top', size = 'm', variant =
     const arrowClasses = clsx('designbase-tooltip__arrow', `designbase-tooltip__arrow--${position}`);
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { ref: triggerWrapperRef, className: "designbase-tooltip__trigger", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, onKeyDown: handleKeyDown, tabIndex: 0, "aria-describedby": isVisible ? 'designbase-tooltip' : undefined, children: children }), isVisible && (jsxRuntimeExports.jsxs("div", { ref: tooltipRef, className: classes, style: tooltipStyle, role: "tooltip", id: "designbase-tooltip", "aria-hidden": !isVisible, ...props, children: [jsxRuntimeExports.jsx("div", { className: "designbase-tooltip__content", children: content }), showArrow && jsxRuntimeExports.jsx("div", { className: arrowClasses, style: arrowStyle })] }))] }));
 };
-Tooltip$1.displayName = 'Tooltip';
-
-Tooltip;
+Tooltip.displayName = 'Tooltip';
 
 const VideoPlayer = ({ src, poster, title, description, size = 'm', variant = 'default', theme = 'auto', autoPlay = false, loop = false, muted = false, showControls = true, enableFullscreen = true, enableKeyboard = true, enableTouch = 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, qualities = [], defaultQuality = '', subtitles = [], defaultSubtitle = '', onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onFullscreenChange, onPlaylistChange, onPlaybackRateChange, onQualityChange, onSubtitleChange, onError, className, }) => {
     const videoRef = useRef(null);
@@ -11990,5 +11916,5 @@ const toggleTheme = () => {
     console.log('toggleTheme called');
 };
 
-export { Accordion$1 as Accordion, Alert$1 as Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar$1 as Avatar, Backdrop, Badge$1 as Badge, Banner, BottomSheet, Breadcrumbs$1 as Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip$1 as Chip, Confirm$1 as Confirm, Container$1 as Container, ContextMenu$1 as ContextMenu, DatePicker, Divider$1 as Divider, Drawer, Dropdown$1 as Dropdown, Dropzone, EmptyState$1 as EmptyState, FileUploader, FloatingActionButton, Form, Gradient$1 as Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Input, Lightbox, List, Logo$1 as Logo, MarkdownEditor, Masonry, MenuItem$1 as MenuItem, Modal, Navbar$1 as Navbar, Pagination$1 as Pagination, Popover$1 as Popover, Progress$1 as Progress, ProgressStep, Progressbar$1 as Progressbar, Radio, RangeSlider$1 as RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea$1 as ScrollArea, SearchBar$1 as SearchBar, Section$1 as Section, SegmentControl$1 as SegmentControl, Select$1 as Select, Share, Sidebar$1 as Sidebar, Skeleton, Spinner$1 as Spinner, SplitView$1 as SplitView, Stack$1 as Stack, Stat, Stepper$1 as Stepper, Table$1 as Table, Tabs$1 as Tabs, Textarea, TimePicker$1 as TimePicker, Timeline, Toast$1 as Toast, Toggle, Toolbar$1 as Toolbar, Tooltip$1 as Tooltip, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme };
+export { Accordion, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, Confirm, Container, ContextMenu, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Input, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, Navbar, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme };
 //# sourceMappingURL=index.esm.js.map