@sellmate/design-system 0.0.53 → 0.0.54

package/dist/esm/{sd-button_21.entry.js → sd-button_23.entry.js}

@@ -2481,6 +2481,285 @@ const SdLoadingSpinner = class {
 };
 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}.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) {
+        registerInstance(this, hostRef);
+        this.sdIncrement = createEvent(this, "sdIncrement");
+        this.sdDecrement = createEvent(this, "sdDecrement");
+        this.sdInput = createEvent(this, "sdInput");
+        this.sdChange = createEvent(this, "sdChange");
+        this.sdFocus = createEvent(this, "sdFocus");
+        this.sdBlur = createEvent(this, "sdBlur");
+    }
+    get el() { return 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 (h(Host, { key: '353b3f99bf5933d6f445a78c9cecd93fcbdd3a9c', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && h("div", { key: '95d9687fa5634fb53f6a2120d2125cf92e12ccdd', class: "sd-number-input__label" }, this.label), h("label", { key: '05ba4deb72261325788b25842c27d7a177fda58a', 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 }, h("input", { key: 'e4c415d40c20f5e915765f4f7d68cd123517acc1', 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 && (h("div", { key: '1b960a710170212032a8cd7c1c6ad002a3275d69', class: "sd-number-input__buttons" }, h("button", { key: 'c9a80bbdf96e4e191c2d43f581eba9c77f465464', type: "button", class: {
+                'sd-number-input__button': true,
+                'sd-number-input__button--decrement': true,
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'c4791c052f390013e7dfdf78ef42d987e9609da1', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), h("button", { key: '769fb6ebcde814f1f8667eaadd35f97139869bf3', type: "button", class: {
+                'sd-number-input__button': true,
+                'sd-number-input__button--increment': true,
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '6a4d263152daaf8f4a565f6659f6bfa6c0acc814', 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 = {
@@ -2555,12 +2834,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (h("div", { key: '6b743779100f7835b29da728d642ced495b11116', class: this.paginationClasses }, h("div", { key: '34be0cf1db6cc55f761b32fa9e4f9bee236933f6', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: 'b027af83594c0408615d4c34b861c5c31112f298', class: this.paginationClasses }, h("div", { key: '959c79e58c7745606d719c66e8090ef23f7db554', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (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)))), h("div", { key: '108017450555fb73c74c71cc7605ef8af5679a20', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '64f13226aa9249395ac7aa7d11ea5cc946f5477a', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -2683,7 +2962,7 @@ const SdPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '5995c7edbf0a54b6efb9afa2b5f67f078282acd8' });
+        return h("slot", { key: 'd93a68ecf1a281765225bf204cd479bb4b7bfdbf' });
     }
 };
 
@@ -3003,9 +3282,9 @@ const SdSelect = class extends BaseDropdownEvent {
 };
 SdSelect.style = sdSelectCss();
 
-const sdSelectMultipleCss = () => `.sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__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__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__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}.sd-select-multiple__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}`;
+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{display:inline-block;height:fit-content}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}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container sd-input{width:100%}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px}`;
 
-const SdSelectMultiple = class extends BaseDropdownEvent {
+const SdSelectMultipleGroup = class extends BaseDropdownEvent {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
@@ -3025,6 +3304,15 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
     clearable = false;
     searchable = false;
     useCheckbox = false;
+    useAll = false;
+    allCheckedLabel = '전체';
+    allCheckOptionLabel = '전체';
+    // props - custom styles
+    containerStyle = {};
+    triggerStyle = {};
+    dropdownStyle = {};
+    optionStyle = {};
+    labelStyle = {};
     // props - custom slots
     optionRenderer;
     // states
@@ -3033,6 +3321,7 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
     searchText = null;
     itemIndex = -1;
     isScrolled = false;
+    isDropdownReady = false;
     // events
     sdChange;
     dropDownShow;
@@ -3040,9 +3329,6 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
     searchRef;
     optionRef;
     dropdownRef;
-    async open() {
-        this.isOpen = true;
-    }
     valueChanged() {
         this.sdChange?.emit(this.value);
     }
@@ -3057,15 +3343,17 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
         if (this.searchable) {
             const searchInput = await this.getNativeInputElement();
             if (this.itemIndex === -1) {
-                searchInput?.focus();
+                searchInput?.focus({ preventScroll: true });
                 return;
             }
             else if (searchInput?.matches(':focus')) {
                 searchInput?.blur();
             }
         }
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || []);
-        const currentItem = optionElements?.[this.itemIndex];
+        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;
@@ -3079,30 +3367,45 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
     async isOpenChanged() {
         // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
         this.onDropdownToggle(this.isOpen);
-        const selectedOption = this.getSelectedOption();
-        if (!selectedOption) {
-            this.itemIndex = -1;
-        }
-        else {
-            this.itemIndex = this.options.indexOf(selectedOption[0]);
-        }
         this.dropDownShow?.emit({ isOpen: this.isOpen });
-        if (this.isOpen === false)
+        this.isDropdownReady = false;
+        if (this.isOpen === false) {
             return;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || []);
-        const currentItem = optionElements?.[this.itemIndex];
-        // 드롭다운이 열릴 때 검색 입력에 포커스
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            searchInput?.focus();
         }
-        if (!currentItem)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이
-        this.scrollToOption(currentItem);
+        // 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;
     }
-    connectedCallback() {
+    componentWillLoad() {
         // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
         this.filteredOptions = this.options;
         this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
@@ -3147,19 +3450,84 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
             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();
-        this.handleOptionSelection(option);
+        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;
         }
-        else {
-            // 검색어가 있으면 필터링
-            this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
+        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() {
@@ -3190,67 +3558,145 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
             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;
     }
-    scrollToOption(optionElement) {
+    async 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;
-        }
+        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 method
     render() {
         const style = {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '24d4287067a9706099a20c46abee2d25a8271c1c', style: style }, h("div", { key: '8b6f63ea974841ded9607c592d2c866a32bdccdf', class: {
-                'sd-select-multiple': true,
-                'sd-select-multiple--open': this.isOpen,
-                'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '2d35e79a95e5cd2ec8b055ca4d7a38e70ac13936', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+        return (h(Host, { key: '00e3f75c997fe76087ddfa2d9fef2ddb11a10a3e', style: style }, h("div", { key: 'f7e5a9f0d3704e0cfb014c8b7a84e6c93d61d31b', 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), h("div", { key: '5b4d771e6ba76ce56974eeee2f01e6a267f557f5', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
-    renderLabel(label) {
+    renderLabel(label, labelStyle) {
         if (!label)
             return null;
-        return h("label", { class: "sd-select-multiple__label" }, label);
+        return (h("label", { class: "sd-select-multiple-group__label", style: labelStyle }, label));
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();
-        return (h("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, h("span", { class: "sd-select-multiple__value" }, !selectedOption
-            ? '선택'
-            : selectedOption.length
-                ? selectedOption.map(option => option.label).join(', ')
-                : this.placeholder), this.clearable && selectedOption?.length > 0 && !this.disabled && (h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple__clear", onClick: event => {
+        return (h("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, h("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (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;
-            } })), h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen } })));
+            } })), 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 (h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, h("div", { class: "sd-select-multiple__dropdown", onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("div", { class: {
-                'sd-select-multiple__search-container': true,
-                'sd-select-multiple__search-container--scrolled': this.isScrolled,
+        return (h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, h("div", { style: { width: '0', height: '0', overflow: 'visible' } }, 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 && (h("div", { class: {
+                'sd-select-multiple-group__search-container': true,
+                'sd-select-multiple-group__search-container--scrolled': this.isScrolled,
             }, onClick: event => event.stopPropagation() }, h("sd-input", { ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
                 this.searchText = String(event?.detail);
             }, onSdFocus: () => {
                 this.itemIndex = -1;
-            } }, h("sd-icon", { name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.value?.some(selected => selected.value === option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-multiple__option-placeholder' }, this.optionPlaceholder))))));
+            }, onKeyDown: e => {
+                if (e.code === 'Enter')
+                    e.stopPropagation();
+            } }, h("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), this.filteredOptions.length > 0 ? (h(Fragment, null, this.useAll && (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) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item'
+                ? this.value?.some(selected => selected.value === option.value)
+                : this.isAllChildrenSelected(option), isFocused: index === 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) }) })))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder)))))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -3260,7 +3706,7 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
         "isOpen": ["isOpenChanged"]
     }; }
 };
-SdSelectMultiple.style = sdSelectMultipleCss();
+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}`;
 
@@ -3293,7 +3739,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (h(Host, { key: 'd3235f4b0314c15a8d280377d88db6bf53f7eb79' }, h("div", { key: '033fe384d67211a387d609a7b462330ee86c67a2', class: {
+        return (h(Host, { key: 'd106374cd96d326e885b65ac94ecf1a397ea2ad9' }, h("div", { key: 'e07601d9c735f7950102449342257a7e39d28a42', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -3315,6 +3761,69 @@ const SdSelectOption = class {
 };
 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) {
+        registerInstance(this, hostRef);
+        this.optionClick = createEvent(this, "optionClick");
+    }
+    get el() { return 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 (h("div", { key: 'd00236bc84a194509b25efa21ef1c53a25923a60', 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) }, h("div", { key: 'c635bb5ce073594dd05926529472db1665d5f86d', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '984289c89fe90f0cd40a3d022a29b9b974321db0', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+                e.preventDefault();
+                this.handleClick(this.option, this.isSelected, e);
+            } })), h("span", { key: 'b01a4ad8c906d6990dcf5c8eb1affa17f3605452', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '9103fa0bfe93caf8b5c3dea936334cd22727dff0', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+    }
+};
+SdSelectOptionGroup.style = sdSelectOptionGroupCss();
+
 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 {
@@ -4182,7 +4691,7 @@ const SdToggle = class {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (h("label", { key: 'b21fce826c30404ab3f30cc27a1866d9a7745402', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: '8bac810392c4aa1f0f04f13b37bc73210d70fe98', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '2d2949701bb4bf24dbbce2e296d8cb82606f6a62', class: "sd-toggle__label" }, this.label), h("div", { key: '42d39942bd284f3de320735a182bd53569782e1f', class: "sd-toggle__track" }, h("div", { key: 'b2decb4e6c1a1e9459621ea409fec24cf8695f4b', class: "sd-toggle__thumb" }))));
+        return (h("label", { key: 'dda95f842f686a3f595db6ecb651551f717cab18', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'a281a6572b7fca32242ba08ad45984445bd1a009', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: 'dfae7796e9e421e7d6ebc6e6693e6266b2ff87cd', class: "sd-toggle__label" }, this.label), h("div", { key: 'e4343307f2df5f5c68509a3e9576a811bd9192ff', class: "sd-toggle__track" }, h("div", { key: 'be214081e5ccc21ad306e52ce186ba4dc56c6c3b', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();
@@ -4226,7 +4735,7 @@ const SdToggleButton = class {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (h("label", { key: 'ffa8699908132e9865ccd5b0dffafe6aa1265d8f', class: this.buttonClasses, role: "button", "aria-pressed": this.isActive.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '772f24705287a4e7efac5f736b784dd3d9c0bf4d', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '4ac2cac1d4b1da4d707f4ce84a03ffc7a8ec7cb8', class: this.buttonClasses, role: "button", "aria-pressed": this.isActive.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: 'e9a974d34d7b3803b5ed44dc1b2da1199daf5bef', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();
@@ -4279,20 +4788,20 @@ const SdTooltip = class {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: 'a4cd9f882795ef5b39a877b004e7d51fccecbfcb' }, this.label ? (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 })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: 'b9128e35e1f28869d0d163088f54b631c9104bf9', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '0a6db1e8478f25fd43735ac0cd8977ce2bce5ef6', class: {
+        return (h(Fragment, { key: '55a62a0b80b8c10d8c0d8ced1a34178191b8a688' }, this.label ? (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 })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '21aaf4460591401ec5eb890d123e3cb381fb76f6', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: 'ee5d301a2fa72f95a0f89242b174f7e21a086a15', 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,
-            } }, h("i", { key: '176b79ce7db54479f2690aca9ae98252e1dfacd4', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'aa1f0d7da5135713d1d51ed2852210895d707931', class: {
+            } }, h("i", { key: '4f7e09f6770fbde0f2e9df81d401ea7cd6739df2', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'd0856082e623129eb56aaab87e54d1b19f33555a', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), h("div", { key: '147d42745d18180e92a81ed60404697afd6ea1e5', class: "sd-tooltip-menu__content", ref: el => {
+            } })), h("div", { key: '40dc2a7d4254ed0e712f22cf19032e2f5ef846b4', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && h("span", { key: '6204dc0ed996aa8c70cbb12a1388ed8ebce20552' }, this.el.textContent)), this.useClose && (h("div", { key: '7cb4aebb0077b2b17b78e2b2f82cfd90711cfc5f', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'f14b75687492169c4c24e7840c9e0907b2161ea2', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: 'fcf6ca6fa0c2a349ef0a6710399ab27e5ceffd3f', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && h("span", { key: 'd897c210bb76de430a89243177f3a436cc684e09' }, this.el.textContent)), this.useClose && (h("div", { key: 'ca41d884070a25443833162e2dc50fcb91a6bd2a', class: "sd-tooltip-menu__close-button" }, h("button", { key: '75c911fa76787dda3346b4f18d6169304966d49b', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '4d737bf6cc2952776016b9bc7f11cf90364cdcdb', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
 SdTooltip.style = sdTooltipCss();
@@ -4446,9 +4955,9 @@ const SdTooltipPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: 'e6c37c753808b41beeeefa5f04bdf543a48eaa05' });
+        return h("slot", { key: 'c389b848b1dc63a0484f6000ac5443cce752e4ac' });
     }
 };
 
-export { SdButton as sd_button, SdCheckbox as sd_checkbox, SdFilePicker as sd_file_picker, SdGuide as sd_guide, SdIcon as sd_icon, SdInput as sd_input, SdLoadingSpinner as sd_loading_spinner, SdPagination as sd_pagination, SdPortal as sd_portal, SdRadioGroup as sd_radio_group, SdSelect as sd_select, SdSelectMultiple as sd_select_multiple, SdSelectOption as sd_select_option, SdTable as sd_table_backup, SdTabs as sd_tabs, SdTag as sd_tag, SdToastMessage as sd_toast_message, SdToggle as sd_toggle, SdToggleButton as sd_toggle_button, SdTooltip as sd_tooltip, SdTooltipPortal as sd_tooltip_portal };
-//# sourceMappingURL=sd-button.sd-checkbox.sd-file-picker.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-multiple.sd-select-option.sd-table-backup.sd-tabs.sd-tag.sd-toast-message.sd-toggle.sd-toggle-button.sd-tooltip.sd-tooltip-portal.entry.js.map
+export { SdButton as sd_button, SdCheckbox as sd_checkbox, SdFilePicker as sd_file_picker, SdGuide as sd_guide, SdIcon as sd_icon, SdInput as sd_input, SdLoadingSpinner as sd_loading_spinner, SdNumberInput as sd_number_input, SdPagination as sd_pagination, SdPortal as sd_portal, SdRadioGroup as sd_radio_group, SdSelect as sd_select, SdSelectMultipleGroup as sd_select_multiple_group, SdSelectOption as sd_select_option, SdSelectOptionGroup as sd_select_option_group, SdTable as sd_table_backup, SdTabs as sd_tabs, SdTag as sd_tag, SdToastMessage as sd_toast_message, SdToggle as sd_toggle, SdToggleButton as sd_toggle_button, SdTooltip as sd_tooltip, SdTooltipPortal as sd_tooltip_portal };
+//# 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-table-backup.sd-tabs.sd-tag.sd-toast-message.sd-toggle.sd-toggle-button.sd-tooltip.sd-tooltip-portal.entry.js.map