@sellmate/design-system 0.0.56 → 1.0.0

package/dist/cjs/{sd-button_24.cjs.entry.js → sd-button_6.cjs.entry.js}

@@ -1,11 +1,10 @@
 'use strict';
 
-var index = require('./index-B7tkxTye.js');
-var resolveColor = require('./resolveColor-DxvExwgo.js');
-var selectKeyboardNavigation = require('./select-keyboard-navigation-6fO_V4En.js');
-var tooltipArrow = require('./tooltipArrow-8I9A3AOE.js');
+var index = require('./index-D_J8ScR5.js');
+var resolveColor = require('./resolveColor-B7Ku3IGq.js');
+var tooltipArrow = require('./tooltipArrow-DU2DB2AD.js');
 
-const sdButtonCss = () => `sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}`;
+const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}`;
 
 const ICON_SIZES = {
     xs: 12,
@@ -16,7 +15,6 @@ const ICON_SIZES = {
 const SdButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sdClick = index.createEvent(this, "sdClick");
     }
     get el() { return index.getElement(this); }
     variant = 'primary';
@@ -31,15 +29,6 @@ const SdButton = class {
     iconRight;
     noHover = false;
     class = '';
-    sdClick;
-    handleClick = (event) => {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        this.sdClick.emit(event);
-    };
     getButtonClasses() {
         const classes = ['sd-button'];
         classes.push(`sd-button--${this.variant}`);
@@ -60,283 +49,166 @@ const SdButton = class {
         const buttonClasses = this.getButtonClasses();
         // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
         const resolvedColor = resolveColor.resolveColor(this.color);
-        return (index.h(index.Host, { key: '7ad8b189abbee6a59fee2ba3fc97dee48c5e3058', style: { '--button-color': resolvedColor }, disabled: this.disabled }, index.h("button", { key: 'd335be4ddcbc4f4d9908a1cdf20bfd94bbaff3e3', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, onClick: this.handleClick }, index.h("div", { key: '362c6bd73c38108058ea1cdb16149c1906588cbd', class: "sd-button__content" }, this.icon && (index.h("sd-icon", { key: '85d8ccc677e6cb633a35b2a2a76432ac7f67b807', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && index.h("div", { key: 'fa51d7ab94e039ee52c122dc022429253bdca921', class: "sd-button__label" }, this.label), this.iconRight && (index.h("sd-icon", { key: 'b4c0c866b86832146b8f156b68f931df280ec83a', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor }))))));
+        return (index.h("button", { key: '9b92f98528d06453492eab68bb6137bcaefbf656', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor } }, index.h("div", { key: 'a7dae76ec9112b95c2ee765cb2f9b0b4fe5f705a', class: "sd-button__content" }, this.icon && (index.h("sd-icon", { key: '71784bfcb2d08c77305a70311192dfc2c059ff0a', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && index.h("div", { key: 'bc4b7dec430602765e98fa484d397b141686d8e7', class: "sd-button__label" }, this.label), this.iconRight && (index.h("sd-icon", { key: '26744c6ace43cbbfc9758a8fdf0174b49f24cd2c', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
     }
 };
 SdButton.style = sdButtonCss();
 
-const sdCheckboxCss = () => `sd-checkbox{display:block;height:20px;line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px}sd-checkbox .sd-checkbox>input{display:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg{border-color:#005cc9;background:#005cc9}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border:1px solid #0075ff;background:#d9eaff}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border:1px solid transparent;background:#eeeeee}sd-checkbox .sd-checkbox__bg{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:12px;color:#333333;line-height:20px}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border:1px solid #0075ff;background:#0075ff}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:white}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}`;
+const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 20px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;background:#07284a;color:#ffffff}.sd-floating-menu .sd-floating-menu__arrow{color:#07284a}.sd-floating-menu--default{background:#07284a;color:#ffffff}.sd-floating-menu--default .sd-floating-menu__arrow{color:#07284a}.sd-floating-menu--caution{background:#fce6e6;color:#fb4444}.sd-floating-menu--caution .sd-floating-menu__arrow{color:#fce6e6}.sd-floating-menu--notice{background:#ffead7;color:#ff6b00}.sd-floating-menu--notice .sd-floating-menu__arrow{color:#ffead7}.sd-floating-menu--accent{background:#e6f1ff;color:#0075ff}.sd-floating-menu--accent .sd-floating-menu__arrow{color:#e6f1ff}.sd-floating-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-weight:700;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-floating-menu__content .sd-floating-menu__buttons--1{justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--2{justify-content:space-between}.sd-floating-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}`;
 
-const SdCheckbox = class {
+const SdFloatingPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sdChange = index.createEvent(this, "sdChange");
+        this.close = index.createEvent(this, "sdClose");
     }
     get el() { return index.getElement(this); }
-    /** 현재 선택 상태 또는 배열 형태의 값 */
-    checked;
-    /** 배열 모드에서의 개별 값 */
-    val;
-    /** 비활성화 여부 */
-    disabled = false;
-    /** 표시할 라벨 텍스트 */
-    label = '';
-    /** 내부 체크 상태 */
-    isChecked = false;
-    /** 값 변경 이벤트 */
-    sdChange;
-    componentWillLoad() {
-        this.updateCheckedState(this.checked);
-    }
-    componentWillRender() {
-        this.updateCheckedState(this.checked);
-    }
-    watchValueHandler(newValue) {
-        this.updateCheckedState(newValue);
-    }
-    get checkboxClasses() {
-        const classes = [
-            'sd-checkbox',
-            `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,
-        ];
-        if (this.disabled) {
-            classes.push('sd-checkbox--disabled');
-        }
-        return classes.join(' ');
-    }
-    updateCheckedState(value) {
-        if (value === null) {
-            this.isChecked = null;
-        }
-        else if (typeof value === 'boolean') {
-            this.isChecked = value;
-        }
-        else if (Array.isArray(value)) {
-            this.isChecked = this.val !== undefined && value.includes(this.val);
-        }
-        else {
-            this.isChecked = false;
-        }
+    to = 'body';
+    parentRef = null;
+    offset = [0, 0];
+    zIndex = 9999;
+    placement = 'bottom';
+    open = false;
+    close;
+    container;
+    wrapper;
+    rafId;
+    isInsideClick = false;
+    resizeObserver;
+    mutationObserver;
+    static ARROW_SIZE = 11.2;
+    componentDidLoad() {
+        this.container = this.resolveContainer();
+        this.createWrapper();
+        this.moveSlotContent();
+        // DOM이 완전히 렌더링된 후 위치 계산
+        requestAnimationFrame(() => {
+            this.updatePosition();
+            if (this.wrapper) {
+                this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시
+            }
+        });
+        this.observeParent();
     }
-    handleChange = () => {
-        if (this.disabled)
+    componentDidRender() {
+        if (!this.wrapper)
             return;
-        let newValue;
-        if (typeof this.checked === 'boolean') {
-            newValue = !this.checked;
-        }
-        else if (Array.isArray(this.checked)) {
-            if (this.val === undefined) {
-                console.warn('A "val" property is required when using an array for the "value" property.');
-            }
-            const valueSet = new Set(this.checked);
-            valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
-            newValue = Array.from(valueSet);
+        // this.wrapper.style.display = this.open ? 'block' : 'none';
+        // if (this.open) this.updatePosition();
+        if (this.open) {
+            this.wrapper.style.display = 'block';
+            // RAF를 사용해서 다음 프레임에 위치 업데이트
+            requestAnimationFrame(() => {
+                this.updatePosition();
+                if (this.wrapper) {
+                    this.wrapper.style.visibility = 'visible';
+                }
+            });
         }
         else {
-            newValue = !this.isChecked;
+            this.wrapper.style.display = 'none';
+            this.wrapper.style.visibility = 'hidden';
         }
-        this.checked = newValue;
-        this.sdChange.emit(newValue);
-    };
-    render() {
-        return (index.h("label", { key: '9d70b760dedd75f6af927111338f488c4fb3c149', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "checkbox", "aria-label": this.label || 'checkbox', class: this.checkboxClasses }, index.h("input", { key: 'd5c09f8ffca898bb1a7f848ba5f5c09b3cc32f57', type: "checkbox", value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.label || 'checkbox' }), index.h("div", { key: '4e2c090cad23c420f4597194e9dab8b5718f4ec9', class: "sd-checkbox__bg" }, this.isChecked !== false ? (index.h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && index.h("span", { key: '99e3e1f4f5959f57fd5d7c2f0611a2e02cb41f6a', class: "sd-checkbox__label" }, this.label)));
     }
-    static get watchers() { return {
-        "checked": ["watchValueHandler"]
-    }; }
-};
-SdCheckbox.style = sdCheckboxCss();
-
-const sdFilePickerCss = () => `.sd-file-picker{display:inline-flex;align-items:center;max-width:var(--picker-width, 100%);height:28px;gap:8px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;background-color:#ffffff;cursor:pointer;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:12px;line-height:20px;color:#aaaaaa}.sd-file-picker__text--active{color:#222222}.sd-file-picker__text--placeholder{color:#aaaaaa}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#f6f6f6}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#ffffff}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text{color:#222222}.sd-file-picker--disabled:not(.sd-file-picker--inline){background-color:#eeeeee;border-color:#cccccc}.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text{color:#888888}.sd-file-picker--inline{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:#aaaaaa}.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text{color:#737373}.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active{color:#222222}.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text{color:#cccccc}`;
-
-const SdFilePicker = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sdChange = index.createEvent(this, "sdChange");
-    }
-    get el() { return index.getElement(this); }
-    value = null;
-    placeholder = 'Click to upload';
-    disabled = false;
-    inline = false;
-    multiple = false;
-    accept;
-    width;
-    internalValue = null;
-    hovered = false;
-    showTooltip = false;
-    fileInputRef;
-    fileNamesRef;
-    sdChange;
-    valueChanged(newValue) {
-        this.internalValue = newValue;
+    disconnectedCallback() {
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.unobserveParent();
+        this.wrapper?.remove();
     }
-    componentDidLoad() {
-        this.checkOverflow();
+    resolveContainer() {
+        const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
+        return el instanceof HTMLElement ? el : document.body;
     }
-    componentDidUpdate() {
-        this.checkOverflow();
+    createWrapper() {
+        this.wrapper = document.createElement('div');
+        Object.assign(this.wrapper.style, {
+            position: 'absolute',
+            zIndex: this.zIndex.toString(),
+            transition: 'opacity 0.4s',
+            top: '-9999px',
+            left: '-9999px',
+        });
+        this.container.appendChild(this.wrapper);
     }
-    handleFileChange = (event) => {
-        const input = event.target;
-        const files = input.files;
-        if (!files || files.length === 0) {
-            return;
-        }
-        const fileArray = Array.from(files);
-        if (this.multiple) {
-            this.internalValue = fileArray;
-        }
-        else {
-            this.internalValue = fileArray[0];
-        }
-        this.value = this.internalValue;
-        this.sdChange?.emit(this.value);
-    };
-    handleClear = (event) => {
-        event.stopPropagation();
-        const clearedValue = this.multiple ? [] : null;
-        this.value = clearedValue;
-        this.internalValue = clearedValue;
-        this.sdChange?.emit(clearedValue);
-        if (this.fileInputRef) {
-            this.fileInputRef.value = '';
-        }
-    };
-    handleClick = () => {
-        if (this.disabled)
+    moveSlotContent() {
+        if (!this.wrapper)
             return;
-        this.fileInputRef?.click();
-    };
-    getStatusClass() {
-        if (this.disabled)
-            return 'sd-file-picker--disabled';
-        if (this.hasFiles())
-            return 'sd-file-picker--active';
-        return '';
-    }
-    hasFiles() {
-        if (!this.internalValue)
-            return false;
-        if (Array.isArray(this.internalValue)) {
-            return this.internalValue.length > 0;
-        }
-        return true;
+        const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);
+        nodes.forEach(n => this.wrapper.appendChild(n));
     }
-    getDisplayText() {
-        if (!this.hasFiles())
-            return this.placeholder;
-        if (Array.isArray(this.internalValue)) {
-            return this.internalValue.map(f => f.name).join(', ');
-        }
-        return this.internalValue?.name || this.placeholder;
+    // 위치 갱신 (scroll / resize)
+    updatePosition() {
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.rafId = requestAnimationFrame(() => {
+            if (!this.parentRef || !this.wrapper)
+                return;
+            const rect = this.parentRef.getBoundingClientRect();
+            if (!rect.width && !rect.height)
+                return; // 요소가 보이지 않는 경우
+            const [offsetX, offsetY] = this.offset;
+            const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;
+            let top = 0;
+            let left = 0;
+            switch (this.placement) {
+                case 'top':
+                    top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
+                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    break;
+                case 'bottom':
+                    top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
+                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    break;
+                case 'left':
+                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
+                    break;
+                case 'right':
+                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
+                    break;
+            }
+            Object.assign(this.wrapper.style, {
+                top: `${top}px`,
+                left: `${left}px`,
+            });
+        });
     }
-    checkOverflow() {
-        if (!this.fileNamesRef)
+    // parentRef의 이동 / 크기변경 감지
+    observeParent() {
+        if (!this.parentRef)
             return;
-        const isOverflowing = this.fileNamesRef.scrollWidth > this.fileNamesRef.clientWidth;
-        this.showTooltip = isOverflowing;
-    }
-    getIconColor() {
-        if (this.disabled) {
-            return this.inline ? 'grey_45' : 'grey_55';
-        }
-        return 'grey_70';
+        this.resizeObserver = new ResizeObserver(() => this.updatePosition());
+        this.resizeObserver.observe(this.parentRef);
+        this.mutationObserver = new MutationObserver(() => this.updatePosition());
+        this.mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
     }
-    render() {
-        const hasFiles = this.hasFiles();
-        const displayText = this.getDisplayText();
-        return (index.h("div", { key: '467ea6ab920e23a8cf98db73f3ba5507e0634bc8', class: {
-                'sd-file-picker': true,
-                [this.getStatusClass()]: true,
-                'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("input", { key: '20ff1404f15beaeff2f4f3e0b1772aadbd986934', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), index.h("sd-icon", { key: '59e00f4ba49547aacf99dfab54c391c49895d8df', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: 'be74c5aebcc947aacf6841b15915cc98af5453e6', ref: el => (this.fileNamesRef = el), class: {
-                'sd-file-picker__text': true,
-                'sd-file-picker__text--placeholder': !hasFiles,
-                'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (index.h("sd-icon", { key: '0547537e85b8eb0f2678c3023eeec9241caf0ced', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { key: '86bf77f26f2aea00c31c9770c2142353d92d239c', class: "sd-file-picker__tooltip" }, displayText))));
+    unobserveParent() {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
     }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
-};
-SdFilePicker.style = sdFilePickerCss();
-
-const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-flex;align-items:center}sd-guide .sd-guide{display:inline-flex}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #12b553}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
-
-const GUIDE_LABEL = {
-    help: '활용 TIP',
-    pdf: 'PDF Guide',
-    youtube: 'Video Guide',
-    notion: '사용법 안내',
-    event: 'Event Button',
-};
-const GUIDE_ICON = {
-    help: {
-        name: 'helpOutline',
-        size: 20,
-        color: resolveColor.colors.green_75,
-    },
-    pdf: { name: 'pdf', size: 20, color: resolveColor.colors.red_75 },
-    youtube: { name: 'youtube', size: 20, color: resolveColor.colors.red_75 },
-    notion: { name: 'notion', size: 16, color: resolveColor.colors.black },
-    event: { name: 'event', size: 16, color: resolveColor.colors.brilliantblue_70 },
-};
-const SdGuide = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
+    // 외부 클릭 감지
+    handleMouseDown(e) {
+        this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
+            (this.parentRef && this.parentRef.contains(e.target)));
     }
-    get el() { return index.getElement(this); }
-    type = 'help';
-    label = '';
-    message = '';
-    guideUrl = '';
-    popupTitle = '';
-    popupWidth;
-    popupShow = false;
-    guideRef;
-    handleClickGuide = () => {
-        if (this.type === 'help') {
-            this.popupShow = !this.popupShow;
+    handleWindowClick(e) {
+        if (this.isInsideClick) {
+            this.isInsideClick = false;
             return;
         }
-        if (this.guideUrl) {
-            window.open(this.guideUrl, '_blank');
-        }
-    };
-    get guideClass() {
-        const classes = ['sd-guide', `sd-guide--${this.type}`];
-        if (this.popupShow)
-            classes.push('sd-guide--active');
-        return classes.join(' ');
+        if (this.wrapper?.contains(e.target))
+            return;
+        this.close.emit();
     }
-    closeDropdown = () => {
-        this.popupShow = false;
-    };
     render() {
-        const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (index.h(index.Host, { key: '73cc9c84ec4e921e83e9d0cde2971c5088cbb48f', style: {
-                '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, index.h("sd-button", { key: '310afd874d062a91fab4b179a9a4e2f340a95175', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: '133bb71a98efd9a15407aad915937caec728aa38', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '4a39145ce20e1e37ebc3f639712f635231f34f2d', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: 'e71a8217b3969db9fadf9083835402cf69e62c3c', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: 'f035ca961013d99305b0409f406fdd3063e11155', class: "sd-guide__popup__close", icon: "close", color: resolveColor.colors.grey_65, size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: 'a3d505a21abd77e85fac45a792ca7bb2b2448a6a', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '785bfbe594936b56f407edd2349e19076cf6ece9', name: "helpOutline", size: 24, color: resolveColor.colors.green_65 }), index.h("h3", { key: 'da5dfaed05a11ccef574580a4c18341646d59e4f', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: '0faa4a71c1d77d21490436323c2d80c792397991', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
-    }
-    // 현재 2depth까지만 스타일 적용
-    renderListItem(message, depth = 0) {
-        const listItems = [];
-        if (Array.isArray(message)) {
-            const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
-            listItems.push(...depthMsg.flat());
-        }
-        else {
-            listItems.push(this.renderLi(message, depth));
-        }
-        return listItems;
+        return index.h("slot", { key: 'f2000891d7d3bd71982f591bf953d1421f67fb5e' });
     }
-    renderLi = (message, depth) => {
-        return (index.h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, index.h("p", { innerHTML: message })));
-    };
 };
-SdGuide.style = sdGuideCss();
+SdFloatingPopover.style = sdFloatingPortalCss();
 
 const Add8 = (props) => (index.h("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M3.99969 0.633484C4.16537 0.633484 4.29948 0.767622 4.2995 0.933289V3.69989H7.06708C7.23245 3.70014 7.36672 3.8343 7.36688 3.99969C7.36688 4.16523 7.23255 4.29925 7.06708 4.2995H4.2995V7.06708C4.29925 7.23255 4.16523 7.36688 3.99969 7.36688C3.8343 7.36672 3.70014 7.23245 3.69989 7.06708V4.2995H0.933289C0.767622 4.29948 0.633484 4.16537 0.633484 3.99969C0.633648 3.83416 0.767724 3.69991 0.933289 3.69989H3.69989V0.933289C3.69991 0.767724 3.83416 0.633648 3.99969 0.633484Z", fill: "currentColor" })));
 
@@ -2347,2433 +2219,199 @@ const SdIcon = class {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (index.h("i", { key: '49cc8a7c8a0af18d920065232ef3e2127f6abb6c', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: 'cb8464e125ecfddc96621b57183fb26f37043f51', color: this.resolvedColor })));
+        return (index.h("i", { key: '851c9b6fd0ac6bc9393a21e95184e158bced5fe6', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: 'a10dcad82179ba12a9e9754b0b2cdd1ef548b4a5', color: this.resolvedColor })));
     }
 };
 SdIcon.style = sdIconCss();
 
-const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu .sd-date-picker__header{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu .sd-date-picker__header .year-nav,.sd-date-picker__menu .sd-date-picker__header .month-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu .sd-date-picker__header .year-nav button,.sd-date-picker__menu .sd-date-picker__header .month-nav button{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu .sd-date-picker__header .year-nav__current{width:40px;text-align:center}.sd-date-picker__menu .sd-date-picker__header .month-nav__current{width:100px;text-align:center}.sd-date-picker__menu .sd-date-picker__days{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu .sd-date-picker__days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu .sd-date-picker__body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker{width:fit-content;display:inline-block}.sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-range-picker .sd-input .sd-input__container{width:210px}.sd-date-range-picker .sd-input .sd-date-range-picker__input{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#d8d8d8}.sd-input{display:flex;flex-flow:row nowrap;align-items:center;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;width:var(--input-width, 100%);height:28px;background:white}.sd-input.sd-input--with-label:not(.sd-input--inside-label){border:none}.sd-input.sd-input--with-label:not(.sd-input--inside-label) .sd-input__label{margin-right:8px}.sd-input.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container{border:1px solid #aaaaaa;border-radius:4px;height:28px}.sd-input.sd-input--inside-label .sd-input__label{background:#f6f6f6;padding:0 12px;display:flex;align-items:center;justify-content:center;height:100%;border-radius:4px 0 0 4px}.sd-input.sd-input--disabled{cursor:not-allowed !important;box-shadow:none !important;border:1px solid #cccccc !important;background:#eeeeee !important;color:#888888 !important}.sd-input.sd-input--disabled.sd-input--with-label:not(.sd-input--inside-label){border:none !important;background:transparent !important}.sd-input.sd-input--disabled.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container{border:1px solid #cccccc !important;background:#eeeeee !important;color:#888888 !important}.sd-input.sd-input--disabled .sd-input__container{color:#737373 !important}.sd-input.sd-input--disabled .sd-input__container .sd-input__native_element{color:#888888 !important;cursor:not-allowed !important}.sd-input--hovered,.sd-input--focused{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-input--hovered.sd-input--with-label:not(.sd-input--inside-label),.sd-input--focused.sd-input--with-label:not(.sd-input--inside-label){border-color:transparent;box-shadow:none}.sd-input--hovered.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container,.sd-input--focused.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-input.sd-input--error{border-color:#fb4444}.sd-input.sd-input--pass{border-color:#2bce6c}.sd-input.sd-input--barcode:not(.sd-input--disabled){background-color:#fafaa1}.sd-input .sd-input__container{display:flex;align-items:center;padding:4px 8px;width:100%}.sd-input .sd-input__container .sd-input__native_element{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0}.sd-input .sd-input__container .sd-input__native_element::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-input .sd-input__container .sd-input__clear-icon{cursor:pointer;margin-left:8px}`;
+const sdPaginationCss = () => `.sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006ac1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006ac1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}`;
 
-const SdInput = class {
+const BUTTON_WIDTH = {
+    1: 26,
+    2: 36,
+    3: 42,
+    4: 50,
+    5: 58,
+};
+const PER_PAGE = 10;
+const SdPagination = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sdClick = index.createEvent(this, "sdClick");
-        this.sdInput = index.createEvent(this, "sdInput");
-        this.sdChange = index.createEvent(this, "sdChange");
-        this.sdFocus = index.createEvent(this, "sdFocus");
-        this.sdBlur = index.createEvent(this, "sdBlur");
-    }
-    get el() { return index.getElement(this); }
-    value = null;
-    label;
-    insideLabel = false;
-    placeholder = '입력해 주세요.';
-    disabled = false;
-    clearable = false;
-    width;
-    barcode = false;
-    rules;
-    autoFocus = false;
-    status;
-    inputClass = '';
-    readonly = false;
-    //  props - custom styles
-    inputStyle = {};
-    internalValue = null;
-    error = false;
-    focused = false;
-    hovered = false;
-    nativeEl = undefined;
-    sdClick;
-    sdInput;
-    sdChange;
-    sdFocus;
-    sdBlur;
-    valueChanged(newValue) {
-        this.internalValue = newValue;
+        this.pageChange = index.createEvent(this, "sdPageChange");
     }
-    internalValueChanged(newValue) {
-        if (newValue !== this.value) {
-            this.value = newValue;
-            this.sdInput?.emit(this.value);
-        }
-        if (!this.rules || this.rules.length === 0)
-            return;
-        this.error = false;
-        for (const rule of this.rules) {
-            const result = rule(newValue);
-            if (result !== true) {
-                this.error = true;
-                break;
-            }
+    currentPage = 1;
+    lastPage = 1;
+    simple = false;
+    pageChange;
+    get paginationClasses() {
+        const classes = ['sd-pagination'];
+        if (this.simple) {
+            classes.push('sd-pagination--simple');
         }
+        return classes.join(' ');
     }
-    async getNativeElement() {
-        return this.nativeEl || null;
+    get pageNumbers() {
+        const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
+        const end = Math.min(start + PER_PAGE - 1, this.lastPage);
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
     }
-    componentWillLoad() {
-        if (this.value) {
-            this.internalValue = this.value;
-        }
-    }
-    handleInput = (event) => {
-        const target = event.target;
-        this.internalValue = target.value;
-        this.sdInput?.emit(this.internalValue);
-    };
-    handleChange = (event) => {
-        const target = event.target;
-        this.internalValue = target.value;
-        this.sdChange?.emit(this.internalValue);
-    };
-    handleFocus = (type, event) => {
-        this.focused = type === 'focus';
-        if (type === 'blur')
-            this.sdBlur?.emit(event);
-        else
-            this.sdFocus?.emit(event);
-    };
-    getInputStatus() {
-        // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)
-        if (this.disabled)
-            return 'sd-input--disabled';
-        if (this.hovered)
-            return 'sd-input--hovered';
-        if (this.focused)
-            return 'sd-input--focused';
-        if (this.status)
-            return `sd-input--${this.status}`;
-        if (this.error)
-            return 'sd-input--error';
-        return '';
-    }
-    render() {
-        const inputWidth = this.width
-            ? {
-                '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
-            }
-            : {};
-        return (index.h(index.Host, { key: '3babaa8e892b3e5e484d1bdbc28b0d209945ad69', style: inputWidth }, index.h("div", { key: '31ea7cd711a33881144da3f0d4a6e98e6ec55244', class: {
-                'sd-input': true,
-                'sd-input--with-label': !!this.label,
-                'sd-input--inside-label': !!this.label && this.insideLabel,
-                'sd-input--barcode': !!this.barcode,
-                [this.getInputStatus()]: true,
-            } }, this.label && (index.h("div", { key: '85596e41249b0f136c9c07bebe40e2bc2166ceba', class: {
-                'sd-input__label': true,
-            } }, this.label)), index.h("label", { key: 'd942a7cc950506a5cf2bcfd8984d3981af18cc7f', class: {
-                'sd-input__container': true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("slot", { key: '3add3a8c845be67ccd31ae98b30f5989d7e7dbf1', name: "prefix" }), index.h("input", { key: 'b7297ae85e0f07c8a5696cc7072833dc6ade82bc', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), index.h("slot", { key: 'c6ae6cb3f58da00c0ae80261e41841889347b73d', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: '662f365d57707b631f7a58b18330666521846e84', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
-                this.internalValue = '';
-                this.sdChange?.emit(this.internalValue);
-                this.sdInput?.emit(this.internalValue);
-            } }))))));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"],
-        "internalValue": ["internalValueChanged"]
-    }; }
-};
-SdInput.style = sdInputCss();
-
-const sdLoadingSpinnerCss = () => `sd-loading-spinner{display:block}sd-loading-spinner .sd-loading-spinner{animation:sd-loading-spin 2s linear infinite;transform-origin:center center}sd-loading-spinner .sd-loading-spinner .path{animation:sd-loading-spin-path 1.5s ease-in-out infinite}@keyframes sd-loading-spin{0%{transform:rotate3d(0, 0, 1, 0deg)}25%{transform:rotate3d(0, 0, 1, 90deg)}50%{transform:rotate3d(0, 0, 1, 180deg)}75%{transform:rotate3d(0, 0, 1, 270deg)}100%{transform:rotate3d(0, 0, 1, 359deg)}}@keyframes sd-loading-spin-path{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}`;
-
-const SdLoadingSpinner = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    color = '#0075ff';
-    get resolvedColor() {
-        return resolveColor.resolveColor(this.color);
-    }
-    render() {
-        return (index.h(index.Host, { key: 'a04395d2aaacdb74c06aebff6674ba82cc089a88' }, index.h("svg", { key: 'e4a28205405702bb37b40aac4a73ae369605791d', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: '31e0b13b0ab8dbf824fc6b40b020e7eb290f05f5', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
-    }
-};
-SdLoadingSpinner.style = sdLoadingSpinnerCss();
-
-const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;background:white;position:relative}.sd-number-input--hovered{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-number-input.sd-number-input--error{border-color:#fb4444}.sd-number-input.sd-number-input--pass{border-color:#2bce6c}.sd-number-input.sd-number-input--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}.sd-number-input.sd-number-input--disabled .sd-number-input__input{color:#888888 !important;cursor:not-allowed !important}.sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}.sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}.sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}.sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#eff6ff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}.sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#e6f1ff}.sd-number-input .sd-number-input__button:disabled{background-color:#eeeeee;cursor:not-allowed}.sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}.sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}.sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}`;
-
-const SdNumberInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sdIncrement = index.createEvent(this, "sdIncrement");
-        this.sdDecrement = index.createEvent(this, "sdDecrement");
-        this.sdInput = index.createEvent(this, "sdInput");
-        this.sdChange = index.createEvent(this, "sdChange");
-        this.sdFocus = index.createEvent(this, "sdFocus");
-        this.sdBlur = index.createEvent(this, "sdBlur");
-    }
-    get el() { return index.getElement(this); }
-    min = Number.NEGATIVE_INFINITY;
-    max = Number.POSITIVE_INFINITY;
-    step = 1;
-    useButton = false;
-    useDecimal = false;
-    value = null;
-    label;
-    placeholder = '입력해 주세요.';
-    disabled = false;
-    width;
-    rules;
-    autoFocus = false;
-    status;
-    inputClass = '';
-    readonly = false;
-    inputStyle = {};
-    internalValue = null;
-    displayValue = '';
-    hovered = false;
-    error = false;
-    nativeEl = undefined;
-    sdIncrement;
-    sdDecrement;
-    sdInput;
-    sdChange;
-    sdFocus;
-    sdBlur;
-    formatWithCommas(value) {
-        if (value === null || value === undefined)
-            return '';
-        const isNegative = value < 0;
-        const absValue = Math.abs(value);
-        const [intPart, decPart] = absValue.toString().split('.');
-        const formatted = (+intPart).toLocaleString();
-        const result = isNegative ? '-' + formatted : formatted;
-        return decPart ? result + '.' + decPart : String(result);
-    }
-    parseInput(input) {
-        if (!input || input.trim() === '')
-            return null;
-        const cleaned = input.replace(/,/g, '').trim();
-        // -로 시작을 할 수 있을 수 있고, 소수점 0.n | .n
-        if (!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(cleaned)) {
-            return null;
-        }
-        const parsed = parseFloat(cleaned);
-        if (isNaN(parsed))
-            return null;
-        // 소수점 사용 하지 않는데 . 이 있는 경우
-        if (!this.useDecimal && cleaned.includes('.')) {
-            return null;
-        }
-        return parsed;
-    }
-    clampMinMax(value) {
-        return Math.min(Math.max(value, this.min), this.max);
-    }
-    updateDisplay() {
-        this.displayValue = this.formatWithCommas(this.internalValue);
-    }
-    isIncrementDisabled() {
-        if (this.disabled || this.readonly)
-            return true;
-        if (this.internalValue !== null) {
-            return this.internalValue >= this.max;
-        }
-        return false;
-    }
-    isDecrementDisabled() {
-        if (this.disabled || this.readonly)
-            return true;
-        if (this.internalValue !== null) {
-            return this.internalValue <= this.min;
-        }
-        return false;
-    }
-    valueChanged(newValue) {
-        if (newValue === null || newValue === '') {
-            this.internalValue = null;
-        }
-        else {
-            const parsed = typeof newValue === 'string' ? this.parseInput(newValue) : newValue;
-            if (parsed !== null) {
-                this.internalValue = this.clampMinMax(parsed);
-            }
-        }
-        this.updateDisplay();
-    }
-    internalValueChanged(newValue) {
-        this.updateDisplay();
-        if (newValue !== this.value) {
-            this.value = newValue;
-            this.sdInput?.emit(newValue);
-        }
-        if (!this.rules || this.rules.length === 0)
-            return;
-        this.error = false;
-        for (const rule of this.rules) {
-            const result = rule(newValue);
-            if (result !== true) {
-                this.error = true;
-                break;
-            }
-        }
-    }
-    componentWillLoad() {
-        if (this.value !== null && this.value !== undefined) {
-            const parsed = typeof this.value === 'string' ? this.parseInput(this.value) : this.value;
-            if (parsed !== null) {
-                this.internalValue = this.clampMinMax(parsed);
-            }
-        }
-        this.updateDisplay();
-    }
-    handleInput = (event) => {
-        const target = event.target;
-        const inputValue = target.value;
-        if (inputValue === '') {
-            this.internalValue = null;
-            this.displayValue = '';
-            return;
-        }
-        const commasRemoved = inputValue.replace(/,/g, '');
-        // 만약에 소수점 (.) 이 여러개 일 경우
-        const decimalCount = (commasRemoved.match(/\./g) || []).length;
-        if (decimalCount > 1) {
-            target.value = this.displayValue;
-            return;
-        }
-        // 가능: "-", ".", "-." (단순 기호만 있는 경우)
-        if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {
-            target.value = commasRemoved;
-            return;
-        }
-        // 숫자 뒤에 . 이 있는 경우 (예: "1000.") -> 콤마 포맷 적용 + . 유지
-        if (commasRemoved.endsWith('.') && decimalCount === 1) {
-            const numberPart = commasRemoved.slice(0, -1);
-            const parsed = this.parseInput(numberPart);
-            if (parsed !== null) {
-                const formatted = this.formatWithCommas(parsed);
-                target.value = formatted + '.';
-                return;
-            }
-        }
-        const parsed = this.parseInput(commasRemoved);
-        if (parsed !== null) {
-            if (parsed < this.min) {
-                target.value = this.displayValue;
-                return;
-            }
-            if (parsed > this.max) {
-                target.value = this.displayValue;
-                return;
-            }
-            this.internalValue = parsed;
-            this.displayValue = this.formatWithCommas(parsed);
-            target.value = this.displayValue;
-        }
-        else {
-            target.value = this.displayValue;
-        }
-    };
-    handleChange = (event) => {
-        const target = event.target;
-        const inputValue = target.value;
-        if (inputValue === '') {
-            this.internalValue = null;
-        }
-        else {
-            const parsed = this.parseInput(inputValue);
-            if (parsed !== null) {
-                this.internalValue = this.clampMinMax(parsed);
-            }
-        }
-        this.sdChange?.emit(this.internalValue);
-    };
-    handleFocus = (event) => {
-        this.sdFocus?.emit(event);
-    };
-    handleBlur = (event) => {
-        this.updateDisplay();
-        if (this.nativeEl) {
-            this.nativeEl.value = this.displayValue;
-        }
-        this.sdBlur?.emit(event);
-    };
-    handleKeyDown = (event) => {
-        if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            this.handleIncrement();
-        }
-        else if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            this.handleDecrement();
-        }
-    };
-    handleIncrement = () => {
-        if (this.isIncrementDisabled())
-            return;
-        const currentVal = this.internalValue ?? (this.min ?? 0);
-        let nextVal = currentVal + this.step;
-        if (nextVal > this.max) {
-            nextVal = this.max;
-        }
-        if (nextVal === currentVal)
-            return;
-        this.sdIncrement?.emit({ currentVal: nextVal, prevVal: currentVal });
-        this.internalValue = nextVal;
-        this.sdChange?.emit(nextVal);
-    };
-    handleDecrement = () => {
-        if (this.isDecrementDisabled())
-            return;
-        const currentVal = this.internalValue ?? (this.min ?? 0);
-        let nextVal = currentVal - this.step;
-        if (nextVal < this.min) {
-            nextVal = this.min;
-        }
-        if (nextVal === currentVal)
-            return;
-        this.sdDecrement?.emit({ currentVal: nextVal, prevVal: currentVal });
-        this.internalValue = nextVal;
-        this.sdChange?.emit(nextVal);
-    };
-    async getNativeElement() {
-        return this.nativeEl || null;
-    }
-    getInputStatus() {
-        if (this.disabled)
-            return 'sd-number-input--disabled';
-        if (this.hovered)
-            return 'sd-number-input--hovered';
-        if (this.status)
-            return `sd-number-input--${this.status}`;
-        if (this.error)
-            return 'sd-number-input--error';
-        return '';
-    }
-    render() {
-        const inputWidth = this.width
-            ? {
-                '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
-            }
-            : {};
-        const inputStyles = {
-            textAlign: this.useButton ? 'center' : 'right',
-        };
-        return (index.h(index.Host, { key: '00862eac1b5ac354058dfc63ac7cbae7ea675c2e', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && index.h("div", { key: '368ea9ee71d69fccd1f4793e990b1345e7d87cfe', class: "sd-number-input__label" }, this.label), index.h("label", { key: '0f8d107bc23e308d6e9523f04199eccc39bd1268', class: {
-                'sd-number-input': true,
-                [this.getInputStatus()]: true,
-                'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("input", { key: '7f6f4a677ba9460ea022ae2060a73872123d19be', ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, style: inputStyles }), this.useButton && (index.h("div", { key: 'fd85f670c841fd7aee190fa040b4e228af3075a6', class: "sd-number-input__buttons" }, index.h("button", { key: 'c49d7ca15872cf5dc9fa6e46a3a7bca02a10d4d1', type: "button", class: {
-                'sd-number-input__button': true,
-                'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '9fe03669015bbac1704f06bcacf8625c6937253d', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), index.h("button", { key: '98ea1cc55299f03e1689bb9becc6e87ab5720d7a', type: "button", class: {
-                'sd-number-input__button': true,
-                'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: 'b6d446dfdd0435b8c991901a2cb100af4ae4d8b5', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"],
-        "internalValue": ["internalValueChanged"]
-    }; }
-};
-SdNumberInput.style = sdNumberInputCss();
-
-const sdPaginationCss = () => `.sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006ac1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006ac1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}`;
-
-const BUTTON_WIDTH = {
-    1: 26,
-    2: 36,
-    3: 42,
-    4: 50,
-    5: 58,
-};
-const PER_PAGE = 10;
-const SdPagination = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.pageChange = index.createEvent(this, "pageChange");
-    }
-    currentPage = 1;
-    lastPage = 1;
-    simple = false;
-    pageChange;
-    get paginationClasses() {
-        const classes = ['sd-pagination'];
-        if (this.simple) {
-            classes.push('sd-pagination--simple');
-        }
-        return classes.join(' ');
-    }
-    get pageNumbers() {
-        const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
-        const end = Math.min(start + PER_PAGE - 1, this.lastPage);
-        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-    }
-    get buttonWidth() {
-        const lastPageNum = this.pageNumbers.at(-1) ?? 1;
-        const maxPageLength = lastPageNum.toString().length;
-        return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
+    get buttonWidth() {
+        const lastPageNum = this.pageNumbers.at(-1) ?? 1;
+        const maxPageLength = lastPageNum.toString().length;
+        return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
     }
     handlePageChange(page) {
         if (page < 1 || page > this.lastPage)
             return;
-        this.pageChange.emit(page);
-    }
-    handleGroupChange(direction) {
-        const delta = direction === 'forward' ? PER_PAGE : -10;
-        const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
-        this.handlePageChange(newPage);
-    }
-    get isFirstGroup() {
-        return this.currentPage <= PER_PAGE;
-    }
-    get isLastGroup() {
-        const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
-        return startPageGroup + PER_PAGE - 1 >= this.lastPage;
-    }
-    renderPrevButtons() {
-        if (this.simple) {
-            if (this.currentPage <= 1)
-                return null;
-            return (index.h(index.Fragment, null, index.h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, index.h("sd-icon", { name: "arrowLeftEnd", size: "12", color: "#222222" })), index.h("button", { "aria-label": "Go to previous page", onClick: () => this.handlePageChange(this.currentPage - 1) }, index.h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
-        }
-        if (!this.isFirstGroup) {
-            return (index.h(index.Fragment, null, index.h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, index.h("sd-icon", { name: "arrowLeftEnd", size: "12", color: "#222222" })), index.h("button", { "aria-label": "Go to previous page group", onClick: () => this.handleGroupChange('backward') }, index.h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
-        }
-    }
-    renderNextButtons() {
-        if (this.simple) {
-            if (this.currentPage >= this.lastPage)
-                return null;
-            return (index.h(index.Fragment, null, index.h("button", { "aria-label": "Go to next page", onClick: () => this.handlePageChange(this.currentPage + 1) }, index.h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), index.h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, index.h("sd-icon", { name: "arrowRightEnd", size: "12", color: "#222222" }))));
-        }
-        if (!this.isLastGroup) {
-            return (index.h(index.Fragment, null, index.h("button", { "aria-label": "Go to next page group", onClick: () => this.handleGroupChange('forward') }, index.h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), index.h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, index.h("sd-icon", { name: "arrowRightEnd", size: "12", color: "#222222" }))));
-        }
-    }
-    render() {
-        return (index.h("div", { key: '0a55eddc4c434d3a7dc6afaa2386e68a6767300e', class: this.paginationClasses }, index.h("div", { key: '8bb73906c74f1a8646286d0858ab6276531e4bd9', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
-                'pagination-btn': true,
-                'pagination-btn--selected': this.currentPage === n,
-            }, disabled: this.currentPage === n, style: {
-                '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '2f6945f41f351153a9c182262ecef8c96d0ec1eb', class: "append-btns" }, this.renderNextButtons())));
-    }
-};
-SdPagination.style = sdPaginationCss();
-
-const SdPortal = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sdClose = index.createEvent(this, "sdClose");
-    }
-    get hostEl() { return index.getElement(this); }
-    to = 'body';
-    parentRef = null;
-    offset = [0, 4];
-    zIndex = 9999;
-    open = false;
-    sdClose;
-    container;
-    wrapper;
-    rafId;
-    isInsideClick = false;
-    resizeObserver;
-    mutationObserver;
-    componentDidLoad() {
-        this.container = this.resolveContainer();
-        this.createWrapper();
-        this.moveSlotContent();
-        this.updatePosition();
-        this.observeParent();
-    }
-    componentDidRender() {
-        if (!this.wrapper)
-            return;
-        this.wrapper.style.display = this.open ? 'block' : 'none';
-        if (this.open)
-            this.updatePosition();
-    }
-    disconnectedCallback() {
-        this.unobserveParent();
-        this.wrapper?.remove();
-    }
-    resolveContainer() {
-        const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
-        return el instanceof HTMLElement ? el : document.body;
-    }
-    createWrapper() {
-        this.wrapper = document.createElement('div');
-        Object.assign(this.wrapper.style, {
-            position: 'absolute',
-            zIndex: this.zIndex.toString(),
-            transition: 'opacity 0.4s',
-        });
-        this.container.appendChild(this.wrapper);
-    }
-    moveSlotContent() {
-        if (!this.wrapper)
-            return;
-        const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);
-        nodes.forEach(n => this.wrapper.appendChild(n));
-    }
-    // 위치 갱신 (scroll / resize)
-    updatePosition() {
-        if (this.rafId)
-            cancelAnimationFrame(this.rafId);
-        this.rafId = requestAnimationFrame(() => {
-            if (!this.parentRef || !this.wrapper)
-                return;
-            const parentRect = this.parentRef.getBoundingClientRect();
-            const wrapperRect = this.wrapper.getBoundingClientRect();
-            const viewport = {
-                width: window.innerWidth,
-                height: window.innerHeight,
-            };
-            let top = parentRect.bottom + window.scrollY + this.offset[1];
-            let left = parentRect.left + window.scrollX + this.offset[0];
-            // 화면 상하단 넘어갈 시 반전
-            if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {
-                top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];
-            }
-            if (top < window.scrollY) {
-                top = parentRect.bottom + window.scrollY + this.offset[1];
-            }
-            // 화면 좌우측 넘어갈 시 반전
-            if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {
-                left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];
-            }
-            if (left < 0) {
-                left = this.offset[0];
-            }
-            this.wrapper.style.top = `${top}px`;
-            this.wrapper.style.left = `${left}px`;
-        });
-    }
-    // parentRef의 이동 / 크기변경 감지
-    observeParent() {
-        if (!this.parentRef)
-            return;
-        this.resizeObserver = new ResizeObserver(() => this.updatePosition());
-        this.resizeObserver.observe(this.parentRef);
-        this.mutationObserver = new MutationObserver(() => this.updatePosition());
-        this.mutationObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    unobserveParent() {
-        this.resizeObserver?.disconnect();
-        this.mutationObserver?.disconnect();
-    }
-    // 외부 클릭 감지
-    handleMouseDown(e) {
-        this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
-    }
-    handleWindowClick(e) {
-        if (this.isInsideClick) {
-            this.isInsideClick = false;
-            return;
-        }
-        if (this.wrapper?.contains(e.target))
-            return;
-        this.sdClose.emit();
-    }
-    render() {
-        return index.h("slot", { key: '05a54c512300d0616811e11a795170490feff876' });
-    }
-};
-
-const sdRadioGroupCss = () => `sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}sd-radio-group .sd-radio-group__option{width:fit-content;display:flex;align-items:center;gap:8px;font-weight:400;font-size:12px;line-height:20px;cursor:pointer}sd-radio-group .sd-radio-group__option:has(input:disabled){cursor:not-allowed}sd-radio-group .sd-radio-group__option input{position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;cursor:pointer;accent-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked{border-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075ff}sd-radio-group .sd-radio-group__option input:disabled{cursor:not-allowed;border-color:#cccccc;background-color:#eeeeee}sd-radio-group .sd-radio-group__option input:disabled:checked::before{background-color:#cccccc}sd-radio-group .sd-radio-group__option input:not(:disabled):hover{border-color:#0075ff;background-color:#d9eaff}sd-radio-group .sd-radio-group__label{font-size:12px;color:#333333;line-height:20px;user-select:none}sd-radio-group .sd-radio-group__option--disabled{cursor:not-allowed}sd-radio-group .sd-radio-group__option--disabled .sd-radio-group__label{color:#888888}`;
-
-const SdRadioGroup = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sdChange = index.createEvent(this, "sdChange");
-    }
-    value;
-    radioOptions = [];
-    direction = 'vertical';
-    disabled = false;
-    name;
-    selectedValue;
-    sdChange;
-    componentWillLoad() {
-        if (this.value) {
-            this.selectedValue = this.value;
-        }
-    }
-    valueChanged(newValue) {
-        this.selectedValue = newValue;
-    }
-    handleRadioChange = (optionValue, optionDisabled) => {
-        if (this.disabled || optionDisabled)
-            return;
-        this.selectedValue = optionValue;
-        this.value = optionValue;
-        this.sdChange.emit(optionValue);
-    };
-    isOptionSelected(option) {
-        return this.selectedValue === option.value;
-    }
-    isOptionDisabled(option) {
-        return this.disabled || !!option.disabled;
-    }
-    getRadioClasses(option) {
-        const classes = [
-            'sd-radio-group__option',
-            this.isOptionSelected(option)
-                ? 'sd-radio-group__option--selected'
-                : 'sd-radio-group__option--unselected',
-        ];
-        if (this.isOptionDisabled(option)) {
-            classes.push('sd-radio-group__option--disabled');
-        }
-        return classes.join(' ');
-    }
-    getGroupClasses() {
-        const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];
-        return classes.join(' ');
-    }
-    render() {
-        const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
-        return (index.h("div", { key: 'c66984dc882990512082493a67df0d7cc6daea99', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index$1) => {
-            const isSelected = this.isOptionSelected(option);
-            const isDisabled = this.isOptionDisabled(option);
-            return (index.h("label", { key: `radio-${index$1}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, index.h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-group__label" }, option.label)));
-        })));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
-};
-SdRadioGroup.style = sdRadioGroupCss();
-
-const sdSelectCss = () => `.sd-select__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select__dropdown .sd-select__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select{display:inline-flex;width:fit-content;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{display:flex;width:var(--select-width, 200px);height:28px;position:relative;color:#333333;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}sd-select .sd-select:hover:not(.sd-select--disabled){background:#f6f6f6}sd-select .sd-select.sd-select--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}sd-select .sd-select.sd-select--disabled .sd-select__label{border-right:1px solid #cccccc}sd-select .sd-select.sd-select--disabled .sd-select__trigger{color:#888888}sd-select .sd-select.sd-select--disabled .sd-select__trigger:focus,sd-select .sd-select.sd-select--disabled .sd-select__trigger:focus-visible,sd-select .sd-select.sd-select--disabled .sd-select__trigger:focus-within{outline:none !important}sd-select .sd-select__label{font-size:12px;line-height:20px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6;display:inline-block;white-space:nowrap}sd-select .sd-select__container{position:relative;width:100%;display:flex}sd-select .sd-select__container .sd-select__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select .sd-select__container .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select__container .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select__container .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select .sd-select__container .sd-select__arrow--open{transform:rotate(180deg)}.sd-select__dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column}`;
-
-const SdSelect = class extends selectKeyboardNavigation.BaseDropdownEvent {
-    constructor(hostRef) {
-        super();
-        index.registerInstance(this, hostRef);
-        this.sdChange = index.createEvent(this, "sdChange");
-        this.dropDownShow = index.createEvent(this, "dropDownShow");
-    }
-    get el() { return index.getElement(this); }
-    // props
-    value = null;
-    label = '';
-    options = [];
-    placeholder = '선택';
-    optionPlaceholder = '옵션이 없습니다.';
-    width = '200px';
-    dropdownHeight = '260px';
-    disabled = false;
-    clearable = false;
-    searchable = false;
-    // props - custom slots
-    optionRenderer;
-    // states
-    filteredOptions = this.options;
-    isOpen = false;
-    searchText = null;
-    itemIndex = -1;
-    isScrolled = false;
-    // events
-    sdChange;
-    dropDownShow;
-    selectRef;
-    searchRef;
-    optionRef;
-    dropdownRef;
-    async open() {
-        this.isOpen = true;
-    }
-    valueChanged() {
-        const selectedOption = this.getSelectedOption();
-        this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
-    }
-    optionsChanged() {
-        this.filteredOptions = this.options;
-        this.filterOptions();
-    }
-    searchTextChanged() {
-        this.filterOptions();
-    }
-    async itemIndexChanged(newIndex, oldIndex) {
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            if (this.itemIndex === -1) {
-                searchInput?.focus({ preventScroll: true });
-                return;
-            }
-            else if (searchInput?.matches(':focus')) {
-                searchInput?.blur();
-            }
-        }
-        const optionElements = this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];
-        const currentItem = optionElements?.[this.itemIndex];
-        if (!currentItem || !this.isOpen)
-            return;
-        this.optionRef = currentItem;
-        const isOptionDisabled = await this.optionRef.isDisabled();
-        if (isOptionDisabled) {
-            newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
-            return;
-        }
-        this.scrollToOption(currentItem);
-    }
-    componentWillLoad() {
-        // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
-        this.filteredOptions = this.options;
-        this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
-    }
-    disconnectedCallback() {
-        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
-    }
-    async isOpenChanged() {
-        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
-        this.onDropdownToggle(this.isOpen);
-        const selectedOption = this.getSelectedOption();
-        if (!selectedOption) {
-            this.itemIndex = /* this.searchable ?  */ -1 /* : 0 */;
-        }
-        else {
-            this.itemIndex = this.options.indexOf(selectedOption);
-        }
-        this.dropDownShow?.emit({ isOpen: this.isOpen });
-        if (this.isOpen === false)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        const optionElements = this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];
-        const currentItem = optionElements?.[this.itemIndex];
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            searchInput?.focus({ preventScroll: true });
-        }
-        if (!currentItem)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        this.scrollToOption(currentItem);
-    }
-    handleDocumentClick(event) {
-        if (!this.selectRef?.contains(event.target)) {
-            this.isOpen = false;
-        }
-    }
-    handleDocumentKeydown(keyboardEvent) {
-        keyboardEvent.stopPropagation();
-        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
-        if (!targetKey.includes(keyboardEvent.key))
-            return;
-        keyboardEvent.preventDefault();
-        switch (keyboardEvent.key) {
-            case 'ArrowDown':
-            case 'ArrowUp':
-                const keyboardNavigation = new selectKeyboardNavigation.SelectKeyboardNavigation(this.searchable, this.filteredOptions);
-                const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
-                this.itemIndex = nextIndex;
-                break;
-            case 'Enter':
-                const selectedOption = this.filteredOptions[this.itemIndex];
-                if (selectedOption && !selectedOption.disabled) {
-                    this.value = selectedOption.value;
-                    this.searchText = null;
-                    this.isOpen = false;
-                }
-                break;
-            case 'Escape':
-                this.isOpen = false;
-                break;
-        }
-    }
-    // closeDropdown 메서드 구현 (Manager에서 호출됨)
-    closeDropdown() {
-        this.isOpen = false;
-    }
-    // event handlers
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        if (!this.disabled) {
-            this.isOpen = !this.isOpen;
-            this.dropDownShow?.emit({ isOpen: this.isOpen });
-        }
-    };
-    handleOptionClick = (detail) => {
-        const { option, event } = detail;
-        event.stopPropagation();
-        if (!option.disabled) {
-            this.value = option.value;
-            this.isOpen = false;
-        }
-    };
-    filterOptions() {
-        if (!this.searchText || this.searchText.trim() === '') {
-            // 검색어가 없으면 전체 옵션 표시
-            this.filteredOptions = this.options;
-        }
-        else {
-            // 검색어가 있으면 필터링
-            this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
-        }
-    }
-    getSelectedOption() {
-        return this.options.find(option => option.value === this.value);
-    }
-    handleDropdownScroll = (event) => {
-        const target = event.target;
-        const scrollTop = target.scrollTop;
-        // 스크롤이 조금이라도 되면 그림자 표시
-        this.isScrolled = scrollTop > 0;
-    };
-    async getNativeInputElement() {
-        if (this.searchRef) {
-            return this.searchRef.getNativeElement();
-        }
-        return null;
-    }
-    scrollToOption(optionElement) {
-        if (!this.dropdownRef || !optionElement)
-            return;
-        const dropdown = this.dropdownRef;
-        const optionTop = optionElement.offsetTop;
-        const optionHeight = optionElement.offsetHeight;
-        const dropdownScrollTop = dropdown.scrollTop;
-        const dropdownHeight = dropdown.clientHeight;
-        const searchContainer = dropdown.querySelector('.sd-select__search-container');
-        const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
-        const visibleTop = dropdownScrollTop + searchOffset;
-        const visibleBottom = dropdownScrollTop + dropdownHeight;
-        if (optionTop < visibleTop) {
-            dropdown.scrollTop = optionTop - searchOffset;
-        }
-        else if (optionTop + optionHeight > visibleBottom) {
-            dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;
-        }
-    }
-    // render method
-    render() {
-        const style = {
-            '--select-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        return (index.h(index.Host, { key: '8f90fd48d8e20b97d35a047d15507d3116c79b23', style: style }, index.h("div", { key: '91bc6bab24b9d99ab595357ec5591b56510ed161', class: {
-                'sd-select': true,
-                'sd-select--open': this.isOpen,
-                'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: 'a2ceb7cc71b13887f55f3a44e0f1babd4be388b9', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
-    }
-    renderLabel(label) {
-        if (!label)
-            return null;
-        return index.h("label", { class: "sd-select__label" }, label);
-    }
-    renderTrigger() {
-        const selectedOption = this.getSelectedOption();
-        return (index.h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, index.h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (index.h("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: event => {
-                event.stopPropagation();
-                this.value = null;
-            } })), index.h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
-    }
-    renderDropdown() {
-        const style = {
-            '--select-dropdown-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        if (this.isOpen === false)
-            return null;
-        return (index.h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, index.h("div", { class: "sd-select__dropdown", style: style, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: option.value === this.value, isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail) }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select__option-placeholder' }, this.optionPlaceholder))))));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"],
-        "options": ["optionsChanged"],
-        "searchText": ["searchTextChanged"],
-        "itemIndex": ["itemIndexChanged"],
-        "isOpen": ["isOpenChanged"]
-    }; }
-};
-SdSelect.style = sdSelectCss();
-
-const sdSelectMultipleGroupCss = () => `.sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select-multiple-group{display:inline-block;height:fit-content}sd-select-multiple-group:focus,sd-select-multiple-group:focus-visible,sd-select-multiple-group:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white;color:#333333}sd-select-multiple-group .sd-select-multiple-group:hover:not(.sd-select-multiple-group--disabled){background:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__label{border-right:1px solid #cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger{color:#888888}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-visible,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group__container{position:relative;width:100%;display:flex}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-multiple-group__dropdown--ready{opacity:1}`;
-
-const SdSelectMultipleGroup = class extends selectKeyboardNavigation.BaseDropdownEvent {
-    constructor(hostRef) {
-        super();
-        index.registerInstance(this, hostRef);
-        this.sdChange = index.createEvent(this, "sdChange");
-        this.dropDownShow = index.createEvent(this, "dropDownShow");
-    }
-    get el() { return index.getElement(this); }
-    // props
-    value = null;
-    label = '';
-    options = [];
-    placeholder = '선택';
-    optionPlaceholder = '옵션이 없습니다.';
-    width = '200px';
-    dropdownHeight = '260px';
-    disabled = false;
-    clearable = false;
-    searchable = false;
-    useCheckbox = false;
-    useAll = false;
-    allCheckedLabel = '전체';
-    allCheckOptionLabel = '전체';
-    // props - custom styles
-    containerStyle = {};
-    triggerStyle = {};
-    dropdownStyle = {};
-    optionStyle = {};
-    labelStyle = {};
-    // props - custom slots
-    optionRenderer;
-    // states
-    filteredOptions = this.options;
-    isOpen = false;
-    searchText = null;
-    itemIndex = -1;
-    isScrolled = false;
-    isDropdownReady = false;
-    // events
-    sdChange;
-    dropDownShow;
-    selectRef;
-    searchRef;
-    optionRef;
-    dropdownRef;
-    valueChanged() {
-        this.sdChange?.emit(this.value);
-    }
-    optionsChanged() {
-        this.filteredOptions = this.options;
-        this.filterOptions();
-    }
-    searchTextChanged() {
-        this.filterOptions();
-    }
-    async itemIndexChanged(newIndex, oldIndex) {
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            if (this.itemIndex === -1) {
-                searchInput?.focus({ preventScroll: true });
-                return;
-            }
-            else if (searchInput?.matches(':focus')) {
-                searchInput?.blur();
-            }
-        }
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
-        // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
-        const actualIndex = this.useAll ? this.itemIndex + 1 : this.itemIndex;
-        const currentItem = optionElements?.[actualIndex];
-        if (!currentItem || !this.isOpen)
-            return;
-        this.optionRef = currentItem;
-        const isOptionDisabled = await this.optionRef.isDisabled();
-        if (isOptionDisabled) {
-            newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
-            return;
-        }
-        this.scrollToOption(currentItem);
-    }
-    async isOpenChanged() {
-        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
-        this.onDropdownToggle(this.isOpen);
-        this.dropDownShow?.emit({ isOpen: this.isOpen });
-        this.isDropdownReady = false;
-        if (this.isOpen === false) {
-            return;
-        }
-        // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
-        requestAnimationFrame(() => {
-            requestAnimationFrame(async () => {
-                const selectedOptions = this.getSelectedOption();
-                // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
-                if (selectedOptions && selectedOptions.length > 0) {
-                    const selectedIndex = this.options.indexOf(selectedOptions[0]);
-                    const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
-                    // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
-                    const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
-                    // 선택된 옵션이 화면 가운데에 오도록 index 조정
-                    const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
-                    const currentItem = optionElements?.[targetIndex];
-                    if (currentItem) {
-                        this.scrollToOption(currentItem);
-                    }
-                }
-                this.isDropdownReady = true;
-                if (this.searchable) {
-                    const searchInput = await this.getNativeInputElement();
-                    if (searchInput) {
-                        requestAnimationFrame(() => {
-                            searchInput.focus({ preventScroll: true });
-                        });
-                    }
-                }
-            });
-        });
-    }
-    async open() {
-        await new Promise(resolve => setTimeout(resolve, 0));
-        this.isOpen = true;
-    }
-    componentWillLoad() {
-        // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
-        this.filteredOptions = this.options;
-        this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
-    }
-    disconnectedCallback() {
-        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
-    }
-    handleDocumentClick(event) {
-        if (!this.selectRef?.contains(event.target)) {
-            this.isOpen = false;
-        }
-    }
-    handleDocumentKeydown(keyboardEvent) {
-        keyboardEvent.stopPropagation();
-        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
-        if (!targetKey.includes(keyboardEvent.key))
-            return;
-        keyboardEvent.preventDefault();
-        switch (keyboardEvent.key) {
-            case 'ArrowDown':
-            case 'ArrowUp':
-                const keyboardNavigation = new selectKeyboardNavigation.SelectKeyboardNavigation(this.searchable, this.filteredOptions);
-                const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
-                this.itemIndex = nextIndex;
-                break;
-            case 'Enter':
-                const selectedOption = this.filteredOptions[this.itemIndex];
-                if (selectedOption && !selectedOption.disabled) {
-                    this.handleOptionSelection(selectedOption);
-                }
-                break;
-            case 'Escape':
-                this.isOpen = false;
-                break;
-        }
-    }
-    // event handlers
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        if (!this.disabled) {
-            this.isOpen = !this.isOpen;
-            this.dropDownShow?.emit({ isOpen: this.isOpen });
-        }
-    };
-    handleAllOptionClick = (detail) => {
-        if (detail.isSelected) {
-            // 이미 선택된 옵션인 경우, 선택 해제
-            const filterDisabledOptions = this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled);
-            this.value =
-                this.value?.filter(selected => !filterDisabledOptions.some(opt => opt.value === selected.value)) || this.value;
-        }
-        else {
-            // 새로운 옵션 선택
-            const valueSet = new Set([
-                ...(this.value || []),
-                ...this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled),
-            ]);
-            this.value = Array.from(valueSet);
-        }
-    };
-    handleOptionClick = (detail) => {
-        const { option, event } = detail;
-        event.stopPropagation();
-        if (option.type === 'group')
-            this.handleGroupOptionClick(detail);
-        if (option.type === 'subgroup')
-            this.handleSubGroupOptionClick(detail);
-        if (option.type === 'item')
-            this.handleOptionSelection(option);
-    };
-    handleGroupOptionClick = (detail) => {
-        const { option, isSelected } = detail;
-        const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
-        childOptions.forEach(subgroup => {
-            this.handleSubGroupOptionClick({
-                option: subgroup,
-                isSelected: isSelected || isSelected === null,
-            });
-        });
-    };
-    handleSubGroupOptionClick = (detail) => {
-        const { option, isSelected } = detail;
-        const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
-        if (isSelected || isSelected === null) {
-            // 모든 자식 옵션이 선택된 경우, 모두 선택 해제
-            this.value =
-                this.value?.filter(selected => !childOptions.some(child => child.value === selected.value)) ||
-                    null;
-        }
-        else {
-            // 일부 또는 전체 자식 옵션이 선택되지 않은 경우, 모두 선택
-            const newSelections = childOptions.filter(child => !this.value?.some(selected => selected.value === child.value));
-            this.value = [...(this.value || []), ...newSelections];
-        }
-    };
-    filterOptions() {
-        if (!this.searchText || this.searchText.trim() === '') {
-            // 검색어가 없으면 전체 옵션 표시
-            this.filteredOptions = this.options;
-            return;
-        }
-        const searchTerm = this.searchText.toLowerCase();
-        const matchedOptions = new Set();
-        // 1. 직접 매칭되는 옵션들 찾기
-        this.options.forEach(option => {
-            if (option.label.toLowerCase().includes(searchTerm)) {
-                matchedOptions.add(option);
-                // 매칭된 옵션의 상위 그룹들도 포함
-                this.addParentGroups(option, matchedOptions);
-            }
-        });
-        // 2. Set을 배열로 변환하고 원본 순서 유지
-        this.filteredOptions = this.options.filter(option => matchedOptions.has(option));
-    }
-    addParentGroups(option, matchedSet) {
-        if (!option.parent)
-            return;
-        const parentOption = this.options.find(opt => opt.value === option.parent);
-        if (parentOption && !matchedSet.has(parentOption)) {
-            matchedSet.add(parentOption);
-            // 재귀적으로 상위 그룹들도 추가
-            this.addParentGroups(parentOption, matchedSet);
-        }
-    }
-    getSelectedOption() {
-        return this.options.filter(option => this.value?.includes(option));
-    }
-    handleDropdownScroll = (event) => {
-        const target = event.target;
-        const scrollTop = target.scrollTop;
-        // 스크롤이 조금이라도 되면 그림자 표시
-        this.isScrolled = scrollTop > 0;
-    };
-    async getNativeInputElement() {
-        if (this.searchRef) {
-            return this.searchRef.getNativeElement();
-        }
-        return null;
-    }
-    handleOptionSelection = (option) => {
-        if (!option || option.disabled)
-            return;
-        const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
-        if (isAlreadySelected) {
-            // 이미 선택된 옵션인 경우, 선택 해제
-            this.value = this.value?.filter(opt => opt.value !== option.value) || null;
-        }
-        else {
-            // 새로운 옵션 선택
-            this.value = [...(this.value || []), option];
-        }
-    };
-    getAllItemsUnderOption(parentOption, includeDisabled = false) {
-        const filterChildrenWithParent = (option) => option.parent === parentOption.value && (includeDisabled || !option.disabled);
-        if (parentOption.type === 'subgroup') {
-            return this.filteredOptions.filter(option => filterChildrenWithParent(option) && option.type === 'item');
-        }
-        const allItems = [];
-        const childOptions = this.filteredOptions.filter(filterChildrenWithParent);
-        const subgroupOptions = childOptions.filter(option => option.type === 'subgroup');
-        subgroupOptions.forEach(subgroup => {
-            const itemsUnderSubgroup = this.filteredOptions.filter(option => option.parent === subgroup.value &&
-                option.type === 'item' &&
-                (includeDisabled ? true : !option.disabled));
-            allItems.push(...itemsUnderSubgroup);
-        });
-        const directItems = childOptions.filter(option => option.type === 'item');
-        allItems.push(...directItems);
-        return allItems;
-    }
-    isAllChildrenSelected(groupOption) {
-        const allItems = this.getAllItemsUnderOption(groupOption);
-        if (allItems.length === 0)
-            return false;
-        const selectedItems = allItems.filter(item => this.value?.some(selected => selected.value === item.value));
-        if (selectedItems.length === allItems.length)
-            return true;
-        if (selectedItems.length > 0)
-            return null;
-        return false;
-    }
-    getChildrenOptions(parentOption) {
-        const allItems = this.getAllItemsUnderOption(parentOption, true);
-        const selectedCount = allItems.filter(item => this.value?.some(val => val.value === item.value)).length;
-        return {
-            selectedCount,
-            totalCount: allItems.length,
-        };
-    }
-    isAllOptionsSelected() {
-        if (!this.value || this.value.length === 0)
-            return false;
-        const selectableItems = this.options.filter(opt => opt.type === 'item' && !opt.disabled);
-        if (selectableItems.length === 0)
-            return false;
-        const selectedValues = new Set(this.value.map(v => v.value));
-        return selectableItems.every(option => selectedValues.has(option.value));
-    }
-    getTriggerLabel() {
-        const selectedOption = this.getSelectedOption();
-        if (!selectedOption)
-            return '선택';
-        if (selectedOption.length === 0)
-            return this.placeholder;
-        const isAllChecked = this.isAllOptionsSelected();
-        return isAllChecked
-            ? this.allCheckedLabel
-            : selectedOption.map(option => option.label).join(', ');
-    }
-    closeDropdown() {
-        this.isOpen = false;
-    }
-    async scrollToOption(optionElement) {
-        if (!this.dropdownRef || !optionElement)
-            return;
-        requestAnimationFrame(() => {
-            const dropdown = this.dropdownRef;
-            const optionTop = optionElement.offsetTop;
-            const optionHeight = optionElement.offsetHeight;
-            const dropdownScrollTop = dropdown.scrollTop;
-            const dropdownHeight = dropdown.clientHeight;
-            const searchContainer = dropdown.querySelector('.sd-select-multiple-group__search-container');
-            const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
-            const visibleContentHeight = dropdownHeight - searchOffset;
-            const visibleTop = dropdownScrollTop + searchOffset;
-            const visibleBottom = dropdownScrollTop + dropdownHeight;
-            if (optionTop < visibleTop) {
-                dropdown.scrollTo({ top: optionTop - searchOffset, behavior: 'instant' });
-            }
-            else if (optionTop + optionHeight > visibleBottom) {
-                dropdown.scrollTo({
-                    top: optionTop + optionHeight - visibleContentHeight - searchOffset,
-                    behavior: 'instant',
-                });
-            }
-        });
-    }
-    render() {
-        const style = {
-            '--select-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        return (index.h(index.Host, { key: '9b9985d412b87c72d6408acd74f8f120a5918bc2', style: style }, index.h("div", { key: '3e2c08541d14cc31ecf3f2d383ac20804ce809ef', class: {
-                'sd-select-multiple-group': true,
-                'sd-select-multiple-group--open': this.isOpen,
-                'sd-select-multiple-group--disabled': this.disabled,
-            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), index.h("div", { key: '2eded5c3c25b200bae874e0830ce9433744b2a53', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
-    }
-    renderLabel(label, labelStyle) {
-        if (!label)
-            return null;
-        return (index.h("label", { class: "sd-select-multiple-group__label", style: labelStyle }, label));
-    }
-    renderTrigger() {
-        const selectedOption = this.getSelectedOption();
-        return (index.h("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, index.h("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (index.h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
-                event.stopPropagation();
-                this.value = null;
-            } })), index.h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
-                'sd-select-multiple-group__arrow': true,
-                'sd-select-multiple-group__arrow--open': this.isOpen,
-            } })));
-    }
-    renderDropdown() {
-        const style = {
-            '--select-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        if (this.isOpen === false)
-            return null;
-        return (index.h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, index.h("div", { style: { width: '0', height: '0', overflow: 'visible' } }, index.h("div", { class: {
-                'sd-select-multiple-group__dropdown': true,
-                'sd-select-multiple-group__dropdown--ready': this.isDropdownReady,
-            }, style: { ...style, ...this.dropdownStyle }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (index.h(index.Fragment, null, this.useAll && (index.h("sd-select-option-group", { option: { label: this.allCheckOptionLabel, value: '', type: 'all' }, index: 0, isSelected: this.isAllOptionsSelected(), isFocused: this.itemIndex === 0, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => this.handleAllOptionClick(detail), useCheckbox: this.useCheckbox, useIndicator: false })), this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option-group", { option: option, index: index$1, isSelected: option.type === 'item'
-                ? this.value?.some(selected => selected.value === option.value)
-                : this.isAllChildrenSelected(option), isFocused: index$1 === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => {
-                if (option.type !== 'item' && !this.useCheckbox) {
-                    return;
-                }
-                this.handleOptionClick(detail);
-            }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) })))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder)))))));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"],
-        "options": ["optionsChanged"],
-        "searchText": ["searchTextChanged"],
-        "itemIndex": ["itemIndexChanged"],
-        "isOpen": ["isOpenChanged"]
-    }; }
-};
-SdSelectMultipleGroup.style = sdSelectMultipleGroupCss();
-
-const sdSelectOptionCss = () => `sd-select-option{display:block;height:fit-content;line-height:0}sd-select-option .sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option .sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option .sd-select__option--focused{background-color:#e6f1ff}sd-select-option .sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox),sd-select-option .sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox){color:#0075ff;font-weight:700}sd-select-option .sd-select__option--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option .sd-select__option:hover:not(.sd-select__option--disabled){background-color:#0075ff;color:white}`;
-
-const SdSelectOption = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.optionClick = index.createEvent(this, "optionClick");
-    }
-    get el() { return index.getElement(this); }
-    option;
-    index;
-    isSelected = false;
-    isFocused = false;
-    optionStyle;
-    disabled = false;
-    useCheckbox = false;
-    isHovered = false;
-    async isDisabled() {
-        return !!this.option.disabled;
-    }
-    optionClick;
-    handleClick = (event) => {
-        event.stopPropagation();
-        if (!this.option.disabled && !this.disabled) {
-            this.optionClick.emit({
-                option: this.option,
-                index: this.index,
-                event,
-            });
-        }
-    };
-    render() {
-        return (index.h(index.Host, { key: 'cfb999f7001240e6bd5dc302b24aade477671f74' }, index.h("div", { key: '053e073fee23e99bd23a9b9fa95cb9ddabf9d6bf', class: {
-                'sd-select__option': true,
-                'sd-select__option--selected': this.isSelected,
-                'sd-select__option--disabled': !!this.option.disabled,
-                'sd-select__option--focused': this.isFocused,
-                'sd-select__option--use-checkbox': this.useCheckbox,
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: this.handleClick }, this.useCheckbox ? (index.h("div", { class: "sd-select__option__checkbox-wrapper" }, index.h("sd-checkbox", { checked: this.isSelected, disabled: this.option.disabled,
-            //   checkboxStyle={
-            //    !this.isSelected
-            //     ? { borderColor: '#888' }
-            //     : this.isHovered
-            //       ? { borderColor: 'white' }
-            //       : { borderColor: '#0075ff' }
-            //   }
-            onClick: e => {
-                e.preventDefault();
-                this.handleClick(e);
-            } }), index.h("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label))));
-    }
-};
-SdSelectOption.style = sdSelectOptionCss();
-
-const sdSelectOptionGroupCss = () => `sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}`;
-
-const SdSelectOptionGroup = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.optionClick = index.createEvent(this, "optionClick");
-    }
-    get el() { return index.getElement(this); }
-    option;
-    index;
-    isSelected = false;
-    isFocused = false;
-    optionStyle;
-    disabled = false;
-    useCheckbox = false;
-    useIndicator = true;
-    countInfo = {
-        selectedCount: 0,
-        totalCount: 0,
-    };
-    isHovered = false;
-    async isDisabled() {
-        return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';
-    }
-    optionClick;
-    handleClick = (option, isSelected, event) => {
-        event.stopPropagation();
-        if (option.type === 'group' || option.type === 'subgroup') {
-            this.optionClick.emit({
-                option: this.option,
-                isSelected,
-                index: this.index,
-                event,
-            });
-            return;
-        }
-        if (!this.option.disabled && !this.disabled) {
-            this.optionClick.emit({
-                option: this.option,
-                isSelected,
-                index: this.index,
-                event,
-            });
-        }
-    };
-    render() {
-        return (index.h("div", { key: 'ed43a2fa2ae5b182f1c99b272126fb3629617681', class: {
-                'sd-select__option-group': true,
-                'sd-select__option-group--selected': !!this.isSelected,
-                'sd-select__option-group--disabled': !!this.option.disabled,
-                'sd-select__option-group--focused': this.isFocused,
-                'sd-select__option-group--use-checkbox': this.useCheckbox,
-                'sd-select__option-group--group': this.option.type === 'group',
-                'sd-select__option-group--subgroup': this.option.type === 'subgroup',
-                'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: '97de3f6a855bf737cbaa5f23f7986b2c5ee10c52', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '7d8814dc060dd769f100be09d87edcc440cbf93d', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
-                e.preventDefault();
-                this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: '8fd8bf56260bf49f42a0cb205868a45912e5a4de', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'eaa10fa1f13f4f6bc48b22967b1b31a2e894865c', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
-    }
-};
-SdSelectOptionGroup.style = sdSelectOptionGroupCss();
-
-const sdSelectSearchInputCss = () => `.sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select-search-input sd-input{width:100%}.sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
-
-const SdSelectSearchInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sdSearchInput = index.createEvent(this, "sdSearchInput");
-        this.sdSearchFocus = index.createEvent(this, "sdSearchFocus");
-    }
-    isScrolled = false;
-    searchText = '';
-    sdSearchInput;
-    sdSearchFocus;
-    searchRef;
-    async getNativeElement() {
-        if (this.searchRef) {
-            return this.searchRef.getNativeElement();
-        }
-        return null;
-    }
-    async searchInputFocus() {
-        const input = await this.getNativeElement();
-        input?.focus({ preventScroll: true });
-    }
-    render() {
-        return (index.h("div", { key: '6d05eba9ab9a951d126f703ec9366d8b425581b7', class: {
-                'sd-select-search-input': true,
-                'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: 'e00b8cab50be8a096893c4cb4aceff0446cbfde4', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
-                this.sdSearchInput.emit(String(event?.detail));
-            }, onSdFocus: () => {
-                this.sdSearchFocus.emit();
-            }, onKeyDown: event => {
-                if (event.code === 'Enter')
-                    event.stopPropagation();
-            } }, index.h("sd-icon", { key: '951178d9cbe80fc944e708207b57949ecd6ed8fc', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
-    }
-};
-SdSelectSearchInput.style = sdSelectSearchInputCss();
-
-const sdTableBackupCss = () => `.sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;min-height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner{position:absolute;top:0;left:0;width:100%;height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{padding-top:15%;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0 !important}.sd-table__wrapper .sd-table__virtual-spacer td,.sd-table__wrapper .sd-table__virtual-row-spacer td{padding:0 !important;border:none}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background-image:repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));background-size:100% 200%;animation:skeleton-loading 1.5s ease-in-out infinite;position:relative}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #e1e1e1 calc(var(--row-height, 44px) - 1px), #e1e1e1 var(--row-height, 44px));pointer-events:none}.sd-table__wrapper .sd-table__skeleton-cell{width:100%;height:20px;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}`;
-
-const SdTable = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sdSelectChange = index.createEvent(this, "sdSelectChange");
-        this.sdPageChange = index.createEvent(this, "sdPageChange");
-        this.sdRowsPerPageChange = index.createEvent(this, "sdRowsPerPageChange");
-    }
-    get el() { return index.getElement(this); }
-    columns;
-    rows;
-    selected = new Set();
-    rowKey = 'id';
-    selectable = false;
-    resizable = false;
-    width;
-    height;
-    stickyHeader = false;
-    stickyColumn = { left: 0, right: 0 };
-    noDataLabel = '데이터가 없습니다.';
-    isLoading = false;
-    pagination;
-    headerCellRenderer;
-    bodyCellRenderer;
-    useInternalPagination = false;
-    useRowsPerPageSelect = false;
-    rowsPerPageOption = [
-        { label: '10개씩 보기', value: 10 },
-        { label: '25개씩 보기', value: 25 },
-        { label: '50개씩 보기', value: 50 },
-        { label: '100개씩 보기', value: 100 },
-    ];
-    useVirtualScroll = {}; // 가상 스크롤 사용 여부
-    virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 세로 가상 스크롤 사용시 필수값
-    // 가상 스크롤 사용시 각 열의 너비 - 가로 가상 스크롤 사용시 필수값
-    // 가상화하려는 컬럼의 넓이는 무조건 고정(resizable의 경우 넓이가 변동되는데 이때에는 고려 x)
-    virtualColumnWidth = 120;
-    virtualBufferSize = {
-        vertical: 5,
-        horizontal: 5,
-    }; // 가상 스크롤 위아래 버퍼 크기
-    sdSelectChange;
-    sdPageChange;
-    sdRowsPerPageChange;
-    currentPage = this.pagination?.page || 1;
-    innerRows = [];
-    innerSelected = new Set();
-    columnWidths = [];
-    scrolledLeft = false;
-    scrolledRight = false;
-    // 세로 가상 스크롤 상태값
-    virtualStartIndex = 0;
-    virtualEndIndex = 0;
-    scrollTopPosition = 0;
-    // 가로 가상 스크롤 상태값
-    virtualStartColIdx = 0;
-    virtualEndColIdx = 0;
-    scrollLeftPosition = 0;
-    // 가상 스크롤 Raf(Request Animation Frame) 관리
-    scrollRequestAnimationFrame = null;
-    scrollContainer = null;
-    rafScheduled = false;
-    pendingUpdates = {
-        vertical: false,
-        horizontal: false,
-    };
-    // 상태 캐시값
-    cachedVisibleColumns = null;
-    lastColumnsRef = null;
-    cachedVirtualRows = null;
-    cachedVirtualIndexKey = '';
-    cachedColumnOrder = null;
-    lastColumnOrderKey = '';
-    // DOM 측정 캐시값
-    cachedContainerHeight = 0;
-    cachedContainerWidth = 0;
-    // 스타일 캐시
-    stickyStyleCache = new Map();
-    // isAllChecked 캐시
-    cachedIsAllChecked;
-    lastSelectionKey = '';
-    onScroll;
-    handleColumnsChange(newCols) {
-        this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
-        this.cleanUpVirtualCache();
-        this.stickyStyleCache.clear();
-        if (this.useVirtualScroll.horizontal) {
-            this.scheduleUpdate('horizontal');
-        }
-    }
-    handleColumnWidthsChange() {
-        this.stickyStyleCache.clear();
-        if (this.useVirtualScroll.horizontal) {
-            this.scheduleUpdate('horizontal');
-        }
-    }
-    handleRowsChange(newRows) {
-        this.innerRows = [...newRows];
-        this.cleanUpVirtualCache();
-        if (this.useVirtualScroll.vertical) {
-            this.scheduleUpdate('vertical');
-        }
-    }
-    handleSelectedChange(newSelected) {
-        this.innerSelected = new Set(newSelected);
-    }
-    cleanUpVirtualCache() {
-        this.cachedVisibleColumns = null;
-        this.lastColumnsRef = null;
-        this.cachedVirtualRows = null;
-        this.cachedVirtualIndexKey = '';
-        this.cachedColumnOrder = null;
-        this.lastColumnOrderKey = '';
-    }
-    handlePaginationChange(newVal) {
-        if (newVal?.page && newVal.page !== this.currentPage) {
-            this.currentPage = newVal.page;
-            if (this.useVirtualScroll.vertical && this.scrollContainer) {
-                this.scrollContainer.scrollTo({ top: 0, behavior: 'instant' });
-                this.scrollTopPosition = 0;
-                this.calculateVisibleRange();
-            }
-        }
-    }
-    componentWillLoad() {
-        this.innerRows = [...(this.rows || [])];
-        this.innerSelected = new Set(this.selected);
-        this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
-        if (this.pagination?.page) {
-            this.currentPage = this.pagination.page;
-        }
-    }
-    componentDidLoad() {
-        index.readTask(() => {
-            const middle = this.el.querySelector('.sd-table__middle');
-            if (!middle)
-                return;
-            this.onScroll = () => {
-                const scrollLeft = middle.scrollLeft;
-                const scrollWidth = middle.scrollWidth;
-                const clientWidth = middle.clientWidth;
-                const scrollTop = middle.scrollTop;
-                const verticalChanged = this.useVirtualScroll.vertical && this.scrollTopPosition !== scrollTop;
-                const horizontalChanged = this.useVirtualScroll.horizontal && this.scrollLeftPosition !== scrollLeft;
-                const newScrolledLeft = scrollLeft > 0;
-                const newScrolledRight = scrollLeft + clientWidth < scrollWidth;
-                if (this.scrolledLeft !== newScrolledLeft || this.scrolledRight !== newScrolledRight) {
-                    this.scrolledLeft = newScrolledLeft;
-                    this.scrolledRight = newScrolledRight;
-                }
-                if (verticalChanged || horizontalChanged) {
-                    if (this.scrollRequestAnimationFrame !== null) {
-                        cancelAnimationFrame(this.scrollRequestAnimationFrame);
-                    }
-                    this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
-                        if (verticalChanged) {
-                            this.scrollTopPosition = scrollTop;
-                            this.calculateVisibleRange();
-                        }
-                        if (horizontalChanged) {
-                            this.scrollLeftPosition = scrollLeft;
-                            this.calculateVisibleColumnRange();
-                        }
-                        this.scrollRequestAnimationFrame = null;
-                    });
-                }
-            };
-            this.scrollContainer = middle;
-            requestAnimationFrame(() => {
-                if (this.scrollContainer && this.onScroll) {
-                    this.cachedContainerHeight = this.scrollContainer.clientHeight;
-                    this.cachedContainerWidth = this.scrollContainer.clientWidth;
-                    middle.addEventListener('scroll', this.onScroll, { passive: true });
-                    if (this.useVirtualScroll.vertical) {
-                        this.calculateVisibleRange();
-                    }
-                    if (this.useVirtualScroll.horizontal) {
-                        this.calculateVisibleColumnRange();
-                    }
-                    this.onScroll();
-                }
-            });
-        });
-    }
-    changePage(page) {
-        if (!this.useInternalPagination) {
-            this.sdPageChange.emit(page);
-            return;
-        }
         this.currentPage = page;
-        this.sdPageChange.emit(this.currentPage);
-    }
-    changeRowsPerPage(perPage) {
-        const changedRowsPerPage = perPage ? Number(perPage) : 0;
-        if (!this.useInternalPagination) {
-            this.sdRowsPerPageChange.emit(changedRowsPerPage);
-            return;
-        }
-        const newRowsPerPage = Number(perPage || 0);
-        let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));
-        let newCurrentPage = this.currentPage;
-        if (newCurrentPage > newLastPage) {
-            newCurrentPage = newLastPage;
-        }
-        this.pagination = {
-            page: newCurrentPage,
-            rowsPerPage: newRowsPerPage,
-            lastPage: newLastPage,
-        };
-        this.currentPage = newCurrentPage;
-        this.sdRowsPerPageChange.emit(changedRowsPerPage);
-    }
-    disconnectedCallback() {
-        if (this.scrollContainer && this.onScroll) {
-            this.scrollContainer.removeEventListener('scroll', this.onScroll);
-        }
-        if (this.scrollRequestAnimationFrame !== null) {
-            cancelAnimationFrame(this.scrollRequestAnimationFrame);
-        }
-    }
-    // ----- Derived getters -----
-    get visibleColumns() {
-        if (this.cachedVisibleColumns && this.lastColumnsRef === this.columns) {
-            return this.cachedVisibleColumns;
-        }
-        this.lastColumnsRef = this.columns;
-        this.cachedVisibleColumns = this.columns.filter(col => col.visible !== false);
-        return this.cachedVisibleColumns;
-    }
-    get paginatedRows() {
-        if (!this.pagination || !this.useInternalPagination)
-            return this.innerRows;
-        const { rowsPerPage = this.rows.length } = this.pagination || {};
-        return this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
-    }
-    get virtualRows() {
-        const newVirtualIndexKey = `${this.virtualStartIndex}-${this.virtualEndIndex}`;
-        if (this.cachedVirtualRows && this.cachedVirtualIndexKey === newVirtualIndexKey) {
-            return this.cachedVirtualRows;
-        }
-        this.cachedVirtualIndexKey = newVirtualIndexKey;
-        if (!this.useVirtualScroll.vertical) {
-            this.cachedVirtualRows = this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
-        }
-        else {
-            this.cachedVirtualRows = this.paginatedRows
-                .slice(this.virtualStartIndex, this.virtualEndIndex + 1)
-                .map((row, relativeIdx) => ({
-                row,
-                actualIndex: this.virtualStartIndex + relativeIdx,
-            }));
-        }
-        return this.cachedVirtualRows;
-    }
-    get topSpacerHeight() {
-        if (!this.useVirtualScroll.vertical || this.virtualStartIndex === 0)
-            return 0;
-        return this.virtualStartIndex * this.virtualRowHeight;
-    }
-    get bottomSpacerHeight() {
-        if (!this.useVirtualScroll.vertical)
-            return 0;
-        const remainingRows = this.paginatedRows.length - this.virtualEndIndex - 1;
-        return remainingRows > 0 ? remainingRows * this.virtualRowHeight : 0;
-    }
-    getHorizontalSpacerWidth(position) {
-        const stickyLeftCount = this.stickyColumn.left || 0;
-        const stickyRightCount = this.stickyColumn.right || 0;
-        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
-        const remainingCols = virtualColumnWidths.length - this.virtualEndColIdx - 1;
-        if (position === 'right' && remainingCols <= 0)
-            return 0;
-        const targetIndex = position === 'left' ? [0, this.virtualStartColIdx] : [this.virtualEndColIdx + 1];
-        return virtualColumnWidths.slice(...targetIndex).reduce((sum, width) => sum + width, 0);
-    }
-    get leftSpacerWidth() {
-        if (!this.useVirtualScroll.horizontal || this.virtualStartColIdx === 0) {
-            return 0;
-        }
-        return this.getHorizontalSpacerWidth('left');
-    }
-    get rightSpacerWidth() {
-        if (!this.useVirtualScroll.horizontal) {
-            return 0;
-        }
-        return this.getHorizontalSpacerWidth('right');
-    }
-    get totalVirtualHeight() {
-        if (!this.useVirtualScroll.vertical)
-            return 0;
-        return this.paginatedRows.length * this.virtualRowHeight;
-    }
-    get lastPageNumber() {
-        const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};
-        return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));
-    }
-    get sdTableClasses() {
-        return [
-            'sd-table',
-            this.stickyHeader && 'sd-table--sticky-header',
-            this.selectable && 'sd-table--selectable',
-            this.resizable && 'sd-table--resizable',
-            !this.innerRows.length && 'sd-table--no-data',
-            ((this.stickyColumn?.left ?? 0) > 0 || (this.stickyColumn?.right ?? 0) > 0) &&
-                'sd-table--sticky-column',
-            this.scrolledLeft && 'sd-table--scrolled-left',
-            this.scrolledRight && 'sd-table--scrolled-right',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-    // ----- Selection -----
-    isRowSelected(row) {
-        return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
-    }
-    updateRowSelect(row) {
-        const selectedArray = Array.from(this.innerSelected);
-        const exists = this.isRowSelected(row);
-        const newSelected = exists
-            ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
-            : [...selectedArray, row];
-        // 동일 상태면 set하지 않음 → 불필요 렌더 방지
-        if (newSelected.length === selectedArray.length)
-            return;
-        this.innerSelected = new Set(newSelected);
-        this.cachedIsAllChecked = undefined;
-        this.sdSelectChange.emit(Array.from(this.innerSelected));
-    }
-    toggleSelectAll(checked) {
-        if (checked) {
-            const pageRows = new Set([...this.paginatedRows]);
-            this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
-        }
-        else {
-            const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);
-            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
-        }
-        this.cachedIsAllChecked = undefined;
-        this.sdSelectChange.emit(Array.from(this.innerSelected));
-    }
-    get isAllChecked() {
-        const selectionKey = `${this.paginatedRows.length}-${this.innerSelected.size}`;
-        if (this.cachedIsAllChecked !== undefined && this.lastSelectionKey === selectionKey) {
-            return this.cachedIsAllChecked;
-        }
-        const total = this.paginatedRows.length;
-        const selectedCount = this.paginatedRows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey] === row[this.rowKey])).length;
-        let result;
-        if (selectedCount === 0) {
-            result = false; // 아무것도 안 선택됨
-        }
-        else if (selectedCount === total) {
-            result = true; // 전부 선택됨
-        }
-        else {
-            result = null; // 일부만 선택됨
-        }
-        this.cachedIsAllChecked = result;
-        this.lastSelectionKey = selectionKey;
-        return result;
-    }
-    // RAF 통합 관리
-    scheduleUpdate(type) {
-        this.pendingUpdates[type] = true;
-        if (!this.rafScheduled) {
-            this.rafScheduled = true;
-            this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
-                if (this.pendingUpdates.vertical)
-                    this.calculateVisibleRange();
-                if (this.pendingUpdates.horizontal)
-                    this.calculateVisibleColumnRange();
-                this.pendingUpdates = { vertical: false, horizontal: false };
-                this.rafScheduled = false;
-                this.scrollRequestAnimationFrame = null;
-            });
-        }
-    }
-    // 세로 가상 스크롤 렌더링 계산
-    calculateVisibleRange() {
-        if (!this.useVirtualScroll.vertical) {
-            this.virtualStartIndex = 0;
-            this.virtualEndIndex = this.paginatedRows.length - 1;
-            return;
-        }
-        const scrollTop = this.scrollTopPosition;
-        let containerHeight = this.cachedContainerHeight;
-        if (containerHeight === 0 && this.scrollContainer) {
-            containerHeight = this.scrollContainer.clientHeight;
-            this.cachedContainerHeight = containerHeight;
-        }
-        const bufferSize = this.virtualBufferSize.vertical || 5;
-        const startIndex = Math.floor(scrollTop / this.virtualRowHeight);
-        const visibleCount = Math.ceil(containerHeight / this.virtualRowHeight);
-        const endIndex = startIndex + visibleCount - 1;
-        const newStartIndex = Math.max(0, startIndex - bufferSize);
-        const newEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + bufferSize);
-        // 실제로 변경된 경우에만 상태 업데이트
-        if (this.virtualStartIndex !== newStartIndex || this.virtualEndIndex !== newEndIndex) {
-            this.virtualStartIndex = newStartIndex;
-            this.virtualEndIndex = newEndIndex;
-        }
-    }
-    // 가로 가상 스크롤 렌더링 계산
-    calculateVisibleColumnRange() {
-        if (!this.useVirtualScroll.horizontal) {
-            this.virtualStartColIdx = 0;
-            this.virtualEndColIdx = this.visibleColumns.length - 1;
-            return;
-        }
-        const scrollLeft = this.scrollLeftPosition;
-        // 캐시된 값 사용, 없으면 측정 후 캐시
-        let containerWidth = this.cachedContainerWidth;
-        if (containerWidth === 0 && this.scrollContainer) {
-            containerWidth = this.scrollContainer.clientWidth;
-            this.cachedContainerWidth = containerWidth;
-        }
-        const stickyLeftCount = this.stickyColumn.left || 0;
-        const stickyRightCount = this.stickyColumn.right || 0;
-        // 가상 스크롤 컬럼 - sticky column 제외
-        const virtualColumns = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
-        if (virtualColumns.length === 0) {
-            this.virtualStartColIdx = 0;
-            this.virtualEndColIdx = 0;
-            return;
-        }
-        const stickyLeftWidth = this.columnWidths.slice(0, stickyLeftCount).reduce((sum, width) => sum + width, 0) +
-            (this.selectable ? 52 : 0);
-        const stickyRightWidth = this.columnWidths
-            .slice(this.visibleColumns.length - stickyRightCount)
-            .reduce((sum, width) => sum + width, 0);
-        // 가상 스크롤 영역의 너비 계산
-        const virtualScrollableWidth = containerWidth - stickyLeftWidth - stickyRightWidth;
-        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
-        const virtualScrollLeft = Math.max(0, scrollLeft - stickyLeftWidth);
-        const reducedVirtualWidth = virtualColumnWidths.reduce((acc, width, idx) => {
-            acc.push((acc[idx - 1] || 0) + width);
-            return acc;
-        }, []);
-        let startIdx = 0; // 가상 스크롤 시작 인덱스
-        let endIdx = virtualColumns.length - 1; // 가상 스크롤 종료 인덱스
-        // sticky left 영역 제외한 스크롤 위치
-        for (let i = 0; i < reducedVirtualWidth.length; i++) {
-            if (reducedVirtualWidth[i] > virtualScrollLeft) {
-                startIdx = Math.max(0, i);
-                break;
-            }
-        }
-        const scrollRight = virtualScrollLeft + virtualScrollableWidth;
-        for (let i = startIdx; i < reducedVirtualWidth.length; i++) {
-            if (reducedVirtualWidth[i] >= scrollRight) {
-                endIdx = Math.min(virtualColumns.length - 1, i);
-                break;
-            }
-        }
-        const bufferSize = this.virtualBufferSize.horizontal || 5;
-        const newStartColIdx = Math.max(0, startIdx - bufferSize);
-        const newEndColIdx = Math.min(virtualColumns.length - 1, endIdx + bufferSize);
-        // 실제로 변경된 경우에만 상태 업데이트
-        if (this.virtualStartColIdx !== newStartColIdx || this.virtualEndColIdx !== newEndColIdx) {
-            this.virtualStartColIdx = newStartColIdx;
-            this.virtualEndColIdx = newEndColIdx;
-        }
-    }
-    // ----- Helpers -----
-    getStickyStyle(colIdx) {
-        // 캐시된 스타일이 있으면 반환
-        if (this.stickyStyleCache.has(colIdx)) {
-            return this.stickyStyleCache.get(colIdx);
-        }
-        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);
-        const rightOffset = this.columnWidths
-            .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)
-            .reduce((a, b) => a + b, 0);
-        const style = {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
-        };
-        // 스타일 캐시에 저장
-        this.stickyStyleCache.set(colIdx, style);
-        return style;
-    }
-    handleResize(index, event) {
-        // SSR 환경 체크
-        if (typeof document === 'undefined')
-            return;
-        const startX = event.clientX;
-        const startWidth = this.columnWidths[index];
-        const handleMouseMove = (moveEvent) => {
-            const targetColumn = this.columnWidths[index];
-            if (!targetColumn)
-                return;
-            const minWidth = this.columns[index]?.minWidth || 50;
-            const maxWidth = this.columns[index]?.maxWidth || 9999;
-            const newWidth = Math.min(Math.max(startWidth + moveEvent.clientX - startX, minWidth), maxWidth);
-            this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
-        };
-        const handleMouseUp = () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-    }
-    getCellValue(column, row) {
-        const { field, format, name } = column;
-        const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
-        return format ? format(value, row) : value;
-    }
-    getColumnRenderedInOrder() {
-        const orderKey = `${this.visibleColumns.length}-${this.virtualStartColIdx}-${this.virtualEndColIdx}`;
-        if (this.cachedColumnOrder && this.lastColumnOrderKey === orderKey) {
-            return this.cachedColumnOrder;
-        }
-        const stickyLeftCount = this.stickyColumn.left || 0;
-        const stickyRightCount = this.stickyColumn.right || 0;
-        // Sticky left 컬럼들
-        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
-        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        const middleCols = this.useVirtualScroll.horizontal
-            ? this.visibleColumns
-                .slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount)
-                .slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
-            : this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
-        this.cachedColumnOrder = {
-            stickyLeftCount,
-            stickyRightCount,
-            stickyLeftCols,
-            middleCols,
-            stickyRightCols,
-        };
-        this.lastColumnOrderKey = orderKey;
-        return this.cachedColumnOrder;
-    }
-    // ----- Render -----
-    renderHead() {
-        const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
-        return (index.h("thead", null, index.h("tr", null, this.selectable && (index.h("th", { class: {
-                'sd-th': true,
-                'sd-th--selected': true,
-                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
-            }, style: {
-                '--sticky-left-offset': '0px',
-            } }, index.h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => {
-            const rendered = this.headerCellRenderer?.(col);
-            return (index.h("th", { key: col.name, class: {
-                    'sd-th': true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                    'sticky-left': true,
-                    'sticky-left-edge': idx === stickyLeftCount - 1,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, index.h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, index.h("slot", { name: `header-cell-${col.name}` }, index.h("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && index.h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (index.h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))));
-        }), this.renderSpacerTd('left', -1), middleCols.map((col, relativeIdx) => {
-            const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
-            const rendered = this.headerCellRenderer?.(col);
-            return (index.h("th", { key: col.name, class: {
-                    'sd-th': true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, index.h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, index.h("slot", { name: `header-cell-${col.name}` }, index.h("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && index.h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (index.h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
-        }), this.renderSpacerTd('right', -1), stickyRightCols.map((col, relativeIdx) => {
-            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
-            const rendered = this.headerCellRenderer?.(col);
-            return (index.h("th", { key: col.name, class: {
-                    'sd-th': true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                    'sticky-right': true,
-                    'sticky-right-edge': relativeIdx === 0,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, index.h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, index.h("slot", { name: `header-cell-${col.name}` }, index.h("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && index.h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (index.h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
-        }))));
-    }
-    renderBody() {
-        return (index.h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }), class: `sd-table-tbody ${this.useVirtualScroll.vertical ? 'sd-table-tbody--virtual-scroll' : ''}`, style: { '--total-virtual-height': `${this.totalVirtualHeight}px` } }, this.useVirtualScroll.vertical && this.topSpacerHeight > 0 && this.renderSpacerRow('top'), this.paginatedRows.length > 0 &&
-            this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll.vertical &&
-            this.bottomSpacerHeight > 0 &&
-            this.renderSpacerRow('bottom')));
-    }
-    renderRow(row, rowIdx) {
-        const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
-        return (index.h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6", style: this.useVirtualScroll.vertical
-                ? {
-                    height: `${this.virtualRowHeight}px`,
-                }
-                : {} }, this.selectable && (index.h("td", { class: {
-                'sd-td': true,
-                'sd-td--selected': true,
-                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
-            }, style: {
-                '--sticky-left-offset': '0px',
-            } }, index.h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), stickyLeftCols.map((column, idx) => {
-            const rendered = this.bodyCellRenderer?.(column, row);
-            return (index.h("td", { key: column.name, part: `td-${column.name}`, class: {
-                    'sd-td': true,
-                    [`sd-td--${column.align || 'left'}`]: true,
-                    'sticky-left': true,
-                    'sticky-left-edge': idx === stickyLeftCount - 1,
-                    [`${column.tdClass}`]: Boolean(column.tdClass),
-                }, style: this.getStickyStyle(idx) }, index.h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
-        }), this.renderSpacerTd('left', rowIdx), middleCols.map((column, relativeIdx) => {
-            const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
-            const rendered = this.bodyCellRenderer?.(column, row);
-            return (index.h("td", { key: column.name, part: `td-${column.name}`, class: {
-                    'sd-td': true,
-                    [`sd-td--${column.align || 'left'}`]: true,
-                    [`${column.tdClass}`]: Boolean(column.tdClass),
-                }, style: this.getStickyStyle(actualColIdx) }, index.h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
-        }), this.renderSpacerTd('right', rowIdx), stickyRightCols.map((column, relativeIdx) => {
-            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
-            const rendered = this.bodyCellRenderer?.(column, row);
-            return (index.h("td", { key: column.name, part: `td-${column.name}`, class: {
-                    'sd-td': true,
-                    [`sd-td--${column.align || 'left'}`]: true,
-                    'sticky-right': true,
-                    'sticky-right-edge': relativeIdx === 0,
-                    [`${column.tdClass}`]: Boolean(column.tdClass),
-                }, style: this.getStickyStyle(actualColIdx) }, index.h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
-        })));
-    }
-    renderSpacerRow(position) {
-        const spacerHeight = position === 'top' ? this.topSpacerHeight : this.bottomSpacerHeight;
-        return (index.h("tr", { key: `virtual-${position}-spacer`, class: "sd-table__virtual-row-spacer", style: {
-                height: `${spacerHeight}px`,
-            }, "aria-hidden": "true" }, index.h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, index.h("div", { class: "sd-table__skeleton", style: {
-                '--row-height': `${this.virtualRowHeight}px`,
-            } }))));
-    }
-    renderSpacerTd(position, rowIdx) {
-        const spacerWidth = position === 'left' ? this.leftSpacerWidth : this.rightSpacerWidth;
-        const showSpacer = position === 'left'
-            ? this.useVirtualScroll.horizontal && this.leftSpacerWidth > 0
-            : this.useVirtualScroll.horizontal && this.rightSpacerWidth > 0;
-        if (!showSpacer)
-            return null;
-        return (index.h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: {
-                width: `${spacerWidth}px`,
-                minWidth: `${spacerWidth}px`,
-                maxWidth: `${spacerWidth}px`,
-                padding: '0',
-                border: 'none',
-            }, "aria-hidden": "true" }, index.h("div", { class: "sd-table__skeleton-cell" })));
-    }
-    render() {
-        return (index.h(index.Host, { key: 'efc61eba99d3b97fe5b102374b94f1f1eaadd7eb' }, index.h("div", { key: '71e7c6d7b7bd4fdd53e1c95a821600e11735ec76', class: "sd-table__wrapper", style: {
-                '--table-width': this.width,
-                '--table-height': this.height,
-            } }, index.h("div", { key: 'e77acaaefdd2948540fcadec624944b66140556e', class: "sd-table__container", style: {
-                '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, index.h("div", { key: 'd4c6a8fadd18abc1f6020ae9f5e7cf60afc79d7f', class: {
-                'sd-table__middle': true,
-                'sd-table__middle--scrollable': this.paginatedRows.length > 0,
-                'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (index.h("div", { key: 'ed768c01fe4a3f6fb85c25061ff6f7789571d149', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: 'a563c071edee17150d728f233d2700224e96c09b' }))), index.h("table", { key: 'fbdab865f8fd3c83fb6e778324fb56239c1790f3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), index.h("div", { key: '04e385b3ace1983ce0bb2b29db44ee1d1d8e147d', class: "sd-table__bottom" }, !this.paginatedRows.length && (index.h("div", { key: 'b1a964204f68fc2058a6ff8c833e65567442f9ee', class: "sd-table__no-data" }, index.h("slot", { key: '8d078f856e54f4be105b1c60c137b28f51a21bb4', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '718ff6d9be7f909e20673ab2af7a0d357fe8a6a2', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '23a117bc9f93fb68162c9c18ff309a110a0992a2', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: 'd233637ddd86f1abc63701443601bddc1439957d', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
-    }
-    static get watchers() { return {
-        "columns": ["handleColumnsChange"],
-        "columnWidths": ["handleColumnWidthsChange"],
-        "rows": ["handleRowsChange"],
-        "selected": ["handleSelectedChange"],
-        "pagination": ["handlePaginationChange"]
-    }; }
-};
-SdTable.style = sdTableBackupCss();
-
-const sdTabsCss = () => `sd-tabs{display:inline-block}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:4px;border-bottom:1px solid #0075ff}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid #cccccc;border-bottom:none;border-radius:4px 4px 0 0;background-color:#f6f6f6;color:#888888;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::after{content:attr(data-label);position:absolute;font-weight:400;transition:font-weight 0.2s ease}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.3s}sd-tabs .sd-tabs__tab--selected{border-color:#0075ff;color:#0075ff;background-color:white}sd-tabs .sd-tabs__tab--selected::after{font-weight:700}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:#0075ff;opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:#888888;opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:700;visibility:hidden}sd-tabs .sd-tabs--md .sd-tabs__tab{padding:12px 32px;font-size:12px;line-height:20px}sd-tabs .sd-tabs--sm .sd-tabs__tab{padding:8px 20px;font-size:12px;line-height:16px}sd-tabs .sd-tabs--sub{gap:32px;border-bottom:none}sd-tabs .sd-tabs--sub .sd-tabs__tab{border:none;border-radius:0;background-color:transparent;color:#222222;font-weight:400;padding:0 0 2px 0;position:relative}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;width:100%;background-color:#0075ff;opacity:0;transition:opacity 0.2s ease}sd-tabs .sd-tabs--sub .sd-tabs__tab::after{font-weight:400}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075ff;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::after{font-weight:700}`;
-
-const SdTabs = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sdChange = index.createEvent(this, "sdChange");
-    }
-    value;
-    tabs = [];
-    size = 'md';
-    isSub = false;
-    selectedValue;
-    sdChange;
-    componentWillLoad() {
-        if (this.value !== undefined && this.value !== null) {
-            this.selectedValue = this.value;
-        }
-    }
-    valueChanged(newValue) {
-        this.selectedValue = newValue;
-    }
-    handleTabClick = (tabValue) => {
-        this.selectedValue = tabValue;
-        this.value = tabValue;
-        this.sdChange.emit(tabValue);
-    };
-    isTabSelected(tab) {
-        return this.selectedValue === tab.value;
-    }
-    getTabClasses(tab) {
-        const classes = [
-            'sd-tabs__tab',
-            this.isTabSelected(tab) ? 'sd-tabs__tab--selected' : 'sd-tabs__tab--unselected',
-        ];
-        return classes.join(' ');
-    }
-    getContainerClasses() {
-        const classes = ['sd-tabs', `sd-tabs--${this.size}`];
-        if (this.isSub) {
-            classes.push('sd-tabs--sub');
-        }
-        return classes.join(' ');
-    }
-    getBadgeColors(tab) {
-        if (this.isTabSelected(tab)) {
-            return { bgColor: '#E6F1FF', textColor: '#0075FF' };
-        }
-        return { bgColor: '#E5E5E5', textColor: '#737373' };
-    }
-    render() {
-        return (index.h("div", { key: 'c495facf1cbf50eaa08d663d16a6a67a0f6369e9', class: this.getContainerClasses(), role: "tablist" }, this.tabs.map((tab, index$1) => {
-            const isSelected = this.isTabSelected(tab);
-            const badgeColors = this.getBadgeColors(tab);
-            return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), role: "tab", "aria-selected": isSelected.toString(), "aria-label": tab.label || 'tab', "data-label": tab.label, onClick: () => this.handleTabClick(tab.value) }, index.h("span", { class: "sd-tabs__label" }, tab.label), tab.badge && (index.h("sd-tag", { size: this.size, label: tab.badge.toString(), bgColor: badgeColors.bgColor, textColor: badgeColors.textColor, rounded: true }))));
-        })));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
-};
-SdTabs.style = sdTabsCss();
-
-const sdTagCss = () => `:host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}`;
-
-const TAG_COLORS = {
-    grey: 'bg-grey_20 text-grey_70',
-    red: 'bg-red_15 text-red_70',
-    orange: 'bg-orange_10 text-orange_65',
-    yellow: 'bg-yellow_10 text-yellow_70',
-    green: 'bg-green_15 text-green_75',
-    blue: 'bg-brilliantblue_20 text-brilliantblue_75',
-    darkblue: 'bg-oceanblue_15 text-oceanblue_70',
-    indigo: 'bg-brilliantblue_10 text-brilliantblue_85',
-};
-const SdTag = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    size = 'md';
-    color = 'grey';
-    rounded = false;
-    label = '';
-    bgColor;
-    textColor;
-    getTagClasses() {
-        const classes = ['sd-tag', `sd-tag--${this.size}`];
-        if (this.rounded) {
-            classes.push('sd-tag--rounded');
-        }
-        if (this.color && !this.bgColor && !this.textColor) {
-            classes.push(TAG_COLORS[this.color]);
-        }
-        if (this.bgColor || this.textColor) {
-            classes.push('sd-tag--custom-color');
-        }
-        return classes.join(' ');
+        this.pageChange.emit(page);
     }
-    renderContent() {
-        return [
-            index.h("span", { class: "sd-tag__content" }, index.h("slot", null, this.label)),
-        ];
+    handleGroupChange(direction) {
+        const delta = direction === 'forward' ? PER_PAGE : -10;
+        const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
+        this.handlePageChange(newPage);
     }
-    render() {
-        const tagClasses = this.getTagClasses();
-        return (index.h("span", { key: '44457ea67e6c6bc78f134df71beb8d16cc069f41', class: tagClasses, style: {
-                '--tag-bg-color': this.bgColor,
-                '--tag-text-color': this.textColor,
-            }, "aria-label": this.label || 'tag' }, this.renderContent()));
+    get isFirstGroup() {
+        return this.currentPage <= PER_PAGE;
     }
-};
-SdTag.style = sdTagCss();
-
-const sdToastMessageCss = () => `.sd-toast-message.sc-sd-toast-message{display:flex;width:fit-content;align-items:center;gap:16px;padding:12px 24px;border-radius:4px;background-color:var(--sd-toast-bg);color:var(--sd-toast-text);transition:opacity 0.2s ease, visibility 0.2s ease;box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-toast-message--hidden.sc-sd-toast-message{opacity:0;visibility:hidden;pointer-events:none}.sd-toast-message__icon.sc-sd-toast-message{display:flex;align-items:center;flex-shrink:0}.sd-toast-message__content.sc-sd-toast-message{display:flex;flex:1}.sd-toast-message__message.sc-sd-toast-message{font-size:14px;line-height:20px;font-weight:400}.sd-toast-message__link.sc-sd-toast-message{font-size:14px;line-height:20px;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}.sd-toast-message__link.sc-sd-toast-message:hover{opacity:0.8}.sd-toast-message__button.sc-sd-toast-message{flex-shrink:0}.sd-toast-message__button.sc-sd-toast-message button.sc-sd-toast-message{color:var(--button-text-color, inherit) !important}.sd-toast-message__close.sc-sd-toast-message{display:flex;align-items:center;justify-content:center;padding:4px;background-color:transparent;border:none;cursor:pointer;transition:opacity 0.2s ease;flex-shrink:0}.sd-toast-message__close.sc-sd-toast-message:hover{opacity:0.7}.sd-toast-message__close.sc-sd-toast-message:active{opacity:0.5}`;
-
-const SdToastMessage = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sdClose = index.createEvent(this, "sdClose");
-        this.sdButtonClick = index.createEvent(this, "sdButtonClick");
+    get isLastGroup() {
+        const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
+        return startPageGroup + PER_PAGE - 1 >= this.lastPage;
     }
-    icon;
-    message;
-    link;
-    linkLabel;
-    buttonLabel;
-    close = false;
-    type = 'basicDark';
-    sdClose;
-    sdButtonClick;
-    isVisible = true;
-    static COLOR_OF_TYPE = {
-        basicLight: { background: 'white', text: 'grey_95' },
-        basicDark: { background: 'steelblue_90', text: 'white' },
-        error: { background: 'red_70', text: 'white' },
-        caution: { background: 'yellow_40', text: 'grey_90' },
-        complete: { background: 'green_75', text: 'white' },
-        progress: { background: 'brilliantblue_80', text: 'white' },
-    };
-    handleClose = () => {
-        this.isVisible = false;
-        this.sdClose.emit();
-    };
-    handleButtonClick = () => {
-        this.sdButtonClick.emit();
-    };
-    getContainerClasses() {
-        const classes = ['sd-toast-message', `sd-toast-message--${this.type}`];
-        if (!this.isVisible) {
-            classes.push('sd-toast-message--hidden');
+    renderPrevButtons() {
+        if (this.simple) {
+            if (this.currentPage <= 1)
+                return null;
+            return (index.h(index.Fragment, null, index.h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, index.h("sd-icon", { name: "arrowLeftEnd", size: "12", color: "#222222" })), index.h("button", { "aria-label": "Go to previous page", onClick: () => this.handlePageChange(this.currentPage - 1) }, index.h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
+        }
+        if (!this.isFirstGroup) {
+            return (index.h(index.Fragment, null, index.h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, index.h("sd-icon", { name: "arrowLeftEnd", size: "12", color: "#222222" })), index.h("button", { "aria-label": "Go to previous page group", onClick: () => this.handleGroupChange('backward') }, index.h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
+        }
+    }
+    renderNextButtons() {
+        if (this.simple) {
+            if (this.currentPage >= this.lastPage)
+                return null;
+            return (index.h(index.Fragment, null, index.h("button", { "aria-label": "Go to next page", onClick: () => this.handlePageChange(this.currentPage + 1) }, index.h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), index.h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, index.h("sd-icon", { name: "arrowRightEnd", size: "12", color: "#222222" }))));
+        }
+        if (!this.isLastGroup) {
+            return (index.h(index.Fragment, null, index.h("button", { "aria-label": "Go to next page group", onClick: () => this.handleGroupChange('forward') }, index.h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), index.h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, index.h("sd-icon", { name: "arrowRightEnd", size: "12", color: "#222222" }))));
         }
-        return classes.join(' ');
     }
     render() {
-        const colorTokens = SdToastMessage.COLOR_OF_TYPE[this.type];
-        const colors = {
-            background: resolveColor.resolveColor(colorTokens.background),
-            text: resolveColor.resolveColor(colorTokens.text),
-        };
-        return (index.h(index.Host, { key: '08b9ea203d36fbb3c6da642f3fc4355209867042', style: {
-                '--sd-toast-bg': colors.background,
-                '--sd-toast-text': colors.text,
-            } }, index.h("div", { key: '9b93919198c900453ff04a7dd71985f829967803', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '6d1775a1d5c9e4b55fdac888f9dea6e806a76b14', class: "sd-toast-message__icon" }, index.h("sd-icon", { key: 'd122832fa3b011792eb81f31296177d2dd99d571', name: this.icon, size: 16, color: colors.text }))), index.h("div", { key: '63e5f2f2bc800d24559fb5fb8a2e92e575f2b119', class: "sd-toast-message__content" }, index.h("span", { key: '2422d351d2019333f5085e8c0fdcb3cbf58b5b67', class: "sd-toast-message__message" }, this.message)), this.link && (index.h("a", { key: '766716d0ddf7da45d78b4e84a55f12c66e95a8f3', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '8b1e262e5da42e324cb392fc950c02c82005987c', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor.resolveColor('grey_95') } : {} })), this.close && (index.h("button", { key: '42d20adef4a675644958116f8bbb987f131e194c', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '5141cf3044ba13b541091bb79b3040e1eabc0b17', name: "close", size: 12, color: colors.text }))))));
+        return (index.h("div", { key: 'de62debd728759c709660924b2d9a5691f1e60ea', class: this.paginationClasses }, index.h("div", { key: '9da6071df92e8910fe19a9e20cdc38e2ef1e4fe7', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+                'pagination-btn': true,
+                'pagination-btn--selected': this.currentPage === n,
+            }, disabled: this.currentPage === n, style: {
+                '--pagination-btn-width': `${this.buttonWidth}px`,
+            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '7951a5ea2aabf30619d21073cd728dffaf14b7bd', class: "append-btns" }, this.renderNextButtons())));
     }
 };
-SdToastMessage.style = sdToastMessageCss();
+SdPagination.style = sdPaginationCss();
 
-const sdToggleCss = () => `sd-toggle{display:inline-block;height:20px;line-height:0}sd-toggle .sd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px}sd-toggle .sd-toggle>input{display:none}sd-toggle .sd-toggle__label{font-size:12px;color:#333333;line-height:20px}sd-toggle .sd-toggle__track{width:36px;height:20px;border-radius:12px;background:#cccccc;position:relative;transition:background-color 0.2s ease}sd-toggle .sd-toggle__thumb{width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:transform 0.2s ease}sd-toggle .sd-toggle--checked .sd-toggle__track{background:#0075ff}sd-toggle .sd-toggle--checked .sd-toggle__thumb{transform:translateX(16px)}sd-toggle .sd-toggle--disabled{cursor:not-allowed}sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track{background:#bbdaff}sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track{background:#eeeeee}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track{background:#005cc9}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track{background:#bbbbbb}`;
+const sdTextareaCss = () => `.sd-textarea{display:flex;flex-direction:column;color:#333333;font-size:12px;line-height:20px;width:var(--textarea-width, 100%)}.sd-textarea .sd-textarea__content{width:100%;display:flex;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-textarea .sd-textarea__content .sd-textarea__native{width:100%;min-height:100px;border:none;outline:none;background:transparent;padding:4px 8px;font-family:inherit;font-size:12px;line-height:20px;color:#333333;resize:vertical}.sd-textarea .sd-textarea__content .sd-textarea__native::placeholder{color:#aaaaaa}.sd-textarea--hovered .sd-textarea__content,.sd-textarea--focused .sd-textarea__content{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-textarea--disabled{cursor:not-allowed !important;box-shadow:none !important}.sd-textarea--disabled .sd-textarea__content{background:#eeeeee !important;border:1px solid #cccccc !important;color:#888888 !important}.sd-textarea--disabled .sd-textarea__content .sd-textarea__native{cursor:not-allowed !important;color:#888888 !important}.sd-textarea .sd-textarea__footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;line-height:20px}.sd-textarea .sd-textarea__help-text{font-size:12px;line-height:20px;font-weight:400;color:#222222}.sd-textarea .sd-textarea__counter{color:#cccccc;margin-left:auto}`;
 
-const SdToggle = class {
+const SdTextarea = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sdChange = index.createEvent(this, "sdChange");
+        this.input = index.createEvent(this, "sdUpdate");
+        this.focus = index.createEvent(this, "sdFocus");
+        this.blur = index.createEvent(this, "sdBlur");
     }
-    value = false;
-    label = '';
+    get host() { return index.getElement(this); }
+    value = null;
+    name;
     disabled = false;
-    isChecked = false;
-    sdChange;
-    componentWillLoad() {
-        this.updateCheckedState(this.value);
-    }
-    componentWillRender() {
-        this.updateCheckedState(this.value);
-    }
-    updateCheckedState(value) {
-        this.isChecked = value;
+    width;
+    autoFocus = false;
+    textareaClass = '';
+    helpText;
+    maxLength;
+    placeholder = '입력해 주세요.';
+    internalValue = null;
+    focused = false;
+    hovered = false;
+    nativeEl = undefined;
+    input;
+    focus;
+    blur;
+    valueChanged(newValue) {
+        this.internalValue = newValue;
     }
-    get toggleClasses() {
-        const classes = ['sd-toggle', this.isChecked ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];
-        if (this.disabled) {
-            classes.push('sd-toggle--disabled');
+    internalValueChanged(newValue) {
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.input?.emit(this.value);
         }
-        return classes.join(' ');
     }
-    handleChange = () => {
-        if (this.disabled)
-            return;
-        const newValue = !this.value;
-        this.value = newValue;
-        this.sdChange.emit(newValue);
-    };
-    render() {
-        return (index.h("label", { key: 'ba2398d6eb054c00c526ab1ada37b09e4d6602a3', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'b7da299e1dacd7d41bc1cd72d5bc135d5ecd52fd', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: 'b6ddc87485036dee698eb099d7343edd4163d7b0', class: "sd-toggle__label" }, this.label), index.h("div", { key: '2439852af329488d50907ee132a6fd819129a6a0', class: "sd-toggle__track" }, index.h("div", { key: '72114f2bec9e0372b05d90df8099dc9aad812e3d', class: "sd-toggle__thumb" }))));
+    async sdFocus() {
+        this.nativeEl?.focus();
     }
-};
-SdToggle.style = sdToggleCss();
-
-const sdToggleButtonCss = () => `sd-toggle-button{display:inline-block;line-height:0}.sd-toggle-button{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:4px 12px;gap:6px;border-radius:14px;border:1px solid #888888;background-color:#ffffff;color:#737373;font-size:12px;line-height:20px;font-weight:400;cursor:pointer;transition:border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;white-space:nowrap;user-select:none;box-sizing:border-box}.sd-toggle-button--active{border-color:#0075ff;color:#0075ff}.sd-toggle-button--disabled{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed}.sd-toggle-button--disabled.sd-toggle-button--active{background-color:#eeeeee;border-color:#cccccc;color:#888888}.sd-toggle-button:hover:not(.sd-toggle-button--disabled):not(.sd-toggle-button--active){border-color:#737373}.sd-toggle-button:hover:not(.sd-toggle-button--disabled).sd-toggle-button--active{border-color:#005cc9;color:#005cc9}`;
-
-const SdToggleButton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sdChange = index.createEvent(this, "sdChange");
+    async getNativeElement() {
+        return this.nativeEl || null;
     }
-    value = false;
-    label = '';
-    disabled = false;
-    isActive = false;
-    sdChange;
     componentWillLoad() {
-        this.updateActiveState(this.value);
+        if (this.value !== null && this.value !== undefined) {
+            this.internalValue = this.value;
+        }
     }
-    componentWillRender() {
-        this.updateActiveState(this.value);
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.nativeEl?.focus();
+        }
     }
-    updateActiveState(value) {
-        this.isActive = value;
+    handleInput(event) {
+        const target = event.target;
+        this.internalValue = target.value;
     }
-    get buttonClasses() {
-        const classes = ['sd-toggle-button'];
-        if (this.isActive) {
-            classes.push('sd-toggle-button--active');
+    handleFocus(type, event) {
+        this.focused = type === 'focus';
+        if (type === 'blur') {
+            this.blur?.emit(event);
         }
-        if (this.disabled) {
-            classes.push('sd-toggle-button--disabled');
+        else {
+            this.focus?.emit(event);
         }
-        return classes.join(' ');
     }
-    handleChange = () => {
+    getTextareaStatus() {
         if (this.disabled)
-            return;
-        const newValue = !this.value;
-        this.value = newValue;
-        this.sdChange.emit(newValue);
-    };
+            return 'sd-textarea--disabled';
+        if (this.hovered)
+            return 'sd-textarea--hovered';
+        if (this.focused)
+            return 'sd-textarea--focused';
+        return '';
+    }
+    getMaxLengthCounter() {
+        if (this.maxLength === undefined) {
+            return null;
+        }
+        const currentLength = (this.internalValue || '').length;
+        return `${currentLength}/${this.maxLength}`;
+    }
+    hasFooter() {
+        return this.helpText !== undefined || this.maxLength !== undefined;
+    }
     render() {
-        return (index.h("label", { key: '54d45d11b3944c61147d5bd0fa68078aa28737f1', class: this.buttonClasses, role: "button", "aria-pressed": this.isActive.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: 'cafb7edbcaead5e487b756a006cfee9b9d890558', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        const textareaWidth = this.width
+            ? {
+                '--textarea-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
+            }
+            : {};
+        const maxLengthCounter = this.getMaxLengthCounter();
+        return (index.h(index.Host, { key: 'db95720b6b96d950d6435b1881f95d58c6bc4637', style: textareaWidth, class: {
+                'sd-textarea': true,
+                [this.getTextareaStatus()]: true,
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: '3dae36a9b56837fa7d770f295359d8ed9aa2a3e4', class: "sd-textarea__content" }, index.h("textarea", { key: 'b9e4ff3cffc1b06e4ef6e5ffee240579c80c6d94', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (index.h("div", { key: 'b0de9e449897f2a8d1e6a7204d2383551d3ae2e4', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: 'b4528beb70095d70a030a70f451c59e511865fcb', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("span", { key: 'ce2d33888c7bd85ea240ce00851aec7ecd945adc', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "internalValue": ["internalValueChanged"]
+    }; }
 };
-SdToggleButton.style = sdToggleButtonCss();
+SdTextarea.style = sdTextareaCss();
 
-const sdTooltipCss = () => `sd-tooltip [slot=content]{display:none}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__content p{margin:0}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}`;
+const sdTooltipCss = () => `sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}`;
 
 const SdTooltip = class {
     constructor(hostRef) {
@@ -4792,25 +2430,16 @@ const SdTooltip = class {
     noHover = true;
     useClose = false;
     showTooltip = false;
-    slotContent = null;
-    static COLOR_OF_TYPE = {
-        default: { background: 'oceanblue_85', text: 'white' },
-        caution: { background: 'red_20', text: 'red_70' },
-        notice: { background: 'orange_10', text: 'orange_65' },
-        accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },
-    };
+    slotContentHTML = '';
     buttonEl;
     handleClose = () => {
         this.showTooltip = false;
     };
-    // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에
-    // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)
-    // 따라서 slot내용을 받은 후에 복제하여 state에 저장
     componentWillLoad() {
-        const contentEl = this.el.querySelector('[slot="content"]');
-        if (contentEl) {
-            this.slotContent = contentEl.cloneNode(true);
-        }
+        this.slotContentHTML = this.el.innerHTML;
+        this.el.replaceChildren();
+        // 깜빡이는 현상을 막기 위해 기본으로 <sd-tooltip></sd-tooltip> hidden이 된 elment를 visible로 만들어줌
+        this.el.classList.toggle('visible', true);
     }
     render() {
         const handleTrigger = this.trigger === 'hover'
@@ -4821,199 +2450,20 @@ const SdTooltip = class {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (index.h(index.Fragment, { key: '1016ad941100e902068b5a7d7773a2dbf7ab0667' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-tooltip-portal", { key: '8370b55d3bafa7a5ca429ee17c7555cfdb9e51a2', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: '94a8d13f88050792b3e307901c2545995d92fdaf', class: {
-                'sd-tooltip-menu': true,
-                [`sd-tooltip-menu--${this.type}`]: true,
-                [`sd-tooltip-menu--${this.placement}`]: true,
-                'sd-tooltip-menu--with-close': this.useClose,
-                [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-                [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, index.h("i", { key: 'b13f215dc7f51af86e7748a0ac565f62cbd936ef', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'a043ccc525e18baed8c9b4d5cdd7651c4600b4e4', class: {
-                [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), index.h("div", { key: '60e67cc4620b07153a8cef098446e0a292f08230', class: "sd-tooltip-menu__content", ref: el => {
-                if (el && this.slotContent && !el.hasChildNodes()) {
-                    el.appendChild(this.slotContent.cloneNode(true));
-                }
-            } }, !this.slotContent && index.h("span", { key: 'e2e2afd2e2607be01d474c9329cd15b280214cd0' }, this.el.textContent)), this.useClose && (index.h("div", { key: '25962f34a91f8838e32c25529cacf048b2bbcf6b', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: '5e37a4c9bace03a0c2a26edb0125ac0f25c65784', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, index.h("sd-icon", { key: 'ed7c97b16a507b8fad10d58f4e5a38061517b88a', name: "close", size: "12", color: "#AAAAAA" })))))))));
+        return (index.h(index.Fragment, { key: 'd0db4bd2d57b38eae1522abd96c2776d6ffdd7c7' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-floating-portal", { key: 'ef5951d34aa4a0b5b831eadf464ab2c6711b9320', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, index.h("div", { key: '07f7090e1de9461d1a67b092631e1c8daae1abaa', class: {
+                'sd-floating-menu': true,
+                [`sd-floating-menu--${this.type}`]: true,
+                [`sd-floating-menu--${this.placement}`]: true,
+                'sd-floating-menu--with-close': this.useClose,
+            } }, index.h("i", { key: '2e8a1f6d7c2159ed48819229ee41ab75237ad2c2', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '8bc18f6aeb197026ead06ef02837a70f924752f5' })), index.h("div", { key: 'cb91d969f481e7e1cf22e4a84aed3237b7b22376', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }), this.useClose && (index.h("div", { key: '856bf6d63862406177c32400e3d919f5fcd1c8df', class: "sd-floating-menu__close-button" }, index.h("button", { key: '83e107c58f9bc7927c449a186b19e6fa4730e53f', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: this.handleClose.bind(this) }, index.h("sd-icon", { key: 'dc9dc331be0c6eb3ae96150ea50515f021746260', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
 SdTooltip.style = sdTooltipCss();
 
-const SdTooltipPortal = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sdClose = index.createEvent(this, "sdClose");
-    }
-    get el() { return index.getElement(this); }
-    to = 'body';
-    parentRef = null;
-    offset = [0, 0];
-    zIndex = 9999;
-    placement = 'bottom';
-    open = false;
-    sdClose;
-    container;
-    wrapper;
-    rafId;
-    isInsideClick = false;
-    resizeObserver;
-    mutationObserver;
-    static ARROW_SIZE = 11.2;
-    componentDidLoad() {
-        this.container = this.resolveContainer();
-        this.createWrapper();
-        this.moveSlotContent();
-        // DOM이 완전히 렌더링된 후 위치 계산
-        requestAnimationFrame(() => {
-            this.updatePosition();
-            if (this.wrapper) {
-                this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시
-            }
-        });
-        this.observeParent();
-    }
-    componentDidRender() {
-        if (!this.wrapper)
-            return;
-        // this.wrapper.style.display = this.open ? 'block' : 'none';
-        // if (this.open) this.updatePosition();
-        if (this.open) {
-            this.wrapper.style.display = 'block';
-            // RAF를 사용해서 다음 프레임에 위치 업데이트
-            requestAnimationFrame(() => {
-                this.updatePosition();
-                if (this.wrapper) {
-                    this.wrapper.style.visibility = 'visible';
-                }
-            });
-        }
-        else {
-            this.wrapper.style.display = 'none';
-            this.wrapper.style.visibility = 'hidden';
-        }
-    }
-    disconnectedCallback() {
-        if (this.rafId)
-            cancelAnimationFrame(this.rafId);
-        this.unobserveParent();
-        this.wrapper?.remove();
-    }
-    resolveContainer() {
-        const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
-        return el instanceof HTMLElement ? el : document.body;
-    }
-    createWrapper() {
-        this.wrapper = document.createElement('div');
-        Object.assign(this.wrapper.style, {
-            position: 'absolute',
-            zIndex: this.zIndex.toString(),
-            transition: 'opacity 0.4s',
-            top: '-9999px',
-            left: '-9999px',
-        });
-        this.container.appendChild(this.wrapper);
-    }
-    moveSlotContent() {
-        if (!this.wrapper)
-            return;
-        const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);
-        nodes.forEach(n => this.wrapper.appendChild(n));
-    }
-    // 위치 갱신 (scroll / resize)
-    updatePosition() {
-        if (this.rafId)
-            cancelAnimationFrame(this.rafId);
-        this.rafId = requestAnimationFrame(() => {
-            if (!this.parentRef || !this.wrapper)
-                return;
-            const rect = this.parentRef.getBoundingClientRect();
-            if (!rect.width && !rect.height)
-                return; // 요소가 보이지 않는 경우
-            const [offsetX, offsetY] = this.offset;
-            const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;
-            let top = 0;
-            let left = 0;
-            switch (this.placement) {
-                case 'top':
-                    top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
-                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
-                    break;
-                case 'bottom':
-                    top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
-                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
-                    break;
-                case 'left':
-                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
-                    left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
-                    break;
-                case 'right':
-                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
-                    left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
-                    break;
-            }
-            Object.assign(this.wrapper.style, {
-                top: `${top}px`,
-                left: `${left}px`,
-            });
-        });
-    }
-    // parentRef의 이동 / 크기변경 감지
-    observeParent() {
-        if (!this.parentRef)
-            return;
-        this.resizeObserver = new ResizeObserver(() => this.updatePosition());
-        this.resizeObserver.observe(this.parentRef);
-        this.mutationObserver = new MutationObserver(() => this.updatePosition());
-        this.mutationObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    unobserveParent() {
-        this.resizeObserver?.disconnect();
-        this.mutationObserver?.disconnect();
-    }
-    // 외부 클릭 감지
-    handleMouseDown(e) {
-        this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
-            (this.parentRef && this.parentRef.contains(e.target)));
-    }
-    handleWindowClick(e) {
-        if (this.isInsideClick) {
-            this.isInsideClick = false;
-            return;
-        }
-        if (this.wrapper?.contains(e.target))
-            return;
-        this.sdClose.emit();
-    }
-    render() {
-        return index.h("slot", { key: 'f26d3228d5c0965c2303e599259a6e93307009dc' });
-    }
-};
-
 exports.sd_button = SdButton;
-exports.sd_checkbox = SdCheckbox;
-exports.sd_file_picker = SdFilePicker;
-exports.sd_guide = SdGuide;
+exports.sd_floating_portal = SdFloatingPopover;
 exports.sd_icon = SdIcon;
-exports.sd_input = SdInput;
-exports.sd_loading_spinner = SdLoadingSpinner;
-exports.sd_number_input = SdNumberInput;
 exports.sd_pagination = SdPagination;
-exports.sd_portal = SdPortal;
-exports.sd_radio_group = SdRadioGroup;
-exports.sd_select = SdSelect;
-exports.sd_select_multiple_group = SdSelectMultipleGroup;
-exports.sd_select_option = SdSelectOption;
-exports.sd_select_option_group = SdSelectOptionGroup;
-exports.sd_select_search_input = SdSelectSearchInput;
-exports.sd_table_backup = SdTable;
-exports.sd_tabs = SdTabs;
-exports.sd_tag = SdTag;
-exports.sd_toast_message = SdToastMessage;
-exports.sd_toggle = SdToggle;
-exports.sd_toggle_button = SdToggleButton;
+exports.sd_textarea = SdTextarea;
 exports.sd_tooltip = SdTooltip;
-exports.sd_tooltip_portal = SdTooltipPortal;
-//# sourceMappingURL=sd-button.sd-checkbox.sd-file-picker.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-number-input.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-multiple-group.sd-select-option.sd-select-option-group.sd-select-search-input.sd-table-backup.sd-tabs.sd-tag.sd-toast-message.sd-toggle.sd-toggle-button.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map
+//# sourceMappingURL=sd-button.sd-floating-portal.sd-icon.sd-pagination.sd-textarea.sd-tooltip.entry.cjs.js.map