@sellmate/design-system 0.0.52 → 0.0.54

package/dist/cjs/{sd-button_15.cjs.entry.js → sd-button_23.cjs.entry.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-Bxead0A0.js');
+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-C7cIAuTo.js');
+var tooltipArrow = require('./tooltipArrow-8I9A3AOE.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-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 ICON_SIZES = {
     xs: 12,
@@ -63,9 +63,9 @@ const SdButton = class {
         return (index.h(index.Host, { key: 'b30c8006e2f187fb971bcd47f8ce4a91d1dc47a6', style: { '--button-color': resolvedColor } }, index.h("button", { key: 'f494c93fc0b9d55537b468f5c6458569df962633', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, onClick: this.handleClick }, index.h("div", { key: '7d64a6526baeac8569cccc60d9befacef3e3777d', class: "sd-button__content" }, this.icon && (index.h("sd-icon", { key: '9439e9456783aa5b057d383252a6b0c45a44b588', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ? this.iconSize : ICON_SIZES[this.size], color: this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor })), this.label && index.h("div", { key: '324371a6f8864c444cda39e7b349b4c9ec19b7f6', class: "sd-button__label" }, this.label), this.iconRight && (index.h("sd-icon", { key: '733790ceda6e1822c71911b17e66f527936b15a2', 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;
+SdButton.style = sdButtonCss();
 
-const sdCheckboxCss = "sd-checkbox{display:inline-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 sdCheckboxCss = () => `sd-checkbox{display:inline-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 SdCheckbox = class {
     constructor(hostRef) {
@@ -145,9 +145,124 @@ const SdCheckbox = class {
         "checked": ["watchValueHandler"]
     }; }
 };
-SdCheckbox.style = sdCheckboxCss;
+SdCheckbox.style = sdCheckboxCss();
 
-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-block;height:fit-content}sd-guide .sd-guide{display:inline-block}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 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;
+    }
+    componentDidLoad() {
+        this.checkOverflow();
+    }
+    componentDidUpdate() {
+        this.checkOverflow();
+    }
+    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)
+            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;
+    }
+    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;
+    }
+    checkOverflow() {
+        if (!this.fileNamesRef)
+            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';
+    }
+    render() {
+        const hasFiles = this.hasFiles();
+        const displayText = this.getDisplayText();
+        return (index.h("div", { key: 'bfa4054517dcf1ef728a2354927bc40c177274ce', 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: 'b2f2e730b30c58641615d1216633ee20a67ee6c1', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange }), index.h("sd-icon", { key: '08b4bbcc3bb757a7a8e3dee3a416b202c7e86f66', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: 'cba9e6fb17a6a9c5de479e0ccdc6a3de7c23a615', 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: 'eb3c02cb001168d82eac1a3e2855e1cfcc6b960e', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { key: '8f09fe54f7f77453eac07f60942401d83955fc0b', class: "sd-file-picker__tooltip" }, displayText))));
+    }
+    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-block;height:fit-content}sd-guide .sd-guide{display:inline-block}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',
@@ -200,11 +315,11 @@ const SdGuide = class {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (index.h(index.Host, { key: '32cff34a733ab423b4db37aaa91f4c63152566a3', style: {
+        return (index.h(index.Host, { key: 'c15218a6d9dbef0147701e31f798a3e6fa8e7679', style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, index.h("sd-button", { key: '7efc84462239fcab6ac7d532d75ff418bebee957', 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: '9868dd7fd8b5e42cfd6b2011c2a8679a8f9ece02', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '974448ac29c162372a7a5e8ba12c493d4e8a2287', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: 'e28679c5cdeac9ca8e0b5701d4979a94a7c4f182', class: "sd-guide__popup__close", icon: "close", color: resolveColor.colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            } }, index.h("sd-button", { key: '773093b74b917d9e15a8e8c280aaa7564832abe1', 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: '64cfb5c8b425b0d48a9f9954b203c9b3883fb1f3', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: 'f748907b385a77490ad79f8f811ad7fc4eaee8bb', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '8b154c2d239fc7038cb939f826417e5b68043a85', class: "sd-guide__popup__close", icon: "close", color: resolveColor.colors.grey_65, size: "md", variant: "ghost", noHover: true,
             // buttonStyle={{ padding: '0px', minHeight: '0px' }}
-            onSdClick: this.closeDropdown }), index.h("div", { key: 'c598b70154a4b2c4a4a2790a0072eaf4f7de7099', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '6837f7934c24a7da2bf0558d7cdcd5effcdb5481', name: "helpOutline", size: 24, color: resolveColor.colors.green_65 }), index.h("h3", { key: '6b7b8f9d6f3602f3cd036efdd308318988ce339b', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: 'fbee7a0d4ad49cd6cac2ef5bb4617937aaff5882', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            onSdClick: this.closeDropdown }), index.h("div", { key: 'eaa2160d01bbe8172fc176117b8e506e469c5dde', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '54436229beee740efc607c3c2dd7be4c390e3285', name: "helpOutline", size: 24, color: resolveColor.colors.green_65 }), index.h("h3", { key: 'e848c736bb5d49221feb194ecd43e904d51c82f8', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: '57536a93be487239c30d7338f48c87ab57fbb3d0', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -223,7 +338,7 @@ const SdGuide = class {
         return (index.h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, index.h("p", { innerHTML: listContent })));
     };
 };
-SdGuide.style = sdGuideCss;
+SdGuide.style = sdGuideCss();
 
 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" })));
 
@@ -2205,7 +2320,7 @@ const Icons = {
     ...Youtube,
 };
 
-const sdIconCss = "sd-icon{line-height:0}sd-icon .sd-icon{line-height:0;vertical-align:middle}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)}";
+const sdIconCss = () => `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)}`;
 
 const SdIcon = class {
     constructor(hostRef) {
@@ -2234,12 +2349,12 @@ const SdIcon = class {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (index.h("i", { key: 'dc540c5746fedd2fed7bdf8e179b56878abe5a3b', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: 'ff1e903198b5362d8e3521c6477ddd0b96948ad9', color: this.resolvedColor })));
+        return (index.h("i", { key: 'f3ff9d0b1134a67b6f8897ede7b4cd449589d618', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: '0acd90f22d7f2e3e875b690d41dbb4a297b42d7f', color: this.resolvedColor })));
     }
 };
-SdIcon.style = sdIconCss;
+SdIcon.style = sdIconCss();
 
-const sdInputCss = "sd-icon{line-height:0}sd-icon .sd-icon{line-height:0;vertical-align:middle}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-input{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}.sd-input--hovered,.sd-input--focused{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--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}.sd-input.sd-input--disabled .sd-input__native_element{color:#888888 !important}.sd-input .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__native_element::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-input .sd-input__clear-icon{cursor:pointer;margin-left:8px}";
+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-input{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}.sd-input--hovered,.sd-input--focused{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--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}.sd-input.sd-input--disabled .sd-input__native_element{color:#888888 !important}.sd-input .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__native_element::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-input .sd-input__clear-icon{cursor:pointer;margin-left:8px}`;
 
 const SdInput = class {
     constructor(hostRef) {
@@ -2339,11 +2454,11 @@ const SdInput = class {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (index.h(index.Host, { key: 'f793db1bf48fccad644292b06e725676568d2686', style: inputWidth }, this.label && index.h("div", { key: '1f59002678f46ffdfeb47a0adb9b48ad74c24191', class: "sd-input__label" }, this.label), index.h("label", { key: '2fa9f8744f1e6357aa864ea4b97685d35fd0e712', class: {
+        return (index.h(index.Host, { key: '265fb05d7c005cd843443475d74c2e8127e4ae2d', style: inputWidth }, this.label && index.h("div", { key: '2ce6d2611927ec3e491122b8a17b94a2b39edcd5', class: "sd-input__label" }, this.label), index.h("label", { key: '6731592e7d55098daf4aa8b8177233897daf2900', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("slot", { key: '6baa7f30c5057bcd96167741b7219877a0de8b81', name: "prefix" }), index.h("input", { key: 'd3210037a23b3015a3650f2771f0205d3baa9af8', 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: '72cc3cf71cdcab1e540f68c54a7a7715cb73af83', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: '04a65fa5e2042ffad00a2cfae10d77babdeaaf28', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("slot", { key: 'e07590e1ee2540183c18aceb8dae0ff39d5adca4', name: "prefix" }), index.h("input", { key: '76b8bbba1030cbef5b57e3303b6cd300858c4fee', 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: 'e10dc614a0283bc63bb3e44bd627f7279728dae6', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: '3324d72d1353231209aa9c284425c921bbb1e17b', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);
@@ -2354,21 +2469,300 @@ const SdInput = class {
         "internalValue": ["internalValueChanged"]
     }; }
 };
-SdInput.style = sdInputCss;
+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 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);
     }
     render() {
-        return (index.h(index.Host, { key: '7538c9986c448d666ea1993324d8fd811c2ba289' }, index.h("svg", { key: '7e254a0b15ecda3e480582c336b33b1020715125', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, index.h("circle", { key: '8a6356ba2e8d42c9d1c789ba5676ca6f7485cda1', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (index.h(index.Host, { key: 'f8c61aa1c1f500da0aa9deac8d031306427bddb4' }, index.h("svg", { key: '66b9d93ed53b1539f4ba51cf7ca0350728ed343c', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, index.h("circle", { key: '3e6e687a243ec457065e14ac44bb56706c89bb10', 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}.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: '353b3f99bf5933d6f445a78c9cecd93fcbdd3a9c', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && index.h("div", { key: '95d9687fa5634fb53f6a2120d2125cf92e12ccdd', class: "sd-number-input__label" }, this.label), index.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 }, index.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 && (index.h("div", { key: '1b960a710170212032a8cd7c1c6ad002a3275d69', class: "sd-number-input__buttons" }, index.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 }, index.h("sd-icon", { key: 'c4791c052f390013e7dfdf78ef42d987e9609da1', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), index.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 }, index.h("sd-icon", { key: '6a4d263152daaf8f4a565f6659f6bfa6c0acc814', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
     }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "internalValue": ["internalValueChanged"]
+    }; }
 };
-SdLoadingSpinner.style = sdLoadingSpinnerCss;
+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 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,
@@ -2442,15 +2836,15 @@ const SdPagination = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'e3abf3098a37fe058088304eefcfa9b6abbdbcaa', class: this.paginationClasses }, index.h("div", { key: '19db1f5ed8fd2ab9b4f6793b474bf4dd3f48f21c', 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: {
+        return (index.h("div", { key: 'b027af83594c0408615d4c34b861c5c31112f298', class: this.paginationClasses }, index.h("div", { key: '959c79e58c7745606d719c66e8090ef23f7db554', 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: '63096633349b138d679b2a735d0e8d246dfde312', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '64f13226aa9249395ac7aa7d11ea5cc946f5477a', class: "append-btns" }, this.renderNextButtons())));
     }
 };
-SdPagination.style = sdPaginationCss;
+SdPagination.style = sdPaginationCss();
 
 const SdPortal = class {
     constructor(hostRef) {
@@ -2570,11 +2964,11 @@ const SdPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return index.h("slot", { key: 'a2227a90c04b58d7f8c468ebc84f0627055d4da8' });
+        return index.h("slot", { key: 'd93a68ecf1a281765225bf204cd479bb4b7bfdbf' });
     }
 };
 
-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:default}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:default;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 .sd-radio-group__label{color:#888888}";
+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:default}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:default;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 .sd-radio-group__label{color:#888888}`;
 
 const SdRadioGroup = class {
     constructor(hostRef) {
@@ -2627,7 +3021,7 @@ const SdRadioGroup = class {
     }
     render() {
         const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
-        return (index.h("div", { key: 'f817ced0e784c418c09c6c3e1cd6d9e045d32598', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index$1) => {
+        return (index.h("div", { key: '41a5801484b12c0688d34d7225b07ce4ac8073fa', 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)));
@@ -2637,9 +3031,9 @@ const SdRadioGroup = class {
         "value": ["valueChanged"]
     }; }
 };
-SdRadioGroup.style = sdRadioGroupCss;
+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{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:hover:not(.sd-select--disabled){background:#f6f6f6}.sd-select.sd-select--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select.sd-select--disabled .sd-select__label{border-right:1px solid #cccccc}.sd-select.sd-select--disabled .sd-select__trigger{color:#888888}.sd-select.sd-select--disabled .sd-select__trigger:focus,.sd-select.sd-select--disabled .sd-select__trigger:focus-visible,.sd-select.sd-select--disabled .sd-select__trigger:focus-within{outline:none !important}.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__container{position:relative;width:100%;display:flex}.sd-select__container .sd-select__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.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__container .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.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__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}.sd-select__dropdown .sd-select__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select__dropdown .sd-select__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select__dropdown .sd-select__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";
+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{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:hover:not(.sd-select--disabled){background:#f6f6f6}.sd-select.sd-select--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select.sd-select--disabled .sd-select__label{border-right:1px solid #cccccc}.sd-select.sd-select--disabled .sd-select__trigger{color:#888888}.sd-select.sd-select--disabled .sd-select__trigger:focus,.sd-select.sd-select--disabled .sd-select__trigger:focus-visible,.sd-select.sd-select--disabled .sd-select__trigger:focus-within{outline:none !important}.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__container{position:relative;width:100%;display:flex}.sd-select__container .sd-select__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.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__container .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.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__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}.sd-select__dropdown .sd-select__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select__dropdown .sd-select__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select__dropdown .sd-select__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}`;
 
 const SdSelect = class extends selectKeyboardNavigation.BaseDropdownEvent {
     constructor(hostRef) {
@@ -2675,6 +3069,9 @@ const SdSelect = class extends selectKeyboardNavigation.BaseDropdownEvent {
     searchRef;
     optionRef;
     dropdownRef;
+    async open() {
+        this.isOpen = true;
+    }
     valueChanged() {
         const selectedOption = this.getSelectedOption();
         this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
@@ -2690,7 +3087,7 @@ const SdSelect = class extends selectKeyboardNavigation.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')) {
@@ -2735,7 +3132,7 @@ const SdSelect = class extends selectKeyboardNavigation.BaseDropdownEvent {
         const currentItem = optionElements?.[this.itemIndex];
         if (this.searchable) {
             const searchInput = await this.getNativeInputElement();
-            searchInput?.focus();
+            searchInput?.focus({ preventScroll: true });
         }
         if (!currentItem)
             return;
@@ -2843,11 +3240,11 @@ const SdSelect = class extends selectKeyboardNavigation.BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (index.h(index.Host, { key: 'a99d2903e6156a30aa834dea2344829edbde67cb', style: style }, index.h("div", { key: '39862875a121d9add2c0101d81e223d475d14abb', class: {
+        return (index.h(index.Host, { key: 'ba065b311487ea934dc46736fd633d4d1a13f2e4', style: style }, index.h("div", { key: '904d988d274e7827d5c969ba45643648ba0a61b3', 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: '6a7e4ffc442e4edfe508e60c8b578f8c8fb5e409', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: '66fe35a68fa18cf97b4db110572f86faefa59207', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -2885,62 +3282,551 @@ const SdSelect = class extends selectKeyboardNavigation.BaseDropdownEvent {
         "isOpen": ["isOpenChanged"]
     }; }
 };
-SdSelect.style = sdSelectCss;
+SdSelect.style = sdSelectCss();
 
-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 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 SdSelectOption = class {
+const SdSelectMultipleGroup = class extends selectKeyboardNavigation.BaseDropdownEvent {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
-        this.optionClick = index.createEvent(this, "optionClick");
+        this.sdChange = index.createEvent(this, "sdChange");
+        this.dropDownShow = index.createEvent(this, "dropDownShow");
     }
     get el() { return index.getElement(this); }
-    option;
-    index;
-    isSelected = false;
-    isFocused = false;
-    optionStyle;
+    // props
+    value = null;
+    label = '';
+    options = [];
+    placeholder = '선택';
+    optionPlaceholder = '옵션이 없습니다.';
+    width = '200px';
+    dropdownHeight = '260px';
     disabled = false;
+    clearable = false;
+    searchable = false;
     useCheckbox = false;
-    isHovered = false;
-    async isDisabled() {
-        return !!this.option.disabled;
+    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);
     }
-    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: '7cf5b51057f8eb7ad7cf7143225bcd842e5fa231' }, index.h("div", { key: 'ab9e02db38a0717b9aeb85890b150a6e59a9f7ee', 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))));
+    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: '00e3f75c997fe76087ddfa2d9fef2ddb11a10a3e', style: style }, index.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), index.h("div", { key: '5b4d771e6ba76ce56974eeee2f01e6a267f557f5', 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("div", { class: {
+                'sd-select-multiple-group__search-container': true,
+                'sd-select-multiple-group__search-container--scrolled': this.isScrolled,
+            }, onClick: event => event.stopPropagation() }, index.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;
+            }, onKeyDown: e => {
+                if (e.code === 'Enter')
+                    e.stopPropagation();
+            } }, index.h("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), 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"]
+    }; }
 };
-SdSelectOption.style = sdSelectOptionCss;
+SdSelectMultipleGroup.style = sdSelectMultipleGroupCss();
 
-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 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: 'd106374cd96d326e885b65ac94ecf1a397ea2ad9' }, index.h("div", { key: 'e07601d9c735f7950102449342257a7e39d28a42', 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: '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) }, index.h("div", { key: 'c635bb5ce073594dd05926529472db1665d5f86d', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '984289c89fe90f0cd40a3d022a29b9b974321db0', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+                e.preventDefault();
+                this.handleClick(this.option, this.isSelected, e);
+            } })), index.h("span", { key: 'b01a4ad8c906d6990dcf5c8eb1affa17f3605452', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.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 {
     constructor(hostRef) {
@@ -3583,16 +4469,16 @@ const SdTable = class {
             }, "aria-hidden": "true" }, index.h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (index.h(index.Host, { key: '1c762116fd35be7070aea38b052f8f619176cd32' }, index.h("div", { key: '4201639381ebbe400ab124e1ab0e2badd3ffba9e', class: "sd-table__wrapper", style: {
+        return (index.h(index.Host, { key: '5d04a8b7cf9dbc6cfb9dc4d6497f4eb6190caca1' }, index.h("div", { key: 'da26d320dbd4542b226434e355c8ee947b4e1cf6', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, index.h("div", { key: 'c17c7b76ab6f33faf605ad2c4f023f5f0411c847', class: "sd-table__container", style: {
+            } }, index.h("div", { key: 'f3fe16bd185e08f2cbba94199bb9d55dc854b085', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, index.h("div", { key: 'd7b1e53fbbe6c8c282b6455a113aa1fb7abf0f13', class: {
+            } }, index.h("div", { key: '5e0976df3206aca9f33e54b85bda479110397621', 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: '3c8d66915131a8388d19c2d6101716d709f29c4a', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '5bd2eb67b7f16929dc4829d3ed069ee7b976f4bf' }))), index.h("table", { key: 'be2d1b31673397a7aebeff85827d40343970aac0', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), index.h("div", { key: 'f6436dc02163f34d3f9efcd6bc312561e88f3d08', class: "sd-table__bottom" }, !this.paginatedRows.length && (index.h("div", { key: 'b0f27e8d1b7343619c356bc0d9c074e4dbe91ff0', class: "sd-table__no-data" }, index.h("slot", { key: '0ea8e9e5624ce063c88b71de32ab7c4607344af9', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '271d506c6f9e98a6f4e69364be977e299fa4f794', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '1bff466793f04d5c76b9682fa546a66f9546cf0a', 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: '51731aabcbfd68cf606423e008fcc89995419803', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (index.h("div", { key: 'fa934df1cf18e69b4054b6795ac9973755823cf6', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: 'd21458340e4904ce938a86321732dfb04969ef7c' }))), index.h("table", { key: '0bddebe63faffebdd3950f21e5a66e4f8d8d56e9', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), index.h("div", { key: '12a66491f58bcabcfdd861a9ca2d0dc32d0968df', class: "sd-table__bottom" }, !this.paginatedRows.length && (index.h("div", { key: '2058dace66a36697ca7018d6f83f3a00582fe9a1', class: "sd-table__no-data" }, index.h("slot", { key: 'c99d5416ce3ccb2c1512da61b60391d5b63c85b1', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: 'bd8f8b4351a8195489bc1d585585f321e26c8c7b', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '443622f1f52136e7d4212d4073e23cd2b6c05c99', 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: 'cdcce50397d18466c3c010625e5dfe369852da73', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": ["handleColumnsChange"],
@@ -3602,9 +4488,176 @@ const SdTable = class {
         "pagination": ["handlePaginationChange"]
     }; }
 };
-SdTable.style = sdTableBackupCss;
+SdTable.style = sdTableBackupCss();
 
-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 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::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;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}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}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{display:none}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075ff;font-weight:700;border-bottom:1px solid #0075ff;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected:hover::before,sd-tabs .sd-tabs--sub .sd-tabs__tab--unselected:hover::before{display:none}`;
+
+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: '749c892c45eccc71e2faad842be4dfd311aa2eed', 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', 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_60',
+    green: 'bg-green_15 text-green_70',
+    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(' ');
+    }
+    renderContent() {
+        return [
+            index.h("span", { class: "sd-tag__content" }, index.h("slot", null, this.label)),
+        ];
+    }
+    render() {
+        const tagClasses = this.getTagClasses();
+        return (index.h("span", { key: '6f3353059d6a1516dd11e23f6347f52f514020e4', class: tagClasses, style: {
+                '--tag-bg-color': this.bgColor,
+                '--tag-text-color': this.textColor,
+            }, "aria-label": this.label || 'tag' }, this.renderContent()));
+    }
+};
+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");
+    }
+    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_45', 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');
+        }
+        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: '4d342822195d44b49e5976e8d5e66fc7a58301b9', style: {
+                '--sd-toast-bg': colors.background,
+                '--sd-toast-text': colors.text,
+            } }, index.h("div", { key: '2b33303cc0fc474d9c58a83a925a43b59f577125', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'a7b7c49a4a15c76f0633520046128ce937e6410d', class: "sd-toast-message__icon" }, index.h("sd-icon", { key: '7c61a7142e8e442936c9b2736cbcf8ebf8521087', name: this.icon, size: 16, color: colors.text }))), index.h("div", { key: 'd0606186e02a44ba81ba3924baa0bdd8b34984f1', class: "sd-toast-message__content" }, index.h("span", { key: '52e689c1e1d6a7170381a46f8c9370105386aac7', class: "sd-toast-message__message" }, this.message)), this.link && (index.h("a", { key: '0818b9ffe71bd2cbe9fc00bfab9f8a6591f03cbd', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '4d4d7b15137574db44b64e3dc62010fe8ccdf530', 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: '991ad8fe130c370f24ce23cf6d98a9ac797f7367', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: 'd71dee73974143e5b6eb92f4135d40ee1df178fb', name: "close", size: 12, color: colors.text }))))));
+    }
+};
+SdToastMessage.style = sdToastMessageCss();
+
+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 SdToggle = class {
     constructor(hostRef) {
@@ -3640,12 +4693,56 @@ const SdToggle = class {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '8b196fae6d8931cdd39c7eea51a7f1f843f4cb75', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '4a60ce883411cb2a598d003ff264fe6659d0df02', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: 'c0fb2edfb1a2854c31fb6eb0a4e4169e2e409db2', class: "sd-toggle__label" }, this.label), index.h("div", { key: 'c9f78f892be478cbd1232722487471eae53bee8a', class: "sd-toggle__track" }, index.h("div", { key: 'b6388556a0d6f4b9f74e6e2684ded4cde93d6384', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: 'dda95f842f686a3f595db6ecb651551f717cab18', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'a281a6572b7fca32242ba08ad45984445bd1a009', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: 'dfae7796e9e421e7d6ebc6e6693e6266b2ff87cd', class: "sd-toggle__label" }, this.label), index.h("div", { key: 'e4343307f2df5f5c68509a3e9576a811bd9192ff', class: "sd-toggle__track" }, index.h("div", { key: 'be214081e5ccc21ad306e52ce186ba4dc56c6c3b', class: "sd-toggle__thumb" }))));
+    }
+};
+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}.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");
+    }
+    value = false;
+    label = '';
+    disabled = false;
+    isActive = false;
+    sdChange;
+    componentWillLoad() {
+        this.updateActiveState(this.value);
+    }
+    componentWillRender() {
+        this.updateActiveState(this.value);
+    }
+    updateActiveState(value) {
+        this.isActive = value;
+    }
+    get buttonClasses() {
+        const classes = ['sd-toggle-button'];
+        if (this.isActive) {
+            classes.push('sd-toggle-button--active');
+        }
+        if (this.disabled) {
+            classes.push('sd-toggle-button--disabled');
+        }
+        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: '4ac2cac1d4b1da4d707f4ce84a03ffc7a8ec7cb8', 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: 'e9a974d34d7b3803b5ed44dc1b2da1199daf5bef', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
-SdToggle.style = sdToggleCss;
+SdToggleButton.style = sdToggleButtonCss();
 
-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 [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 SdTooltip = class {
     constructor(hostRef) {
@@ -3693,23 +4790,23 @@ const SdTooltip = class {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (index.h(index.Fragment, { key: '44ccb9c1a2e9113160ccb516e62fbd175e139f50' }, 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: '83f82f27164df34a1a8e0d1d8975b4f89a82691a', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: '544085a133cdbbe707ec0c2be35a9a42cd2372bc', class: {
+        return (index.h(index.Fragment, { key: '55a62a0b80b8c10d8c0d8ced1a34178191b8a688' }, 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: '21aaf4460591401ec5eb890d123e3cb381fb76f6', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.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,
-            } }, index.h("i", { key: '4b335754d346d6ae244e83ccdcae25edf05a306a', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '567fc901e95b918fb0883f9c241836a10e1e58e9', class: {
+            } }, index.h("i", { key: '4f7e09f6770fbde0f2e9df81d401ea7cd6739df2', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'd0856082e623129eb56aaab87e54d1b19f33555a', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), index.h("div", { key: '1475d6f5d76f4e3860e2524cb571eb2704460203', class: "sd-tooltip-menu__content", ref: el => {
+            } })), index.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 && index.h("span", { key: 'f821b0aa74de05c7728b06a2bd78367e43703684' }, this.el.textContent)), this.useClose && (index.h("div", { key: '2068c369ef957cb25b9ec74e22e2c78f9ffa6232', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: 'f61156a86ce1b3fd4f2fb97e507711f9602ac157', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '3ba6f3f4dc5379eb2d13aecb9ec1d5d6fdf20dec', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && index.h("span", { key: 'd897c210bb76de430a89243177f3a436cc684e09' }, this.el.textContent)), this.useClose && (index.h("div", { key: 'ca41d884070a25443833162e2dc50fcb91a6bd2a', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: '75c911fa76787dda3346b4f18d6169304966d49b', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '4d737bf6cc2952776016b9bc7f11cf90364cdcdb', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
-SdTooltip.style = sdTooltipCss;
+SdTooltip.style = sdTooltipCss();
 
 const SdTooltipPortal = class {
     constructor(hostRef) {
@@ -3860,23 +4957,31 @@ const SdTooltipPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return index.h("slot", { key: '912ff6aba4bae810c40c95325ffb1109ddcfddbb' });
+        return index.h("slot", { key: 'c389b848b1dc63a0484f6000ac5443cce752e4ac' });
     }
 };
 
 exports.sd_button = SdButton;
 exports.sd_checkbox = SdCheckbox;
+exports.sd_file_picker = SdFilePicker;
 exports.sd_guide = SdGuide;
 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_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_tooltip = SdTooltip;
 exports.sd_tooltip_portal = SdTooltipPortal;
-//# sourceMappingURL=sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-toggle.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map
+//# 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.cjs.js.map