@designbasekorea/ui 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,9 +1,8 @@
 'use strict';
 
-var theme = require('@designbase/theme');
 var React = require('react');
 var $4AOtR$reactdom = require('react-dom');
-var icons = require('@designbase/icons');
+var icons = require('@designbasekorea/icons');
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -3450,7 +3449,7 @@ function $701a24aa0da5b062$export$ea18c227d4417cc3(props, ref) {
     };
 }
 
-const Spinner = ({ type = 'circular', size = 'md', 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,
@@ -3476,7 +3475,7 @@ const Spinner = ({ type = 'circular', size = 'md', color, speed = 1, label = '
 };
 Spinner.displayName = 'Spinner';
 
-const Button = React.forwardRef(({ variant = 'primary', size = 'md', radius, fullWidth = false, disabled = false, loading = false, iconOnly = false, startIcon: StartIcon, endIcon: EndIcon, className, children, onPress, type = 'button', ...props }, forwardedRef) => {
+const Button = React.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);
     const { buttonProps } = $701a24aa0da5b062$export$ea18c227d4417cc3({
         ...props,
@@ -3492,7 +3491,7 @@ const Button = React.forwardRef(({ variant = 'primary', size = 'md', radius, ful
         if (iconOnly) {
             return 'designbase-button--radius-pill';
         }
-        return `designbase-button--radius-${size === 'xs' || size === 'sm' ? 'sm' : size === 'lg' || size === 'xl' ? 'lg' : 'md'}`;
+        return `designbase-button--radius-${size === 'xs' || size === 's' ? 's' : size === 'l' || size === 'xl' ? 'l' : 'm'}`;
     };
     const classes = clsx('designbase-button', `designbase-button--${variant}`, `designbase-button--${size}`, getRadiusClass(), {
         'designbase-button--full-width': fullWidth,
@@ -3502,9 +3501,9 @@ const Button = React.forwardRef(({ variant = 'primary', size = 'md', radius, ful
     const iconSize = (() => {
         switch (size) {
             case 'xs': return 12;
-            case 'sm': return 14;
-            case 'md': return 16;
-            case 'lg': return 18;
+            case 's': return 14;
+            case 'm': return 16;
+            case 'l': return 18;
             case 'xl': return 20;
             default: return 16;
         }
@@ -3528,21 +3527,25 @@ const Button = React.forwardRef(({ variant = 'primary', size = 'md', radius, ful
     };
     const renderContent = () => {
         if (loading) {
-            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Spinner, { type: "circular", size: size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md', 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) {
+            return React.cloneElement(children, {
+                size: iconSize,
+                color: getIconColor(),
+                style: {
+                    ...children.props?.style
+                }
+            });
         }
-        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [StartIcon && (jsxRuntimeExports.jsx(StartIcon, { size: iconSize, className: "designbase-button__start-icon", color: getIconColor() })), !iconOnly && children, iconOnly && React.cloneElement(children, {
-                    size: iconSize,
-                    color: getIconColor(),
-                    style: {
-                        ...children.props?.style
-                    }
-                }), EndIcon && (jsxRuntimeExports.jsx(EndIcon, { size: iconSize, className: "designbase-button__end-icon", color: getIconColor() }))] }));
+        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [StartIcon && (jsxRuntimeExports.jsx(StartIcon, { size: iconSize, className: "designbase-button__start-icon", color: getIconColor() })), children, EndIcon && (jsxRuntimeExports.jsx(EndIcon, { size: iconSize, className: "designbase-button__end-icon", color: getIconColor() }))] }));
     };
     return (jsxRuntimeExports.jsx("button", { ...buttonProps, ref: ref, className: classes, "aria-label": iconOnly ? props['aria-label'] || children : undefined, children: renderContent() }));
 });
 Button.displayName = 'Button';
 
-const Input = React.forwardRef(({ type = 'text', label, placeholder, defaultValue, value, size = 'md', disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, startIcon: StartIcon, endIcon: EndIcon, fullWidth = false, className, inputClassName, onChange, onFocus, onBlur, ...props }, forwardedRef) => {
+const Input = React.forwardRef(({ type = 'text', label, placeholder, defaultValue, value, size = 'm', disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, startIcon: StartIcon, endIcon: EndIcon, fullWidth = false, className, inputClassName, onChange, onFocus, onBlur, ...props }, forwardedRef) => {
     const inputId = React.useId();
     const helperTextId = React.useId();
     const errorMessageId = React.useId();
@@ -3568,8 +3571,10 @@ const Input = React.forwardRef(({ type = 'text', label, placeholder, defaultValu
 });
 Input.displayName = 'Input';
 
-const Modal = ({ isOpen, onClose, title, size = 'md', closeOnOutsideClick = true, closeOnEscape = true, children, className, overlayClassName, }) => {
+const Modal = ({ isOpen, onClose, title, size = 'm', closeOnOutsideClick = true, closeOnEscape = true, children, className, overlayClassName, }) => {
     const modalRef = React.useRef(null);
+    // 아이콘 크기 계산 (m이 기본값)
+    const iconSize = size === 's' ? 16 : size === 'l' ? 20 : size === 'xl' ? 24 : 18;
     // Prevent scrolling while modal is open
     React.useEffect(() => {
         if (isOpen) {
@@ -3599,11 +3604,11 @@ const Modal = ({ isOpen, onClose, title, size = 'md', closeOnOutsideClick = true
         return null;
     const modalClasses = clsx('designbase-modal', `designbase-modal--${size}`, className);
     const overlayClasses = clsx('designbase-modal__overlay', overlayClassName);
-    return (jsxRuntimeExports.jsx("div", { className: overlayClasses, onClick: closeOnOutsideClick ? onClose : undefined, children: jsxRuntimeExports.jsxs("div", { ref: modalRef, className: modalClasses, onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? 'modal-title' : undefined, children: [title && (jsxRuntimeExports.jsx(ModalHeader, { title: title, showCloseButton: true, onClose: onClose })), jsxRuntimeExports.jsx("div", { className: "designbase-modal__content", children: children })] }) }));
+    return (jsxRuntimeExports.jsx("div", { className: overlayClasses, onClick: closeOnOutsideClick ? onClose : undefined, children: jsxRuntimeExports.jsxs("div", { ref: modalRef, className: modalClasses, onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? 'modal-title' : undefined, children: [title && (jsxRuntimeExports.jsx(ModalHeader, { title: title, showCloseButton: true, onClose: onClose, iconSize: iconSize })), jsxRuntimeExports.jsx("div", { className: "designbase-modal__content", children: children })] }) }));
 };
-const ModalHeader = ({ title, showCloseButton = true, onClose, className, children, }) => {
+const ModalHeader = ({ title, showCloseButton = true, onClose, iconSize = 20, className, children, }) => {
     const classes = clsx('designbase-modal__header', className);
-    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-modal__header-content", children: [title && (jsxRuntimeExports.jsx("h2", { id: "modal-title", className: "designbase-modal__title", children: title })), children] }), showCloseButton && onClose && (jsxRuntimeExports.jsx("button", { type: "button", onClick: onClose, "aria-label": "\uBAA8\uB2EC \uB2EB\uAE30", className: "designbase-modal__close-button", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: 20 }) }))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [jsxRuntimeExports.jsxs("div", { className: "designbase-modal__header-content", children: [title && (jsxRuntimeExports.jsx("h2", { id: "modal-title", className: "designbase-modal__title", children: title })), children] }), showCloseButton && onClose && (jsxRuntimeExports.jsx("button", { type: "button", onClick: onClose, "aria-label": "\uBAA8\uB2EC \uB2EB\uAE30", className: "designbase-modal__close-button", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: iconSize, color: "currentColor" }) }))] }));
 };
 const ModalBody = ({ className, children, }) => {
     const classes = clsx('designbase-modal__body', className);
@@ -3618,7 +3623,7 @@ ModalHeader.displayName = 'ModalHeader';
 ModalBody.displayName = 'ModalBody';
 ModalFooter.displayName = 'ModalFooter';
 
-const Checkbox = React.forwardRef(({ isSelected, defaultSelected, isIndeterminate = false, isDisabled = false, isReadOnly = false, isRequired = false, hasLabel = true, size = 'md', children, className, name, value, onChange, ...props }, forwardedRef) => {
+const Checkbox = React.forwardRef(({ isSelected, defaultSelected, isIndeterminate = false, isDisabled = false, isReadOnly = false, isRequired = false, hasLabel = true, size = 'm', children, className, name, value, onChange, ...props }, forwardedRef) => {
     const [selected, setSelected] = React.useState(isSelected ?? defaultSelected ?? false);
     React.useEffect(() => {
         if (isSelected !== undefined) {
@@ -3652,7 +3657,7 @@ const Checkbox = React.forwardRef(({ isSelected, defaultSelected, isIndeterminat
 });
 Checkbox.displayName = 'Checkbox';
 
-const Toggle = React.forwardRef(({ isSelected, defaultSelected, isDisabled = false, isReadOnly = false, isRequired = false, hasLabel = true, size = 'md', children, className, name, value, onChange, ...props }, forwardedRef) => {
+const Toggle = React.forwardRef(({ isSelected, defaultSelected, isDisabled = false, isReadOnly = false, isRequired = false, hasLabel = true, size = 'm', children, className, name, value, onChange, ...props }, forwardedRef) => {
     const [selected, setSelected] = React.useState(isSelected ?? defaultSelected ?? false);
     React.useEffect(() => {
         if (isSelected !== undefined) {
@@ -3676,7 +3681,7 @@ const Toggle = React.forwardRef(({ isSelected, defaultSelected, isDisabled = fal
 });
 Toggle.displayName = 'Toggle';
 
-const Radio = React.forwardRef(({ isSelected, defaultSelected, isDisabled = false, isReadOnly = false, isRequired = false, hasLabel = true, size = 'md', children, className, name, value, onChange, ...props }, forwardedRef) => {
+const Radio = React.forwardRef(({ isSelected, defaultSelected, isDisabled = false, isReadOnly = false, isRequired = false, hasLabel = true, size = 'm', children, className, name, value, onChange, ...props }, forwardedRef) => {
     const [selected, setSelected] = React.useState(isSelected ?? defaultSelected ?? false);
     React.useEffect(() => {
         if (isSelected !== undefined) {
@@ -3698,12 +3703,12 @@ const Radio = React.forwardRef(({ isSelected, defaultSelected, isDisabled = fals
     }, className);
     const getIconColor = () => {
         if (isDisabled) {
-            return 'var(--color-action-interactive-icon-disabled)';
+            return 'var(--db-color-disabled)';
         }
         if (selected) {
-            return 'var(--color-action-interactive-icon-selected)';
+            return 'var(--db-color-primary)';
         }
-        return 'var(--color-action-interactive-icon)';
+        return 'var(--db-color-primary)';
     };
     return (jsxRuntimeExports.jsxs("label", { className: classes, children: [jsxRuntimeExports.jsx("input", { ...props, ref: forwardedRef, name: name, value: value, type: "radio", checked: selected, onChange: handleChange, disabled: isDisabled, readOnly: isReadOnly, required: isRequired, className: "designbase-radio__input" }), jsxRuntimeExports.jsx("div", { className: "designbase-radio__visual", children: selected && (jsxRuntimeExports.jsx("div", { className: "designbase-radio__dot", style: { backgroundColor: getIconColor() } })) }), children && jsxRuntimeExports.jsx("span", { className: "designbase-radio__label", children: children })] }));
 });
@@ -3841,7 +3846,7 @@ const ToastProvider = ({ children }) => {
     return (jsxRuntimeExports.jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, jsxRuntimeExports.jsx(ToastContainer, { toasts: toasts, onRemoveToast: removeToast })] }));
 };
 
-const Select = ({ value, defaultValue, options, label, placeholder = '선택하세요', multiple = false, searchable = false, disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, size = 'md', 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] = React.useState(false);
     const [selectedValue, setSelectedValue] = React.useState(value ?? defaultValue ?? (multiple ? [] : ''));
     const [searchTerm, setSearchTerm] = React.useState('');
@@ -4020,12 +4025,12 @@ const Select = ({ value, defaultValue, options, label, placeholder = '선택하
                                 'designbase-select__option--selected': isSelected,
                                 'designbase-select__option--focused': isFocused,
                                 'designbase-select__option--disabled': option.disabled,
-                            }), 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: "sm", hasLabel: false, onChange: () => handleOptionSelect(option) }) })), jsxRuntimeExports.jsx("span", { className: "designbase-select__option-label", children: option.label })] }, option.value));
+                            }), 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.displayName = 'Select';
 
-const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal', size = 'md', 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] = React.useState(selectedId ?? defaultSelectedId ?? items[0]?.id ?? '');
     const [focusedTabId, setFocusedTabId] = React.useState('');
     const tabListRef = React.useRef(null);
@@ -4137,12 +4142,12 @@ const Tabs = ({ items, defaultSelectedId, selectedId, orientation = 'horizontal'
                             else {
                                 tabRefs.current.delete(item.id);
                             }
-                        }, 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 === 'sm' ? 16 : size === 'lg' ? 20 : 18 }) })), jsxRuntimeExports.jsx("span", { className: "designbase-tabs__tab-label", children: item.label })] }, item.id));
+                        }, 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.displayName = 'Tabs';
 
-const SegmentControl = ({ options, defaultValue, value, size = 'md', fullWidth = false, disabled = false, className, onChange, ...props }) => {
+const SegmentControl = ({ options, defaultValue, value, size = 'm', fullWidth = false, disabled = false, className, onChange, ...props }) => {
     const [selectedValue, setSelectedValue] = React.useState(value ?? defaultValue ?? options[0]?.value ?? '');
     const [focusedIndex, setFocusedIndex] = React.useState(-1);
     const containerRef = React.useRef(null);
@@ -4237,7 +4242,7 @@ const SegmentControl = ({ options, defaultValue, value, size = 'md', fullWidth =
                         else {
                             segmentRefs.current.delete(option.value);
                         }
-                    }, className: segmentClasses, role: "tab", "aria-selected": isSelected, "aria-disabled": isDisabled, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, onClick: () => handleSegmentSelect(option.value), onFocus: () => handleSegmentFocus(index), onBlur: handleSegmentBlur, children: [option.icon && (jsxRuntimeExports.jsx("span", { className: "designbase-segment-control__segment-icon", children: jsxRuntimeExports.jsx(option.icon, { size: size === 'sm' ? 14 : size === 'lg' ? 18 : 16 }) })), jsxRuntimeExports.jsx("span", { className: "designbase-segment-control__segment-label", children: option.label })] }, option.value));
+                    }, className: segmentClasses, role: "tab", "aria-selected": isSelected, "aria-disabled": isDisabled, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, onClick: () => handleSegmentSelect(option.value), onFocus: () => handleSegmentFocus(index), onBlur: handleSegmentBlur, children: [option.icon && (jsxRuntimeExports.jsx("span", { className: "designbase-segment-control__segment-icon", children: jsxRuntimeExports.jsx(option.icon, { size: size === 's' ? 14 : size === 'l' ? 18 : 16 }) })), jsxRuntimeExports.jsx("span", { className: "designbase-segment-control__segment-label", children: option.label })] }, option.value));
             }), jsxRuntimeExports.jsx("div", { className: "designbase-segment-control__indicator", style: {
                     transform: `translateX(${selectedIndex * 100}%)`,
                     width: `${100 / options.length}%`,
@@ -4245,7 +4250,9 @@ const SegmentControl = ({ options, defaultValue, value, size = 'md', fullWidth =
 };
 SegmentControl.displayName = 'SegmentControl';
 
-const Dropdown = ({ items, trigger, label = '메뉴', size = 'md', 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] = React.useState(false);
     const [focusedIndex, setFocusedIndex] = React.useState(-1);
     const containerRef = React.useRef(null);
@@ -4378,7 +4385,7 @@ const Dropdown = ({ items, trigger, label = '메뉴', size = 'md', placement = '
     const menuClasses = clsx('designbase-dropdown__menu', `designbase-dropdown__menu--${placement}`, {
         'designbase-dropdown__menu--open': isDropdownOpen,
     });
-    return (jsxRuntimeExports.jsxs("div", { ref: containerRef, className: classes, ...props, children: [jsxRuntimeExports.jsx("button", { ref: triggerRef, className: triggerClasses, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, "aria-haspopup": "true", "aria-expanded": isDropdownOpen, "aria-label": label, children: trigger || (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: "designbase-dropdown__trigger-label", children: label }), jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: size === 'sm' ? 14 : size === 'lg' ? 18 : 16, className: "designbase-dropdown__trigger-icon" })] })) }), jsxRuntimeExports.jsx("div", { ref: menuRef, className: menuClasses, role: "menu", "aria-label": label, children: items.map((item, index) => {
+    return (jsxRuntimeExports.jsxs("div", { ref: containerRef, className: classes, ...props, children: [jsxRuntimeExports.jsx("button", { ref: triggerRef, className: triggerClasses, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, "aria-haspopup": "true", "aria-expanded": isDropdownOpen, "aria-label": label, children: trigger || (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: "designbase-dropdown__trigger-label", children: label }), jsxRuntimeExports.jsx(icons.ChevronDownIcon, { size: iconSize, color: "currentColor", className: "designbase-dropdown__trigger-icon" })] })) }), jsxRuntimeExports.jsx("div", { ref: menuRef, className: menuClasses, role: "menu", "aria-label": label, children: items.map((item, index) => {
                     if (item.divider) {
                         return (jsxRuntimeExports.jsx("div", { className: "designbase-dropdown__divider", role: "separator" }, `divider-${index}`));
                     }
@@ -4395,12 +4402,12 @@ const Dropdown = ({ items, trigger, label = '메뉴', size = 'md', placement = '
                             else {
                                 itemRefs.current.delete(item.id);
                             }
-                        }, 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: size === 'sm' ? 14 : size === 'lg' ? 18 : 16 }) })), jsxRuntimeExports.jsx("span", { className: "designbase-dropdown__item-label", children: item.label })] }, item.id));
+                        }, 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.displayName = 'Dropdown';
 
-const Logo = ({ text = 'Logo', src, alt, size = 'md', variant = 'default', clickable = false, href, target = '_self', fullWidth = false, className, onClick, ...props }) => {
+const Logo = ({ 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,
@@ -4425,7 +4432,7 @@ const Logo = ({ text = 'Logo', src, alt, size = 'md', variant = 'default', click
 };
 Logo.displayName = 'Logo';
 
-const Progressbar = ({ value, max = 100, min = 0, size = 'md', 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;
@@ -4453,7 +4460,7 @@ const Progressbar = ({ value, max = 100, min = 0, size = 'md', variant = 'defaul
 };
 Progressbar.displayName = 'Progressbar';
 
-const Badge = ({ children, size = 'md', 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())
@@ -4465,7 +4472,7 @@ const Badge = ({ children, size = 'md', variant = 'primary', style = 'text', cou
 };
 Badge.displayName = 'Badge';
 
-const MenuItem = ({ id, label, href, icon: Icon, active = false, disabled = false, badge, badgeColor = 'primary', variant = 'default', type = 'inline', size = 'md', 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] = React.useState(expanded);
     // expanded prop이 변경될 때 internalExpanded 업데이트
     React.useEffect(() => {
@@ -4520,11 +4527,11 @@ const MenuItem = ({ id, label, href, icon: Icon, active = false, disabled = fals
     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 === 'sm' ? 16 : size === 'lg' ? 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: "sm", style: "number" })), hasChildren && (jsxRuntimeExports.jsx("div", { className: "designbase-menu-item__expand-icon", children: isExpanded ? (jsxRuntimeExports.jsx(icons.ChevronUpIcon, { size: 16 })) : (jsxRuntimeExports.jsx(icons.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))) }))] }));
+                        }), 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(icons.ChevronUpIcon, { size: 16 })) : (jsxRuntimeExports.jsx(icons.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.displayName = 'MenuItem';
 
-const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'md', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = icons.SearchIcon, clearIcon: ClearIconComponent = icons.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 = icons.SearchIcon, clearIcon: ClearIconComponent = icons.CloseIcon, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...props }) => {
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const inputRef = React.useRef(null);
     const currentValue = value !== undefined ? value : internalValue;
@@ -4564,17 +4571,24 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
         'designbase-search-bar__input--disabled': disabled,
         'designbase-search-bar__input--readonly': readOnly,
     });
-    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 === 'sm' ? 16 : size === 'lg' ? 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 === 'sm' ? 16 : size === 'lg' ? 24 : 20 }) }))] }) }));
+    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.displayName = 'SearchBar';
 
-const Avatar = ({ src, alt, initials, icon, size = 'md', 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] = React.useState(false);
+    const [imageLoading, setImageLoading] = React.useState(true);
+    // 아이콘 크기 계산 (m이 기본값)
+    const iconSize = size === 'xs' ? 12 : size === 's' ? 16 : size === 'm' ? 20 : size === 'l' ? 24 : size === 'xl' ? 32 : 40; // 2xl
     const shouldShowImage = src && !imageError;
     const shouldShowInitials = !shouldShowImage && initials;
-    const shouldShowIcon = !shouldShowImage && !shouldShowInitials && icon;
+    const shouldShowIcon = !shouldShowImage && !shouldShowInitials;
     const handleImageError = () => {
         setImageError(true);
+        setImageLoading(false);
+    };
+    const handleImageLoad = () => {
+        setImageLoading(false);
     };
     const handleClick = () => {
         if (!disabled && onClick) {
@@ -4585,20 +4599,63 @@ const Avatar = ({ src, alt, initials, icon, size = 'md', variant = 'circle', sta
         'designbase-avatar--clickable': onClick,
         'designbase-avatar--disabled': disabled,
     }, className);
+    // 랜덤 컬러 생성 함수
+    const generateRandomColor = (text) => {
+        // 텍스트를 기반으로 일관된 색상 생성
+        let hash = 0;
+        for (let i = 0; i < text.length; i++) {
+            hash = text.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        // 연한 배경색 팔레트
+        const lightColors = [
+            '#E3F2FD', // 연한 파랑
+            '#F3E5F5', // 연한 보라
+            '#E8F5E8', // 연한 초록
+            '#FFF3E0', // 연한 주황
+            '#FCE4EC', // 연한 핑크
+            '#E0F2F1', // 연한 청록
+            '#FFF8E1', // 연한 노랑
+            '#F1F8E9', // 연한 라임
+            '#E8EAF6', // 연한 인디고
+            '#FFEBEE', // 연한 빨강
+        ];
+        // 진한 텍스트 색상 팔레트
+        const darkColors = [
+            '#1976D2', // 진한 파랑
+            '#7B1FA2', // 진한 보라
+            '#388E3C', // 진한 초록
+            '#F57C00', // 진한 주황
+            '#C2185B', // 진한 핑크
+            '#00796B', // 진한 청록
+            '#F9A825', // 진한 노랑
+            '#689F38', // 진한 라임
+            '#3F51B5', // 진한 인디고
+            '#D32F2F', // 진한 빨강
+        ];
+        const colorIndex = Math.abs(hash) % lightColors.length;
+        return {
+            backgroundColor: lightColors[colorIndex],
+            color: darkColors[colorIndex]
+        };
+    };
     const getInitials = () => {
         if (!initials)
             return '';
-        return initials.slice(0, 2).toUpperCase();
+        // 한 글자만 표시 (첫 번째 글자)
+        return initials.charAt(0).toUpperCase();
     };
     return (jsxRuntimeExports.jsxs("div", { className: classes, role: onClick ? 'button' : undefined, tabIndex: onClick && !disabled ? 0 : undefined, onClick: handleClick, onKeyDown: (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
                 handleClick();
             }
-        }, ...props, children: [shouldShowImage && (jsxRuntimeExports.jsx("img", { src: src, alt: alt || '아바타 이미지', className: "designbase-avatar__image", onError: handleImageError })), shouldShowInitials && (jsxRuntimeExports.jsx("div", { className: "designbase-avatar__initials", children: getInitials() })), shouldShowIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-avatar__icon", children: icon })), 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 === 'sm' ? 'sm' : size === 'lg' || size === 'xl' || size === '2xl' ? 'lg' : 'md', children: badgeStyle === 'text' ? badgeText : undefined }) }))] }));
+        }, ...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(icons.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.displayName = 'Avatar';
-const AvatarGroup = ({ children, max, size = 'md', variant = 'circle', spacing = 'normal', className, ...props }) => {
+const AvatarGroup = ({ children, max, size = 'm', variant = 'circle', spacing = 'normal', className, ...props }) => {
     const childrenArray = React.Children.toArray(children);
     const totalCount = childrenArray.length;
     const visibleCount = max ? Math.min(max, totalCount) : totalCount;
@@ -4611,10 +4668,12 @@ const AvatarGroup = ({ children, max, size = 'md', variant = 'circle', spacing =
 };
 AvatarGroup.displayName = 'AvatarGroup';
 
-const Navbar = ({ size = 'md', 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] = React.useState(false);
     const [isUserMenuOpen, setIsUserMenuOpen] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState('');
+    // 아이콘 크기 계산 (m이 기본값)
+    const iconSize = size === 's' ? 16 : size === 'l' ? 24 : 20;
     const handleMobileMenuToggle = () => {
         setIsMobileMenuOpen(!isMobileMenuOpen);
     };
@@ -4649,7 +4708,7 @@ const Navbar = ({ size = 'md', variant = 'default', position = 'static', logo, o
         'designbase-navbar__container--full-width': fullWidth,
     });
     const renderNavItem = (item) => (jsxRuntimeExports.jsx("li", { className: "designbase-navbar__nav-item", children: jsxRuntimeExports.jsx(MenuItem, { ...item, type: "inline", style: "dropdown", onClick: () => handleItemClick(item), onChildClick: (child) => handleItemClick(child) }) }, item.id));
-    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 === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md' }) }) }), 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 === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md', 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 === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md', 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("i", { className: "designbase-icon-chevron-down" })] }), 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("i", { className: "designbase-icon-chevron-down" })] }), 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) {
@@ -4657,7 +4716,7 @@ const Navbar = ({ size = 'md', variant = 'default', position = 'static', logo, o
                                                         return;
                                                     }
                                                     handleUserMenuItemClick(item);
-                                                }, children: [item.icon && React.createElement(item.icon, { size: 16 }), 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: "sm", 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) => {
@@ -4666,7 +4725,7 @@ const Navbar = ({ size = 'md', variant = 'default', position = 'static', logo, o
                                             return;
                                         }
                                         handleItemClick(item);
-                                    }, children: [item.icon && React.createElement(item.icon, { size: 16 }), item.label] }), item.children && item.children.length > 0 && (jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__mobile-submenu", children: item.children.map((child) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: child.href, className: clsx('designbase-navbar__mobile-submenu-link', {
+                                    }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] }), item.children && item.children.length > 0 && (jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__mobile-submenu", children: item.children.map((child) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: child.href, className: clsx('designbase-navbar__mobile-submenu-link', {
                                                 'designbase-navbar__mobile-submenu-link--active': child.active,
                                                 'designbase-navbar__mobile-submenu-link--disabled': child.disabled,
                                             }), onClick: (e) => {
@@ -4675,7 +4734,7 @@ const Navbar = ({ size = 'md', variant = 'default', position = 'static', logo, o
                                                     return;
                                                 }
                                                 handleItemClick(child);
-                                            }, children: [child.icon && React.createElement(child.icon, { size: 16 }), child.label] }) }, child.id))) }))] }, item.id))) }), isAuthenticated && userProfile && (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-user", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-user-info", children: [userProfile.avatar ? (jsxRuntimeExports.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-navbar__mobile-user-avatar" })) : (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user-avatar-placeholder", children: userProfile.name.charAt(0).toUpperCase() })), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user-name", children: userProfile.name }), userProfile.email && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user-email", children: userProfile.email }))] })] }), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__mobile-user-menu", children: userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__mobile-user-menu-link', {
+                                            }, children: [child.icon && React.createElement(child.icon, { size: iconSize, color: 'currentColor' }), child.label] }) }, child.id))) }))] }, item.id))) }), isAuthenticated && userProfile && (jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-user", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-navbar__mobile-user-info", children: [userProfile.avatar ? (jsxRuntimeExports.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-navbar__mobile-user-avatar" })) : (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user-avatar-placeholder", children: userProfile.name.charAt(0).toUpperCase() })), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user-name", children: userProfile.name }), userProfile.email && (jsxRuntimeExports.jsx("div", { className: "designbase-navbar__mobile-user-email", children: userProfile.email }))] })] }), jsxRuntimeExports.jsx("ul", { className: "designbase-navbar__mobile-user-menu", children: userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-navbar__mobile-user-menu-link', {
                                             'designbase-navbar__mobile-user-menu-link--disabled': item.disabled,
                                         }), onClick: (e) => {
                                             if (item.disabled) {
@@ -4683,11 +4742,11 @@ const Navbar = ({ size = 'md', variant = 'default', position = 'static', logo, o
                                                 return;
                                             }
                                             handleUserMenuItemClick(item);
-                                        }, children: [item.icon && React.createElement(item.icon, { size: 16 }), item.label] }) }, item.id))) })] }))] }))] }));
+                                        }, children: [item.icon && React.createElement(item.icon, { size: iconSize, color: 'currentColor' }), item.label] }) }, item.id))) })] }))] }))] }));
 };
 Navbar.displayName = 'Navbar';
 
-const Sidebar = ({ size = 'md', 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] = React.useState([]);
     const handleToggle = () => {
         if (onToggle) {
@@ -4728,7 +4787,7 @@ const Sidebar = ({ size = 'md', variant = 'default', position = 'left', logo, on
         const hasChildren = item.children && item.children.length > 0;
         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, children: logo || jsxRuntimeExports.jsx(Logo, { size: size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md' }) }), collapsible && (jsxRuntimeExports.jsx("button", { className: "designbase-sidebar__toggle", onClick: handleToggle, "aria-label": collapsed ? '사이드바 펼치기' : '사이드바 접기', children: jsxRuntimeExports.jsx("i", { className: clsx('designbase-sidebar__toggle-icon', 'designbase-icon-chevron-left', {
+    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, children: logo || jsxRuntimeExports.jsx(Logo, { size: size === 's' ? 's' : size === 'l' ? 'l' : 'm' }) }), collapsible && (jsxRuntimeExports.jsx("button", { className: "designbase-sidebar__toggle", onClick: handleToggle, "aria-label": collapsed ? '사이드바 펼치기' : '사이드바 접기', children: jsxRuntimeExports.jsx("i", { className: clsx('designbase-sidebar__toggle-icon', 'designbase-icon-chevron-left', {
                                     '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", children: [userProfile.avatar ? (jsxRuntimeExports.jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-sidebar__user-avatar" })) : (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-avatar-placeholder", children: userProfile.name.charAt(0).toUpperCase() })), jsxRuntimeExports.jsxs("div", { className: "designbase-sidebar__user-details", children: [jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-name", children: userProfile.name }), userProfile.email && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-email", children: userProfile.email })), userProfile.role && (jsxRuntimeExports.jsx("div", { className: "designbase-sidebar__user-role", children: userProfile.role }))] })] }), userMenuItems.length > 0 && (jsxRuntimeExports.jsx("ul", { className: "designbase-sidebar__user-menu", children: userMenuItems.map((item) => (jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsxs("a", { href: item.href, className: clsx('designbase-sidebar__user-menu-link', {
                                         'designbase-sidebar__user-menu-link--disabled': item.disabled,
@@ -4742,7 +4801,7 @@ const Sidebar = ({ size = 'md', variant = 'default', position = 'left', logo, on
 };
 Sidebar.displayName = 'Sidebar';
 
-const Pagination = ({ currentPage, totalPages, totalItems, pageSize = 10, pageSizeOptions = [10, 20, 50, 100], onPageChange, onPageSizeChange, size = 'md', 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; // 이전, 다음, 현재, 경계 페이지들
@@ -4820,7 +4879,7 @@ const Pagination = ({ currentPage, totalPages, totalItems, pageSize = 10, pageSi
 };
 Pagination.displayName = 'Pagination';
 
-const Breadcrumbs = ({ items, size = 'md', breadcrumbStyle = 'default', separator = jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 16 }), onItemClick, maxItems, collapseOnMobile = true, className, ...props }) => {
+const Breadcrumbs = ({ items, size = 'm', breadcrumbStyle = 'default', separator = jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 16 }), onItemClick, maxItems, collapseOnMobile = true, className, ...props }) => {
     const handleItemClick = (item, e) => {
         if (item.disabled || item.active) {
             e.preventDefault();
@@ -4864,7 +4923,7 @@ const Breadcrumbs = ({ items, size = 'md', breadcrumbStyle = 'default', separato
 };
 Breadcrumbs.displayName = 'Breadcrumbs';
 
-const Table = ({ data, columns, title, showCountBadge = false, showFilter = false, filterOptions = [], onFilterChange, size = 'md', 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] = React.useState(selectedRows);
     const getRowKey = (item, index) => {
         if (typeof rowKey === 'string') {
@@ -4948,7 +5007,7 @@ const Table = ({ data, columns, title, showCountBadge = false, showFilter = fals
     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, { count: data.length, style: "number", variant: "primary", size: "sm" }))] }), 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: "sm", 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,
@@ -4960,7 +5019,7 @@ const Table = ({ data, columns, title, showCountBadge = false, showFilter = fals
                                 return (jsxRuntimeExports.jsxs("tr", { className: clsx('designbase-table__tr', {
                                         'designbase-table__tr--selected': isSelected,
                                         'designbase-table__tr--clickable': onRowClick,
-                                    }), onClick: () => onRowClick?.(item, index), children: [selectable && (jsxRuntimeExports.jsx("td", { className: "designbase-table__td designbase-table__td--checkbox", children: jsxRuntimeExports.jsx(Checkbox, { isSelected: isSelected, onChange: (checked) => handleRowSelect(key, checked), size: "sm", hasLabel: false, onClick: (e) => e.stopPropagation() }) })), columns.map((column) => (jsxRuntimeExports.jsx("td", { className: clsx('designbase-table__td', {
+                                    }), onClick: () => onRowClick?.(item, index), children: [selectable && (jsxRuntimeExports.jsx("td", { className: "designbase-table__td designbase-table__td--checkbox", children: jsxRuntimeExports.jsx(Checkbox, { isSelected: isSelected, onChange: (checked) => handleRowSelect(key, checked), size: "s", hasLabel: false, onClick: (e) => e.stopPropagation() }) })), columns.map((column) => (jsxRuntimeExports.jsx("td", { className: clsx('designbase-table__td', {
                                                 [`designbase-table__td--${column.align || 'left'}`]: column.align,
                                                 'designbase-table__td--fixed-left': column.fixed === 'left',
                                                 'designbase-table__td--fixed-right': column.fixed === 'right',
@@ -4969,7 +5028,7 @@ const Table = ({ data, columns, title, showCountBadge = false, showFilter = fals
 };
 Table.displayName = 'Table';
 
-const Chip = ({ label, size = 'md', 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) {
@@ -5022,7 +5081,7 @@ const Divider = ({ orientation = 'horizontal', thickness = 1, color, length, var
     return (jsxRuntimeExports.jsx("div", { className: dividerClasses, style: dividerStyle, role: "separator", "aria-orientation": orientation, ...props }));
 };
 
-const RangeSlider = ({ value, range, min = 0, max = 100, step = 1, size = 'md', 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] = React.useState(value ?? min);
     const [internalRange, setInternalRange] = React.useState(range ?? [min, max]);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -5239,7 +5298,7 @@ const RangeSlider = ({ value, range, min = 0, max = 100, step = 1, size = 'md',
 };
 RangeSlider.displayName = 'RangeSlider';
 
-const Tooltip = ({ content, children, position = 'top', size = 'md', 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] = React.useState(false);
     const [tooltipStyle, setTooltipStyle] = React.useState({});
     const [arrowStyle, setArrowStyle] = React.useState({});
@@ -5477,7 +5536,7 @@ const Tooltip = ({ content, children, position = 'top', size = 'md', variant = '
 };
 Tooltip.displayName = 'Tooltip';
 
-const Popover = ({ content, children, position = 'top', size = 'md', variant = 'default', trigger = 'click', delay = 200, hideDelay = 0, alwaysShow = false, disabled = false, maxWidth = 300, showArrow = true, closeOnOutsideClick = true, closeOnEscape = true, open: controlledOpen, onOpenChange, 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, className, ...props }) => {
     const [internalOpen, setInternalOpen] = React.useState(false);
     const [popoverStyle, setPopoverStyle] = React.useState({});
     const [arrowStyle, setArrowStyle] = React.useState({});
@@ -5770,7 +5829,7 @@ const Popover = ({ content, children, position = 'top', size = 'md', variant = '
 };
 Popover.displayName = 'Popover';
 
-const Alert = ({ title, children, variant = 'info', size = 'md', 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] = React.useState(true);
     const handleClose = () => {
         setIsVisible(false);
@@ -5779,34 +5838,37 @@ const Alert = ({ title, children, variant = 'info', size = 'md', showIcon = true
     if (!isVisible) {
         return null;
     }
+    // 아이콘 크기 계산 (m이 기본값)
+    const iconSize = size === 's' ? 16 : size === 'l' ? 24 : 20;
     const getIcon = () => {
         if (!showIcon)
             return null;
         const iconProps = {
-            size: size === 'sm' ? 16 : size === 'lg' ? 24 : 20,
+            size: iconSize,
+            color: 'currentColor',
         };
         switch (variant) {
             case 'info':
-                return jsxRuntimeExports.jsx(icons.BulbIcon, { ...iconProps });
+                return jsxRuntimeExports.jsx(icons.InfoFilledIcon, { ...iconProps });
             case 'success':
-                return jsxRuntimeExports.jsx(icons.AwardIcon, { ...iconProps });
+                return jsxRuntimeExports.jsx(icons.CircleCheckFilledIcon, { ...iconProps });
             case 'warning':
-                return jsxRuntimeExports.jsx(icons.BellActiveIcon, { ...iconProps });
+                return jsxRuntimeExports.jsx(icons.WarningFilledIcon, { ...iconProps });
             case 'danger':
-                return jsxRuntimeExports.jsx(icons.CloudCloseIcon, { ...iconProps });
+                return jsxRuntimeExports.jsx(icons.ErrorFilledIcon, { ...iconProps });
             default:
-                return jsxRuntimeExports.jsx(icons.BulbIcon, { ...iconProps });
+                return jsxRuntimeExports.jsx(icons.InfoFilledIcon, { ...iconProps });
         }
     };
     const classes = clsx('designbase-alert', `designbase-alert--${variant}`, `designbase-alert--${size}`, {
         'designbase-alert--with-icon': showIcon,
         'designbase-alert--closable': closable,
     }, 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(icons.CloseIcon, { size: 24 }) }))] }), (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) }))] }));
+    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(icons.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.displayName = 'Alert';
 
-const Confirm = ({ open, title, children, confirmText = '확인', cancelText = '취소', confirmVariant = 'primary', variant = 'info', size = 'md', 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 = React.useRef(null);
     // ESC 키 처리
     React.useEffect(() => {
@@ -5882,7 +5944,7 @@ const Confirm = ({ open, title, children, confirmText = '확인', cancelText = '
         if (!showIcon)
             return null;
         const iconProps = {
-            size: size === 'sm' ? 20 : size === 'lg' ? 32 : 24,
+            size: size === 's' ? 20 : size === 'l' ? 32 : 24,
         };
         switch (variant) {
             case 'info':
@@ -5906,7 +5968,7 @@ const Confirm = ({ open, title, children, confirmText = '확인', cancelText = '
 };
 Confirm.displayName = 'Confirm';
 
-const Accordion = ({ items, style = 'default', size = 'md', allowMultiple = false, defaultExpandedItems = [], defaultItemType = 'none', onItemChange, className, }) => {
+const Accordion = ({ items, style = 'default', size = 'm', allowMultiple = false, defaultExpandedItems = [], defaultItemType = 'none', onItemChange, className, }) => {
     const [expandedItems, setExpandedItems] = React.useState(() => {
         if (allowMultiple) {
             return defaultExpandedItems;
@@ -5972,11 +6034,13 @@ const Accordion = ({ items, style = 'default', size = 'md', allowMultiple = fals
     const classes = clsx('designbase-accordion', `designbase-accordion--${style}`, `designbase-accordion--${size}`, {
         'designbase-accordion--multiple': allowMultiple,
     }, className);
+    // 아이콘 크기 계산
+    const iconSize = size === 's' ? 16 : size === 'l' ? 24 : 20;
     const renderItemPrefix = (item, index) => {
         const itemType = item.itemType || defaultItemType;
         switch (itemType) {
             case 'icon':
-                return item.icon ? (jsxRuntimeExports.jsx("div", { className: "designbase-accordion__icon", children: jsxRuntimeExports.jsx(item.icon, { size: size === 'sm' ? 16 : size === 'lg' ? 24 : 20, color: "var(--color-semantic-component-icon-primary)" }) })) : null;
+                return item.icon ? (jsxRuntimeExports.jsx("div", { className: "designbase-accordion__icon", children: jsxRuntimeExports.jsx(item.icon, { size: iconSize, color: "var(--db-icon-primary)" }) })) : null;
             case 'number':
                 return (jsxRuntimeExports.jsxs("div", { className: "designbase-accordion__number", children: [index + 1, "."] }));
             case 'question':
@@ -5992,7 +6056,7 @@ const Accordion = ({ items, style = 'default', size = 'md', allowMultiple = fals
                 'designbase-accordion__item--expanded': expanded,
                 'designbase-accordion__item--disabled': item.disabled,
             });
-            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(icons.ChevronDownIcon, { size: size === 'sm' ? 16 : size === 'lg' ? 24 : 20, color: "var(--color-semantic-component-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));
+            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(icons.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.displayName = 'Accordion';
@@ -6137,7 +6201,7 @@ const useContextMenu = () => {
     };
 };
 
-const Textarea = React.forwardRef(({ label, placeholder, defaultValue, value, size = 'md', rows = 4, maxLength, showCharacterCount = false, characterCountPosition = 'bottom', disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, fullWidth = false, resizable = true, className, textareaClassName, onChange, onFocus, onBlur, ...props }, forwardedRef) => {
+const Textarea = React.forwardRef(({ label, placeholder, defaultValue, value, size = 'm', rows = 4, maxLength, showCharacterCount = false, characterCountPosition = 'bottom', disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, fullWidth = false, resizable = true, className, textareaClassName, onChange, onFocus, onBlur, ...props }, forwardedRef) => {
     const textareaId = React.useId();
     const helperTextId = React.useId();
     const errorMessageId = React.useId();
@@ -6177,6 +6241,8 @@ const Image$1 = ({ src, alt = '', ratio = 'auto', fit = 'cover', loading = 'lazy
     const [currentSrc, setCurrentSrc] = React.useState(src);
     const [showPlaceholder, setShowPlaceholder] = React.useState(placeholder !== 'none');
     const imageRef = React.useRef(null);
+    // 에러 아이콘 크기 (기본값 m)
+    const errorIconSize = 20;
     // src가 변경되면 상태 초기화
     React.useEffect(() => {
         setCurrentSrc(src);
@@ -6265,20 +6331,20 @@ const Image$1 = ({ src, alt = '', ratio = 'auto', fit = 'cover', loading = 'lazy
     const placeholderClasses = clsx('designbase-image__placeholder', `designbase-image__placeholder--${placeholder}`, {
         'designbase-image__placeholder--visible': showPlaceholder,
     });
-    return (jsxRuntimeExports.jsxs("div", { className: classes, style: containerStyle, onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [showPlaceholder && (jsxRuntimeExports.jsxs("div", { className: placeholderClasses, children: [placeholder === 'skeleton' && (jsxRuntimeExports.jsx("div", { className: "designbase-image__skeleton" })), placeholder === 'blur' && (jsxRuntimeExports.jsx("div", { className: "designbase-image__blur" }))] })), imageState === 'error' && (jsxRuntimeExports.jsxs("div", { className: "designbase-image__error", children: [jsxRuntimeExports.jsx(icons.GalleryIcon, { size: 24 }), jsxRuntimeExports.jsx("span", { className: "designbase-image__error-text", children: alt || '이미지를 불러올 수 없습니다' })] })), jsxRuntimeExports.jsx("img", { ref: imageRef, src: currentSrc, alt: alt, loading: loading, className: imageClasses, onLoad: handleLoad, onError: handleError, draggable: false })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: classes, style: containerStyle, onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [showPlaceholder && (jsxRuntimeExports.jsxs("div", { className: placeholderClasses, children: [placeholder === 'skeleton' && (jsxRuntimeExports.jsx("div", { className: "designbase-image__skeleton" })), placeholder === 'blur' && (jsxRuntimeExports.jsx("div", { className: "designbase-image__blur" }))] })), imageState === 'error' && (jsxRuntimeExports.jsxs("div", { className: "designbase-image__error", children: [jsxRuntimeExports.jsx(icons.GalleryIcon, { size: errorIconSize, color: "currentColor" }), jsxRuntimeExports.jsx("span", { className: "designbase-image__error-text", children: alt || '이미지를 불러올 수 없습니다' })] })), jsxRuntimeExports.jsx("img", { ref: imageRef, src: currentSrc, alt: alt, loading: loading, className: imageClasses, onLoad: handleLoad, onError: handleError, draggable: false })] }));
 };
 
-const Container = ({ size = 'lg', maxWidth, variant = 'plain', padding = 'md', 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)
             return maxWidth;
         const sizes = {
-            sm: 640,
-            md: 768,
-            lg: 1200,
-            xl: 1400,
-            full: 100,
+            s: 'var(--db-container-max-width-s)',
+            m: 'var(--db-container-max-width-m)',
+            l: 'var(--db-container-max-width-l)',
+            xl: 'var(--db-container-max-width-xl)',
+            full: '100%',
         };
         return sizes[size];
     };
@@ -6288,9 +6354,9 @@ const Container = ({ size = 'lg', maxWidth, variant = 'plain', padding = 'md', m
             return '';
         const paddingClasses = {
             none: 'designbase-container--padding-none',
-            sm: 'designbase-container--padding-sm',
-            md: 'designbase-container--padding-md',
-            lg: 'designbase-container--padding-lg',
+            s: 'designbase-container--padding-s',
+            m: 'designbase-container--padding-m',
+            l: 'designbase-container--padding-l',
             xl: 'designbase-container--padding-xl',
         };
         return paddingClasses[padding];
@@ -6301,9 +6367,9 @@ const Container = ({ size = 'lg', maxWidth, variant = 'plain', padding = 'md', m
             return '';
         const marginClasses = {
             none: 'designbase-container--margin-none',
-            sm: 'designbase-container--margin-sm',
-            md: 'designbase-container--margin-md',
-            lg: 'designbase-container--margin-lg',
+            s: 'designbase-container--margin-s',
+            m: 'designbase-container--margin-m',
+            l: 'designbase-container--margin-l',
             xl: 'designbase-container--margin-xl',
         };
         return marginClasses[margin];
@@ -6332,7 +6398,7 @@ const Container = ({ size = 'lg', maxWidth, variant = 'plain', padding = 'md', m
         'designbase-container--border': variant === 'wrapper' && border,
     }, className);
     const style = {
-        maxWidth: size === 'full' ? '100%' : `${getMaxWidth()}px`,
+        maxWidth: getMaxWidth(),
         backgroundColor: variant === 'wrapper' ? backgroundColor : undefined,
     };
     return (jsxRuntimeExports.jsx("div", { className: classes, style: style, children: children }));
@@ -6383,7 +6449,7 @@ const GridCol = ({ size, sizeSm, sizeMd, sizeLg, sizeXl, offset = 0, offsetSm =
     return (jsxRuntimeExports.jsx("div", { className: classes, style: style, children: children }));
 };
 
-const Form = ({ fields, layout = 'vertical', size = 'md', variant = 'default', onSubmit, onChange, initialValues = {}, submitText = '제출', submitLoading = false, submitDisabled = false, showReset = false, resetText = '리셋', title, description, className, style, }) => {
+const Form = ({ fields, layout = 'vertical', size = 'm', variant = 'default', onSubmit, onChange, initialValues = {}, submitText = '제출', submitLoading = false, submitDisabled = false, showReset = false, resetText = '리셋', title, description, className, style, }) => {
     const [values, setValues] = React.useState(initialValues);
     const [errors, setErrors] = React.useState({});
     const [touched, setTouched] = React.useState({});
@@ -6560,7 +6626,7 @@ const Form = ({ fields, layout = 'vertical', size = 'md', variant = 'default', o
     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 Share = ({ url, title, description = '', imageUrl, hashtags = [], variant = 'button', size = 'md', position = 'bottom', platforms = ['facebook', 'twitter', 'linkedin', 'whatsapp', 'email', 'link'], customPlatforms = {}, buttonText = '공유', buttonIcon = icons.ShareAltIcon, modalTitle = '공유하기', copySuccessMessage = '링크가 클립보드에 복사되었습니다!', showQrCode = true, qrCodeSize = 200, className, style, onShare, onShareError, onCopySuccess, onCopyError, }) => {
+const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant = 'button', size = 'm', position = 'bottom', platforms = ['facebook', 'twitter', 'linkedin', 'whatsapp', 'email', 'link'], customPlatforms = {}, buttonText = '공유', buttonIcon = icons.ShareAltIcon, modalTitle = '공유하기', copySuccessMessage = '링크가 클립보드에 복사되었습니다!', showQrCode = true, qrCodeSize = 200, className, style, onShare, onShareError, onCopySuccess, onCopyError, }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [isCopied, setIsCopied] = React.useState(false);
     const [qrCodeData, setQrCodeData] = React.useState('');
@@ -6717,7 +6783,7 @@ const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant
             }), style: { '--platform-color': config.color }, onClick: () => handlePlatformShare(platform), title: config.name, "aria-label": `${config.name}에 공유하기`, children: [jsxRuntimeExports.jsx(PlatformIcon, { className: "designbase-share__platform-icon" }), jsxRuntimeExports.jsx("span", { className: "designbase-share__platform-name", children: config.name }), isLinkCopy && isCopied && (jsxRuntimeExports.jsxs("span", { className: "designbase-share__copy-success", children: [jsxRuntimeExports.jsx(icons.CopyIcon, {}), "\uBCF5\uC0AC\uB428!"] }))] }, platform));
     };
     // 공유 영역 렌더링
-    const renderShareContent = () => (jsxRuntimeExports.jsxs("div", { className: "designbase-share__content", children: [jsxRuntimeExports.jsx("div", { className: "designbase-share__platforms", children: activePlatforms.map(renderPlatformButton) }), showQrCode && qrCodeData && (jsxRuntimeExports.jsxs("div", { className: "designbase-share__qr-section", children: [jsxRuntimeExports.jsx("h4", { className: "designbase-share__qr-title", children: "QR \uCF54\uB4DC" }), jsxRuntimeExports.jsx("div", { className: "designbase-share__qr-code", children: jsxRuntimeExports.jsx("img", { src: generateQrCode(), alt: "QR Code", width: qrCodeSize, height: qrCodeSize }) }), jsxRuntimeExports.jsx("p", { className: "designbase-share__qr-description", children: "QR \uCF54\uB4DC\uB97C \uC2A4\uCE94\uD558\uC5EC \uB9C1\uD06C\uC5D0 \uC811\uC18D\uD558\uC138\uC694" })] })), jsxRuntimeExports.jsxs("div", { className: "designbase-share__link-preview", children: [jsxRuntimeExports.jsx("h4", { className: "designbase-share__link-title", children: "\uACF5\uC720 \uB9C1\uD06C" }), jsxRuntimeExports.jsxs("div", { className: "designbase-share__link-container", children: [jsxRuntimeExports.jsx("input", { type: "text", value: url, readOnly: true, className: "designbase-share__link-input" }), jsxRuntimeExports.jsx(Button, { size: "sm", variant: "primary", onClick: handleCopyLink, className: "designbase-share__copy-button", icon: isCopied ? icons.CopyIcon : icons.LinkIcon, children: isCopied ? '복사됨!' : '복사' })] })] })] }));
+    const renderShareContent = () => (jsxRuntimeExports.jsxs("div", { className: "designbase-share__content", children: [jsxRuntimeExports.jsx("div", { className: "designbase-share__platforms", children: activePlatforms.map(renderPlatformButton) }), showQrCode && qrCodeData && (jsxRuntimeExports.jsxs("div", { className: "designbase-share__qr-section", children: [jsxRuntimeExports.jsx("h4", { className: "designbase-share__qr-title", children: "QR \uCF54\uB4DC" }), jsxRuntimeExports.jsx("div", { className: "designbase-share__qr-code", children: jsxRuntimeExports.jsx("img", { src: generateQrCode(), alt: "QR Code", width: qrCodeSize, height: qrCodeSize }) }), jsxRuntimeExports.jsx("p", { className: "designbase-share__qr-description", children: "QR \uCF54\uB4DC\uB97C \uC2A4\uCE94\uD558\uC5EC \uB9C1\uD06C\uC5D0 \uC811\uC18D\uD558\uC138\uC694" })] })), jsxRuntimeExports.jsxs("div", { className: "designbase-share__link-preview", children: [jsxRuntimeExports.jsx("h4", { className: "designbase-share__link-title", children: "\uACF5\uC720 \uB9C1\uD06C" }), jsxRuntimeExports.jsxs("div", { className: "designbase-share__link-container", children: [jsxRuntimeExports.jsx("input", { type: "text", value: url, readOnly: true, className: "designbase-share__link-input" }), jsxRuntimeExports.jsx(Button, { size: "s", variant: "primary", onClick: handleCopyLink, className: "designbase-share__copy-button", icon: isCopied ? icons.CopyIcon : icons.LinkIcon, children: isCopied ? '복사됨!' : '복사' })] })] })] }));
     // 변형별 렌더링
     switch (variant) {
         case 'dropdown':
@@ -6734,7 +6800,7 @@ const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant
                         position === 'bottom' ? 'bottom-left' :
                             position === 'left' ? 'top-left' : 'bottom-right', className: "designbase-share__dropdown" }) }));
         case 'modal':
-            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderShareButton(), jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: () => setIsOpen(false), title: modalTitle, size: "md", className: "designbase-share__modal", children: renderShareContent() })] }));
+            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderShareButton(), jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: () => setIsOpen(false), title: modalTitle, size: "m", className: "designbase-share__modal", children: renderShareContent() })] }));
         case 'inline':
             return (jsxRuntimeExports.jsx("div", { className: clsx('designbase-share', `designbase-share--${variant}`, className), style: style, children: renderShareContent() }));
         default: // button
@@ -6742,7 +6808,9 @@ const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant
     }
 };
 
-const Card = React.forwardRef(({ title, subtitle, description, children, image, icon: Icon, actions = [], tags = [], meta, variant = 'default', size = 'md', layout = 'vertical', imagePosition = 'top', fullWidth = false, clickable = false, hoverable = false, selectable = false, selected = false, disabled = false, loading = false, className, style, onClick, onSelect, onAction, }, ref) => {
+const Card = React.forwardRef(({ title, subtitle, description, children, image, icon: Icon, actions = [], tags = [], meta, variant = 'default', size = 'm', layout = 'vertical', imagePosition = 'top', fullWidth = false, clickable = false, hoverable = false, selectable = false, selected = false, disabled = false, loading = false, className, style, onClick, onSelect, onAction, }, ref) => {
+    // 아이콘 크기 계산 (m이 기본값) - 카드에 맞게 조정
+    const iconSize = size === 's' ? 16 : size === 'l' ? 20 : size === 'xl' ? 24 : 18;
     const handleClick = () => {
         if (!disabled && !loading && onClick) {
             onClick();
@@ -6781,7 +6849,7 @@ const Card = React.forwardRef(({ title, subtitle, description, children, image,
     const renderIcon = () => {
         if (!Icon)
             return null;
-        return (jsxRuntimeExports.jsx("div", { className: "designbase-card__icon", children: jsxRuntimeExports.jsx(Icon, { className: "designbase-card__icon-element" }) }));
+        return (jsxRuntimeExports.jsx("div", { className: "designbase-card__icon", children: jsxRuntimeExports.jsx(Icon, { size: iconSize, color: "currentColor", className: "designbase-card__icon-element" }) }));
     };
     // 태그 렌더링
     const renderTags = () => {
@@ -6801,7 +6869,7 @@ const Card = React.forwardRef(({ title, subtitle, description, children, image,
             return null;
         return (jsxRuntimeExports.jsx("div", { className: "designbase-card__actions", children: actions.map((action, index) => {
                 const ActionIcon = action.icon;
-                return (jsxRuntimeExports.jsx(Button, { variant: action.variant || 'primary', size: action.size || 'sm', onClick: () => handleActionClick(action, index), disabled: action.disabled || disabled, loading: action.loading, icon: ActionIcon, children: action.label }, index));
+                return (jsxRuntimeExports.jsx(Button, { variant: action.variant || 'primary', size: action.size || 's', onClick: () => handleActionClick(action, index), disabled: action.disabled || disabled, loading: action.loading, icon: ActionIcon, children: action.label }, index));
             }) }));
     };
     // 카드 내용 렌더링
@@ -6815,7 +6883,7 @@ const Card = React.forwardRef(({ title, subtitle, description, children, image,
 });
 Card.displayName = 'Card';
 
-const Reorder = ({ items, variant = 'default', size = 'md', orientation = 'vertical', showDragHandle = true, showDragIcon = true, selectable = false, multiSelect = false, fullWidth = false, disabled = false, className, style, onReorder, onSelect, onItemClick, onDragStart, onDragEnd, }) => {
+const Reorder = ({ items, variant = 'default', size = 'm', orientation = 'vertical', showDragHandle = true, showDragIcon = true, selectable = false, multiSelect = false, fullWidth = false, disabled = false, className, style, onReorder, onSelect, onItemClick, onDragStart, onDragEnd, }) => {
     const [reorderedItems, setReorderedItems] = React.useState(items);
     const [draggedItem, setDraggedItem] = React.useState(null);
     const [draggedIndex, setDraggedIndex] = React.useState(-1);
@@ -7147,7 +7215,7 @@ const SplitView = ({ direction = 'horizontal', mode = 'ratio', initialSplit = 0.
     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 })] }));
 };
 
-const Section = ({ title, subtitle, description, size = 'md', 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,
@@ -7157,7 +7225,7 @@ const Section = ({ title, subtitle, description, size = 'md', variant = 'default
     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 }))] }));
 };
 
-const Timeline = ({ items, position = 'alternate', variant = 'default', size = 'md', color = 'primary', clickable = false, fullWidth = false, disabled = false, className, style, onItemClick, }) => {
+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)
             return;
@@ -7211,7 +7279,7 @@ const Timeline = ({ items, position = 'alternate', variant = 'default', size = '
             }) }) }));
 };
 
-const ProgressStep = ({ items, variant = 'default', size = 'md', layout = 'vertical', currentStep = 0, clickable = false, fullWidth = false, disabled = false, className, style, onStepClick, }) => {
+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)
             return;
@@ -7249,7 +7317,7 @@ const ProgressStep = ({ items, variant = 'default', size = 'md', layout = 'verti
         }) }));
 };
 
-const Stat = ({ value, label, icon, iconPosition = 'left', size = 'md', variant = 'default', layout = 'horizontal', color = 'primary', customColor, progress, showProgress = false, change, showChange = false, description, showDescription = false, clickable = false, disabled = false, animated = false, onClick, className, }) => {
+const Stat = ({ value, label, icon, iconPosition = 'left', size = 'm', variant = 'default', layout = 'horizontal', color = 'primary', customColor, progress, showProgress = false, change, showChange = false, description, showDescription = false, clickable = false, disabled = false, animated = false, onClick, className, }) => {
     // 변화율 텍스트 생성
     const getChangeText = () => {
         if (!change)
@@ -7284,7 +7352,7 @@ const Stat = ({ value, label, icon, iconPosition = 'left', size = 'md', variant
     return (jsxRuntimeExports.jsxs("div", { className: classes, style: customStyle, onClick: handleClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, children: [icon && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-stat__icon', `designbase-stat__icon--${iconPosition}`), children: icon })), jsxRuntimeExports.jsxs("div", { className: "designbase-stat__content", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-stat__main", children: [jsxRuntimeExports.jsx("div", { className: "designbase-stat__value", children: value }), jsxRuntimeExports.jsx("div", { className: "designbase-stat__label", children: label })] }), showChange && change && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-stat__change', getChangeClass()), children: getChangeText() })), showDescription && description && (jsxRuntimeExports.jsx("div", { className: "designbase-stat__description", children: description }))] }), showProgress && progress !== undefined && (jsxRuntimeExports.jsx("div", { className: "designbase-stat__progress", children: jsxRuntimeExports.jsx("div", { className: "designbase-stat__progress-bar", style: { width: `${Math.min(Math.max(progress, 0), 100)}%` } }) }))] }));
 };
 
-const Rating = ({ value, maxValue = 5, size = 'md', 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 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] = React.useState(null);
     const [isHovering, setIsHovering] = React.useState(false);
     // 현재 표시할 값 (호버 중이면 호버 값, 아니면 실제 값)
@@ -7360,7 +7428,7 @@ const Rating = ({ value, maxValue = 5, size = 'md', variant = 'default', type =
         const starValue = getStarValue(index);
         const isClickable = clickable && !disabled && !readonly;
         const starProps = {
-            size: size === 'xs' ? 12 : size === 'sm' ? 16 : size === 'md' ? 20 : size === 'lg' ? 24 : 32,
+            size: size === 'xs' ? 12 : size === 's' ? 16 : size === 'm' ? 20 : size === 'l' ? 24 : 32,
             className: clsx('designbase-rating__star', {
                 'designbase-rating__star--clickable': isClickable,
                 'designbase-rating__star--animated': animated,
@@ -7407,7 +7475,7 @@ const Rating = ({ value, maxValue = 5, size = 'md', variant = 'default', type =
     return (jsxRuntimeExports.jsxs("div", { className: classes, style: customStyle, children: [display === 'stars' || display === 'both' || display === 'detailed' ? (jsxRuntimeExports.jsx("div", { className: "designbase-rating__stars", children: Array.from({ length: 5 }, (_, index) => renderStar(index)) })) : null, display === 'number' || display === 'both' ? (jsxRuntimeExports.jsx("div", { className: "designbase-rating__number-container", children: renderNumberRating() })) : null, display === 'reviews' ? (jsxRuntimeExports.jsx("div", { className: "designbase-rating__reviews", children: renderReviewCount() })) : null, display === 'detailed' ? (renderDetailedInfo()) : null] }));
 };
 
-const VideoPlayer = ({ src, poster, title, description, size = 'md', 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 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 = React.useRef(null);
     const containerRef = React.useRef(null);
     const progressRef = React.useRef(null);
@@ -7651,7 +7719,7 @@ const VideoPlayer = ({ src, poster, title, description, size = 'md', variant = '
     return (jsxRuntimeExports.jsxs("div", { ref: containerRef, className: classes, onMouseEnter: () => setShowControlsOverlay(true), onMouseLeave: () => setShowControlsOverlay(false), children: [jsxRuntimeExports.jsxs("video", { ref: videoRef, src: currentSrc, poster: poster, autoPlay: autoPlay, loop: loop, muted: muted, playsInline: true, className: "designbase-video-player__video", children: [subtitles.map((subtitle, index) => (jsxRuntimeExports.jsx("track", { kind: "subtitles", src: subtitle.src, srcLang: subtitle.lang, label: subtitle.label, default: subtitle.label === currentSubtitle }, index))), "\uBE44\uB514\uC624\uB97C \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uBE0C\uB77C\uC6B0\uC800\uC785\uB2C8\uB2E4."] }), isLoading && (jsxRuntimeExports.jsx("div", { className: "designbase-video-player__loading", children: jsxRuntimeExports.jsx("div", { className: "designbase-video-player__spinner" }) })), error && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__error", children: [jsxRuntimeExports.jsx("p", { children: error }), jsxRuntimeExports.jsx("button", { onClick: () => window.location.reload(), children: "\uB2E4\uC2DC \uC2DC\uB3C4" })] })), showControls && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__overlay", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__top-controls", children: [title && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__title", children: [jsxRuntimeExports.jsx("h3", { children: title }), description && jsxRuntimeExports.jsx("p", { children: description })] })), showSettings && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__settings", children: [jsxRuntimeExports.jsx("button", { className: "designbase-video-player__settings-button", onClick: () => setShowSettingsMenu(!showSettingsMenu), children: jsxRuntimeExports.jsx(icons.SettingsIcon, { size: 20 }) }), showSettingsMenu && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__settings-menu", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__setting-group", children: [jsxRuntimeExports.jsx("label", { children: "\uC7AC\uC0DD \uC18D\uB3C4" }), jsxRuntimeExports.jsx("select", { value: playbackRate, onChange: (e) => handlePlaybackRateChange(parseFloat(e.target.value)), children: playbackRates.map(rate => (jsxRuntimeExports.jsxs("option", { value: rate, children: [rate, "x"] }, rate))) })] }), qualities.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__setting-group", children: [jsxRuntimeExports.jsx("label", { children: "\uD488\uC9C8" }), jsxRuntimeExports.jsx("select", { value: currentQuality, onChange: (e) => handleQualityChange(e.target.value), children: qualities.map(quality => (jsxRuntimeExports.jsx("option", { value: quality.value, children: quality.label }, quality.value))) })] })), subtitles.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__setting-group", children: [jsxRuntimeExports.jsx("label", { children: "\uC790\uB9C9" }), jsxRuntimeExports.jsxs("select", { value: currentSubtitle, onChange: (e) => handleSubtitleChange(e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: "\uC790\uB9C9 \uC5C6\uC74C" }), subtitles.map(subtitle => (jsxRuntimeExports.jsx("option", { value: subtitle.label, children: subtitle.label }, subtitle.label)))] })] }))] }))] }))] }), jsxRuntimeExports.jsx("div", { className: "designbase-video-player__center-controls", children: jsxRuntimeExports.jsx("button", { className: "designbase-video-player__play-button", onClick: togglePlay, children: isPlaying ? jsxRuntimeExports.jsx(icons.PauseIcon, { size: 48 }) : jsxRuntimeExports.jsx(icons.PlayIcon, { size: 48 }) }) }), jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__bottom-controls", children: [showProgress && (jsxRuntimeExports.jsxs("div", { ref: progressRef, className: "designbase-video-player__progress", onClick: handleProgressChange, children: [jsxRuntimeExports.jsx("div", { className: "designbase-video-player__progress-bar", style: { width: `${progressPercentage}%` } }), jsxRuntimeExports.jsx("div", { className: "designbase-video-player__progress-handle", style: { left: `${progressPercentage}%` } })] })), jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__controls", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__left-controls", children: [jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", onClick: togglePlay, children: isPlaying ? jsxRuntimeExports.jsx(icons.PauseIcon, { size: 20 }) : jsxRuntimeExports.jsx(icons.PlayIcon, { size: 20 }) }), showVolume && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__volume", children: [jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", onClick: toggleMute, onMouseEnter: () => setShowVolumeSlider(true), onMouseLeave: () => setShowVolumeSlider(false), children: isMuted || volume === 0 ? jsxRuntimeExports.jsx(icons.MuteFilledIcon, { size: 20 }) : jsxRuntimeExports.jsx(icons.VolumeUpIcon, { size: 20 }) }), showVolumeSlider && (jsxRuntimeExports.jsx("div", { ref: volumeRef, className: "designbase-video-player__volume-slider", children: jsxRuntimeExports.jsx("input", { type: "range", min: "0", max: "1", step: "0.1", value: volume, onChange: handleVolumeSliderChange }) }))] })), showTime && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__time", children: [jsxRuntimeExports.jsx("span", { children: formatTime(currentTime) }), jsxRuntimeExports.jsx("span", { children: "/" }), jsxRuntimeExports.jsx("span", { children: formatTime(duration) })] }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__right-controls", children: [playlist.length > 1 && (jsxRuntimeExports.jsxs("div", { className: "designbase-video-player__playlist-controls", children: [jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", disabled: playlistIndex === 0, onClick: () => handlePlaylistChange(playlistIndex - 1), children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: 16 }) }), jsxRuntimeExports.jsxs("span", { children: [playlistIndex + 1, " / ", playlist.length] }), jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", disabled: playlistIndex === playlist.length - 1, onClick: () => handlePlaylistChange(playlistIndex + 1), children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 16 }) })] })), enableFullscreen && (jsxRuntimeExports.jsx("button", { className: "designbase-video-player__control-button", onClick: toggleFullscreen, children: isFullscreen ? jsxRuntimeExports.jsx(icons.ShrinkIcon, { size: 20 }) : jsxRuntimeExports.jsx(icons.ExpandIcon, { size: 20 }) }))] })] })] })] }))] }));
 };
 
-const AudioPlayer = ({ src, title, artist, album, albumArt, size = 'md', variant = 'default', theme = 'auto', autoPlay = false, loop = false, muted = false, showControls = true, enableKeyboard = true, showProgress = true, showTime = true, showVolume = true, showSettings = false, playlist = [], currentIndex = 0, autoPause = true, playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2], defaultPlaybackRate = 1, repeatMode = 'none', shuffle = false, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onPlaylistChange, onPlaybackRateChange, onRepeatModeChange, onShuffleChange, onError, className, }) => {
+const AudioPlayer = ({ src, title, artist, album, albumArt, size = 'm', variant = 'default', theme = 'auto', autoPlay = false, loop = false, muted = false, showControls = true, enableKeyboard = true, showProgress = true, showTime = true, showVolume = true, showSettings = false, playlist = [], currentIndex = 0, autoPause = true, playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2], defaultPlaybackRate = 1, repeatMode = 'none', shuffle = false, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onPlaylistChange, onPlaybackRateChange, onRepeatModeChange, onShuffleChange, onError, className, }) => {
     const audioRef = React.useRef(null);
     const progressRef = React.useRef(null);
     const volumeRef = React.useRef(null);
@@ -7669,6 +7737,8 @@ const AudioPlayer = ({ src, title, artist, album, albumArt, size = 'md', variant
     const [error, setError] = React.useState(null);
     const [playlistIndex, setPlaylistIndex] = React.useState(currentIndex);
     const [shuffledPlaylist, setShuffledPlaylist] = React.useState([]);
+    // 아이콘 크기 계산 (m이 기본값)
+    const iconSize = size === 's' ? 16 : size === 'm' ? 20 : size === 'l' ? 24 : 32; // xl은 32
     // 셔플된 플레이리스트 인덱스 생성
     React.useEffect(() => {
         if (playlist.length > 0 && isShuffle) {
@@ -7936,12 +8006,12 @@ const AudioPlayer = ({ src, title, artist, album, albumArt, size = 'md', variant
     return (jsxRuntimeExports.jsxs("div", { className: classes, children: [jsxRuntimeExports.jsx("audio", { ref: audioRef, src: currentSrc, autoPlay: autoPlay, loop: loop, muted: muted, preload: "metadata" }), isLoading && (jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__loading", children: jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__spinner" }) })), error && (jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__error", children: [jsxRuntimeExports.jsx("p", { children: error }), jsxRuntimeExports.jsx("button", { onClick: () => window.location.reload(), children: "\uB2E4\uC2DC \uC2DC\uB3C4" })] })), jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__album-art", children: [currentTrack?.albumArt ? (jsxRuntimeExports.jsx("img", { src: currentTrack.albumArt, alt: currentTrack.title || 'Album Art', onError: (e) => {
                             e.currentTarget.style.display = 'none';
                             e.currentTarget.nextElementSibling?.classList.remove('album-placeholder');
-                        } })) : null, jsxRuntimeExports.jsx("div", { className: "album-placeholder", children: "\uD83C\uDFB5" })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__main", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__info", children: [jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__title", children: currentTrack?.title || 'Unknown Track' }), jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__artist", children: currentTrack?.artist || 'Unknown Artist' }), currentTrack?.album && (jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__album", children: currentTrack.album }))] }), showProgress && (jsxRuntimeExports.jsxs("div", { ref: progressRef, className: "designbase-audio-player__progress", onClick: handleProgressChange, children: [jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__progress-bar", style: { width: `${progressPercentage}%` } }), jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__progress-handle", style: { left: `${progressPercentage}%` } })] })), showControls && (jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__controls", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__left-controls", children: [playlist.length > 0 && (jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__control-button", onClick: toggleShuffle, children: jsxRuntimeExports.jsx(icons.RefreshIcon, { size: 16 }) })), jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__control-button", onClick: handlePrevious, disabled: playlist.length > 0 && playlistIndex === 0, children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: 16 }) })] }), jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__center-controls", children: jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__play-button", onClick: togglePlay, children: isPlaying ? jsxRuntimeExports.jsx(icons.PauseIcon, { size: 24 }) : jsxRuntimeExports.jsx(icons.PlayIcon, { size: 24 }) }) }), jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__right-controls", children: [jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__control-button", onClick: handleNext, disabled: playlist.length > 0 && playlistIndex === playlist.length - 1, children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 16 }) }), playlist.length > 0 && (jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__control-button", onClick: toggleRepeatMode, children: jsxRuntimeExports.jsx(icons.RepeatIcon, { size: 16 }) }))] })] })), jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__bottom-controls", children: [jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__left-bottom", children: showTime && (jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__time", children: [jsxRuntimeExports.jsx("span", { children: formatTime(currentTime) }), jsxRuntimeExports.jsx("span", { children: "/" }), jsxRuntimeExports.jsx("span", { children: formatTime(duration) })] })) }), jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__right-bottom", children: [showVolume && (jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__volume", children: [jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__control-button", onClick: toggleMute, title: isMuted || volume === 0 ? '음소거 해제' : '음소거', children: isMuted || volume === 0 ? jsxRuntimeExports.jsx(icons.MuteFilledIcon, { size: 16 }) : jsxRuntimeExports.jsx(icons.VolumeUpIcon, { size: 16 }) }), jsxRuntimeExports.jsxs("div", { ref: volumeRef, className: "designbase-audio-player__volume-slider", children: [jsxRuntimeExports.jsxs("div", { className: "volume-label", children: [jsxRuntimeExports.jsx("span", { children: "\uD83D\uDD0A" }), jsxRuntimeExports.jsxs("span", { children: [Math.round(volume * 100), "%"] })] }), jsxRuntimeExports.jsx("input", { type: "range", min: "0", max: "1", step: "0.1", value: volume, onChange: handleVolumeSliderChange })] })] })), showSettings && (jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__settings", children: [jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__control-button", onClick: () => setShowSettingsMenu(!showSettingsMenu), children: jsxRuntimeExports.jsx(icons.SettingsIcon, { size: 16 }) }), showSettingsMenu && (jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__settings-menu", children: jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__setting-group", children: [jsxRuntimeExports.jsx("label", { children: "\uC7AC\uC0DD \uC18D\uB3C4" }), jsxRuntimeExports.jsx("select", { value: playbackRate, onChange: (e) => handlePlaybackRateChange(parseFloat(e.target.value)), children: playbackRates.map(rate => (jsxRuntimeExports.jsxs("option", { value: rate, children: [rate, "x"] }, rate))) })] }) }))] }))] })] })] }), variant === 'full' && playlist.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__playlist", children: [jsxRuntimeExports.jsx("h4", { children: "\uD50C\uB808\uC774\uB9AC\uC2A4\uD2B8" }), jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__playlist-tracks", children: playlist.map((track, index) => (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-audio-player__playlist-track', {
+                        } })) : null, jsxRuntimeExports.jsx("div", { className: "album-placeholder", children: "\uD83C\uDFB5" })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__main", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__info", children: [jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__title", children: currentTrack?.title || 'Unknown Track' }), jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__artist", children: currentTrack?.artist || 'Unknown Artist' }), currentTrack?.album && (jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__album", children: currentTrack.album }))] }), showProgress && (jsxRuntimeExports.jsxs("div", { ref: progressRef, className: "designbase-audio-player__progress", onClick: handleProgressChange, children: [jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__progress-bar", style: { width: `${progressPercentage}%` } }), jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__progress-handle", style: { left: `${progressPercentage}%` } })] })), showControls && (jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__controls", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__left-controls", children: [playlist.length > 0 && (jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__control-button", onClick: toggleShuffle, children: jsxRuntimeExports.jsx(icons.RefreshIcon, { size: iconSize }) })), jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__control-button", onClick: handlePrevious, disabled: playlist.length > 0 && playlistIndex === 0, children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: iconSize }) })] }), jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__center-controls", children: jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__play-button", onClick: togglePlay, children: isPlaying ? jsxRuntimeExports.jsx(icons.PauseIcon, { size: iconSize * 1.2 }) : jsxRuntimeExports.jsx(icons.PlayIcon, { size: iconSize * 1.2 }) }) }), jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__right-controls", children: [jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__control-button", onClick: handleNext, disabled: playlist.length > 0 && playlistIndex === playlist.length - 1, children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: iconSize }) }), playlist.length > 0 && (jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__control-button", onClick: toggleRepeatMode, children: jsxRuntimeExports.jsx(icons.RepeatIcon, { size: iconSize }) }))] })] })), jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__bottom-controls", children: [jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__left-bottom", children: showTime && (jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__time", children: [jsxRuntimeExports.jsx("span", { children: formatTime(currentTime) }), jsxRuntimeExports.jsx("span", { children: "/" }), jsxRuntimeExports.jsx("span", { children: formatTime(duration) })] })) }), jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__right-bottom", children: [showVolume && (jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__volume", children: [jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__control-button", onClick: toggleMute, title: isMuted || volume === 0 ? '음소거 해제' : '음소거', children: isMuted || volume === 0 ? jsxRuntimeExports.jsx(icons.MuteFilledIcon, { size: iconSize }) : jsxRuntimeExports.jsx(icons.VolumeUpIcon, { size: iconSize }) }), jsxRuntimeExports.jsxs("div", { ref: volumeRef, className: "designbase-audio-player__volume-slider", children: [jsxRuntimeExports.jsxs("div", { className: "volume-label", children: [jsxRuntimeExports.jsx("span", { children: "\uD83D\uDD0A" }), jsxRuntimeExports.jsxs("span", { children: [Math.round(volume * 100), "%"] })] }), jsxRuntimeExports.jsx("input", { type: "range", min: "0", max: "1", step: "0.1", value: volume, onChange: handleVolumeSliderChange })] })] })), showSettings && (jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__settings", children: [jsxRuntimeExports.jsx("button", { className: "designbase-audio-player__control-button", onClick: () => setShowSettingsMenu(!showSettingsMenu), children: jsxRuntimeExports.jsx(icons.SettingsIcon, { size: iconSize }) }), showSettingsMenu && (jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__settings-menu", children: jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__setting-group", children: [jsxRuntimeExports.jsx("label", { children: "\uC7AC\uC0DD \uC18D\uB3C4" }), jsxRuntimeExports.jsx("select", { value: playbackRate, onChange: (e) => handlePlaybackRateChange(parseFloat(e.target.value)), children: playbackRates.map(rate => (jsxRuntimeExports.jsxs("option", { value: rate, children: [rate, "x"] }, rate))) })] }) }))] }))] })] })] }), variant === 'full' && playlist.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "designbase-audio-player__playlist", children: [jsxRuntimeExports.jsx("h4", { children: "\uD50C\uB808\uC774\uB9AC\uC2A4\uD2B8" }), jsxRuntimeExports.jsx("div", { className: "designbase-audio-player__playlist-tracks", children: playlist.map((track, index) => (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-audio-player__playlist-track', {
                                 'designbase-audio-player__playlist-track--active': index === playlistIndex
                             }), 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 Dropzone = ({ size = 'md', 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 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] = React.useState(false);
     const fileInputRef = React.useRef(null);
     // 드래그 오버 상태 관리
@@ -8056,7 +8126,7 @@ const Dropzone = ({ size = 'md', variant = 'default', showIcon = true, icon, ima
         }, 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 FileUploader = ({ size = 'md', variant = 'default', accept, maxSize, multiple = false, showFileList = true, showProgress = true, disabled = false, readonly = false, onUpload, onRemove, onRetry, className, }) => {
+const FileUploader = ({ size = 'm', variant = 'default', accept, maxSize, multiple = false, showFileList = true, showProgress = true, disabled = false, readonly = false, onUpload, onRemove, onRetry, className, }) => {
     const [uploadedFiles, setUploadedFiles] = React.useState([]);
     const [isUploading, setIsUploading] = React.useState(false);
     // 파일 선택 처리
@@ -8152,7 +8222,7 @@ const FileUploader = ({ size = 'md', variant = 'default', accept, maxSize, multi
             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, { type: "circular", size: "sm" });
+                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':
@@ -8164,10 +8234,10 @@ const FileUploader = ({ size = 'md', variant = 'default', accept, maxSize, multi
     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, { value: uploadFile.progress || 0, size: "sm", 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 Progress = ({ value, max = 100, size = 'md', 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,
@@ -8185,7 +8255,7 @@ const Progress = ({ value, max = 100, size = 'md', variant = 'default', type = '
     return (jsxRuntimeExports.jsx("div", { className: classes, children: type === 'linear' ? renderLinearProgress() : renderCircularProgress() }));
 };
 
-const Stepper = ({ value = 0, min = 0, max = 100, step = 1, size = 'md', 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] = React.useState(value);
     const currentValue = value !== undefined ? value : internalValue;
     const isMinReached = currentValue <= min;
@@ -8253,7 +8323,7 @@ const Stepper = ({ value = 0, min = 0, max = 100, step = 1, size = 'md', variant
     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] })] }));
 };
 
-const Gradient = ({ colors, direction = 'to-right', size = 'md', 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 {};
@@ -8346,7 +8416,7 @@ const Gradient = ({ colors, direction = 'to-right', size = 'md', variant = 'defa
     return (jsxRuntimeExports.jsx("div", { className: classes, style: getStyle(), children: children }));
 };
 
-const Toolbar = ({ items, size = 'md', 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)
@@ -8405,7 +8475,7 @@ const Toolbar = ({ items, size = 'md', variant = 'default', position = 'top', fu
     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 }))] }) }));
 };
 
-const TimePicker = ({ value, onChange, format = '24h', mode = 'dropdown', hourStep = 1, minuteStep = 15, minTime, maxTime, size = 'md', 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) {
@@ -8598,11 +8668,13 @@ const TimePicker = ({ value, onChange, format = '24h', mode = 'dropdown', hourSt
                                     }) })] }))] }) }))] }));
 };
 
-const DatePicker = ({ mode = 'single', value, onChange, minDate, maxDate, events = [], showOutsideDays = true, startOfWeek = 'sunday', size = 'md', variant = 'default', highlightWeekends = true, highlightHolidays = false, today = new Date(), locale = 'ko-KR', format = 'yyyy-MM-dd', className, disabled = false, readonly = false, 
+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
 isOpen: controlledIsOpen, onOpenChange, trigger, placement = 'bottom', 
 // 인라인 모드
 inline = false, }) => {
+    // 아이콘 크기 계산 (m이 기본값)
+    const iconSize = size === 's' ? 14 : size === 'l' ? 18 : 16;
     const [currentDate, setCurrentDate] = React.useState(new Date());
     const [hoveredDate, setHoveredDate] = React.useState(null);
     const [internalIsOpen, setInternalIsOpen] = React.useState(false);
@@ -8849,16 +8921,16 @@ inline = false, }) => {
         return (jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "designbase-date-picker-container", children: [jsxRuntimeExports.jsx("div", { onClick: () => !disabled && !readonly && setIsOpen(!isOpen), children: trigger }), isOpen && (jsxRuntimeExports.jsx("div", { className: clsx('designbase-date-picker-dropdown', `designbase-date-picker-dropdown--placement-${placement}`), children: jsxRuntimeExports.jsxs("div", { className: clsx('designbase-date-picker', `designbase-date-picker--size-${size}`, `designbase-date-picker--variant-${variant}`, {
                             'designbase-date-picker--disabled': disabled,
                             'designbase-date-picker--readonly': readonly,
-                        }, 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("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntimeExports.jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), 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("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntimeExports.jsx("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), 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" }) })] }) }))] }));
+                        }, 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(icons.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(icons.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" }) })] }) }))] }));
     }
     // 인라인 형태 (기존 방식)
     return (jsxRuntimeExports.jsxs("div", { className: clsx('designbase-date-picker', `designbase-date-picker--size-${size}`, `designbase-date-picker--variant-${variant}`, {
             'designbase-date-picker--disabled': disabled,
             'designbase-date-picker--readonly': readonly,
-        }, 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("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntimeExports.jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), 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("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntimeExports.jsx("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), 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" }) })] }));
+        }, 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(icons.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(icons.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" }) })] }));
 };
 
-const MarkdownEditor = ({ size = 'md', variant = 'default', mode = 'preview', // 기본값을 preview로 변경
+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초
 onFileUpload, onChange, onSave, onFocus, onBlur, className, }) => {
     const [internalValue, setInternalValue] = React.useState(value);
@@ -9151,7 +9223,7 @@ onFileUpload, onChange, onSave, onFocus, onBlur, className, }) => {
                             }, className: "designbase-markdown-editor__textarea" }) })), (currentMode === 'preview' || currentMode === 'split') && (jsxRuntimeExports.jsx("div", { className: "designbase-markdown-editor__preview-panel", children: jsxRuntimeExports.jsx("div", { ref: previewRef, className: "designbase-markdown-editor__preview", dangerouslySetInnerHTML: { __html: markdownToHtml(internalValue) } }) })), currentMode === 'code' && (jsxRuntimeExports.jsx("div", { className: "designbase-markdown-editor__code-panel", children: jsxRuntimeExports.jsx("pre", { className: "designbase-markdown-editor__code-view", children: jsxRuntimeExports.jsx("code", { children: internalValue }) }) }))] }), renderStatus()] }));
 };
 
-const Lightbox = ({ images, currentIndex = 0, size = 'lg', variant = 'default', theme = 'light', isOpen, onOpenChange, onImageChange, enableZoom = true, enableRotate = true, enableDownload = true, enableFullscreen = true, enableKeyboard = true, enableWheelZoom = true, showThumbnails = true, showCounter = true, showCloseButton = true, showNavigationButtons = true, showToolbar = true, closeOnBackdropClick = true, closeOnEscape = true, readonly = false, disabled = false, className, }) => {
+const Lightbox = ({ images, currentIndex = 0, size = 'l', variant = 'default', theme = 'light', isOpen, onOpenChange, onImageChange, enableZoom = true, enableRotate = true, enableDownload = true, enableFullscreen = true, enableKeyboard = true, enableWheelZoom = true, showThumbnails = true, showCounter = true, showCloseButton = true, showNavigationButtons = true, showToolbar = true, closeOnBackdropClick = true, closeOnEscape = true, readonly = false, disabled = false, className, }) => {
     const [internalCurrentIndex, setInternalCurrentIndex] = React.useState(currentIndex);
     const [zoomLevel, setZoomLevel] = React.useState(1);
     const [rotation, setRotation] = React.useState(0);
@@ -9161,6 +9233,8 @@ const Lightbox = ({ images, currentIndex = 0, size = 'lg', variant = 'default',
     const [imagePosition, setImagePosition] = React.useState({ x: 0, y: 0 });
     const [isImageLoaded, setIsImageLoaded] = React.useState(false);
     const [isImageError, setIsImageError] = React.useState(false);
+    const [touchStart, setTouchStart] = React.useState({ x: 0, y: 0 });
+    const [touchEnd, setTouchEnd] = React.useState({ x: 0, y: 0 });
     const modalRef = React.useRef(null);
     const imageRef = React.useRef(null);
     const containerRef = React.useRef(null);
@@ -9334,6 +9408,38 @@ const Lightbox = ({ images, currentIndex = 0, size = 'lg', variant = 'default',
     const handleMouseUp = React.useCallback(() => {
         setIsDragging(false);
     }, []);
+    // 터치 시작 핸들러
+    const handleTouchStart = React.useCallback((event) => {
+        if (disabled || readonly)
+            return;
+        const touch = event.touches[0];
+        setTouchStart({ x: touch.clientX, y: touch.clientY });
+    }, [disabled, readonly]);
+    // 터치 종료 핸들러
+    const handleTouchEnd = React.useCallback((event) => {
+        if (disabled || readonly)
+            return;
+        const touch = event.changedTouches[0];
+        setTouchEnd({ x: touch.clientX, y: touch.clientY });
+        handleSwipe();
+    }, [disabled, readonly]);
+    // 스와이프 처리
+    const handleSwipe = React.useCallback(() => {
+        const deltaX = touchStart.x - touchEnd.x;
+        const deltaY = touchStart.y - touchEnd.y;
+        const minSwipeDistance = 50;
+        // 수평 스와이프가 수직 스와이프보다 크고, 최소 거리 이상일 때
+        if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > minSwipeDistance) {
+            if (deltaX > 0) {
+                // 왼쪽으로 스와이프 - 다음 이미지
+                goToNext();
+            }
+            else {
+                // 오른쪽으로 스와이프 - 이전 이미지
+                goToPrevious();
+            }
+        }
+    }, [touchStart, touchEnd, goToNext, goToPrevious]);
     // 키보드 이벤트 핸들러
     React.useEffect(() => {
         if (!enableKeyboard || !isOpen || disabled || readonly)
@@ -9416,7 +9522,7 @@ const Lightbox = ({ images, currentIndex = 0, size = 'lg', variant = 'default',
             'designbase-lightbox--fullscreen': isFullscreen,
             'designbase-lightbox--disabled': disabled,
             'designbase-lightbox--readonly': readonly,
-        }, className), children: jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__overlay", children: jsxRuntimeExports.jsxs("div", { ref: modalRef, className: "designbase-lightbox__modal", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__header", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__title", children: [currentImage.title && (jsxRuntimeExports.jsx("h3", { className: "designbase-lightbox__title-text", children: currentImage.title })), showCounter && (jsxRuntimeExports.jsxs("span", { className: "designbase-lightbox__counter", children: [internalCurrentIndex + 1, " / ", images.length] }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__header-actions", children: [showToolbar && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [enableZoom && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomOut, disabled: disabled || readonly, title: "\uC90C \uC544\uC6C3", type: "button", children: jsxRuntimeExports.jsx(icons.MinusIcon, { size: 16 }) }), jsxRuntimeExports.jsxs("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomReset, disabled: disabled || readonly, title: "\uC90C \uB9AC\uC14B", type: "button", children: [Math.round(zoomLevel * 100), "%"] }), jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomIn, disabled: disabled || readonly, title: "\uC90C \uC778", type: "button", children: jsxRuntimeExports.jsx(icons.PlusIcon, { size: 16 }) })] })), enableRotate && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleRotate, disabled: disabled || readonly, title: "\uD68C\uC804", type: "button", children: jsxRuntimeExports.jsx(icons.RefreshIcon, { size: 16 }) })), enableDownload && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleDownload, disabled: disabled || readonly, title: "\uB2E4\uC6B4\uB85C\uB4DC", type: "button", children: jsxRuntimeExports.jsx(icons.DownloadIcon, { size: 16 }) })), enableFullscreen && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsxRuntimeExports.jsx(icons.ShrinkIcon, { size: 16 }) : jsxRuntimeExports.jsx(icons.ExpandIcon, { size: 16 }) }))] })), showCloseButton && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__close-button", onClick: handleClose, disabled: disabled, title: "\uB2EB\uAE30", type: "button", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: 20 }) }))] })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__content", children: [showNavigationButtons && images.length > 1 && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__nav-button designbase-lightbox__nav-button--prev", onClick: goToPrevious, disabled: disabled || readonly, title: "\uC774\uC804 \uC774\uBBF8\uC9C0", type: "button", children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: 24 }) }), jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__nav-button designbase-lightbox__nav-button--next", onClick: goToNext, disabled: disabled || readonly, title: "\uB2E4\uC74C \uC774\uBBF8\uC9C0", type: "button", children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 24 }) })] })), jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "designbase-lightbox__image-container", onWheel: handleWheel, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: [isImageError ? (jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__error", children: [jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__error-icon", children: "\u26A0\uFE0F" }), jsxRuntimeExports.jsx("p", { className: "designbase-lightbox__error-text", children: "\uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." })] })) : (jsxRuntimeExports.jsx("img", { ref: imageRef, src: currentImage.src, alt: currentImage.alt || currentImage.title || `이미지 ${internalCurrentIndex + 1}`, className: clsx('designbase-lightbox__image', {
+        }, className), children: jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__overlay", children: jsxRuntimeExports.jsxs("div", { ref: modalRef, className: "designbase-lightbox__modal", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__header", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__title", children: [currentImage.title && (jsxRuntimeExports.jsx("h3", { className: "designbase-lightbox__title-text", children: currentImage.title })), showCounter && (jsxRuntimeExports.jsxs("span", { className: "designbase-lightbox__counter", children: [internalCurrentIndex + 1, " / ", images.length] }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__header-actions", children: [showToolbar && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [enableZoom && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomOut, disabled: disabled || readonly, title: "\uC90C \uC544\uC6C3", type: "button", children: jsxRuntimeExports.jsx(icons.MinusIcon, { size: 16 }) }), jsxRuntimeExports.jsxs("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomReset, disabled: disabled || readonly, title: "\uC90C \uB9AC\uC14B", type: "button", children: [Math.round(zoomLevel * 100), "%"] }), jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomIn, disabled: disabled || readonly, title: "\uC90C \uC778", type: "button", children: jsxRuntimeExports.jsx(icons.PlusIcon, { size: 16 }) })] })), enableRotate && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleRotate, disabled: disabled || readonly, title: "\uD68C\uC804", type: "button", children: jsxRuntimeExports.jsx(icons.RefreshIcon, { size: 16 }) })), enableDownload && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleDownload, disabled: disabled || readonly, title: "\uB2E4\uC6B4\uB85C\uB4DC", type: "button", children: jsxRuntimeExports.jsx(icons.DownloadIcon, { size: 16 }) })), enableFullscreen && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsxRuntimeExports.jsx(icons.ShrinkIcon, { size: 16 }) : jsxRuntimeExports.jsx(icons.ExpandIcon, { size: 16 }) }))] })), showCloseButton && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__close-button", onClick: handleClose, disabled: disabled, title: "\uB2EB\uAE30", type: "button", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: 20 }) }))] })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__content", children: [showNavigationButtons && images.length > 1 && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__nav-button designbase-lightbox__nav-button--prev", onClick: goToPrevious, disabled: disabled || readonly, title: "\uC774\uC804 \uC774\uBBF8\uC9C0", type: "button", children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: 24 }) }), jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__nav-button designbase-lightbox__nav-button--next", onClick: goToNext, disabled: disabled || readonly, title: "\uB2E4\uC74C \uC774\uBBF8\uC9C0", type: "button", children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 24 }) })] })), jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "designbase-lightbox__image-container", onWheel: handleWheel, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: [isImageError ? (jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__error", children: [jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__error-icon", children: "\u26A0\uFE0F" }), jsxRuntimeExports.jsx("p", { className: "designbase-lightbox__error-text", children: "\uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." })] })) : (jsxRuntimeExports.jsx("img", { ref: imageRef, src: currentImage.src, alt: currentImage.alt || currentImage.title || `이미지 ${internalCurrentIndex + 1}`, className: clsx('designbase-lightbox__image', {
                                             'designbase-lightbox__image--loaded': isImageLoaded,
                                             'designbase-lightbox__image--dragging': isDragging,
                                         }), style: {
@@ -9427,7 +9533,9 @@ const Lightbox = ({ images, currentIndex = 0, size = 'lg', variant = 'default',
                                 }), onClick: () => handleImageChange(index), disabled: disabled || readonly, title: image.title || `이미지 ${index + 1}`, type: "button", children: jsxRuntimeExports.jsx("img", { src: image.thumbnail || image.src, alt: image.alt || image.title || `썸네일 ${index + 1}`, className: "designbase-lightbox__thumbnail-image" }) }, image.id))) }) }))] }) }) }));
 };
 
-const Carousel = ({ items, size = 'md', variant = 'default', theme = 'light', transition = 'slide', autoPlay = false, autoPlayInterval = 5000, infinite = true, itemsPerView = 1, gap = 16, showNavigation = true, showIndicators = true, indicatorStyle = 'dots', showAutoPlayControl = true, showTitle = true, showDescription = true, enableTouch = true, enableKeyboard = true, enableWheel = false, enableFullscreen = false, enableDownload = false, enableShare = false, enableLike = false, enableBookmark = false, readonly = false, disabled = false, enablePaging = false, swipeSensitivity = 50, transitionDuration = 300, onItemClick, onSlideChange, onLike, onBookmark, onShare, onDownload, onFullscreenChange, className, }) => {
+const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', transition = 'slide', autoPlay = false, autoPlayInterval = 5000, infinite = true, itemsPerView = 1, gap = 16, showNavigation = true, showIndicators = true, indicatorStyle = 'dots', showAutoPlayControl = true, showTitle = true, showDescription = true, enableTouch = true, enableKeyboard = true, enableWheel = false, enableFullscreen = false, enableDownload = false, enableShare = false, enableLike = false, enableBookmark = false, readonly = false, disabled = false, enablePaging = false, swipeSensitivity = 50, transitionDuration = 300, onItemClick, onSlideChange, onLike, onBookmark, onShare, onDownload, onFullscreenChange, className, }) => {
+    // 아이콘 크기 계산 (m이 기본값)
+    const iconSize = size === 's' ? 16 : size === 'l' ? 24 : size === 'xl' ? 28 : 20;
     const [currentIndex, setCurrentIndex] = React.useState(0);
     const [isAutoPlaying, setIsAutoPlaying] = React.useState(autoPlay);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -9713,27 +9821,35 @@ const Carousel = ({ items, size = 'md', variant = 'default', theme = 'light', tr
                             }), style: {
                                 width: `${100 / itemsPerView}%`,
                                 backgroundColor: item.backgroundColor,
-                                color: item.textColor,
-                            }, onClick: () => handleItemClick(item, index), children: [item.content ? (jsxRuntimeExports.jsx("div", { className: "designbase-carousel__slide-content", children: item.content })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [item.image && (jsxRuntimeExports.jsx("div", { className: "designbase-carousel__slide-image", children: jsxRuntimeExports.jsx("img", { src: item.image, alt: item.alt || item.title || `슬라이드 ${index + 1}`, className: "designbase-carousel__slide-img" }) })), (showTitle && item.title) || (showDescription && item.description) ? (jsxRuntimeExports.jsxs("div", { className: "designbase-carousel__slide-info", children: [showTitle && item.title && (jsxRuntimeExports.jsx("h3", { className: "designbase-carousel__slide-title", children: item.title })), showDescription && item.description && (jsxRuntimeExports.jsx("p", { className: "designbase-carousel__slide-description", children: item.description })), item.meta && (jsxRuntimeExports.jsxs("div", { className: "designbase-carousel__slide-meta", children: [item.meta.author && (jsxRuntimeExports.jsx("span", { className: "designbase-carousel__slide-author", children: item.meta.author })), item.meta.date && (jsxRuntimeExports.jsx("span", { className: "designbase-carousel__slide-date", children: item.meta.date })), item.meta.rating && (jsxRuntimeExports.jsxs("span", { className: "designbase-carousel__slide-rating", children: ["\u2B50 ", item.meta.rating] }))] }))] })) : null] })), jsxRuntimeExports.jsxs("div", { className: "designbase-carousel__slide-actions", children: [enableLike && (jsxRuntimeExports.jsx("button", { className: clsx('designbase-carousel__action-button', 'designbase-carousel__action-button--like', { 'designbase-carousel__action-button--active': isLiked }), onClick: (e) => {
+                                color: item.textColor || (item.image ? '#ffffff' : undefined),
+                            }, onClick: () => handleItemClick(item, index), children: [item.content ? (jsxRuntimeExports.jsx("div", { className: "designbase-carousel__slide-content", children: item.content })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [item.image && (jsxRuntimeExports.jsx("div", { className: "designbase-carousel__slide-image", children: jsxRuntimeExports.jsx("img", { src: item.image, alt: item.alt || item.title || `슬라이드 ${index + 1}`, className: "designbase-carousel__slide-img" }) })), (showTitle && item.title) || (showDescription && item.description) ? (jsxRuntimeExports.jsxs("div", { className: "designbase-carousel__slide-info", style: {
+                                                color: item.textColor || (item.image ? '#ffffff' : undefined),
+                                            }, children: [showTitle && item.title && (jsxRuntimeExports.jsx("h3", { className: "designbase-carousel__slide-title", style: {
+                                                        color: item.textColor || (item.image ? '#ffffff' : undefined),
+                                                    }, children: item.title })), showDescription && item.description && (jsxRuntimeExports.jsx("p", { className: "designbase-carousel__slide-description", style: {
+                                                        color: item.textColor || (item.image ? '#ffffff' : undefined),
+                                                    }, children: item.description })), item.meta && (jsxRuntimeExports.jsxs("div", { className: "designbase-carousel__slide-meta", children: [item.meta.author && (jsxRuntimeExports.jsx("span", { className: "designbase-carousel__slide-author", children: item.meta.author })), item.meta.date && (jsxRuntimeExports.jsx("span", { className: "designbase-carousel__slide-date", children: item.meta.date })), item.meta.rating && (jsxRuntimeExports.jsxs("span", { className: "designbase-carousel__slide-rating", children: ["\u2B50 ", item.meta.rating] }))] }))] })) : null] })), jsxRuntimeExports.jsxs("div", { className: "designbase-carousel__slide-actions", children: [enableLike && (jsxRuntimeExports.jsx("button", { className: clsx('designbase-carousel__action-button', 'designbase-carousel__action-button--like', { 'designbase-carousel__action-button--active': isLiked }), onClick: (e) => {
                                                 e.stopPropagation();
                                                 handleLike(item, index);
-                                            }, title: isLiked ? "좋아요 취소" : "좋아요", children: jsxRuntimeExports.jsx(icons.HeartIcon, { size: 16 }) })), enableBookmark && (jsxRuntimeExports.jsx("button", { className: clsx('designbase-carousel__action-button', 'designbase-carousel__action-button--bookmark', { 'designbase-carousel__action-button--active': isBookmarked }), onClick: (e) => {
+                                            }, title: isLiked ? "좋아요 취소" : "좋아요", children: jsxRuntimeExports.jsx(icons.HeartIcon, { size: iconSize, color: "currentColor" }) })), enableBookmark && (jsxRuntimeExports.jsx("button", { className: clsx('designbase-carousel__action-button', 'designbase-carousel__action-button--bookmark', { 'designbase-carousel__action-button--active': isBookmarked }), onClick: (e) => {
                                                 e.stopPropagation();
                                                 handleBookmark(item, index);
-                                            }, title: isBookmarked ? "북마크 해제" : "북마크", children: jsxRuntimeExports.jsx(icons.BookmarkIcon, { size: 16 }) })), enableShare && (jsxRuntimeExports.jsx("button", { className: "designbase-carousel__action-button designbase-carousel__action-button--share", onClick: (e) => {
+                                            }, title: isBookmarked ? "북마크 해제" : "북마크", children: jsxRuntimeExports.jsx(icons.BookmarkIcon, { size: iconSize, color: "currentColor" }) })), enableShare && (jsxRuntimeExports.jsx("button", { className: "designbase-carousel__action-button designbase-carousel__action-button--share", onClick: (e) => {
                                                 e.stopPropagation();
                                                 handleShare(item, index);
-                                            }, title: "\uACF5\uC720", children: jsxRuntimeExports.jsx(icons.ShareAltIcon, { size: 16 }) })), enableDownload && item.image && (jsxRuntimeExports.jsx("button", { className: "designbase-carousel__action-button designbase-carousel__action-button--download", onClick: (e) => {
+                                            }, title: "\uACF5\uC720", children: jsxRuntimeExports.jsx(icons.ShareAltIcon, { size: iconSize, color: "currentColor" }) })), enableDownload && item.image && (jsxRuntimeExports.jsx("button", { className: "designbase-carousel__action-button designbase-carousel__action-button--download", onClick: (e) => {
                                                 e.stopPropagation();
                                                 handleDownload(item, index);
-                                            }, title: "\uB2E4\uC6B4\uB85C\uB4DC", children: jsxRuntimeExports.jsx(icons.DownloadIcon, { size: 16 }) }))] })] }, item.id))) }), showNavigation && items.length > 1 && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: clsx('designbase-carousel__nav-button', 'designbase-carousel__nav-button--prev'), onClick: goToPrevious, disabled: disabled || readonly || isPrevDisabled, title: "\uC774\uC804 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: 20 }) }), jsxRuntimeExports.jsx("button", { className: clsx('designbase-carousel__nav-button', 'designbase-carousel__nav-button--next'), onClick: goToNext, disabled: disabled || readonly || isNextDisabled, title: "\uB2E4\uC74C \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: 20 }) })] })), enablePaging && items.length > 1 && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-carousel__quick-nav-button designbase-carousel__quick-nav-button--first", onClick: goToFirst, disabled: disabled || readonly || currentIndex === 0, title: "\uCCAB \uBC88\uC9F8 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsxRuntimeExports.jsx(icons.ArrowLeftIcon, { size: 16 }) }), jsxRuntimeExports.jsx("button", { className: "designbase-carousel__quick-nav-button designbase-carousel__quick-nav-button--last", onClick: goToLast, disabled: disabled || readonly || currentIndex === items.length - 1, title: "\uB9C8\uC9C0\uB9C9 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsxRuntimeExports.jsx(icons.ArrowRightIcon, { size: 16 }) })] })), enableFullscreen && (jsxRuntimeExports.jsx("button", { className: "designbase-carousel__fullscreen-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsxRuntimeExports.jsx(icons.ShrinkIcon, { size: 16 }) : jsxRuntimeExports.jsx(icons.ExpandIcon, { size: 16 }) }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-carousel__controls", children: [showIndicators && items.length > 1 && (jsxRuntimeExports.jsx("div", { className: "designbase-carousel__indicators", children: items.map((item, index) => (jsxRuntimeExports.jsx("button", { className: clsx('designbase-carousel__indicator', {
+                                            }, title: "\uB2E4\uC6B4\uB85C\uB4DC", children: jsxRuntimeExports.jsx(icons.DownloadIcon, { size: iconSize, color: "currentColor" }) }))] })] }, item.id))) }), showNavigation && items.length > 1 && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: clsx('designbase-carousel__nav-button', 'designbase-carousel__nav-button--prev'), onClick: goToPrevious, disabled: disabled || readonly || isPrevDisabled, title: "\uC774\uC804 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsxRuntimeExports.jsx(icons.ChevronLeftIcon, { size: iconSize, color: "currentColor" }) }), jsxRuntimeExports.jsx("button", { className: clsx('designbase-carousel__nav-button', 'designbase-carousel__nav-button--next'), onClick: goToNext, disabled: disabled || readonly || isNextDisabled, title: "\uB2E4\uC74C \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsxRuntimeExports.jsx(icons.ChevronRightIcon, { size: iconSize, color: "currentColor" }) })] })), enablePaging && items.length > 1 && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-carousel__quick-nav-button designbase-carousel__quick-nav-button--first", onClick: goToFirst, disabled: disabled || readonly || currentIndex === 0, title: "\uCCAB \uBC88\uC9F8 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsxRuntimeExports.jsx(icons.ArrowLeftIcon, { size: iconSize, color: "currentColor" }) }), jsxRuntimeExports.jsx("button", { className: "designbase-carousel__quick-nav-button designbase-carousel__quick-nav-button--last", onClick: goToLast, disabled: disabled || readonly || currentIndex === items.length - 1, title: "\uB9C8\uC9C0\uB9C9 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsxRuntimeExports.jsx(icons.ArrowRightIcon, { size: iconSize, color: "currentColor" }) })] })), enableFullscreen && (jsxRuntimeExports.jsx("button", { className: "designbase-carousel__fullscreen-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsxRuntimeExports.jsx(icons.ShrinkIcon, { size: iconSize, color: "currentColor" }) : jsxRuntimeExports.jsx(icons.ExpandIcon, { size: iconSize, color: "currentColor" }) }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-carousel__controls", children: [showIndicators && items.length > 1 && (jsxRuntimeExports.jsx("div", { className: "designbase-carousel__indicators", children: items.map((item, index) => (jsxRuntimeExports.jsx("button", { className: clsx('designbase-carousel__indicator', {
                                 'designbase-carousel__indicator--active': isIndicatorActive(index),
-                            }), onClick: () => goToSlide(index), disabled: disabled || readonly, title: `슬라이드 ${index + 1}로 이동`, type: "button", children: indicatorStyle === 'thumbnails' && item.thumbnail ? (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(icons.PauseIcon, { size: 16 }) : jsxRuntimeExports.jsx(icons.PlayIcon, { size: 16 }) }))] })] }));
+                            }), 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(icons.PauseIcon, { size: iconSize, color: "currentColor" }) : jsxRuntimeExports.jsx(icons.PlayIcon, { size: iconSize, color: "currentColor" }) }))] })] }));
 };
 
-const List = ({ items, size = 'md', variant = 'default', itemType = 'default', layout = 'vertical', selectable = false, multiple = false, selectedItems = [], draggable = false, spacing = 'md', alignment = 'start', onItemClick, onItemSelect, onItemDrag, emptyState, loading = false, loadingCount = 3, className, }) => {
+const List = ({ items, size = 'm', variant = 'default', itemType = 'default', layout = 'vertical', selectable = false, multiple = false, selectedItems = [], draggable = false, spacing = 'm', alignment = 'start', onItemClick, onItemSelect, onItemDrag, emptyState, loading = false, loadingCount = 3, className, }) => {
     const [internalSelectedItems, setInternalSelectedItems] = React.useState(selectedItems);
     const [draggedItem, setDraggedItem] = React.useState(null);
+    // 아이콘 크기 계산 (m이 기본값)
+    const iconSize = size === 's' ? 16 : size === 'l' ? 24 : 20;
     // 외부에서 선택된 아이템이 변경되면 내부 상태 업데이트
     React.useEffect(() => {
         setInternalSelectedItems(selectedItems);
@@ -9810,7 +9926,10 @@ const List = ({ items, size = 'md', variant = 'default', itemType = 'default', l
             'designbase-list__item--clickable': onItemClick || selectable,
             'designbase-list__item--draggable': draggable,
         });
-        return (jsxRuntimeExports.jsxs("div", { className: itemClasses, onClick: () => handleItemClick(item, index), draggable: draggable, onDragStart: (e) => handleItemDragStart(e, item.id), onDragOver: handleItemDragOver, onDrop: (e) => handleItemDrop(e, item.id), onDragEnd: handleItemDragEnd, role: selectable ? 'button' : undefined, tabIndex: selectable ? 0 : undefined, "aria-selected": selectable ? isSelected : undefined, children: [selectable && (jsxRuntimeExports.jsx("div", { className: "designbase-list__item-checkbox", children: jsxRuntimeExports.jsx("input", { type: multiple ? 'checkbox' : 'radio', checked: isSelected, onChange: () => handleItemClick(item, index), disabled: item.disabled }) })), item.icon && (jsxRuntimeExports.jsx("div", { className: "designbase-list__item-icon", children: item.icon })), item.image && (jsxRuntimeExports.jsx("div", { className: "designbase-list__item-image", children: jsxRuntimeExports.jsx("img", { src: item.image, alt: item.title }) })), jsxRuntimeExports.jsxs("div", { className: "designbase-list__item-content", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-list__item-header", children: [jsxRuntimeExports.jsx("h4", { className: "designbase-list__item-title", children: item.title }), item.badge && renderBadge(item.badge)] }), item.description && (jsxRuntimeExports.jsx("p", { className: "designbase-list__item-description", children: item.description })), item.meta && renderMeta(item.meta)] }), item.actions && renderActions(item.actions), draggable && (jsxRuntimeExports.jsx("div", { className: "designbase-list__item-drag-handle", children: "\u22EE\u22EE" }))] }, item.id));
+        return (jsxRuntimeExports.jsxs("div", { className: itemClasses, onClick: () => handleItemClick(item, index), draggable: draggable, onDragStart: (e) => handleItemDragStart(e, item.id), onDragOver: handleItemDragOver, onDrop: (e) => handleItemDrop(e, item.id), onDragEnd: handleItemDragEnd, role: selectable ? 'button' : undefined, tabIndex: selectable ? 0 : undefined, "aria-selected": selectable ? isSelected : undefined, children: [selectable && (jsxRuntimeExports.jsx("div", { className: "designbase-list__item-checkbox", children: jsxRuntimeExports.jsx("input", { type: multiple ? 'checkbox' : 'radio', checked: isSelected, onChange: () => handleItemClick(item, index), disabled: item.disabled }) })), item.icon && (jsxRuntimeExports.jsx("div", { className: "designbase-list__item-icon", children: React.isValidElement(item.icon) ? (React.cloneElement(item.icon, {
+                        size: iconSize,
+                        color: 'currentColor'
+                    })) : item.icon })), item.image && (jsxRuntimeExports.jsx("div", { className: "designbase-list__item-image", children: jsxRuntimeExports.jsx("img", { src: item.image, alt: item.title }) })), jsxRuntimeExports.jsxs("div", { className: "designbase-list__item-content", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-list__item-header", children: [jsxRuntimeExports.jsx("h4", { className: "designbase-list__item-title", children: item.title }), item.badge && renderBadge(item.badge)] }), item.description && (jsxRuntimeExports.jsx("p", { className: "designbase-list__item-description", children: item.description })), item.meta && renderMeta(item.meta)] }), item.actions && renderActions(item.actions), draggable && (jsxRuntimeExports.jsx("div", { className: "designbase-list__item-drag-handle", children: "\u22EE\u22EE" }))] }, item.id));
     };
     const renderLoadingSkeleton = () => {
         return Array.from({ length: loadingCount }, (_, index) => (jsxRuntimeExports.jsx("div", { className: "designbase-list__item designbase-list__item--loading", children: jsxRuntimeExports.jsxs("div", { className: "designbase-list__item-skeleton", children: [jsxRuntimeExports.jsx("div", { className: "designbase-list__item-skeleton-icon" }), jsxRuntimeExports.jsxs("div", { className: "designbase-list__item-skeleton-content", children: [jsxRuntimeExports.jsx("div", { className: "designbase-list__item-skeleton-title" }), jsxRuntimeExports.jsx("div", { className: "designbase-list__item-skeleton-description" })] })] }) }, index)));
@@ -9830,7 +9949,7 @@ const List = ({ items, size = 'md', variant = 'default', itemType = 'default', l
     return (jsxRuntimeExports.jsx("div", { className: classes, children: items.map((item, index) => renderItem(item, index)) }));
 };
 
-const HeroFeature = ({ title, subtitle, description, image, imageAlt, backgroundImage, backgroundVideo, overlayColor, overlayOpacity = 0.5, buttons = [], badge, stats = [], icon, size = 'lg', variant = 'default', theme = 'light', alignment = 'left', animated = false, parallax = false, fullHeight = false, minHeight, maxHeight, className, }) => {
+const HeroFeature = ({ title, subtitle, description, image, imageAlt, backgroundImage, backgroundVideo, overlayColor, overlayOpacity = 0.5, buttons = [], badge, stats = [], icon, size = 'l', variant = 'default', theme = 'light', alignment = 'left', animated = false, parallax = false, fullHeight = false, minHeight, maxHeight, className, }) => {
     const renderBadge = () => {
         if (!badge)
             return null;
@@ -9854,7 +9973,7 @@ const HeroFeature = ({ title, subtitle, description, image, imageAlt, background
                 default: return 'text';
             }
         };
-        return (jsxRuntimeExports.jsx(Badge, { variant: getBadgeVariant(badge.color || 'primary'), style: getBadgeStyle(badge.variant || 'solid'), size: "md", 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)
@@ -9864,7 +9983,7 @@ const HeroFeature = ({ title, subtitle, description, image, imageAlt, background
     const renderStats = () => {
         if (stats.length === 0)
             return null;
-        return (jsxRuntimeExports.jsx("div", { className: "designbase-hero-feature__stats", children: stats.map((stat, index) => (jsxRuntimeExports.jsx(Stat, { value: stat.value, label: stat.label, description: stat.description, size: "md", variant: "minimal", layout: "vertical", className: "designbase-hero-feature__stat" }, index))) }));
+        return (jsxRuntimeExports.jsx("div", { className: "designbase-hero-feature__stats", children: stats.map((stat, index) => (jsxRuntimeExports.jsx(Stat, { value: stat.value, label: stat.label, description: stat.description, size: "m", variant: "minimal", layout: "vertical", className: "designbase-hero-feature__stat" }, index))) }));
     };
     const renderImage = () => {
         if (!image)
@@ -9908,8 +10027,10 @@ const HeroFeature = ({ title, subtitle, description, image, imageAlt, background
     return (jsxRuntimeExports.jsxs("section", { className: classes, style: containerStyle, children: [renderBackground(), renderOverlay(), jsxRuntimeExports.jsxs("div", { className: "designbase-hero-feature__container", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-hero-feature__content", children: [icon && (jsxRuntimeExports.jsx("div", { className: "designbase-hero-feature__icon", children: icon })), renderBadge(), jsxRuntimeExports.jsx("h1", { className: "designbase-hero-feature__title", children: title }), subtitle && (jsxRuntimeExports.jsx("h2", { className: "designbase-hero-feature__subtitle", children: subtitle })), description && (jsxRuntimeExports.jsx("p", { className: "designbase-hero-feature__description", children: description })), renderButtons(), renderStats()] }), variant === 'split' && renderImage()] }), variant !== 'split' && renderImage()] }));
 };
 
-const Banner = ({ title, description, icon, image, imageAlt, actions = [], dismissible = false, autoDismiss, size = 'md', variant = 'default', style = 'solid', position = 'top', alignment = 'left', animated = false, fullWidth = false, shadow = false, rounded = true, backgroundImage, overlayColor, overlayOpacity = 0.1, onDismiss, className, }) => {
+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이 기본값)
+    const iconSize = size === 's' ? 16 : size === 'l' ? 24 : 20;
     // 자동 닫기
     React.useEffect(() => {
         if (autoDismiss && autoDismiss > 0) {
@@ -9957,10 +10078,13 @@ const Banner = ({ title, description, icon, image, imageAlt, actions = [], dismi
     }, className);
     if (!isVisible)
         return null;
-    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [renderBackground(), renderOverlay(), jsxRuntimeExports.jsxs("div", { className: "designbase-banner__container", children: [icon && (jsxRuntimeExports.jsx("div", { className: "designbase-banner__icon", children: icon })), image && (jsxRuntimeExports.jsx("div", { className: "designbase-banner__image", children: jsxRuntimeExports.jsx("img", { src: image, alt: imageAlt || title || 'Banner image' }) })), jsxRuntimeExports.jsxs("div", { className: "designbase-banner__content", children: [title && (jsxRuntimeExports.jsx("h3", { className: "designbase-banner__title", children: title })), description && (jsxRuntimeExports.jsx("p", { className: "designbase-banner__description", children: description }))] }), renderActions(), dismissible && (jsxRuntimeExports.jsx("button", { className: "designbase-banner__dismiss", onClick: handleDismiss, "aria-label": "\uB2EB\uAE30", children: "\u00D7" }))] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [renderBackground(), renderOverlay(), jsxRuntimeExports.jsxs("div", { className: "designbase-banner__container", children: [icon && (jsxRuntimeExports.jsx("div", { className: "designbase-banner__icon", children: React.isValidElement(icon) ? (React.cloneElement(icon, {
+                            size: iconSize,
+                            color: 'currentColor'
+                        })) : icon })), image && (jsxRuntimeExports.jsx("div", { className: "designbase-banner__image", children: jsxRuntimeExports.jsx("img", { src: image, alt: imageAlt || title || 'Banner image' }) })), jsxRuntimeExports.jsxs("div", { className: "designbase-banner__content", children: [title && (jsxRuntimeExports.jsx("h3", { className: "designbase-banner__title", children: title })), description && (jsxRuntimeExports.jsx("p", { className: "designbase-banner__description", children: description }))] }), renderActions(), dismissible && (jsxRuntimeExports.jsx("button", { className: "designbase-banner__dismiss", onClick: handleDismiss, "aria-label": "\uB2EB\uAE30", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: iconSize }) }))] })] }));
 };
 
-const Skeleton = React.forwardRef(({ variant = 'text', size = 'md', width, height, animation = 'pulse', lines = 1, lineSpacing = '8px', lastLineWidth = '60%', className, style, 'aria-label': ariaLabel, ...props }, forwardedRef) => {
+const Skeleton = React.forwardRef(({ variant = 'text', size = 'm', width, height, animation = 'pulse', lines = 1, lineSpacing = '8px', lastLineWidth = '60%', className, style, 'aria-label': ariaLabel, ...props }, forwardedRef) => {
     // 기본 크기 결정
     const getDefaultSize = () => {
         switch (size) {
@@ -10012,7 +10136,7 @@ const Skeleton = React.forwardRef(({ variant = 'text', size = 'md', width, heigh
 });
 Skeleton.displayName = 'Skeleton';
 
-const YouTubePlayer = ({ videoId, title, description, size = 'md', variant = 'default', theme = 'auto', autoPlay = false, loop = false, muted = false, showControls = true, enableFullscreen = true, enableKeyboard = true, enableTouch = true, showSubtitles = false, defaultSubtitleLang = 'ko', playbackRate = 1, startTime = 0, endTime, showRelatedVideos = true, showInfo = true, showChannelInfo = true, showLikeButtons = true, showComments = false, playlist = [], currentIndex = 0, autoPause = false, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onFullscreenChange, onPlaylistChange, onPlaybackRateChange, onError, className, style, }) => {
+const YouTubePlayer = ({ videoId, title, description, size = 'm', variant = 'default', theme = 'auto', autoPlay = false, loop = false, muted = false, showControls = true, enableFullscreen = true, enableKeyboard = true, enableTouch = true, showSubtitles = false, defaultSubtitleLang = 'ko', playbackRate = 1, startTime = 0, endTime, showRelatedVideos = true, showInfo = true, showChannelInfo = true, showLikeButtons = true, showComments = false, playlist = [], currentIndex = 0, autoPause = false, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onFullscreenChange, onPlaylistChange, onPlaybackRateChange, onError, className, style, }) => {
     const [isPlaying, setIsPlaying] = React.useState(false);
     React.useState(0);
     React.useState(0);
@@ -10266,7 +10390,7 @@ const Backdrop = React.forwardRef(({ open = false, onClick, disableBackdropClick
 });
 Backdrop.displayName = 'Backdrop';
 
-const BottomSheet = React.forwardRef(({ open = false, onClose, title, subtitle, size = 'md', variant = 'default', disableBackdropClick = false, disableEscapeKeyDown = false, disableDrag = false, maxHeight = 80, animation = 'slide', animationDuration = 300, zIndex = 1000, backdropBlur = true, backdropOpacity = 0.5, stickyHeader = false, stickyFooter = false, className, style, header, footer, children, ...props }, forwardedRef) => {
+const BottomSheet = React.forwardRef(({ open = false, onClose, title, subtitle, size = 'm', variant = 'default', disableBackdropClick = false, disableEscapeKeyDown = false, disableDrag = false, maxHeight = 80, animation = 'slide', animationDuration = 300, zIndex = 1000, backdropBlur = true, backdropOpacity = 0.5, stickyHeader = false, stickyFooter = false, className, style, header, footer, children, ...props }, forwardedRef) => {
     const [sheetHeight, setSheetHeight] = React.useState(maxHeight);
     const [isDragging, setIsDragging] = React.useState(false);
     const [dragStartY, setDragStartY] = React.useState(0);
@@ -10394,63 +10518,15 @@ const BottomSheet = React.forwardRef(({ open = false, onClose, title, subtitle,
 });
 BottomSheet.displayName = 'BottomSheet';
 
-const FloatingActionButton = React.forwardRef(({ size = 'md', variant = 'primary', position = 'bottom-right', icon, label, extended = false, disabled = false, loading = false, animation = 'scale', elevation = 'md', onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, className, style, children, ...props }, forwardedRef) => {
-    const [isPressed, setIsPressed] = React.useState(false);
-    const [isHovered, setIsHovered] = React.useState(false);
-    // 클릭 핸들러
-    const handleClick = React.useCallback((event) => {
-        if (disabled || loading)
-            return;
-        setIsPressed(false);
-        onClick?.(event);
-    }, [disabled, loading, onClick]);
-    // 마우스 다운 핸들러
-    const handleMouseDown = React.useCallback(() => {
-        if (!disabled && !loading) {
-            setIsPressed(true);
-        }
-    }, [disabled, loading]);
-    // 마우스 업 핸들러
-    const handleMouseUp = React.useCallback(() => {
-        setIsPressed(false);
-    }, []);
-    // 마우스 진입 핸들러
-    const handleMouseEnter = React.useCallback((event) => {
-        if (!disabled) {
-            setIsHovered(true);
-            onMouseEnter?.(event);
-        }
-    }, [disabled, onMouseEnter]);
-    // 마우스 이탈 핸들러
-    const handleMouseLeave = React.useCallback((event) => {
-        setIsHovered(false);
-        setIsPressed(false);
-        onMouseLeave?.(event);
-    }, [onMouseLeave]);
-    // 포커스 핸들러
-    const handleFocus = React.useCallback((event) => {
-        if (!disabled) {
-            onFocus?.(event);
-        }
-    }, [disabled, onFocus]);
-    // 블러 핸들러
-    const handleBlur = React.useCallback((event) => {
-        setIsHovered(false);
-        setIsPressed(false);
-        onBlur?.(event);
-    }, [onBlur]);
-    const classes = clsx('designbase-fab', `designbase-fab--${size}`, `designbase-fab--${variant}`, `designbase-fab--${position}`, `designbase-fab--${animation}`, `designbase-fab--elevation-${elevation}`, {
-        'designbase-fab--extended': extended,
+const FloatingActionButton = React.forwardRef(({ size = 'm', variant = 'primary', icon, disabled = false, onClick, className, style, ...props }, forwardedRef) => {
+    const classes = clsx('designbase-fab', `designbase-fab--${size}`, `designbase-fab--${variant}`, {
         'designbase-fab--disabled': disabled,
-        'designbase-fab--loading': loading,
-        'designbase-fab--pressed': isPressed,
-        'designbase-fab--hovered': isHovered,
     }, className);
-    return (jsxRuntimeExports.jsxs("button", { ref: forwardedRef, className: classes, style: style, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, disabled: disabled || loading, "aria-label": label || 'Floating action button', ...props, children: [loading && (jsxRuntimeExports.jsx("div", { className: "designbase-fab__loading", children: jsxRuntimeExports.jsx("div", { className: "designbase-fab__spinner" }) })), !loading && icon && (jsxRuntimeExports.jsx("div", { className: "designbase-fab__icon", children: icon })), !loading && extended && label && (jsxRuntimeExports.jsx("span", { className: "designbase-fab__label", children: label })), !loading && children && (jsxRuntimeExports.jsx("div", { className: "designbase-fab__content", children: children })), jsxRuntimeExports.jsx("div", { className: "designbase-fab__ripple" })] }));
+    return (jsxRuntimeExports.jsx("button", { ref: forwardedRef, className: classes, style: style, onClick: onClick, disabled: disabled, "aria-label": "Floating action button", ...props, children: icon && (jsxRuntimeExports.jsx("div", { className: "designbase-fab__icon", children: icon })) }));
 });
 FloatingActionButton.displayName = 'FloatingActionButton';
 
-const Calendar = ({ currentDate = new Date(), view = 'month', events = [], onEventAdd, onEventEdit, onEventDelete, onDateClick, onEventClick, onViewChange, onMonthChange, onYearChange, showWeekends = true, highlightToday = true, locale = 'ko-KR', className, style, ...props }) => {
+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] = React.useState(currentDate);
     const [currentView, setCurrentView] = React.useState(view);
     const [showEventModal, setShowEventModal] = React.useState(false);
@@ -10471,6 +10547,11 @@ const Calendar = ({ currentDate = new Date(), view = 'month', events = [], onEve
     // 드래그 관련 상태
     const [draggedEvent, setDraggedEvent] = React.useState(null);
     const [dragOverDate, setDragOverDate] = React.useState(null);
+    // 날짜 범위 선택 상태
+    const [selectedDateRange, setSelectedDateRange] = React.useState({
+        start: null,
+        end: null
+    });
     // 현재 년도와 월
     const currentYear = selectedDate.getFullYear();
     const currentMonth = selectedDate.getMonth();
@@ -10525,8 +10606,24 @@ const Calendar = ({ currentDate = new Date(), view = 'month', events = [], onEve
     const handleDateClick = React.useCallback((date) => {
         setSelectedDate(date);
         onDateClick?.(date);
+        // 날짜 범위 선택 로직
+        if (!selectedDateRange.start || (selectedDateRange.start && selectedDateRange.end)) {
+            // 첫 번째 클릭이거나 이미 범위가 완성된 경우
+            setSelectedDateRange({ start: date, end: null });
+        }
+        else if (selectedDateRange.start && !selectedDateRange.end) {
+            // 두 번째 클릭
+            if (date < selectedDateRange.start) {
+                // 뒤로 클릭한 경우
+                setSelectedDateRange({ start: date, end: selectedDateRange.start });
+            }
+            else {
+                // 앞으로 클릭한 경우
+                setSelectedDateRange({ start: selectedDateRange.start, end: date });
+            }
+        }
         handleAddEvent(date);
-    }, [onDateClick, handleAddEvent]);
+    }, [onDateClick, handleAddEvent, selectedDateRange]);
     // 이벤트 클릭 핸들러
     const handleEventClick = React.useCallback((event) => {
         setSelectedEvent(event);
@@ -10686,6 +10783,18 @@ const Calendar = ({ currentDate = new Date(), view = 'month', events = [], onEve
             const isCurrentMonth = date.getMonth() === currentMonth;
             const isToday = date.toDateString() === today.toDateString();
             const isSelected = date.toDateString() === selectedDate.toDateString();
+            // 외부 날짜 숨기기 옵션
+            if (!showOutsideDays && !isCurrentMonth) {
+                continue;
+            }
+            // 날짜 범위 선택 상태 확인
+            const isInRange = selectedDateRange.start && selectedDateRange.end &&
+                date >= selectedDateRange.start && date <= selectedDateRange.end;
+            const isRangeStart = selectedDateRange.start &&
+                date.toDateString() === selectedDateRange.start.toDateString();
+            const isRangeEnd = selectedDateRange.end &&
+                date.toDateString() === selectedDateRange.end.toDateString();
+            const isRangeMiddle = isInRange && !isRangeStart && !isRangeEnd;
             // 해당 날짜의 이벤트들
             const dayEvents = events.filter(event => {
                 const eventDate = new Date(event.date);
@@ -10696,6 +10805,9 @@ const Calendar = ({ currentDate = new Date(), view = 'month', events = [], onEve
                     'designbase-calendar__day--today': isToday && highlightToday,
                     'designbase-calendar__day--selected': isSelected,
                     'designbase-calendar__day--weekend': !showWeekends && (date.getDay() === 0 || date.getDay() === 6),
+                    'designbase-calendar__day--selected--start': isRangeStart,
+                    'designbase-calendar__day--selected--end': isRangeEnd,
+                    'designbase-calendar__day--selected--middle': isRangeMiddle,
                 }), onClick: () => handleDateClick(date), children: [jsxRuntimeExports.jsx("span", { className: "designbase-calendar__day-number", children: date.getDate() }), dayEvents.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__day-events", children: [dayEvents.slice(0, 2).map((event) => (jsxRuntimeExports.jsx("div", { className: clsx('designbase-calendar__event-bar', `designbase-calendar__event-bar--${event.type}`, {
                                     'designbase-calendar__event-bar--dragging': draggedEvent?.id === event.id,
                                 }), style: {
@@ -10765,7 +10877,7 @@ const Calendar = ({ currentDate = new Date(), view = 'month', events = [], onEve
                             { value: 'year', label: '년' },
                             { value: 'month', label: '월' },
                             { value: 'week', label: '주' },
-                        ], value: currentView, onChange: (value) => handleViewChange(value), size: "sm" })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__body", children: [currentView === 'year' && (jsxRuntimeExports.jsx("div", { className: "designbase-calendar__year-view", children: renderYearView })), currentView === 'month' && (jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__month-view", children: [jsxRuntimeExports.jsx("div", { className: "designbase-calendar__weekdays", children: ['일', '월', '화', '수', '목', '금', '토'].map(day => (jsxRuntimeExports.jsx("div", { className: "designbase-calendar__weekday", children: day }, day))) }), jsxRuntimeExports.jsx("div", { className: "designbase-calendar__days", children: renderMonthView })] })), currentView === 'week' && (jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__week-view", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__week-header", children: [jsxRuntimeExports.jsx("div", { className: "designbase-calendar__time-column-header" }), weekViewData.weekDays] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__week-grid", children: [jsxRuntimeExports.jsx("div", { className: "designbase-calendar__time-column", children: weekViewData.timeSlots }), jsxRuntimeExports.jsx("div", { className: "designbase-calendar__week-columns", children: Array.from({ length: 7 }, (_, i) => {
+                        ], value: currentView, onChange: (value) => handleViewChange(value), size: "s" })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__body", children: [currentView === 'year' && (jsxRuntimeExports.jsx("div", { className: "designbase-calendar__year-view", children: renderYearView })), currentView === 'month' && (jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__month-view", children: [jsxRuntimeExports.jsx("div", { className: "designbase-calendar__weekdays", children: ['일', '월', '화', '수', '목', '금', '토'].map(day => (jsxRuntimeExports.jsx("div", { className: "designbase-calendar__weekday", children: day }, day))) }), jsxRuntimeExports.jsx("div", { className: "designbase-calendar__days", children: renderMonthView })] })), currentView === 'week' && (jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__week-view", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__week-header", children: [jsxRuntimeExports.jsx("div", { className: "designbase-calendar__time-column-header" }), weekViewData.weekDays] }), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__week-grid", children: [jsxRuntimeExports.jsx("div", { className: "designbase-calendar__time-column", children: weekViewData.timeSlots }), jsxRuntimeExports.jsx("div", { className: "designbase-calendar__week-columns", children: Array.from({ length: 7 }, (_, i) => {
                                             const date = new Date(weekViewData.startOfWeek);
                                             date.setDate(weekViewData.startOfWeek.getDate() + i);
                                             return (jsxRuntimeExports.jsx("div", { className: "designbase-calendar__week-column", children: weekViewData.timeSlots.map((_, index) => {
@@ -10841,7 +10953,7 @@ const Calendar = ({ currentDate = new Date(), view = 'month', events = [], onEve
                                                                 }, title: event.title, children: event.title }, event.id));
                                                         }) }, index));
                                                 }) }, i));
-                                        }) })] })] }))] }), jsxRuntimeExports.jsxs(Modal, { isOpen: showEventModal, onClose: handleCloseModal, title: isEditing ? '일정 편집' : '새 일정 추가', size: "lg", 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) => {
+                                        }) })] })] }))] }), 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, { value: eventForm.type, onChange: (value) => {
@@ -10862,7 +10974,9 @@ const Calendar = ({ currentDate = new Date(), view = 'month', events = [], onEve
                                             })), placeholder: "\uCC38\uC11D\uC790\uB4E4\uC744 \uC27C\uD45C\uB85C \uAD6C\uBD84\uD558\uC5EC \uC785\uB825\uD558\uC138\uC694" })] })] }) }), jsxRuntimeExports.jsx(ModalFooter, { children: jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__modal-actions", children: [isEditing && (jsxRuntimeExports.jsx(Button, { variant: "danger", onClick: handleDeleteEvent, children: "\uC0AD\uC81C" })), jsxRuntimeExports.jsxs("div", { className: "designbase-calendar__modal-buttons", children: [jsxRuntimeExports.jsx(Button, { variant: "secondary", onClick: handleCloseModal, children: "\uCDE8\uC18C" }), jsxRuntimeExports.jsx(Button, { variant: "primary", onClick: handleSaveEvent, children: isEditing ? '수정' : '추가' })] })] }) })] })] }));
 };
 
-const Drawer = ({ isOpen, onClose, title, children, position = 'right', size = 'md', showCloseButton = true, closeOnBackdropClick = true, closeOnEscape = true, animationDuration = 300, showOverlay = true, overlayClosable = true, className, style, zIndex = 1000, trapFocus = true, id, ...props }) => {
+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;
     const [isVisible, setIsVisible] = React.useState(false);
     const [isAnimating, setIsAnimating] = React.useState(false);
     const drawerRef = React.useRef(null);
@@ -10934,7 +11048,7 @@ const Drawer = ({ isOpen, onClose, title, children, position = 'right', size = '
                     'designbase-drawer__overlay--open': isOpen,
                 }), onClick: handleBackdropClick, "aria-hidden": "true" })), jsxRuntimeExports.jsxs("div", { ref: drawerRef, className: clsx('designbase-drawer__container', `designbase-drawer__container--${position}`, {
                     'designbase-drawer__container--open': isOpen,
-                }), 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: "sm", onClick: handleClose, className: "designbase-drawer__close-button", "aria-label": "\uB2EB\uAE30", children: jsxRuntimeExports.jsx(icons.CloseIcon, {}) }))] })), jsxRuntimeExports.jsx("div", { className: "designbase-drawer__content", id: id ? `${id}-content` : undefined, children: children })] })] }), document.body);
+                }), 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(icons.CloseIcon, { size: iconSize, color: "currentColor" }) }))] })), jsxRuntimeExports.jsx("div", { className: "designbase-drawer__content", id: id ? `${id}-content` : undefined, children: children })] })] }), document.body);
 };
 
 const ImageList = ({ images, layout = 'grid', columns = 3, spacing = 'md', ratio = '16:9', fit = 'cover', rounded = false, shadow = false, hover = true, clickable = true, lightbox = true, onImageClick, onImageLoad, onImageError, loading = 'lazy', responsive = true, className, style, }) => {
@@ -11191,7 +11305,7 @@ var classnames = {exports: {}};
 var classnamesExports = classnames.exports;
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-const AnimationText = ({ children, type = 'fade', speed = 1000, repeat = 0, delay = 0, direction = 'left', size = 'md', color = 'primary', customColor, weight = 'normal', align = 'left', gradientColors = ['#667eea', '#764ba2'], waveColors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'], glowColor = '#667eea', clickable = false, disabled = false, className, onClick, }) => {
+const AnimationText = ({ children, type = 'fade', speed = 1000, repeat = 0, delay = 0, direction = 'left', size = 'm', color = 'primary', customColor, weight = 'normal', align = 'left', gradientColors = ['#667eea', '#764ba2'], waveColors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'], glowColor = '#667eea', clickable = false, disabled = false, className, onClick, }) => {
     const [isVisible, setIsVisible] = React.useState(false);
     const [currentIndex, setCurrentIndex] = React.useState(0);
     const [isAnimating, setIsAnimating] = React.useState(false);
@@ -11711,81 +11825,14 @@ const ResizablePanels = ({ children, initialWidth = '100%', initialHeight = '100
                 }, children: handleIcon || defaultHandleIcon })] }));
 };
 
-const ThemeToggle = ({ themes = ['light', 'dark'], defaultTheme = 'light', size = 'md', variant = 'button', onThemeChange, className, }) => {
-    const [currentTheme, setCurrentTheme] = React.useState(defaultTheme);
-    const [isOpen, setIsOpen] = React.useState(false);
-    React.useEffect(() => {
-        // 초기 테마 설정
-        const savedTheme = theme.getTheme();
-        if (savedTheme && themes.includes(savedTheme)) {
-            setCurrentTheme(savedTheme);
-        }
-    }, [themes]);
-    const handleThemeChange = (theme$1) => {
-        theme.setTheme(theme$1);
-        setCurrentTheme(theme$1);
-        setIsOpen(false);
-        onThemeChange?.(theme$1);
-    };
-    const getThemeIcon = (theme) => {
-        switch (theme) {
-            case 'light':
-                return (jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: [jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "5" }), jsxRuntimeExports.jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })] }));
-            case 'dark':
-                return (jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
-            default:
-                return null;
-        }
-    };
-    const getThemeLabel = (theme) => {
-        switch (theme) {
-            case 'light':
-                return '라이트';
-            case 'dark':
-                return '다크';
-            default:
-                return theme;
-        }
-    };
-    const classes = classNames('designbase-theme-toggle', `designbase-theme-toggle--${variant}`, `designbase-theme-toggle--${size}`, className);
-    if (variant === 'button') {
-        return (jsxRuntimeExports.jsx("div", { className: classes, children: themes.map((theme) => (jsxRuntimeExports.jsxs("button", { className: classNames('designbase-theme-toggle__button', {
-                    'designbase-theme-toggle__button--active': currentTheme === theme,
-                }), onClick: () => handleThemeChange(theme), title: `${getThemeLabel(theme)} 테마로 변경`, children: [getThemeIcon(theme), jsxRuntimeExports.jsx("span", { className: "designbase-theme-toggle__label", children: getThemeLabel(theme) })] }, theme))) }));
-    }
-    if (variant === 'dropdown') {
-        return (jsxRuntimeExports.jsxs("div", { className: classes, children: [jsxRuntimeExports.jsxs("button", { className: "designbase-theme-toggle__trigger", onClick: () => setIsOpen(!isOpen), title: "\uD14C\uB9C8 \uC120\uD0DD", children: [getThemeIcon(currentTheme), jsxRuntimeExports.jsx("span", { className: "designbase-theme-toggle__label", children: getThemeLabel(currentTheme) }), jsxRuntimeExports.jsx("svg", { className: classNames('designbase-theme-toggle__arrow', { 'designbase-theme-toggle__arrow--open': isOpen }), width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntimeExports.jsx("path", { d: "M7 10l5 5 5-5z" }) })] }), isOpen && (jsxRuntimeExports.jsx("div", { className: "designbase-theme-toggle__dropdown", children: themes.map((theme) => (jsxRuntimeExports.jsxs("button", { className: classNames('designbase-theme-toggle__option', {
-                            'designbase-theme-toggle__option--active': currentTheme === theme,
-                        }), onClick: () => handleThemeChange(theme), children: [getThemeIcon(theme), jsxRuntimeExports.jsx("span", { children: getThemeLabel(theme) })] }, theme))) }))] }));
-    }
-    if (variant === 'tabs') {
-        return (jsxRuntimeExports.jsx("div", { className: classes, children: themes.map((theme) => (jsxRuntimeExports.jsxs("button", { className: classNames('designbase-theme-toggle__tab', {
-                    'designbase-theme-toggle__tab--active': currentTheme === theme,
-                }), onClick: () => handleThemeChange(theme), children: [getThemeIcon(theme), jsxRuntimeExports.jsx("span", { children: getThemeLabel(theme) })] }, theme))) }));
-    }
-    return null;
-};
-
 /**
  * Designbase UI 컴포넌트 라이브러리 메인 엔트리 포인트
  *
  * 목적: 모든 UI 컴포넌트와 타입을 내보냄
  * 기능: Tree-shaking 가능한 개별 컴포넌트 내보내기
- * 사용법: import { Button, Input } from '@designbase/ui'
+ * 사용법: import { Button, Input } from '@designbasekorea/ui'
  */
-// 테마 및 토큰 자동 로드
-// UI 패키지가 로드될 때 자동으로 토큰 CSS 로드
-if (typeof document !== 'undefined') {
-    // DOM이 로드된 후 토큰 CSS 로드
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', () => {
-            theme.loadTokens().catch(console.warn);
-        });
-    }
-    else {
-        theme.loadTokens().catch(console.warn);
-    }
-}
+// 테마 CSS 자동 로드 (로컬 복사본 사용)
 // 테마 관련 유틸리티 재내보내기
 // 임시로 theme 함수들을 정의
 const setTheme = (theme) => {
@@ -11869,7 +11916,6 @@ exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Textarea = Textarea;
 exports.TextareaComponent = Textarea;
-exports.ThemeToggle = ThemeToggle;
 exports.TimePicker = TimePicker;
 exports.Timeline = Timeline;
 exports.Toast = Toast;