@sellmate/design-system 0.0.55 → 1.0.0

package/hydrate/index.js

@@ -3644,7 +3644,7 @@ const grey_10 = "#f6f6f6";
 const grey_05 = "#f9f9f9";
 const white = "#ffffff";
 const black = "#000000";
-var colors$1 = {
+var rawColors = {
 	primary: primary,
 	secondary: secondary,
 	accent: accent,
@@ -3773,7 +3773,7 @@ var colors$1 = {
 	black: black
 };
 
-const colors = colors$1;
+const colors = rawColors;
 // 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,
 // 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.
 function resolveColor(input, fallback = '#025497') {
@@ -3783,7 +3783,7 @@ function resolveColor(input, fallback = '#025497') {
     return mapped || input;
 }
 
-const sdBadgeCss = () => `.sc-sd-badge-h{line-height:0}.sd-badge.sc-sd-badge{display:inline-flex;align-items:center;justify-content:center}.sd-badge.sc-sd-badge .sd-badge__dot.sc-sd-badge{background:var(--sd-badge-color, #0075ff)}.sd-badge.sc-sd-badge .sd-badge__label.sc-sd-badge{margin-left:8px;font-size:12px;font-weight:500;line-height:20px;color:#333333}.sd-badge--sm.sc-sd-badge .sd-badge__dot.sc-sd-badge{width:4px;height:4px;min-width:4px;min-height:4px;border-radius:2px}.sd-badge--md.sc-sd-badge .sd-badge__dot.sc-sd-badge{width:8px;height:8px;min-width:8px;min-height:8px;border-radius:4px}`;
+const sdBadgeCss = () => `sd-badge{display:inline-flex}sd-badge .sd-badge{display:flex;align-items:center;justify-content:center}sd-badge .sd-badge .sd-badge__dot{background:var(--sd-badge-color, #0075ff)}sd-badge .sd-badge .sd-badge__label{margin-left:8px;font-size:12px;font-weight:500;line-height:20px;color:#333333}sd-badge .sd-badge--sm .sd-badge__dot{width:4px;height:4px;min-width:4px;min-height:4px;border-radius:2px}sd-badge .sd-badge--md .sd-badge__dot{width:8px;height:8px;min-width:8px;min-height:8px;border-radius:4px}`;
 
 class SdBadge {
     constructor(hostRef) {
@@ -3794,11 +3794,11 @@ class SdBadge {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (hAsync(Host, { key: '7044001c3736a77e08fc7f6aea4ae887ea84c1ec', style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '5ba646343bf81ebfa2fb0d0fa42b4e1800b5595b', class: `sd-badge sd-badge--${this.size}` }, hAsync("div", { key: '0e6c9ef82791eb9916dc64baf99233cb5644c4b9', class: "sd-badge__dot" }), hAsync("div", { key: '37f3dc62507e7c2db7549bc3d2d7d72cc2fcb1e2', class: "sd-badge__label" }, this.label))));
+        return (hAsync(Host, { key: '8e74db398e9dafb57d276ef22ee8ab5891526e15', style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '23d4800224630f028e26b43e672ec6a33b4d2f28', class: `sd-badge sd-badge--${this.size}` }, hAsync("div", { key: '376446696e366a9b6e1f816a45fcf073ef967c6d', class: "sd-badge__dot" }), hAsync("div", { key: '750ab1c9792fa8174cf5ecdeb0c709bfaff2294a', class: "sd-badge__label" }, this.label))));
     }
     static get style() { return sdBadgeCss(); }
     static get cmpMeta() { return {
-        "$flags$": 770,
+        "$flags$": 768,
         "$tagName$": "sd-badge",
         "$members$": {
             "size": [1],
@@ -3811,7 +3811,7 @@ class SdBadge {
     }; }
 }
 
-const sdButtonCss = () => `sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}`;
+const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}`;
 
 const ICON_SIZES = {
     xs: 12,
@@ -3822,7 +3822,6 @@ const ICON_SIZES = {
 class SdButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdClick = createEvent(this, "sdClick");
     }
     get el() { return getElement(this); }
     variant = 'primary';
@@ -3837,15 +3836,6 @@ class SdButton {
     iconRight;
     noHover = false;
     class = '';
-    sdClick;
-    handleClick = (event) => {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        this.sdClick.emit(event);
-    };
     getButtonClasses() {
         const classes = ['sd-button'];
         classes.push(`sd-button--${this.variant}`);
@@ -3866,7 +3856,7 @@ class SdButton {
         const buttonClasses = this.getButtonClasses();
         // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
         const resolvedColor = resolveColor(this.color);
-        return (hAsync(Host, { key: '7ad8b189abbee6a59fee2ba3fc97dee48c5e3058', style: { '--button-color': resolvedColor }, disabled: this.disabled }, hAsync("button", { key: 'd335be4ddcbc4f4d9908a1cdf20bfd94bbaff3e3', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, onClick: this.handleClick }, hAsync("div", { key: '362c6bd73c38108058ea1cdb16149c1906588cbd', class: "sd-button__content" }, this.icon && (hAsync("sd-icon", { key: '85d8ccc677e6cb633a35b2a2a76432ac7f67b807', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && hAsync("div", { key: 'fa51d7ab94e039ee52c122dc022429253bdca921', class: "sd-button__label" }, this.label), this.iconRight && (hAsync("sd-icon", { key: 'b4c0c866b86832146b8f156b68f931df280ec83a', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor }))))));
+        return (hAsync("button", { key: '9b92f98528d06453492eab68bb6137bcaefbf656', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor } }, hAsync("div", { key: 'a7dae76ec9112b95c2ee765cb2f9b0b4fe5f705a', class: "sd-button__content" }, this.icon && (hAsync("sd-icon", { key: '71784bfcb2d08c77305a70311192dfc2c059ff0a', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && hAsync("div", { key: 'bc4b7dec430602765e98fa484d397b141686d8e7', class: "sd-button__label" }, this.label), this.iconRight && (hAsync("sd-icon", { key: '26744c6ace43cbbfc9758a8fdf0174b49f24cd2c', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
     }
     static get style() { return sdButtonCss(); }
     static get cmpMeta() { return {
@@ -3892,16 +3882,16 @@ class SdButton {
     }; }
 }
 
-const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card.sd-card--bordered{border:1px solid #e1e1e1}`;
+const sdCardCss = () => `sd-card{display:block;height:fit-content;border-radius:8px;background:white}sd-card.sd-card--bordered{border:1px solid #e1e1e1}`;
 
 class SdCard {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     bordered = true;
-    class = '';
+    cardClassName = '';
     render() {
-        return (hAsync(Host, { key: '902920358ec434881c5e8d1ec77758dd74dd4c31' }, hAsync("div", { key: '9b2eb1ec45fc2345b30efe26a9aed2a44f39e0e1', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, hAsync("slot", { key: 'd31d14e706a89d53d5915e0a411838ad5567fd20' }))));
+        return (hAsync(Host, { key: 'f7012e01206131628820f41ede93ce68cb121fe4', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}` }, hAsync("slot", { key: '5b978729afb2cf6fef8a8ad696029ef09dbb0dd9' })));
     }
     static get style() { return sdCardCss(); }
     static get cmpMeta() { return {
@@ -3909,7 +3899,7 @@ class SdCard {
         "$tagName$": "sd-card",
         "$members$": {
             "bordered": [4],
-            "class": [1]
+            "cardClassName": [1, "card-class-name"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -3922,11 +3912,11 @@ const sdCheckboxCss = () => `sd-checkbox{display:block;height:20px;line-height:0
 class SdCheckbox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdChange = createEvent(this, "sdChange");
+        this.update = createEvent(this, "sdUpdate");
     }
     get el() { return getElement(this); }
     /** 현재 선택 상태 또는 배열 형태의 값 */
-    checked;
+    value;
     /** 배열 모드에서의 개별 값 */
     val;
     /** 비활성화 여부 */
@@ -3936,12 +3926,12 @@ class SdCheckbox {
     /** 내부 체크 상태 */
     isChecked = false;
     /** 값 변경 이벤트 */
-    sdChange;
+    update;
     componentWillLoad() {
-        this.updateCheckedState(this.checked);
+        this.updateCheckedState(this.value);
     }
     componentWillRender() {
-        this.updateCheckedState(this.checked);
+        this.updateCheckedState(this.value);
     }
     watchValueHandler(newValue) {
         this.updateCheckedState(newValue);
@@ -3974,35 +3964,35 @@ class SdCheckbox {
         if (this.disabled)
             return;
         let newValue;
-        if (typeof this.checked === 'boolean') {
-            newValue = !this.checked;
+        if (typeof this.value === 'boolean') {
+            newValue = !this.value;
         }
-        else if (Array.isArray(this.checked)) {
+        else if (Array.isArray(this.value)) {
             if (this.val === undefined) {
                 console.warn('A "val" property is required when using an array for the "value" property.');
             }
-            const valueSet = new Set(this.checked);
+            const valueSet = new Set(this.value);
             valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
             newValue = Array.from(valueSet);
         }
         else {
             newValue = !this.isChecked;
         }
-        this.checked = newValue;
-        this.sdChange.emit(newValue);
+        this.value = newValue;
+        this.update.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: '9d70b760dedd75f6af927111338f488c4fb3c149', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "checkbox", "aria-label": this.label || 'checkbox', class: this.checkboxClasses }, hAsync("input", { key: 'd5c09f8ffca898bb1a7f848ba5f5c09b3cc32f57', type: "checkbox", value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.label || 'checkbox' }), hAsync("div", { key: '4e2c090cad23c420f4597194e9dab8b5718f4ec9', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && hAsync("span", { key: '99e3e1f4f5959f57fd5d7c2f0611a2e02cb41f6a', class: "sd-checkbox__label" }, this.label)));
+        return (hAsync("label", { key: 'b4f1e82e461cfc649a1bc5414fb55bcd8ea9c87d', "aria-label": this.label || 'checkbox', class: this.checkboxClasses }, hAsync("input", { key: 'bb6f1d911ccc9a62c0149bb9e65bbf73ac86fc9b', type: "checkbox", value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.label || 'checkbox' }), hAsync("div", { key: '2598f80d9028b306f04898544f94af2a06604093', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && hAsync("span", { key: 'd07198f3d0796189988d030db5b882911d80c6bf', class: "sd-checkbox__label" }, this.label)));
     }
     static get watchers() { return {
-        "checked": ["watchValueHandler"]
+        "value": ["watchValueHandler"]
     }; }
     static get style() { return sdCheckboxCss(); }
     static get cmpMeta() { return {
         "$flags$": 768,
         "$tagName$": "sd-checkbox",
         "$members$": {
-            "checked": [1028],
+            "value": [1028],
             "val": [8],
             "disabled": [4],
             "label": [1],
@@ -4014,13 +4004,13 @@ class SdCheckbox {
     }; }
 }
 
-const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box-h{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box-h{color:#cccccc;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box-h:not(.sd-date-box--disabled){cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box-h:hover .sd-date-box__content.sc-sd-date-box{background:#d9eaff}.sd-date-box.sd-date-box--in-range.sc-sd-date-box-h:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#d9eaff}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075ff;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box-h:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #e1e1e1 !important;border-radius:14px}`;
+const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box-h{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box-h{color:#cccccc;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box-h:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box-h:hover .sd-date-box__content.sc-sd-date-box{background:#d9eaff}.sd-date-box.sd-date-box--in-range.sc-sd-date-box-h:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#d9eaff}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075ff;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box-h:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #e1e1e1 !important;border-radius:14px}`;
 
 class SdDateBox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdClick = createEvent(this, "sdClick");
-        this.sdMouseOver = createEvent(this, "sdMouseOver");
+        this.click = createEvent(this, "sdClick");
+        this.mouseOver = createEvent(this, "sdMouseOver");
     }
     date = null;
     disabled = false;
@@ -4030,22 +4020,22 @@ class SdDateBox {
     isToday = false;
     inRange = false;
     type = '';
-    sdClick;
-    sdMouseOver;
+    click;
+    mouseOver;
     handleClickDate() {
         if (this.disabled)
             return;
         if (typeof this.date === 'string')
             return;
-        this.sdClick?.emit(this.date);
+        this.click?.emit(this.date);
     }
     handleHoverDate() {
         if (typeof this.date === 'string')
             return;
-        this.sdMouseOver?.emit(this.date);
+        this.mouseOver?.emit(this.date);
     }
     render() {
-        return (hAsync(Host, { key: '823013675434dcde8876018a3a2b99b407b51314', role: "button", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
+        return (hAsync(Host, { key: 'a1d4c039cb3b9b3cdd2910c91de1c8b01fc0a278', role: "button", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -4056,7 +4046,7 @@ class SdDateBox {
                 'sd-date-box--in-range': this.inRange,
                 'sd-date-box--type-start': this.type === 'start',
                 'sd-date-box--type-end': this.type === 'end',
-            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, hAsync("div", { key: 'fdfeb47287ef4c2c079ce41623e8feae4e8a813c', class: "sd-date-box__content" }, hAsync("div", { key: '6784698bb721bce4b8c476850bce59aa1146a6f7', class: "sd-date-box__label" }, this.date))));
+            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, hAsync("div", { key: '338ffdc873793d66dbc6e2ad39233de227231002', class: "sd-date-box__content" }, hAsync("div", { key: '764ae38ca49f431c1ec00ae35e6b436f32fae735', class: "sd-date-box__label" }, this.date))));
     }
     static get style() { return sdDateBoxCss(); }
     static get cmpMeta() { return {
@@ -4139,7 +4129,7 @@ const sdDatePickerCss = () => `.sd-date-picker.sc-sd-date-picker{width:100%;disp
 class SdDatePicker {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdChange = createEvent(this, "sdChange");
+        this.update = createEvent(this, "sdUpdate");
     }
     get el() { return getElement(this); }
     value = null;
@@ -4151,7 +4141,7 @@ class SdDatePicker {
     currentDate = null;
     currentYear;
     currentMonth;
-    sdChange;
+    update;
     componentWillLoad() {
         this.setCalendar();
     }
@@ -4194,7 +4184,7 @@ class SdDatePicker {
         this.setCurrentDate(date);
         this.isOpen = false;
         this.value = date;
-        this.sdChange.emit?.(date);
+        this.update.emit?.(date);
     }
     isDisabledDate(date) {
         if (!this.selectable)
@@ -4215,7 +4205,7 @@ class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (hAsync(Host, { key: '6a1129da5526bd1d7b8f5f4f70b933beacc0d38a', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: 'a7b59caaf9150082bc70fb5e8d81740d47ce457f', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: 'f1420dfdf7283d71ab66f4c69f90f2e5bac25aab', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: 'c8bf0f440d8fa5eac3c539591eb783a0be61296c', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: 'd79caee7083cac735fe787f4ab15dd20ef19363b', class: "sd-date-picker__menu" }, hAsync("div", { key: '3189456edcb2bbf753bcfb659a6bed60aee6cfcb', class: "sd-date-picker__header" }, hAsync("div", { key: '739f9f37030efe12dc57d0a0ee16780cdb7ed0df', class: "year-nav" }, hAsync("button", { key: '5018b431579aefbebe47e64c9cc5e34aa31a7dbd', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '47981fbbd6f6245c543d92e4bebf0bc8e9440255', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '4bf48f6283187a6e641091ecf8ca6746bcc538f6', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '50eccfed91de1885cc49f71449eedc7160d78a4e', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: 'f220f5d65323ea11c054599a6a817346e864c156', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: 'ac4cadf1d92b7098a3c1830345acfa8680d9e104', class: "month-nav" }, hAsync("button", { key: '7afdfadccdf6d6ad07d035747b8e50a9e9d13af6', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: 'd382f9c32864b3d1f01aacd9a60d1a7799c49552', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '173659c7d34743aeaed7c7694f2db467edf8e7dc', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: 'cffad239c7896f21249ca66a91368050f51059c0', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '2e541317c81c3ef7ff7bc07d35619f78fbc09cd1', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: 'a8e9db7ed26405aeb61d49b827ca9c186766498c', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: '4d62d9bf10a1e208e0432fedc842519aeb472e9c', class: "sd-date-picker__body" }, [
+        return (hAsync(Host, { key: '4eccf6134d01546c9a47ddc3806233dd68195a8a', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: 'f1c015db2efd3801792266d7abb6391e2751c225', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '671f3d5166618228d2018477b4b9f1b3c13fa312', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: 'ca295d75db67328d189fefd16e3598f0a4b1b5fe', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: 'c9b0d87465936760ecf0453cfb5dad00247b7612', class: "sd-date-picker__menu" }, hAsync("div", { key: 'fac0f5d91634d394cecda4c1a149103e12e210c6', class: "sd-date-picker__header" }, hAsync("div", { key: '2f55a9ec84e74135a7c1f8c1925f557ad85e43a8', class: "year-nav" }, hAsync("button", { key: '811d3eab71e03c23214d3da2e829d62af73c8828', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '60bb560ea0aedc61a6ba7565b4f8daf95a33c9cf', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '976c256e704793d39e98a3e80ac0eb536a32b361', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '32ecf743b29434b1aeb9ef72d49a2254acd4e514', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: 'a70f679e27d00db53047b387fa9d16520cb0369f', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '1d5e17dd8b4c0081a2cda2991e8e0055f0c4d24d', class: "month-nav" }, hAsync("button", { key: '3fa7edc4eb796e298b12ea64ac1aa0d83bf6ddb1', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '3d6ed03bb28a1ccb711c97d31ff6d667ada8c410', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '5b3b1c05eb303ff7cb4a7ad599abd45747822589', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: '6718f389605d55f7c08934360171b61a28e2646d', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '8216564c82d61220f8d99bc9759a83994839a836', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: 'd3e9f16ec52b5ba82af3c5349966402c271ddb00', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: 'a2b2b56fefcecc67a06b5db9ae0a7767cca163f5', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
@@ -4247,12 +4237,12 @@ class SdDatePicker {
     }; }
 }
 
-const sdDateRangePickerCss = () => `.sd-date-range-picker.sc-sd-date-range-picker{width:fit-content;display:inline-block}.sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .date-icon.sc-sd-date-range-picker{cursor:not-allowed !important;color:#888888 !important}.sd-date-range-picker.sc-sd-date-range-picker .sd-input.sc-sd-date-range-picker .sd-input__container.sc-sd-date-range-picker{width:210px}.sd-date-range-picker.sc-sd-date-range-picker .sd-input.sc-sd-date-range-picker .sd-date-range-picker__input.sc-sd-date-range-picker{margin-left:17px !important}.sd-date-range-picker__menu.sc-sd-date-range-picker{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker .header-label.sc-sd-date-range-picker{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker{width:266px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.sc-sd-date-range-picker{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-prev.sc-sd-date-range-picker{left:5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-next.sc-sd-date-range-picker{right:5px;left:auto}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker .day.sc-sd-date-range-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-body.sc-sd-date-range-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .separator.sc-sd-date-range-picker{width:1px;background-color:#d8d8d8}`;
+const sdDateRangePickerCss = () => `sd-date-range-picker.sc-sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .date-icon.sc-sd-date-range-picker{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-field__control.sc-sd-date-range-picker{min-width:210px}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{margin-left:17px !important}.sd-date-range-picker__menu.sc-sd-date-range-picker{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker .header-label.sc-sd-date-range-picker{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker{width:266px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.sc-sd-date-range-picker{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-prev.sc-sd-date-range-picker{left:5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-next.sc-sd-date-range-picker{right:5px;left:auto}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker .day.sc-sd-date-range-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-body.sc-sd-date-range-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .separator.sc-sd-date-range-picker{width:1px;background-color:#d8d8d8}`;
 
 class SdDateRangePicker {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdChange = createEvent(this, "sdChange");
+        this.update = createEvent(this, "sdUpdate");
     }
     get el() { return getElement(this); }
     value = ['', ''];
@@ -4266,7 +4256,7 @@ class SdDateRangePicker {
     hoverDate = '';
     prevYear = Number(this.dateRange[0].split('-')[0]);
     prevMonth = Number(this.dateRange[0].split('-')[1]);
-    sdChange;
+    update;
     inputEl;
     dateUtil = useDatePicker();
     tempDateRange = ['', ''];
@@ -4274,7 +4264,7 @@ class SdDateRangePicker {
         this.syncFromValue(this.value);
     }
     onValueChange(newValue) {
-        this.syncFromValue(newValue);
+        this.dateRange = [...newValue];
     }
     syncFromValue(value) {
         this.dateRange = [...value];
@@ -4400,17 +4390,17 @@ class SdDateRangePicker {
         const newRange = [this.dateRange[0], selectedDate];
         this.setDateRange(newRange);
         this.value = newRange;
-        this.sdChange.emit?.(newRange);
+        this.update.emit?.(newRange);
     }
     handleDateHover(index, day) {
         const hoverDate = this.formatDate(index, day);
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (hAsync(Host, { key: '83bac4f3ca296d4384cd7133847a420cc964efe2', class: {
+        return (hAsync(Host, { key: '1ac991910d1613bf142520081212be747bbeafd4', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, hAsync("sd-input", { key: 'c2c0f2d34535b69e9b8e6a5b446a189aaf3868d9', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '0720129c8b59571f97c24f2a71d48a08c40314dc', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: 'd0f3142a8bba8ea231586111e1ccf931ee595d25', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: '072f7b56f1baea1a86916f3959e79462079fd6a8', class: "sd-date-range-picker__menu" }, hAsync("div", { key: '27bd45578453e74766e30be37ee990036c111a9d', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: 'fdcb11d94f83506a13b4b652a61e0a31630f2fa9', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: '2c0cd042d7d0544641410b077107c6cb0e1dc06b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: 'e1508e3c0630bbe960bccc6d520c128b28ad1b13', class: "header-label" }, this.prevYear), hAsync("button", { key: 'd1c985beec9ba680a72b64e20938a253b956c2cb', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '4b1ca637f060925886b20d5b6443b804501c60c3', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '42baa27309dd5edc1ab5713e42e52e8202882477', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, hAsync("sd-input", { key: 'a9088dd29923544f749e09678856376dc8606f7d', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '866ba94372f088fab53a01e0f13fc883356f6586', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '95ab0375cf56201bd285c522844d7fa387ae7fc9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: 'fc7bb357b66b7e70ce3351ab6861b778a00eb6d8', class: "sd-date-range-picker__menu" }, hAsync("div", { key: '852ff12fdb66c008b92d7c2e828a6a7a952e7afe', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: '980cb27f0c9e1629b5cf85060b47845db0e1f9b7', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: '7bc19cc051ff2af8fadf4eb7b389456fae03f060', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: '4836b382280bf948afa7ed85eeb024052fd86aab', class: "header-label" }, this.prevYear), hAsync("button", { key: 'fe7b4f50bb0515c8dd294274792dbbe3baca3af7', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '2f86e0b14db96213954cf17282bcc66ed0b80ded', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '0d63ed5aef2ede30dd88dd25b3314e4ec8ae79ce', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), hAsync("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), hAsync("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (hAsync("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onClick: () => this.handleDateClick(index, Number(day)), onMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }
@@ -4422,7 +4412,7 @@ class SdDateRangePicker {
         "$flags$": 770,
         "$tagName$": "sd-date-range-picker",
         "$members$": {
-            "value": [16],
+            "value": [1040],
             "label": [1],
             "selectable": [16],
             "maxRange": [2, "max-range"],
@@ -4440,12 +4430,175 @@ class SdDateRangePicker {
     }; }
 }
 
-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 sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:fit-content}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:var(--field-width, 200px);height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
+
+const FORM_PARENT_TAGS = [
+    'sd-select',
+    'sd-select-multiple',
+    'sd-select-multiple-group',
+    'sd-input',
+    'sd-textarea',
+];
+class SdField {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    name = '';
+    rules = [];
+    error = false;
+    disabled = false;
+    hovered = false;
+    focused = false;
+    status;
+    // props - label
+    label = '';
+    insideLabel = false;
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    errorMsg = '';
+    hostElement = null;
+    get value() {
+        return this.hostElement?.value ?? null;
+    }
+    get fieldStatus() {
+        let status = '';
+        if (!!this.disabled) {
+            status = 'disabled';
+            return `sd-field--${status}`;
+        }
+        if (!!this.focused) {
+            status = 'focus';
+            return `sd-field--${status}`;
+        }
+        if (!!this.hovered)
+            status = 'hover';
+        if (!!this.status)
+            status = this.status;
+        if (!!this.error)
+            status = 'error';
+        return status ? `sd-field--${status}` : '';
+    }
+    componentDidLoad() {
+        this.hostElement = this.findHostElement();
+        this.registerToForm();
+    }
+    disconnectedCallback() {
+        this.unregisterFromForm();
+    }
+    findHostElement() {
+        for (const tag of FORM_PARENT_TAGS) {
+            const parent = this.el.closest(tag);
+            if (parent && 'value' in parent) {
+                return parent;
+            }
+        }
+        return null;
+    }
+    registerToForm() {
+        if (!this.rules || this.rules.length === 0) {
+            console.warn('[sd-form-field] rules prop is required for sd-form integration');
+            return;
+        }
+        const formEl = this.el.closest('sd-form');
+        if (!formEl)
+            return;
+        formEl.componentOnReady().then(form => {
+            form.sdRegisterField(this);
+        });
+    }
+    unregisterFromForm() {
+        if (!this.name)
+            return;
+        const formEl = this.el.closest('sd-form');
+        formEl?.componentOnReady().then(form => {
+            form.sdUnregisterField(this.name);
+        });
+    }
+    async sdValidate() {
+        if (!this.rules || this.rules.length === 0)
+            return true;
+        for (const rule of this.rules) {
+            const result = rule(this.value ?? '');
+            if (result !== true) {
+                this.setError(true, result);
+                return false;
+            }
+        }
+        this.setError(false, '');
+        return true;
+    }
+    async sdReset() {
+        if (this.hostElement) {
+            this.hostElement.value = null;
+        }
+        this.setError(false, '');
+    }
+    async sdResetValidation() {
+        this.setError(false, '');
+    }
+    async sdFocus() {
+        this.hostElement?.focus?.();
+        this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+    setError(error, errorMsg) {
+        this.errorMsg = errorMsg;
+        if (this.hostElement) {
+            this.hostElement.error = error;
+        }
+    }
+    render() {
+        return (hAsync(Host, { key: '16609b3313318dfc4db917a32bd44e6e2cb2f4e7', class: {
+                'sd-field': true,
+                'sd-field--has-label': !!this.label,
+                'sd-field--has-label-inside': !!this.label && this.insideLabel,
+                [this.fieldStatus]: !!this.fieldStatus,
+            } }, hAsync("div", { key: '5c3056123cb54f8d6c26406ae76b13219d289f9c', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '786bcd6ec3651bb226013474fae112c592ec6890', class: {
+                'sd-field__control': true,
+                'sd-field__control--label-inside ': !!this.label && this.insideLabel,
+            } }, hAsync("slot", { key: '60ae2f97cc7225930df9d17958fe78d3dd8e01e3' }))), this.errorMsg && hAsync("div", { key: '4984f7e64c6c6611063c46b5c7ea21a0ae0b5343', class: "sd-field__error-message" }, this.errorMsg)));
+    }
+    renderLabel(label) {
+        if (!label)
+            return null;
+        return (hAsync("label", { class: { 'sd-field__label': true, 'sd-field__label-inside': this.insideLabel } }, this.useLabelRequired && (hAsync("sd-icon", { name: "star", size: "10", color: "brilliantblue_75", class: "sd-field__label__required-icon" })), hAsync("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (hAsync("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, hAsync("div", { slot: "content" }, this.labelTooltip)))));
+    }
+    static get style() { return sdFieldCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 772,
+        "$tagName$": "sd-field",
+        "$members$": {
+            "name": [1],
+            "rules": [16],
+            "error": [1028],
+            "disabled": [1028],
+            "hovered": [1028],
+            "focused": [1028],
+            "status": [1],
+            "label": [1],
+            "insideLabel": [4, "inside-label"],
+            "useLabelRequired": [4, "use-label-required"],
+            "labelTooltip": [1, "label-tooltip"],
+            "labelTooltipProps": [16],
+            "errorMsg": [32],
+            "sdValidate": [64],
+            "sdReset": [64],
+            "sdResetValidation": [64],
+            "sdFocus": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const sdFilePickerCss = () => `sd-file-picker{display:inline-flex}.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;-webkit-user-select:none;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;cursor:not-allowed !important}.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}`;
 
 class SdFilePicker {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdChange = createEvent(this, "sdChange");
+        this.update = createEvent(this, "sdUpdate");
     }
     get el() { return getElement(this); }
     value = null;
@@ -4460,7 +4613,7 @@ class SdFilePicker {
     showTooltip = false;
     fileInputRef;
     fileNamesRef;
-    sdChange;
+    update;
     valueChanged(newValue) {
         this.internalValue = newValue;
     }
@@ -4484,14 +4637,14 @@ class SdFilePicker {
             this.internalValue = fileArray[0];
         }
         this.value = this.internalValue;
-        this.sdChange?.emit(this.value);
+        this.update?.emit(this.value);
     };
     handleClear = (event) => {
         event.stopPropagation();
         const clearedValue = this.multiple ? [] : null;
         this.value = clearedValue;
         this.internalValue = clearedValue;
-        this.sdChange?.emit(clearedValue);
+        this.update?.emit(clearedValue);
         if (this.fileInputRef) {
             this.fileInputRef.value = '';
         }
@@ -4539,15 +4692,15 @@ class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (hAsync("div", { key: '2de0dd9880f816721fb36c3b01bbfdd15d0a4edd', class: {
+        return (hAsync("div", { key: 'dac7726e25ba3bf4afa0da022cb3e472a8891cec', 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) }, hAsync("input", { key: '8955ad7d1b2f854f21c274972c01092fb4ae8a25', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), hAsync("sd-icon", { key: 'bb376d3ee3264ae590f94d877f5f4d92eb7c2383', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: 'afbfc0ee30274b020e492e36fa7d75285fa908b2', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("input", { key: '1ab733ebf6d98ad792b7b6d06f562b014504a2fe', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), hAsync("sd-icon", { key: 'c82214c83107f01314de1eb380a421fc80af043f', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: '11f5bfca6d50fd4e78c902ddc52995b3ed399b21', 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 && (hAsync("sd-icon", { key: '181635bb288d34a3da7d1e368b8feafaddf4c9e7', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: '18adac8d177d2c5e88a35f50a23cd5ce9dbcbe3d', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (hAsync("sd-icon", { key: 'e429e10a285f12e16d1fa362e51903f12119bf3b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: '1a7c924eed094fdb070ed5711a9b09aeea8f3c56', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -4574,150 +4727,403 @@ class SdFilePicker {
     }; }
 }
 
-const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-flex;align-items:center}sd-guide .sd-guide{display:inline-flex}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #12b553}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
+const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 20px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;background:#07284a;color:#ffffff}.sd-floating-menu .sd-floating-menu__arrow{color:#07284a}.sd-floating-menu--default{background:#07284a;color:#ffffff}.sd-floating-menu--default .sd-floating-menu__arrow{color:#07284a}.sd-floating-menu--caution{background:#fce6e6;color:#fb4444}.sd-floating-menu--caution .sd-floating-menu__arrow{color:#fce6e6}.sd-floating-menu--notice{background:#ffead7;color:#ff6b00}.sd-floating-menu--notice .sd-floating-menu__arrow{color:#ffead7}.sd-floating-menu--accent{background:#e6f1ff;color:#0075ff}.sd-floating-menu--accent .sd-floating-menu__arrow{color:#e6f1ff}.sd-floating-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-weight:700;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-floating-menu__content .sd-floating-menu__buttons--1{justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--2{justify-content:space-between}.sd-floating-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}`;
 
-const GUIDE_LABEL = {
-    help: '활용 TIP',
-    pdf: 'PDF Guide',
-    youtube: 'Video Guide',
-    notion: '사용법 안내',
-    event: 'Event Button',
-};
-const GUIDE_ICON = {
-    help: {
-        name: 'helpOutline',
-        size: 20,
-        color: colors$1.green_75,
-    },
-    pdf: { name: 'pdf', size: 20, color: colors$1.red_75 },
-    youtube: { name: 'youtube', size: 20, color: colors$1.red_75 },
-    notion: { name: 'notion', size: 16, color: colors$1.black },
-    event: { name: 'event', size: 16, color: colors$1.brilliantblue_70 },
-};
-class SdGuide {
+class SdFloatingPopover {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.close = createEvent(this, "sdClose");
     }
     get el() { return getElement(this); }
-    type = 'help';
-    label = '';
-    message = '';
-    guideUrl = '';
-    popupTitle = '';
-    popupWidth;
-    popupShow = false;
-    guideRef;
-    handleClickGuide = () => {
-        if (this.type === 'help') {
-            this.popupShow = !this.popupShow;
+    to = 'body';
+    parentRef = null;
+    offset = [0, 0];
+    zIndex = 9999;
+    placement = 'bottom';
+    open = false;
+    close;
+    container;
+    wrapper;
+    rafId;
+    isInsideClick = false;
+    resizeObserver;
+    mutationObserver;
+    static ARROW_SIZE = 11.2;
+    componentDidLoad() {
+        this.container = this.resolveContainer();
+        this.createWrapper();
+        this.moveSlotContent();
+        // DOM이 완전히 렌더링된 후 위치 계산
+        requestAnimationFrame(() => {
+            this.updatePosition();
+            if (this.wrapper) {
+                this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시
+            }
+        });
+        this.observeParent();
+    }
+    componentDidRender() {
+        if (!this.wrapper)
             return;
+        // this.wrapper.style.display = this.open ? 'block' : 'none';
+        // if (this.open) this.updatePosition();
+        if (this.open) {
+            this.wrapper.style.display = 'block';
+            // RAF를 사용해서 다음 프레임에 위치 업데이트
+            requestAnimationFrame(() => {
+                this.updatePosition();
+                if (this.wrapper) {
+                    this.wrapper.style.visibility = 'visible';
+                }
+            });
         }
-        if (this.guideUrl) {
-            window.open(this.guideUrl, '_blank');
+        else {
+            this.wrapper.style.display = 'none';
+            this.wrapper.style.visibility = 'hidden';
         }
-    };
-    get guideClass() {
-        const classes = ['sd-guide', `sd-guide--${this.type}`];
-        if (this.popupShow)
-            classes.push('sd-guide--active');
-        return classes.join(' ');
     }
-    closeDropdown = () => {
-        this.popupShow = false;
-    };
-    render() {
-        const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (hAsync(Host, { key: '4b773c02856acdbe87d17794d2b09d03687cbfbf', style: {
-                '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, hAsync("sd-button", { key: '32f7288469230a3b9f63ee4518e12cd96dc954c5', 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 && (hAsync("sd-portal", { key: 'e2f58c514c9f8a7ddf3cbfa01e595476df40555f', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '8ecbb7b326c6f69661bc809efcbb9ebbd148e9e8', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: 'b778c386e9ae56bc55405e80fce8e8b15d92ab80', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: 'b4e6890b28ffab4ca79119ece1515f898a4b8bdb', class: "sd-guide__popup__close", icon: "close", color: colors$1.grey_65, size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: '8e4ee14399a891be25f4df846e2ff64a26a5bd76', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '4de462413f81c110c6bb53984d8a49d3716e1357', name: "helpOutline", size: 24, color: colors$1.green_65 }), hAsync("h3", { key: '2193a1b5759a97907264f9054bea9ad4042716bd', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '455f1c2e9cfb7752d45937d21d2d38e182bfb6ca', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+    disconnectedCallback() {
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.unobserveParent();
+        this.wrapper?.remove();
     }
-    // 현재 2depth까지만 스타일 적용
-    renderListItem(message, depth = 0) {
-        const listItems = [];
-        if (Array.isArray(message)) {
-            const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
-            listItems.push(...depthMsg.flat());
-        }
-        else {
-            listItems.push(this.renderLi(message, depth));
-        }
-        return listItems;
+    resolveContainer() {
+        const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
+        return el instanceof HTMLElement ? el : document.body;
     }
-    renderLi = (message, depth) => {
-        return (hAsync("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, hAsync("p", { innerHTML: message })));
-    };
-    static get style() { return sdGuideCss(); }
-    static get cmpMeta() { return {
-        "$flags$": 768,
-        "$tagName$": "sd-guide",
-        "$members$": {
-            "type": [1],
-            "label": [1],
-            "message": [1],
-            "guideUrl": [1, "guide-url"],
-            "popupTitle": [1, "popup-title"],
-            "popupWidth": [2, "popup-width"],
-            "popupShow": [32]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const Add8 = (props) => (hAsync("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("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" })));
-
-const Add10 = (props) => (hAsync("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M5 0.766602C5.22088 0.766602 5.40034 0.946123 5.40039 1.16699V4.59961H8.83398C9.05461 4.59978 9.23317 4.77939 9.2334 5C9.2334 5.22081 9.05475 5.40022 8.83398 5.40039H5.40039V8.83398C5.40021 9.05475 5.22081 9.2334 5 9.2334C4.77939 9.23317 4.59979 9.05461 4.59961 8.83398V5.40039H1.16699C0.946123 5.40034 0.766602 5.22088 0.766602 5C0.766833 4.77931 0.946265 4.59966 1.16699 4.59961H4.59961V1.16699C4.59966 0.946265 4.77931 0.766833 5 0.766602Z", fill: "currentColor" })));
-
-const Add12 = (props) => (hAsync("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M6.00049 0.899902C6.27638 0.900166 6.50044 1.12396 6.50049 1.3999V5.50049H10.6001C10.8762 5.50059 11.1001 5.72441 11.1001 6.00049C11.0998 6.27634 10.876 6.50038 10.6001 6.50049H6.49951V10.6001C6.49941 10.8762 6.27559 11.1001 5.99951 11.1001C5.72366 11.0998 5.49962 10.876 5.49951 10.6001V6.50049H1.3999C1.12396 6.50044 0.900166 6.27638 0.899902 6.00049C0.899902 5.72438 1.1238 5.50054 1.3999 5.50049H5.50049V1.3999C5.50054 1.1238 5.72438 0.899902 6.00049 0.899902Z", fill: "currentColor" })));
-
-const Add16 = (props) => (hAsync("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M8.00031 1.36655C8.27627 1.36671 8.50024 1.59056 8.50031 1.86655V7.50034H14.1331C14.4093 7.50034 14.6331 7.72419 14.6331 8.00034C14.6329 8.27632 14.4091 8.50034 14.1331 8.50034H8.50031V14.1331L8.49054 14.2337C8.44406 14.4616 8.24191 14.633 8.00031 14.6331C7.75857 14.6331 7.55657 14.4617 7.51007 14.2337L7.50031 14.1331V8.50034H1.86652C1.59055 8.50026 1.3667 8.27628 1.36652 8.00034C1.36652 7.72424 1.59044 7.50041 1.86652 7.50034H7.50031V1.86655C7.50037 1.59046 7.7242 1.36655 8.00031 1.36655Z", fill: "currentColor" })));
-
-const Add20 = (props) => (hAsync("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M10.0005 1.7085C10.3455 1.70859 10.6254 1.98845 10.6255 2.3335V9.37549H17.6665C18.0117 9.37549 18.2915 9.65531 18.2915 10.0005C18.2914 10.3456 18.0116 10.6255 17.6665 10.6255H10.6255V17.6665C10.6255 18.0116 10.3456 18.2914 10.0005 18.2915C9.65531 18.2915 9.37549 18.0117 9.37549 17.6665V10.6255H2.3335C1.98843 10.6254 1.70858 10.3456 1.7085 10.0005C1.7085 9.65535 1.98838 9.37556 2.3335 9.37549H9.37549V2.3335C9.37558 1.98839 9.65536 1.7085 10.0005 1.7085Z", fill: "currentColor" })));
-
-const Add24 = (props) => (hAsync("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M12 2.0498C12.4142 2.0498 12.7499 2.38568 12.75 2.7998V11.25H21.2002L21.2764 11.2539C21.6546 11.2923 21.9502 11.6116 21.9502 12C21.9502 12.3884 21.6546 12.7077 21.2764 12.7461L21.2002 12.75H12.75V21.2002L12.7461 21.2764C12.7077 21.6546 12.3884 21.9502 12 21.9502C11.6116 21.9502 11.2923 21.6546 11.2539 21.2764L11.25 21.2002V12.75H2.7998C2.38568 12.7499 2.0498 12.4142 2.0498 12C2.0498 11.5858 2.38568 11.2501 2.7998 11.25H11.25V2.7998C11.2501 2.38568 11.5858 2.0498 12 2.0498Z", fill: "currentColor" })));
-
-const add = {
-    8: Add8,
-    10: Add10,
-    12: Add12,
-    16: Add16,
-    20: Add20,
-    24: Add24,
-};
-
-var Add = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  add: add
-});
-
-const Alert8 = (props) => (hAsync("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M4.13342 1.06958C4.55552 0.823815 5.0854 1.12799 5.08557 1.61646V6.38306C5.08552 6.85758 4.58317 7.16334 4.16174 6.94556L1.95471 5.802H1.59143C1.05758 5.80198 0.624644 5.36906 0.624634 4.83521V3.31079C0.624851 2.77711 1.05771 2.34402 1.59143 2.34399H1.9469L4.13342 1.06958ZM4.43616 1.58813L2.32776 2.81665V5.3186L4.43713 6.41235C4.44445 6.41611 4.44986 6.41646 4.45374 6.41626C4.45842 6.41599 4.46474 6.41478 4.47034 6.41138C4.47568 6.40799 4.47975 6.40356 4.48206 6.39966C4.48397 6.3963 4.48595 6.39114 4.48596 6.38306V1.61646C4.48593 1.60803 4.48396 1.60309 4.48206 1.59985C4.47962 1.59582 4.47533 1.59063 4.46936 1.58716C4.46358 1.58386 4.45739 1.58244 4.45276 1.58228C4.449 1.58222 4.44356 1.58387 4.43616 1.58813ZM6.20667 2.35278C6.3255 2.23733 6.51751 2.23733 6.63635 2.35278C7.62194 3.3103 7.62194 4.86304 6.63635 5.82056C6.51762 5.93512 6.32529 5.93528 6.20667 5.82056C6.08798 5.70526 6.08732 5.5171 6.20569 5.40161C6.95361 4.675 6.95458 3.49639 6.20667 2.76978C6.08812 2.65439 6.08815 2.46819 6.20667 2.35278ZM1.59143 2.9436C1.38908 2.94363 1.22446 3.10848 1.22424 3.31079V4.83521C1.22425 5.03769 1.38895 5.20139 1.59143 5.20142H1.72717V2.9436H1.59143ZM5.47131 3.06665C5.59007 2.9514 5.78218 2.95151 5.901 3.06665C6.48041 3.62955 6.48041 4.54281 5.901 5.10571C5.78224 5.22052 5.59 5.22063 5.47131 5.10571C5.35257 4.99035 5.35179 4.80224 5.47034 4.68677C5.81204 4.35477 5.81304 3.81661 5.47131 3.48462C5.35248 3.36917 5.35248 3.1821 5.47131 3.06665Z", fill: "currentColor" })));
-
-const Alert10 = (props) => (hAsync("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M5.15332 1.31549C5.69776 0.998135 6.38184 1.39136 6.38184 2.02155V7.97955C6.38159 8.59158 5.73295 8.98572 5.18945 8.70416L2.4375 7.27838H1.98828C1.30743 7.27813 0.755012 6.72587 0.754883 6.04498V4.13873C0.755059 3.45789 1.30745 2.90559 1.98828 2.90533H2.42676L5.15332 1.31549ZM5.55664 2.0069L2.93457 3.53522V6.63483L5.55762 7.9942C5.5603 7.99557 5.56261 7.99599 5.56348 7.99615H5.56543C5.56706 7.99602 5.5699 7.99518 5.57324 7.99323C5.57675 7.99109 5.57916 7.9888 5.58008 7.98737L5.58105 7.98541C5.58124 7.98473 5.582 7.98284 5.58203 7.97955V2.02155C5.58203 2.01775 5.58124 2.01537 5.58105 2.01471L5.58008 2.01276C5.57917 2.01139 5.57697 2.00905 5.57324 2.0069C5.56932 2.00468 5.56598 2.00399 5.56445 2.00397H5.5625C5.56169 2.00424 5.55963 2.00516 5.55664 2.0069ZM7.74023 2.92291C7.8987 2.76916 8.15607 2.76904 8.31445 2.92291C9.5561 4.12941 9.5552 6.0856 8.31348 7.29205C8.15507 7.44575 7.89864 7.44575 7.74023 7.29205C7.58204 7.13816 7.58203 6.88832 7.74023 6.73444C8.66473 5.83579 8.66497 4.37903 7.74023 3.48053C7.58178 3.32659 7.58178 3.07685 7.74023 2.92291ZM6.82031 3.81549C6.97864 3.66183 7.2361 3.66199 7.39453 3.81549C8.12864 4.52868 8.12853 5.68622 7.39453 6.39948C7.23609 6.55303 6.97865 6.55319 6.82031 6.39948C6.66202 6.24553 6.66289 5.99574 6.82129 5.84186C7.23838 5.43647 7.23751 4.7794 6.82031 4.37408C6.66188 4.22015 6.66187 3.96942 6.82031 3.81549ZM1.98828 3.70612C1.74928 3.70637 1.55584 3.89972 1.55566 4.13873V6.04498C1.55579 6.28404 1.74925 6.47832 1.98828 6.47858H2.13379V3.70612H1.98828Z", fill: "currentColor" })));
-
-const Alert12 = (props) => (hAsync("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M6.17505 1.56036C6.84139 1.17286 7.67757 1.65366 7.67798 2.42462V9.57404C7.67798 10.3237 6.88364 10.8075 6.21802 10.4627L2.92017 8.75372H2.38599C1.55767 8.75366 0.886079 8.08203 0.885986 7.25372V4.96661C0.885986 4.13823 1.55762 3.46668 2.38599 3.46661H2.90454L6.17505 1.56036ZM3.54126 4.25275V7.94806L6.67798 9.57404V2.42462L3.54126 4.25275ZM9.27368 3.49396C9.47175 3.30157 9.79243 3.30155 9.99048 3.49396C11.4885 4.94946 11.4886 7.309 9.99048 8.76447C9.79248 8.95675 9.47174 8.95667 9.27368 8.76447C9.07564 8.57207 9.0757 8.2606 9.27368 8.06818C10.3757 6.99754 10.3756 5.26092 9.27368 4.19025C9.07562 3.99783 9.07562 3.68638 9.27368 3.49396ZM8.17017 4.56525C8.36814 4.37301 8.68891 4.37313 8.88696 4.56525C9.77588 5.42884 9.77588 6.82959 8.88696 7.69318C8.68895 7.88509 8.3681 7.88521 8.17017 7.69318C7.97213 7.50078 7.97219 7.18834 8.17017 6.99591C8.66279 6.51721 8.66274 5.74124 8.17017 5.26251C7.9721 5.07009 7.9721 4.75767 8.17017 4.56525ZM2.38599 4.46661C2.1099 4.46668 1.88599 4.69051 1.88599 4.96661V7.25372C1.88608 7.52975 2.10996 7.75366 2.38599 7.75372H2.54126V4.46661H2.38599Z", fill: "currentColor" })));
-
-const Alert16 = (props) => (hAsync("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M8.31763 2.22534C9.09526 1.77243 10.0714 2.33319 10.0715 3.23315V12.7664C10.0714 13.6408 9.14487 14.2045 8.36841 13.8025L3.93481 11.5046H3.18188C2.16974 11.5044 1.3491 10.6838 1.34888 9.67163V6.62183C1.34905 5.60963 2.16971 4.7891 3.18188 4.78882H3.91919L8.31763 2.22534ZM9.07153 3.23315C9.07136 3.10485 8.93251 3.02531 8.82153 3.0896L4.55493 5.57593V10.699L8.82837 12.9138C8.9392 12.971 9.07142 12.8911 9.07153 12.7664V3.23315ZM12.4846 4.77417C12.6827 4.58175 13.0043 4.58175 13.2024 4.77417C15.1337 6.65059 15.1335 9.69257 13.2024 11.5691C13.0043 11.7615 12.6827 11.7615 12.4846 11.5691C12.2871 11.3767 12.2869 11.0651 12.4846 10.8728C14.0199 9.38109 14.02 6.96212 12.4846 5.47046C12.287 5.27807 12.2868 4.96649 12.4846 4.77417ZM3.18188 5.78882C2.722 5.7891 2.34905 6.16191 2.34888 6.62183V9.67163C2.3491 10.1315 2.72203 10.5044 3.18188 10.5046H3.55493V5.78882H3.18188ZM11.0139 6.20288C11.212 6.01053 11.5337 6.01048 11.7317 6.20288C12.8507 7.29009 12.8505 9.05307 11.7317 10.1404C11.5336 10.3328 11.212 10.3328 11.0139 10.1404C10.816 9.94795 10.8159 9.63548 11.0139 9.44312C11.7367 8.74063 11.7368 7.60252 11.0139 6.90015C10.8159 6.70773 10.8159 6.3953 11.0139 6.20288Z", fill: "currentColor" })));
-
-const Alert20 = (props) => (hAsync("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M10.3964 2.78281C11.3685 2.21612 12.5886 2.91733 12.5887 4.04257V15.9586C12.5885 17.0517 11.4304 17.7564 10.4598 17.2535L4.91785 14.3814H3.97839C2.71289 14.3813 1.68643 13.355 1.6864 12.0894V8.27792C1.6865 7.01245 2.71293 5.98609 3.97839 5.98593H4.90222L10.3964 2.78281ZM11.3387 4.04257C11.3386 3.88194 11.1651 3.78209 11.0262 3.86288L5.69421 6.97031V13.3766L11.035 16.1441C11.1736 16.2158 11.3385 16.1145 11.3387 15.9586V4.04257ZM15.6063 5.96835C15.8539 5.72783 16.2552 5.72785 16.5028 5.96835C18.9171 8.31389 18.9168 12.1158 16.5028 14.4615C16.2552 14.702 15.8539 14.702 15.6063 14.4615C15.3595 14.221 15.3593 13.8317 15.6063 13.5914C17.5253 11.7268 17.5255 8.70397 15.6063 6.83945C15.3588 6.59898 15.3589 6.20889 15.6063 5.96835ZM3.97839 7.23593C3.40329 7.23609 2.9365 7.7028 2.9364 8.27792V12.0894C2.93643 12.6646 3.40324 13.1313 3.97839 13.1314H4.44421V7.23593H3.97839ZM13.7675 7.75449C14.015 7.51396 14.4173 7.51396 14.6649 7.75449C16.0634 9.11341 16.0631 11.3163 14.6649 12.6754C14.4173 12.9159 14.015 12.9159 13.7675 12.6754C13.5206 12.4348 13.5201 12.0446 13.7675 11.8043C14.671 10.9262 14.6712 9.50357 13.7675 8.62558C13.5201 8.38512 13.5202 7.99498 13.7675 7.75449Z", fill: "currentColor" })));
-
-const Alert24 = (props) => (hAsync("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M12.4755 3.33801C13.642 2.65803 15.107 3.49956 15.1073 4.84973V19.1495C15.1071 20.4614 13.7164 21.3068 12.5516 20.7032L5.90027 17.257H4.77332C3.25468 17.2568 2.02338 16.0256 2.02332 14.507V9.93274C2.02332 8.41404 3.25464 7.18287 4.77332 7.18274H5.87878L12.4755 3.33801ZM13.6073 4.84973C13.607 4.65713 13.3978 4.53709 13.2313 4.63391L6.83289 8.36243V16.0499L13.2421 19.3712C13.4084 19.4573 13.6071 19.3368 13.6073 19.1495V4.84973ZM18.7274 7.16125C19.0245 6.87262 19.5065 6.87262 19.8036 7.16125C22.7006 9.976 22.7006 14.5399 19.8036 17.3546C19.5065 17.643 19.0245 17.643 18.7274 17.3546C18.4304 17.066 18.4305 16.5983 18.7274 16.3097C21.0306 14.0721 21.0306 10.4437 18.7274 8.20618C18.4304 7.91755 18.4303 7.44987 18.7274 7.16125ZM4.77332 8.68274C4.08307 8.68287 3.52332 9.24247 3.52332 9.93274V14.507C3.52338 15.1972 4.08311 15.7568 4.77332 15.757H5.33289V8.68274H4.77332ZM16.5214 9.30481C16.8184 9.01633 17.2995 9.01633 17.5966 9.30481C19.2754 10.9358 19.2754 13.5801 17.5966 15.2111C17.2995 15.4994 16.8184 15.4994 16.5214 15.2111C16.2243 14.9225 16.2244 14.4548 16.5214 14.1661C17.6058 13.1124 17.6058 11.4034 16.5214 10.3497C16.2243 10.0611 16.2243 9.59344 16.5214 9.30481Z", fill: "currentColor" })));
-
-const alert = {
-    8: Alert8,
-    10: Alert10,
-    12: Alert12,
-    16: Alert16,
-    20: Alert20,
-    24: Alert24,
-};
-
-var Alert = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  alert: alert
-});
-
-const AlignKorean8 = (props) => (hAsync("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M2.58368 3.7832C2.74921 3.78338 2.88348 3.91743 2.88348 4.08301V4.44922H3.58368C3.74922 4.44939 3.88348 4.58442 3.88348 4.75C3.8833 4.91542 3.7491 5.04963 3.58368 5.0498H3.23993C3.52292 5.19701 3.71649 5.49196 3.71649 5.83301C3.71649 6.32075 3.32138 6.71662 2.83368 6.7168H2.24969C1.76201 6.71661 1.36689 6.32074 1.36688 5.83301C1.36688 5.49197 1.56046 5.19701 1.84344 5.0498H1.41669C1.25112 5.04979 1.11706 4.91552 1.11688 4.75C1.11688 4.58432 1.25101 4.44923 1.41669 4.44922H2.2829V4.08301C2.2829 3.91733 2.418 3.78321 2.58368 3.7832ZM5.74969 1.2832C5.91538 1.2832 6.05048 1.41732 6.05048 1.58301V5.6377L6.36102 5.29492C6.47228 5.17226 6.66211 5.16321 6.78485 5.27441C6.90753 5.38567 6.91657 5.5755 6.80536 5.69824L5.97235 6.61816C5.91549 6.68079 5.83429 6.7168 5.74969 6.7168C5.66529 6.7167 5.58479 6.68062 5.52802 6.61816L4.69403 5.69824C4.58284 5.57546 4.59276 5.38565 4.71552 5.27441C4.8383 5.16324 5.02812 5.17217 5.13934 5.29492L5.44989 5.6377V1.58301C5.44989 1.41744 5.58417 1.28339 5.74969 1.2832ZM2.24969 5.5498C2.09337 5.54999 1.96649 5.67664 1.96649 5.83301C1.9665 5.98937 2.09338 6.11602 2.24969 6.11621H2.83368C2.99001 6.11603 3.11688 5.98938 3.11688 5.83301C3.11688 5.67664 2.99001 5.54998 2.83368 5.5498H2.24969ZM3.08368 1.2832C3.4332 1.28338 3.71632 1.56649 3.71649 1.91602V3.41602C3.71649 3.5817 3.58237 3.7168 3.41669 3.7168C3.25101 3.71679 3.11689 3.58169 3.11688 3.41602V1.91602C3.11671 1.89786 3.10183 1.88299 3.08368 1.88281H1.41669C1.25101 1.8828 1.11689 1.74868 1.11688 1.58301C1.11688 1.41733 1.25101 1.28321 1.41669 1.2832H3.08368Z", fill: "currentColor" })));
+    createWrapper() {
+        this.wrapper = document.createElement('div');
+        Object.assign(this.wrapper.style, {
+            position: 'absolute',
+            zIndex: this.zIndex.toString(),
+            transition: 'opacity 0.4s',
+            top: '-9999px',
+            left: '-9999px',
+        });
+        this.container.appendChild(this.wrapper);
+    }
+    moveSlotContent() {
+        if (!this.wrapper)
+            return;
+        const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);
+        nodes.forEach(n => this.wrapper.appendChild(n));
+    }
+    // 위치 갱신 (scroll / resize)
+    updatePosition() {
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.rafId = requestAnimationFrame(() => {
+            if (!this.parentRef || !this.wrapper)
+                return;
+            const rect = this.parentRef.getBoundingClientRect();
+            if (!rect.width && !rect.height)
+                return; // 요소가 보이지 않는 경우
+            const [offsetX, offsetY] = this.offset;
+            const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;
+            let top = 0;
+            let left = 0;
+            switch (this.placement) {
+                case 'top':
+                    top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
+                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    break;
+                case 'bottom':
+                    top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
+                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    break;
+                case 'left':
+                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
+                    break;
+                case 'right':
+                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
+                    break;
+            }
+            Object.assign(this.wrapper.style, {
+                top: `${top}px`,
+                left: `${left}px`,
+            });
+        });
+    }
+    // parentRef의 이동 / 크기변경 감지
+    observeParent() {
+        if (!this.parentRef)
+            return;
+        this.resizeObserver = new ResizeObserver(() => this.updatePosition());
+        this.resizeObserver.observe(this.parentRef);
+        this.mutationObserver = new MutationObserver(() => this.updatePosition());
+        this.mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    unobserveParent() {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+    }
+    // 외부 클릭 감지
+    handleMouseDown(e) {
+        this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
+            (this.parentRef && this.parentRef.contains(e.target)));
+    }
+    handleWindowClick(e) {
+        if (this.isInsideClick) {
+            this.isInsideClick = false;
+            return;
+        }
+        if (this.wrapper?.contains(e.target))
+            return;
+        this.close.emit();
+    }
+    render() {
+        return hAsync("slot", { key: 'f2000891d7d3bd71982f591bf953d1421f67fb5e' });
+    }
+    static get style() { return sdFloatingPortalCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 772,
+        "$tagName$": "sd-floating-portal",
+        "$members$": {
+            "to": [1],
+            "parentRef": [16],
+            "offset": [16],
+            "zIndex": [2, "z-index"],
+            "placement": [1],
+            "open": [4]
+        },
+        "$listeners$": [[9, "scroll", "updatePosition"], [9, "resize", "updatePosition"], [9, "mousedown", "handleMouseDown"], [8, "click", "handleWindowClick"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+class SdForm {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.submitSuccess = createEvent(this, "sdSubmit");
+        this.submitFail = createEvent(this, "sdValidationError");
+    }
+    fields = [];
+    submitSuccess;
+    submitFail;
+    sortFieldsByDomOrder() {
+        this.fields.sort((a, b) => {
+            const elA = a.el;
+            const elB = b.el;
+            if (!elA || !elB)
+                return 0;
+            return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+        });
+    }
+    async sdRegisterField(field) {
+        if (!field.name) {
+            console.warn('[sd-form] field.name is required');
+            return;
+        }
+        if (this.fields.find(f => f.name === field.name))
+            return;
+        this.fields.push(field);
+        this.sortFieldsByDomOrder();
+    }
+    async sdUnregisterField(name) {
+        this.fields = this.fields.filter(f => f.name !== name);
+    }
+    async sdValidate() {
+        const fieldValidationResults = await Promise.all(this.fields.map(async (field) => {
+            const valid = await field.sdValidate();
+            return {
+                field,
+                valid,
+            };
+        }));
+        const isInValid = fieldValidationResults.find(result => {
+            return !result.valid;
+        });
+        if (isInValid) {
+            isInValid.field.sdFocus();
+            isInValid.field.sdScrollIntoView?.();
+        }
+        return !isInValid;
+    }
+    async sdReset() {
+        this.fields.forEach(f => f.sdReset());
+    }
+    async sdResetValidation() {
+        this.fields.forEach(f => f.sdResetValidation());
+    }
+    async onSubmit(e) {
+        e.preventDefault();
+        const valid = await this.sdValidate();
+        if (!valid) {
+            this.submitFail.emit();
+            return;
+        }
+        this.submitSuccess.emit();
+    }
+    render() {
+        return (hAsync("form", { key: '90203497cd0cb8910f35fd6ac91cb472f89a452f', onSubmit: e => this.onSubmit(e) }, hAsync("slot", { key: '8776a3ecf66efffe1f01288e1e18b575d1778ef3' })));
+    }
+    static get cmpMeta() { return {
+        "$flags$": 260,
+        "$tagName$": "sd-form",
+        "$members$": {
+            "sdRegisterField": [64],
+            "sdUnregisterField": [64],
+            "sdValidate": [64],
+            "sdReset": [64],
+            "sdResetValidation": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-flex;align-items:center}sd-guide .sd-guide{display:inline-flex}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #00973c}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
+
+const GUIDE_LABEL = {
+    help: '활용 TIP',
+    pdf: 'PDF Guide',
+    youtube: 'Video Guide',
+    notion: '사용법 안내',
+    event: 'Event Button',
+};
+const GUIDE_ICON = {
+    help: {
+        name: 'helpOutline',
+        size: 20,
+        color: 'green_75',
+    },
+    pdf: { name: 'pdf', size: 20, color: 'red_75' },
+    youtube: { name: 'youtube', size: 20, color: 'red_75' },
+    notion: { name: 'notion', size: 16, color: 'black' },
+    event: { name: 'event', size: 16, color: 'brilliantblue_70' },
+};
+class SdGuide {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    type = 'help';
+    label = '';
+    message = '';
+    guideUrl = '';
+    popupTitle = '';
+    popupWidth;
+    popupShow = false;
+    guideRef;
+    handleClickGuide = () => {
+        if (this.type === 'help') {
+            this.popupShow = !this.popupShow;
+            return;
+        }
+        if (this.guideUrl) {
+            window.open(this.guideUrl, '_blank');
+        }
+    };
+    get guideClass() {
+        const classes = ['sd-guide', `sd-guide--${this.type}`];
+        if (this.popupShow)
+            classes.push('sd-guide--active');
+        return classes.join(' ');
+    }
+    closeDropdown = () => {
+        this.popupShow = false;
+    };
+    render() {
+        const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
+        return (hAsync(Host, { key: 'a7a284528f1bf4c24cbf4c645c600bfdb8ac3397', style: {
+                '--sd-guide-color': GUIDE_ICON[this.type].color,
+            } }, hAsync("sd-button", { key: '7a31bb752942f693d77e687b7ee433772f0fb968', 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, onClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: 'b90a2c0594d2b9a09aad39954400fc648b14b776', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '5f74f1b359de72ce3224a6d85971dc599e9eca11', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: 'c7f0fea72dec238904e6ec696f0de8d7b4d99139', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: '91d375b51051cc6689d57a22615ece587592d4cd', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onClick: this.closeDropdown }), hAsync("div", { key: '182d31b38da2082c18ed6d25d6879e8e5d5fc839', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '21a45f953f436528e8a5a0d08af988cb7cbbbf0c', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: 'f6f24e6584b585fb6719327fed01bff87df8b9b9', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '87fc85b3bb2bdd0e902bd7dc81cd6e36447d5241', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+    }
+    // 현재 2depth까지만 스타일 적용
+    renderListItem(message, depth = 0) {
+        const listItems = [];
+        if (Array.isArray(message)) {
+            const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
+            listItems.push(...depthMsg.flat());
+        }
+        else {
+            listItems.push(this.renderLi(message, depth));
+        }
+        return listItems;
+    }
+    renderLi = (message, depth) => {
+        return (hAsync("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, hAsync("p", { innerHTML: message })));
+    };
+    static get style() { return sdGuideCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 768,
+        "$tagName$": "sd-guide",
+        "$members$": {
+            "type": [1],
+            "label": [1],
+            "message": [1],
+            "guideUrl": [1, "guide-url"],
+            "popupTitle": [1, "popup-title"],
+            "popupWidth": [2, "popup-width"],
+            "popupShow": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const Add8 = (props) => (hAsync("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("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" })));
+
+const Add10 = (props) => (hAsync("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M5 0.766602C5.22088 0.766602 5.40034 0.946123 5.40039 1.16699V4.59961H8.83398C9.05461 4.59978 9.23317 4.77939 9.2334 5C9.2334 5.22081 9.05475 5.40022 8.83398 5.40039H5.40039V8.83398C5.40021 9.05475 5.22081 9.2334 5 9.2334C4.77939 9.23317 4.59979 9.05461 4.59961 8.83398V5.40039H1.16699C0.946123 5.40034 0.766602 5.22088 0.766602 5C0.766833 4.77931 0.946265 4.59966 1.16699 4.59961H4.59961V1.16699C4.59966 0.946265 4.77931 0.766833 5 0.766602Z", fill: "currentColor" })));
+
+const Add12 = (props) => (hAsync("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M6.00049 0.899902C6.27638 0.900166 6.50044 1.12396 6.50049 1.3999V5.50049H10.6001C10.8762 5.50059 11.1001 5.72441 11.1001 6.00049C11.0998 6.27634 10.876 6.50038 10.6001 6.50049H6.49951V10.6001C6.49941 10.8762 6.27559 11.1001 5.99951 11.1001C5.72366 11.0998 5.49962 10.876 5.49951 10.6001V6.50049H1.3999C1.12396 6.50044 0.900166 6.27638 0.899902 6.00049C0.899902 5.72438 1.1238 5.50054 1.3999 5.50049H5.50049V1.3999C5.50054 1.1238 5.72438 0.899902 6.00049 0.899902Z", fill: "currentColor" })));
+
+const Add16 = (props) => (hAsync("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M8.00031 1.36655C8.27627 1.36671 8.50024 1.59056 8.50031 1.86655V7.50034H14.1331C14.4093 7.50034 14.6331 7.72419 14.6331 8.00034C14.6329 8.27632 14.4091 8.50034 14.1331 8.50034H8.50031V14.1331L8.49054 14.2337C8.44406 14.4616 8.24191 14.633 8.00031 14.6331C7.75857 14.6331 7.55657 14.4617 7.51007 14.2337L7.50031 14.1331V8.50034H1.86652C1.59055 8.50026 1.3667 8.27628 1.36652 8.00034C1.36652 7.72424 1.59044 7.50041 1.86652 7.50034H7.50031V1.86655C7.50037 1.59046 7.7242 1.36655 8.00031 1.36655Z", fill: "currentColor" })));
+
+const Add20 = (props) => (hAsync("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M10.0005 1.7085C10.3455 1.70859 10.6254 1.98845 10.6255 2.3335V9.37549H17.6665C18.0117 9.37549 18.2915 9.65531 18.2915 10.0005C18.2914 10.3456 18.0116 10.6255 17.6665 10.6255H10.6255V17.6665C10.6255 18.0116 10.3456 18.2914 10.0005 18.2915C9.65531 18.2915 9.37549 18.0117 9.37549 17.6665V10.6255H2.3335C1.98843 10.6254 1.70858 10.3456 1.7085 10.0005C1.7085 9.65535 1.98838 9.37556 2.3335 9.37549H9.37549V2.3335C9.37558 1.98839 9.65536 1.7085 10.0005 1.7085Z", fill: "currentColor" })));
+
+const Add24 = (props) => (hAsync("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M12 2.0498C12.4142 2.0498 12.7499 2.38568 12.75 2.7998V11.25H21.2002L21.2764 11.2539C21.6546 11.2923 21.9502 11.6116 21.9502 12C21.9502 12.3884 21.6546 12.7077 21.2764 12.7461L21.2002 12.75H12.75V21.2002L12.7461 21.2764C12.7077 21.6546 12.3884 21.9502 12 21.9502C11.6116 21.9502 11.2923 21.6546 11.2539 21.2764L11.25 21.2002V12.75H2.7998C2.38568 12.7499 2.0498 12.4142 2.0498 12C2.0498 11.5858 2.38568 11.2501 2.7998 11.25H11.25V2.7998C11.2501 2.38568 11.5858 2.0498 12 2.0498Z", fill: "currentColor" })));
+
+const add = {
+    8: Add8,
+    10: Add10,
+    12: Add12,
+    16: Add16,
+    20: Add20,
+    24: Add24,
+};
+
+var Add = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  add: add
+});
+
+const Alert8 = (props) => (hAsync("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M4.13342 1.06958C4.55552 0.823815 5.0854 1.12799 5.08557 1.61646V6.38306C5.08552 6.85758 4.58317 7.16334 4.16174 6.94556L1.95471 5.802H1.59143C1.05758 5.80198 0.624644 5.36906 0.624634 4.83521V3.31079C0.624851 2.77711 1.05771 2.34402 1.59143 2.34399H1.9469L4.13342 1.06958ZM4.43616 1.58813L2.32776 2.81665V5.3186L4.43713 6.41235C4.44445 6.41611 4.44986 6.41646 4.45374 6.41626C4.45842 6.41599 4.46474 6.41478 4.47034 6.41138C4.47568 6.40799 4.47975 6.40356 4.48206 6.39966C4.48397 6.3963 4.48595 6.39114 4.48596 6.38306V1.61646C4.48593 1.60803 4.48396 1.60309 4.48206 1.59985C4.47962 1.59582 4.47533 1.59063 4.46936 1.58716C4.46358 1.58386 4.45739 1.58244 4.45276 1.58228C4.449 1.58222 4.44356 1.58387 4.43616 1.58813ZM6.20667 2.35278C6.3255 2.23733 6.51751 2.23733 6.63635 2.35278C7.62194 3.3103 7.62194 4.86304 6.63635 5.82056C6.51762 5.93512 6.32529 5.93528 6.20667 5.82056C6.08798 5.70526 6.08732 5.5171 6.20569 5.40161C6.95361 4.675 6.95458 3.49639 6.20667 2.76978C6.08812 2.65439 6.08815 2.46819 6.20667 2.35278ZM1.59143 2.9436C1.38908 2.94363 1.22446 3.10848 1.22424 3.31079V4.83521C1.22425 5.03769 1.38895 5.20139 1.59143 5.20142H1.72717V2.9436H1.59143ZM5.47131 3.06665C5.59007 2.9514 5.78218 2.95151 5.901 3.06665C6.48041 3.62955 6.48041 4.54281 5.901 5.10571C5.78224 5.22052 5.59 5.22063 5.47131 5.10571C5.35257 4.99035 5.35179 4.80224 5.47034 4.68677C5.81204 4.35477 5.81304 3.81661 5.47131 3.48462C5.35248 3.36917 5.35248 3.1821 5.47131 3.06665Z", fill: "currentColor" })));
+
+const Alert10 = (props) => (hAsync("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M5.15332 1.31549C5.69776 0.998135 6.38184 1.39136 6.38184 2.02155V7.97955C6.38159 8.59158 5.73295 8.98572 5.18945 8.70416L2.4375 7.27838H1.98828C1.30743 7.27813 0.755012 6.72587 0.754883 6.04498V4.13873C0.755059 3.45789 1.30745 2.90559 1.98828 2.90533H2.42676L5.15332 1.31549ZM5.55664 2.0069L2.93457 3.53522V6.63483L5.55762 7.9942C5.5603 7.99557 5.56261 7.99599 5.56348 7.99615H5.56543C5.56706 7.99602 5.5699 7.99518 5.57324 7.99323C5.57675 7.99109 5.57916 7.9888 5.58008 7.98737L5.58105 7.98541C5.58124 7.98473 5.582 7.98284 5.58203 7.97955V2.02155C5.58203 2.01775 5.58124 2.01537 5.58105 2.01471L5.58008 2.01276C5.57917 2.01139 5.57697 2.00905 5.57324 2.0069C5.56932 2.00468 5.56598 2.00399 5.56445 2.00397H5.5625C5.56169 2.00424 5.55963 2.00516 5.55664 2.0069ZM7.74023 2.92291C7.8987 2.76916 8.15607 2.76904 8.31445 2.92291C9.5561 4.12941 9.5552 6.0856 8.31348 7.29205C8.15507 7.44575 7.89864 7.44575 7.74023 7.29205C7.58204 7.13816 7.58203 6.88832 7.74023 6.73444C8.66473 5.83579 8.66497 4.37903 7.74023 3.48053C7.58178 3.32659 7.58178 3.07685 7.74023 2.92291ZM6.82031 3.81549C6.97864 3.66183 7.2361 3.66199 7.39453 3.81549C8.12864 4.52868 8.12853 5.68622 7.39453 6.39948C7.23609 6.55303 6.97865 6.55319 6.82031 6.39948C6.66202 6.24553 6.66289 5.99574 6.82129 5.84186C7.23838 5.43647 7.23751 4.7794 6.82031 4.37408C6.66188 4.22015 6.66187 3.96942 6.82031 3.81549ZM1.98828 3.70612C1.74928 3.70637 1.55584 3.89972 1.55566 4.13873V6.04498C1.55579 6.28404 1.74925 6.47832 1.98828 6.47858H2.13379V3.70612H1.98828Z", fill: "currentColor" })));
+
+const Alert12 = (props) => (hAsync("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M6.17505 1.56036C6.84139 1.17286 7.67757 1.65366 7.67798 2.42462V9.57404C7.67798 10.3237 6.88364 10.8075 6.21802 10.4627L2.92017 8.75372H2.38599C1.55767 8.75366 0.886079 8.08203 0.885986 7.25372V4.96661C0.885986 4.13823 1.55762 3.46668 2.38599 3.46661H2.90454L6.17505 1.56036ZM3.54126 4.25275V7.94806L6.67798 9.57404V2.42462L3.54126 4.25275ZM9.27368 3.49396C9.47175 3.30157 9.79243 3.30155 9.99048 3.49396C11.4885 4.94946 11.4886 7.309 9.99048 8.76447C9.79248 8.95675 9.47174 8.95667 9.27368 8.76447C9.07564 8.57207 9.0757 8.2606 9.27368 8.06818C10.3757 6.99754 10.3756 5.26092 9.27368 4.19025C9.07562 3.99783 9.07562 3.68638 9.27368 3.49396ZM8.17017 4.56525C8.36814 4.37301 8.68891 4.37313 8.88696 4.56525C9.77588 5.42884 9.77588 6.82959 8.88696 7.69318C8.68895 7.88509 8.3681 7.88521 8.17017 7.69318C7.97213 7.50078 7.97219 7.18834 8.17017 6.99591C8.66279 6.51721 8.66274 5.74124 8.17017 5.26251C7.9721 5.07009 7.9721 4.75767 8.17017 4.56525ZM2.38599 4.46661C2.1099 4.46668 1.88599 4.69051 1.88599 4.96661V7.25372C1.88608 7.52975 2.10996 7.75366 2.38599 7.75372H2.54126V4.46661H2.38599Z", fill: "currentColor" })));
+
+const Alert16 = (props) => (hAsync("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M8.31763 2.22534C9.09526 1.77243 10.0714 2.33319 10.0715 3.23315V12.7664C10.0714 13.6408 9.14487 14.2045 8.36841 13.8025L3.93481 11.5046H3.18188C2.16974 11.5044 1.3491 10.6838 1.34888 9.67163V6.62183C1.34905 5.60963 2.16971 4.7891 3.18188 4.78882H3.91919L8.31763 2.22534ZM9.07153 3.23315C9.07136 3.10485 8.93251 3.02531 8.82153 3.0896L4.55493 5.57593V10.699L8.82837 12.9138C8.9392 12.971 9.07142 12.8911 9.07153 12.7664V3.23315ZM12.4846 4.77417C12.6827 4.58175 13.0043 4.58175 13.2024 4.77417C15.1337 6.65059 15.1335 9.69257 13.2024 11.5691C13.0043 11.7615 12.6827 11.7615 12.4846 11.5691C12.2871 11.3767 12.2869 11.0651 12.4846 10.8728C14.0199 9.38109 14.02 6.96212 12.4846 5.47046C12.287 5.27807 12.2868 4.96649 12.4846 4.77417ZM3.18188 5.78882C2.722 5.7891 2.34905 6.16191 2.34888 6.62183V9.67163C2.3491 10.1315 2.72203 10.5044 3.18188 10.5046H3.55493V5.78882H3.18188ZM11.0139 6.20288C11.212 6.01053 11.5337 6.01048 11.7317 6.20288C12.8507 7.29009 12.8505 9.05307 11.7317 10.1404C11.5336 10.3328 11.212 10.3328 11.0139 10.1404C10.816 9.94795 10.8159 9.63548 11.0139 9.44312C11.7367 8.74063 11.7368 7.60252 11.0139 6.90015C10.8159 6.70773 10.8159 6.3953 11.0139 6.20288Z", fill: "currentColor" })));
+
+const Alert20 = (props) => (hAsync("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M10.3964 2.78281C11.3685 2.21612 12.5886 2.91733 12.5887 4.04257V15.9586C12.5885 17.0517 11.4304 17.7564 10.4598 17.2535L4.91785 14.3814H3.97839C2.71289 14.3813 1.68643 13.355 1.6864 12.0894V8.27792C1.6865 7.01245 2.71293 5.98609 3.97839 5.98593H4.90222L10.3964 2.78281ZM11.3387 4.04257C11.3386 3.88194 11.1651 3.78209 11.0262 3.86288L5.69421 6.97031V13.3766L11.035 16.1441C11.1736 16.2158 11.3385 16.1145 11.3387 15.9586V4.04257ZM15.6063 5.96835C15.8539 5.72783 16.2552 5.72785 16.5028 5.96835C18.9171 8.31389 18.9168 12.1158 16.5028 14.4615C16.2552 14.702 15.8539 14.702 15.6063 14.4615C15.3595 14.221 15.3593 13.8317 15.6063 13.5914C17.5253 11.7268 17.5255 8.70397 15.6063 6.83945C15.3588 6.59898 15.3589 6.20889 15.6063 5.96835ZM3.97839 7.23593C3.40329 7.23609 2.9365 7.7028 2.9364 8.27792V12.0894C2.93643 12.6646 3.40324 13.1313 3.97839 13.1314H4.44421V7.23593H3.97839ZM13.7675 7.75449C14.015 7.51396 14.4173 7.51396 14.6649 7.75449C16.0634 9.11341 16.0631 11.3163 14.6649 12.6754C14.4173 12.9159 14.015 12.9159 13.7675 12.6754C13.5206 12.4348 13.5201 12.0446 13.7675 11.8043C14.671 10.9262 14.6712 9.50357 13.7675 8.62558C13.5201 8.38512 13.5202 7.99498 13.7675 7.75449Z", fill: "currentColor" })));
+
+const Alert24 = (props) => (hAsync("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M12.4755 3.33801C13.642 2.65803 15.107 3.49956 15.1073 4.84973V19.1495C15.1071 20.4614 13.7164 21.3068 12.5516 20.7032L5.90027 17.257H4.77332C3.25468 17.2568 2.02338 16.0256 2.02332 14.507V9.93274C2.02332 8.41404 3.25464 7.18287 4.77332 7.18274H5.87878L12.4755 3.33801ZM13.6073 4.84973C13.607 4.65713 13.3978 4.53709 13.2313 4.63391L6.83289 8.36243V16.0499L13.2421 19.3712C13.4084 19.4573 13.6071 19.3368 13.6073 19.1495V4.84973ZM18.7274 7.16125C19.0245 6.87262 19.5065 6.87262 19.8036 7.16125C22.7006 9.976 22.7006 14.5399 19.8036 17.3546C19.5065 17.643 19.0245 17.643 18.7274 17.3546C18.4304 17.066 18.4305 16.5983 18.7274 16.3097C21.0306 14.0721 21.0306 10.4437 18.7274 8.20618C18.4304 7.91755 18.4303 7.44987 18.7274 7.16125ZM4.77332 8.68274C4.08307 8.68287 3.52332 9.24247 3.52332 9.93274V14.507C3.52338 15.1972 4.08311 15.7568 4.77332 15.757H5.33289V8.68274H4.77332ZM16.5214 9.30481C16.8184 9.01633 17.2995 9.01633 17.5966 9.30481C19.2754 10.9358 19.2754 13.5801 17.5966 15.2111C17.2995 15.4994 16.8184 15.4994 16.5214 15.2111C16.2243 14.9225 16.2244 14.4548 16.5214 14.1661C17.6058 13.1124 17.6058 11.4034 16.5214 10.3497C16.2243 10.0611 16.2243 9.59344 16.5214 9.30481Z", fill: "currentColor" })));
+
+const alert = {
+    8: Alert8,
+    10: Alert10,
+    12: Alert12,
+    16: Alert16,
+    20: Alert20,
+    24: Alert24,
+};
+
+var Alert = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  alert: alert
+});
+
+const AlignKorean8 = (props) => (hAsync("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M2.58368 3.7832C2.74921 3.78338 2.88348 3.91743 2.88348 4.08301V4.44922H3.58368C3.74922 4.44939 3.88348 4.58442 3.88348 4.75C3.8833 4.91542 3.7491 5.04963 3.58368 5.0498H3.23993C3.52292 5.19701 3.71649 5.49196 3.71649 5.83301C3.71649 6.32075 3.32138 6.71662 2.83368 6.7168H2.24969C1.76201 6.71661 1.36689 6.32074 1.36688 5.83301C1.36688 5.49197 1.56046 5.19701 1.84344 5.0498H1.41669C1.25112 5.04979 1.11706 4.91552 1.11688 4.75C1.11688 4.58432 1.25101 4.44923 1.41669 4.44922H2.2829V4.08301C2.2829 3.91733 2.418 3.78321 2.58368 3.7832ZM5.74969 1.2832C5.91538 1.2832 6.05048 1.41732 6.05048 1.58301V5.6377L6.36102 5.29492C6.47228 5.17226 6.66211 5.16321 6.78485 5.27441C6.90753 5.38567 6.91657 5.5755 6.80536 5.69824L5.97235 6.61816C5.91549 6.68079 5.83429 6.7168 5.74969 6.7168C5.66529 6.7167 5.58479 6.68062 5.52802 6.61816L4.69403 5.69824C4.58284 5.57546 4.59276 5.38565 4.71552 5.27441C4.8383 5.16324 5.02812 5.17217 5.13934 5.29492L5.44989 5.6377V1.58301C5.44989 1.41744 5.58417 1.28339 5.74969 1.2832ZM2.24969 5.5498C2.09337 5.54999 1.96649 5.67664 1.96649 5.83301C1.9665 5.98937 2.09338 6.11602 2.24969 6.11621H2.83368C2.99001 6.11603 3.11688 5.98938 3.11688 5.83301C3.11688 5.67664 2.99001 5.54998 2.83368 5.5498H2.24969ZM3.08368 1.2832C3.4332 1.28338 3.71632 1.56649 3.71649 1.91602V3.41602C3.71649 3.5817 3.58237 3.7168 3.41669 3.7168C3.25101 3.71679 3.11689 3.58169 3.11688 3.41602V1.91602C3.11671 1.89786 3.10183 1.88299 3.08368 1.88281H1.41669C1.25101 1.8828 1.11689 1.74868 1.11688 1.58301C1.11688 1.41733 1.25101 1.28321 1.41669 1.2832H3.08368Z", fill: "currentColor" })));
 
 const AlignKorean10 = (props) => (hAsync("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M3.22913 4.7041C3.45003 4.7041 3.62951 4.88358 3.62952 5.10449V5.53809H4.47913C4.69993 5.53809 4.87934 5.71674 4.87952 5.9375C4.87952 6.15841 4.70004 6.33789 4.47913 6.33789H4.14417C4.4605 6.53797 4.67151 6.89001 4.67151 7.29199C4.67151 7.91561 4.16525 8.4209 3.54163 8.4209H2.81311C2.18949 8.4209 1.68323 7.91561 1.68323 7.29199C1.68323 6.89001 1.89424 6.53797 2.21057 6.33789H1.77112C1.5502 6.33789 1.37073 6.15841 1.37073 5.9375C1.37091 5.71674 1.55032 5.53809 1.77112 5.53809H2.82971V5.10449C2.82972 4.88369 3.00836 4.70428 3.22913 4.7041ZM7.18811 1.5791C7.40887 1.57928 7.58752 1.75869 7.58752 1.97949V6.9834L7.93323 6.60254C8.08156 6.43915 8.33407 6.42707 8.49768 6.5752C8.6613 6.72344 8.67406 6.97593 8.526 7.13965L7.48401 8.29004C7.40827 8.37348 7.3008 8.42081 7.18811 8.4209C7.07523 8.4209 6.96706 8.37366 6.89124 8.29004L5.84924 7.13965C5.70136 6.97595 5.71406 6.7234 5.87756 6.5752C6.04127 6.42687 6.29467 6.43883 6.44299 6.60254L6.78772 6.9834V1.97949C6.78773 1.75858 6.9672 1.5791 7.18811 1.5791ZM2.81311 6.96289C2.63132 6.96289 2.48401 7.1102 2.48401 7.29199C2.48401 7.47379 2.63132 7.62109 2.81311 7.62109H3.54163C3.72342 7.62109 3.87073 7.47378 3.87073 7.29199C3.87072 7.1102 3.72341 6.96289 3.54163 6.96289H2.81311ZM3.85413 1.5791C4.30515 1.5791 4.6715 1.94546 4.67151 2.39648V4.27148C4.67133 4.49225 4.49192 4.6709 4.27112 4.6709C4.05031 4.6709 3.8709 4.49225 3.87073 4.27148V2.39648C3.87072 2.38729 3.86333 2.37989 3.85413 2.37988H1.77112C1.5502 2.37988 1.37073 2.20041 1.37073 1.97949C1.37073 1.75858 1.55021 1.5791 1.77112 1.5791H3.85413Z", fill: "currentColor" })));
 
@@ -6674,7 +7080,7 @@ class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (hAsync("i", { key: '88e60f381458c95d1c6abb893177d5da3e4d2639', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '459dcf88c8a28108052666028c8663fb5241a128', color: this.resolvedColor })));
+        return (hAsync("i", { key: '851c9b6fd0ac6bc9393a21e95184e158bced5fe6', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: 'a10dcad82179ba12a9e9754b0b2cdd1ef548b4a5', color: this.resolvedColor })));
     }
     static get style() { return sdIconCss(); }
     static get cmpMeta() { return {
@@ -6694,122 +7100,153 @@ class SdIcon {
     }; }
 }
 
-const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu .sd-date-picker__header{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu .sd-date-picker__header .year-nav,.sd-date-picker__menu .sd-date-picker__header .month-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu .sd-date-picker__header .year-nav button,.sd-date-picker__menu .sd-date-picker__header .month-nav button{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu .sd-date-picker__header .year-nav__current{width:40px;text-align:center}.sd-date-picker__menu .sd-date-picker__header .month-nav__current{width:100px;text-align:center}.sd-date-picker__menu .sd-date-picker__days{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu .sd-date-picker__days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu .sd-date-picker__body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker{width:fit-content;display:inline-block}.sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-range-picker .sd-input .sd-input__container{width:210px}.sd-date-range-picker .sd-input .sd-date-range-picker__input{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#d8d8d8}.sd-input{display:flex;flex-flow:row nowrap;align-items:center;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;width:var(--input-width, 100%);height:28px;background:white}.sd-input.sd-input--with-label:not(.sd-input--inside-label){border:none}.sd-input.sd-input--with-label:not(.sd-input--inside-label) .sd-input__label{margin-right:8px}.sd-input.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container{border:1px solid #aaaaaa;border-radius:4px;height:28px}.sd-input.sd-input--inside-label .sd-input__label{background:#f6f6f6;padding:0 12px;display:flex;align-items:center;justify-content:center;height:100%;border-radius:4px 0 0 4px}.sd-input.sd-input--disabled{cursor:not-allowed !important;box-shadow:none !important;border:1px solid #cccccc !important;background:#eeeeee !important;color:#888888 !important}.sd-input.sd-input--disabled.sd-input--with-label:not(.sd-input--inside-label){border:none !important;background:transparent !important}.sd-input.sd-input--disabled.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container{border:1px solid #cccccc !important;background:#eeeeee !important;color:#888888 !important}.sd-input.sd-input--disabled .sd-input__container{color:#737373 !important}.sd-input.sd-input--disabled .sd-input__container .sd-input__native_element{color:#888888 !important;cursor:not-allowed !important}.sd-input--hovered,.sd-input--focused{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-input--hovered.sd-input--with-label:not(.sd-input--inside-label),.sd-input--focused.sd-input--with-label:not(.sd-input--inside-label){border-color:transparent;box-shadow:none}.sd-input--hovered.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container,.sd-input--focused.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-input.sd-input--error{border-color:#fb4444}.sd-input.sd-input--pass{border-color:#2bce6c}.sd-input.sd-input--barcode:not(.sd-input--disabled){background-color:#fafaa1}.sd-input .sd-input__container{display:flex;align-items:center;padding:4px 8px;width:100%}.sd-input .sd-input__container .sd-input__native_element{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0}.sd-input .sd-input__container .sd-input__native_element::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-input .sd-input__container .sd-input__clear-icon{cursor:pointer;margin-left:8px}`;
+var nonSecure;
+var hasRequiredNonSecure;
+
+function requireNonSecure () {
+	if (hasRequiredNonSecure) return nonSecure;
+	hasRequiredNonSecure = 1;
+	// This alphabet uses `A-Za-z0-9_-` symbols.
+	// The order of characters is optimized for better gzip and brotli compression.
+	// References to the same file (works both for gzip and brotli):
+	// `'use`, `andom`, and `rict'`
+	// References to the brotli default dictionary:
+	// `-26T`, `1983`, `40px`, `75px`, `bush`, `jack`, `mind`, `very`, and `wolf`
+	let urlAlphabet =
+	  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+
+	let customAlphabet = (alphabet, defaultSize = 21) => {
+	  return (size = defaultSize) => {
+	    let id = '';
+	    // A compact alternative for `for (var i = 0; i < step; i++)`.
+	    let i = size | 0;
+	    while (i--) {
+	      // `| 0` is more compact and faster than `Math.floor()`.
+	      id += alphabet[(Math.random() * alphabet.length) | 0];
+	    }
+	    return id
+	  }
+	};
+
+	let nanoid = (size = 21) => {
+	  let id = '';
+	  // A compact alternative for `for (var i = 0; i < step; i++)`.
+	  let i = size | 0;
+	  while (i--) {
+	    // `| 0` is more compact and faster than `Math.floor()`.
+	    id += urlAlphabet[(Math.random() * 64) | 0];
+	  }
+	  return id
+	};
+
+	nonSecure = { nanoid, customAlphabet };
+	return nonSecure;
+}
+
+var nonSecureExports = /*@__PURE__*/ requireNonSecure();
+
+const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu .sd-date-picker__header{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu .sd-date-picker__header .year-nav,.sd-date-picker__menu .sd-date-picker__header .month-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu .sd-date-picker__header .year-nav button,.sd-date-picker__menu .sd-date-picker__header .month-nav button{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu .sd-date-picker__header .year-nav__current{width:40px;text-align:center}.sd-date-picker__menu .sd-date-picker__header .month-nav__current{width:100px;text-align:center}.sd-date-picker__menu .sd-date-picker__days{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu .sd-date-picker__days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu .sd-date-picker__body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#d8d8d8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:#333333;font-size:12px;line-height:20px;padding:0 8px}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:#888888}sd-input .sd-input__content .sd-input__native::placeholder{color:#aaaaaa}`;
 
 class SdInput {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdClick = createEvent(this, "sdClick");
-        this.sdInput = createEvent(this, "sdInput");
-        this.sdChange = createEvent(this, "sdChange");
-        this.sdFocus = createEvent(this, "sdFocus");
-        this.sdBlur = createEvent(this, "sdBlur");
+        this.input = createEvent(this, "sdUpdate");
+        this.focus = createEvent(this, "sdFocus");
+        this.blur = createEvent(this, "sdBlur");
     }
-    get el() { return getElement(this); }
+    get host() { return getElement(this); }
     value = null;
-    label;
+    //  @Prop() name?: string;
+    type = 'text';
     insideLabel = false;
     placeholder = '입력해 주세요.';
     disabled = false;
     clearable = false;
     width;
     barcode = false;
-    rules;
+    rules = [];
     autoFocus = false;
     status;
     inputClass = '';
     readonly = false;
-    //  props - custom styles
-    inputStyle = {};
-    internalValue = null;
     error = false;
     focused = false;
     hovered = false;
+    // props - label
+    label = '';
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    //  props - custom styles
+    inputStyle = {};
+    internalValue = null;
     nativeEl = undefined;
-    sdClick;
-    sdInput;
-    sdChange;
-    sdFocus;
-    sdBlur;
+    formField;
+    name = nonSecureExports.nanoid();
+    input;
+    focus;
+    blur;
     valueChanged(newValue) {
         this.internalValue = newValue;
     }
     internalValueChanged(newValue) {
         if (newValue !== this.value) {
             this.value = newValue;
-            this.sdInput?.emit(this.value);
-        }
-        if (!this.rules || this.rules.length === 0)
-            return;
-        this.error = false;
-        for (const rule of this.rules) {
-            const result = rule(newValue);
-            if (result !== true) {
-                this.error = true;
-                break;
-            }
+            this.input?.emit(this.value);
         }
     }
-    async getNativeElement() {
+    async sdGetNativeElement() {
         return this.nativeEl || null;
     }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
     componentWillLoad() {
         if (this.value) {
             this.internalValue = this.value;
         }
     }
-    handleInput = (event) => {
-        const target = event.target;
-        this.internalValue = target.value;
-        this.sdInput?.emit(this.internalValue);
-    };
-    handleChange = (event) => {
-        const target = event.target;
-        this.internalValue = target.value;
-        this.sdChange?.emit(this.internalValue);
-    };
-    handleFocus = (type, event) => {
-        this.focused = type === 'focus';
-        if (type === 'blur')
-            this.sdBlur?.emit(event);
-        else
-            this.sdFocus?.emit(event);
-    };
-    getInputStatus() {
-        // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)
-        if (this.disabled)
-            return 'sd-input--disabled';
-        if (this.hovered)
-            return 'sd-input--hovered';
-        if (this.focused)
-            return 'sd-input--focused';
-        if (this.status)
-            return `sd-input--${this.status}`;
-        if (this.error)
-            return 'sd-input--error';
-        return '';
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.nativeEl?.focus();
+        }
     }
+    handleInput = (event) => {
+        const target = event.target;
+        this.internalValue = target.value;
+    };
+    handleFocus = async (type, event) => {
+        this.focused = type === 'focus';
+        if (type === 'blur') {
+            // Auto-validate on blur if rules exist
+            if (this.rules && this.rules.length > 0) {
+                await this.formField?.sdValidate();
+            }
+            this.blur?.emit(event);
+        }
+        else {
+            this.focus?.emit(event);
+        }
+    };
     render() {
         const inputWidth = this.width
             ? {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (hAsync(Host, { key: '3e95d5ff30f78cff43d6ed263acf6d782ee082d9', style: inputWidth }, hAsync("div", { key: '6005f125ada3a94cf320d6390e8868c51b773b07', class: {
-                'sd-input': true,
-                'sd-input--with-label': !!this.label,
-                'sd-input--inside-label': !!this.label && this.insideLabel,
-                'sd-input--barcode': !!this.barcode,
-                [this.getInputStatus()]: true,
-            } }, this.label && (hAsync("div", { key: '89009bc9f0bf631a0274c5261cacdc915548c4ca', class: {
-                'sd-input__label': true,
-            } }, this.label)), hAsync("label", { key: '83f40c08eef0754904941fffd00bec035f654bbf', class: {
-                'sd-input__container': true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("slot", { key: '17d648f43076578e54f96c9e4fbd99553af45ef6', name: "prefix" }), hAsync("input", { key: '03a7c6da51930e629e75b8a0af8c3e843169a6df', 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) }), hAsync("slot", { key: '604948d6bc07fb3e97e644c5459862b1fd3e91f0', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: '124d732eaa54a824dc82896d2bfc7520aa3dc2a2', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+        return (hAsync("sd-field", { key: '78d338ae57d61752e8cb691197c3882f32ccfc16', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: inputWidth, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("label", { key: '180c948116cb0a644d2696a46a8040cd5f19010d', class: "sd-input__content", style: { width: '100%' } }, hAsync("slot", { key: '4ead5aaaa62ac8c93d6207e04d5555e56f096a58', name: "prefix" }), hAsync("input", { key: 'd5bce7f062c7550f6204f5df416122fe8e4a40f0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '9ab6a7556416dd5dbfea6b83f90b337366935b49', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: '7a803590e461dc740feb8bb55fd69c6dc11f3b62', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
-                this.sdChange?.emit(this.internalValue);
-                this.sdInput?.emit(this.internalValue);
-            } }))))));
+                await this.formField?.sdValidate();
+            } })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -6821,7 +7258,7 @@ class SdInput {
         "$tagName$": "sd-input",
         "$members$": {
             "value": [1032],
-            "label": [1],
+            "type": [1],
             "insideLabel": [4, "inside-label"],
             "placeholder": [1],
             "disabled": [4],
@@ -6833,12 +7270,20 @@ class SdInput {
             "status": [1],
             "inputClass": [1, "input-class"],
             "readonly": [4],
+            "error": [1028],
+            "focused": [1028],
+            "hovered": [1028],
+            "label": [1],
+            "useLabelRequired": [4, "use-label-required"],
+            "labelTooltip": [1, "label-tooltip"],
+            "labelTooltipProps": [16],
             "inputStyle": [16],
             "internalValue": [32],
-            "error": [32],
-            "focused": [32],
-            "hovered": [32],
-            "getNativeElement": [64]
+            "sdGetNativeElement": [64],
+            "sdValidate": [64],
+            "sdReset": [64],
+            "sdResetValidate": [64],
+            "sdFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -6872,13 +7317,13 @@ class SdLoadingSpinner {
     }; }
 }
 
-const sdModalCardCss = () => `sd-modal-card{display:block}sd-modal-card .sd-modal-card{position:relative;padding:40px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2)}sd-modal-card .sd-modal-card__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon{display:block;width:32px;height:32px;margin:0 auto 12px auto}sd-modal-card .sd-modal-card__title{color:var(--point-color);font-size:18px;font-weight:700;line-height:30px;text-align:center;margin:0 0 20px 0}sd-modal-card .sd-modal-card__message{color:#222222;font-weight:400;font-size:12px;line-height:22px;text-align:center;margin:0}sd-modal-card .sd-modal-card__button-container{display:flex;margin:32px auto 0 auto;justify-content:center;align-items:center;gap:8px}sd-modal-card .sd-modal-card__button-container.flex-column{flex-direction:column}sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button{width:89px}`;
+const sdModalCardCss = () => `sd-modal-card{display:block}sd-modal-card .sd-modal-card{position:relative;padding:40px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:white}sd-modal-card .sd-modal-card__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon{display:block;width:32px;height:32px;margin:0 auto 12px auto}sd-modal-card .sd-modal-card__title{color:var(--point-color);font-size:18px;font-weight:700;line-height:30px;text-align:center;margin:0 0 20px 0}sd-modal-card .sd-modal-card__message{color:#222222;font-weight:400;font-size:12px;line-height:22px;text-align:center;margin:0}sd-modal-card .sd-modal-card__button-container{display:flex;margin:32px auto 0 auto;justify-content:center;align-items:center;gap:8px}sd-modal-card .sd-modal-card__button-container.flex-column{flex-direction:column}sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button{width:89px}`;
 
 class SdModalCard {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdClose = createEvent(this, "sdClose");
-        this.sdConfirm = createEvent(this, "sdConfirm");
+        this.close = createEvent(this, "sdClose");
+        this.confirm = createEvent(this, "sdConfirm");
     }
     type = 'info';
     system = 'normal';
@@ -6894,8 +7339,8 @@ class SdModalCard {
     ];
     message = [];
     modalClass = '';
-    sdClose;
-    sdConfirm;
+    close;
+    confirm;
     get pointColor() {
         if (this.type !== 'normal') {
             return 'grey_95';
@@ -6915,7 +7360,7 @@ class SdModalCard {
         return modalClass;
     }
     render() {
-        return (hAsync(Host, { key: '83640de79f0c1a67ec114a048c3e8a691def5514', style: { '--point-color': this.pointColor } }, hAsync("div", { key: 'fd741a11ac5c82a6b1d2c1972ec525596eb4c4f6', class: this.getModalClass }, this.useCloseButton && (hAsync("sd-icon", { key: '144d5726721cdd28d56db268eb643f1ba5f66e57', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.sdClose.emit() })), this.type !== 'normal' && (hAsync("sd-icon", { key: '9d7dff32800d2f44e2c0753434dfd471c898200b', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), hAsync("h2", { key: 'c59db6982fb2369b3ca23990cd94f79547b4b758', class: "sd-modal-card__title" }, this.modalTitle), hAsync("slot", { key: '1628852290bdb64ee99cd3f45318e3d25dde8e46' }, hAsync("div", { key: 'a21d6157f28974f537938bf1acddcc33a5e3c5ca', class: `sd-modal-card__message-container` }, this.message.map(msg => (hAsync("p", { class: "sd-modal-card__message" }, msg))))), hAsync("div", { key: '336092ac86ab1e6ddd2af9a7f25b358ba694a036', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps.map(button => (hAsync("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.sdConfirm.emit() : this.sdClose.emit(), ...(button.class && { class: button.class }) })))))));
+        return (hAsync(Host, { key: 'e143942e62530660fb9a60dd70a418be197943b7', style: { '--point-color': this.pointColor } }, hAsync("div", { key: '7033fb4220b84ed00eae6fa753fcfc676fc02a7f', class: this.getModalClass }, this.useCloseButton && (hAsync("sd-icon", { key: 'e28d60dcd5281aa62fcd55f72d9eb7bb83767ca7', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (hAsync("sd-icon", { key: 'e209095abf43af9885ccd63a9bc2183d24863f0c', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), hAsync("h2", { key: '5beac7a046be5afe446af94e9032dd9bb219cd60', class: "sd-modal-card__title" }, this.modalTitle), hAsync("slot", { key: '83f5e5978ed9489888fdb5bc839eefb4ad99ce6c' }, hAsync("div", { key: 'feaaee161b474b7464a51c515ac1fa5448b140f1', class: `sd-modal-card__message-container` }, this.message.map(msg => (hAsync("p", { class: "sd-modal-card__message" }, msg))))), hAsync("div", { key: 'cb2354ca63ab663aded356f4f931b40d64697209', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps.map(button => (hAsync("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) })))))));
     }
     static get style() { return sdModalCardCss(); }
     static get cmpMeta() { return {
@@ -6942,12 +7387,9 @@ const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-ic
 class SdNumberInput {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdIncrement = createEvent(this, "sdIncrement");
-        this.sdDecrement = createEvent(this, "sdDecrement");
-        this.sdInput = createEvent(this, "sdInput");
-        this.sdChange = createEvent(this, "sdChange");
-        this.sdFocus = createEvent(this, "sdFocus");
-        this.sdBlur = createEvent(this, "sdBlur");
+        this.update = createEvent(this, "sdUpdate");
+        this.focus = createEvent(this, "sdFocus");
+        this.blur = createEvent(this, "sdBlur");
     }
     get el() { return getElement(this); }
     min = Number.NEGATIVE_INFINITY;
@@ -6971,12 +7413,9 @@ class SdNumberInput {
     hovered = false;
     error = false;
     nativeEl = undefined;
-    sdIncrement;
-    sdDecrement;
-    sdInput;
-    sdChange;
-    sdFocus;
-    sdBlur;
+    update;
+    focus;
+    blur;
     formatWithCommas(value) {
         if (value === null || value === undefined)
             return '';
@@ -7042,7 +7481,7 @@ class SdNumberInput {
         this.updateDisplay();
         if (newValue !== this.value) {
             this.value = newValue;
-            this.sdInput?.emit(newValue);
+            this.update?.emit(newValue);
         }
         if (!this.rules || this.rules.length === 0)
             return;
@@ -7112,29 +7551,15 @@ class SdNumberInput {
             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);
+        this.focus?.emit(event);
     };
     handleBlur = (event) => {
         this.updateDisplay();
         if (this.nativeEl) {
             this.nativeEl.value = this.displayValue;
         }
-        this.sdBlur?.emit(event);
+        this.blur?.emit(event);
     };
     handleKeyDown = (event) => {
         if (event.key === 'ArrowUp') {
@@ -7149,32 +7574,28 @@ class SdNumberInput {
     handleIncrement = () => {
         if (this.isIncrementDisabled())
             return;
-        const currentVal = this.internalValue ?? (this.min ?? 0);
+        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);
+        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() {
+    async sdGetNativeElement() {
         return this.nativeEl || null;
     }
     getInputStatus() {
@@ -7197,17 +7618,17 @@ class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (hAsync(Host, { key: 'ffe73be2e4061daf9cf4cff0956bcda7b38b9bcf', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && hAsync("div", { key: 'f68b7fceda7777b8f14d422a98af47571532d266', class: "sd-number-input__label" }, this.label), hAsync("label", { key: '408380758ce87949e0ec811bfa6c885d07d93a14', class: {
+        return (hAsync(Host, { key: 'cc0a8b33a183c708f4caab8b085647666f3f6a98', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && hAsync("div", { key: '65a9e62f1ae8d4c4f8712a93a86e5c179953d398', class: "sd-number-input__label" }, this.label), hAsync("label", { key: '25a1617e500b5c002b540215fa59c9d419468462', 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 }, hAsync("input", { key: '4e8313a42ecadb4e4d5b595af69d0cde0cf3d01d', 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 && (hAsync("div", { key: '0d892f1493ad23581e0c9b3d181a460fcf1e92ef', class: "sd-number-input__buttons" }, hAsync("button", { key: 'fcd18b53eec85898d7bbac22ccb61f865dc8aa17', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: '3cdbc6d5f59a6eaa3766e38768c718ca69a2b111', 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, onKeyDown: this.handleKeyDown, style: inputStyles }), this.useButton && (hAsync("div", { key: '8929f899d9c3f06510fc7d7d9c9a33fbaf0786ac', class: "sd-number-input__buttons" }, hAsync("button", { key: 'd3673187beb0c5941b38b78016596519bf802935', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'd52aee954ab3a205de0f3a106bd8097a23c44561', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), hAsync("button", { key: 'f18d76a1730f25773b0ba4266e682b40ed61376e', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'bd0b93c426d1dbc6ca5be932f999e0fa09538571', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), hAsync("button", { key: 'b763da67109584b0c55dcfeaf3b2779c31c7caa4', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '608af5f9c7b837c823b4c196d2885b6db2b1dc9c', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '48c6fc62f19db50be1c23d65706b345a6d543d87', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -7238,7 +7659,7 @@ class SdNumberInput {
             "displayValue": [32],
             "hovered": [32],
             "error": [32],
-            "getNativeElement": [64]
+            "sdGetNativeElement": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -7259,7 +7680,7 @@ const PER_PAGE = 10;
 class SdPagination {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pageChange = createEvent(this, "pageChange");
+        this.pageChange = createEvent(this, "sdPageChange");
     }
     currentPage = 1;
     lastPage = 1;
@@ -7285,6 +7706,7 @@ class SdPagination {
     handlePageChange(page) {
         if (page < 1 || page > this.lastPage)
             return;
+        this.currentPage = page;
         this.pageChange.emit(page);
     }
     handleGroupChange(direction) {
@@ -7320,12 +7742,12 @@ class SdPagination {
         }
     }
     render() {
-        return (hAsync("div", { key: '2d6e0ff7f085eab4d36959d5d1509d02bec72602', class: this.paginationClasses }, hAsync("div", { key: '0bfc53f19760181a89833732c217385db02addf5', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (hAsync("div", { key: 'de62debd728759c709660924b2d9a5691f1e60ea', class: this.paginationClasses }, hAsync("div", { key: '9da6071df92e8910fe19a9e20cdc38e2ef1e4fe7', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("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)))), hAsync("div", { key: 'd22835ee79615e3f0700d4820df93e5bf91f68ba', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '7951a5ea2aabf30619d21073cd728dffaf14b7bd', class: "append-btns" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss(); }
     static get cmpMeta() { return {
@@ -7344,7 +7766,7 @@ class SdPagination {
 
 const TooltipArrow = (props) => (hAsync("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, hAsync("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 
-const sdPopoverCss = () => `.sd-popover{position:relative;cursor:pointer;display:inline-block}`;
+const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:inline-flex}`;
 
 class SdPopover {
     constructor(hostRef) {
@@ -7379,18 +7801,18 @@ class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (hAsync(Fragment, { key: 'd829713fa084f446de7a92b27c2a99989143c1cd' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-tooltip-portal", { key: '9599b6919adec483243bb7c3c9aa808314098e63', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: 'c6384698676c147395ea42569c4fdb58ce2c8d05', class: {
-                'sd-popover-menu': true,
-                [`sd-popover-menu--${this.placement}`]: true,
+        return (hAsync(Fragment, { key: 'b968d7b33da86fc38d683e3af1b6cbcb3f3386dd' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-floating-portal", { key: '43b0962853e830256e7b749e6e27206a74bf08f4', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '62767f979f1256937d50a6cddd5d4ddef5270005', class: {
+                'sd-floating-menu': true,
+                [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, hAsync("i", { key: 'e7db8d5465a337f579b0986dcadc3d3cba8dbc3a', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '83536de3473e209f30d9ba758537b8a38ee7eecf' })), hAsync("div", { key: 'be4eb9559697249db670333f4113192bd2faddf9', class: "sd-popover-menu__content" }, this.menuTitle && hAsync("div", { key: 'b80c8b40b00c3a97623c5ddae5fd1fea927b51e4', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: 'c05bbb176368895a04c58981af48f5ccd5dbe586', class: "sd-popover-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '8f70454411ea148dd0595b184b3a1798e2cd5b7c', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: 'fb399fcea8365695801a1001842f32cae2455a11', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '9f6cd57f9053d0c8e6d2cfef358867dd39b037bb', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, hAsync("i", { key: 'd82bdddc8945f348aebe8087390bf26d91e1e1c4', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'ff7ca429210d6ae88e2442299c8cea5211304e58' })), hAsync("div", { key: '366633e5f65f76126607edb52d857e1918afb0bb', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '66b0783a3f5c4d30d33ecf496f4d0c051b44f3f1', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '4f2049e9eee721f674a6c8ae4cbeb4eea9ab59bd', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: 'da2067ba8bf0279dd914fab6124f58526edff4d4', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '2aeb7b81e322472922802bcb6163d0913f0ee218', class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '1ad55d0c8bf3c1eeedc2069f6f1bcdd75b180446', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]
     }; }
     static get style() { return sdPopoverCss(); }
     static get cmpMeta() { return {
-        "$flags$": 777,
+        "$flags$": 768,
         "$tagName$": "sd-popover",
         "$members$": {
             "show": [1028],
@@ -7419,7 +7841,7 @@ class SdPopover {
 class SdPortal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdClose = createEvent(this, "sdClose");
+        this.close = createEvent(this, "sdClose");
     }
     get hostEl() { return getElement(this); }
     to = 'body';
@@ -7427,7 +7849,7 @@ class SdPortal {
     offset = [0, 4];
     zIndex = 9999;
     open = false;
-    sdClose;
+    close;
     container;
     wrapper;
     rafId;
@@ -7531,10 +7953,10 @@ class SdPortal {
         }
         if (this.wrapper?.contains(e.target))
             return;
-        this.sdClose.emit();
+        this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: 'f2884bc356461c20992f6bda70475eb0aa38a301' });
+        return hAsync("slot", { key: '180911ce3dbda3a8e2576facbf0ab16b5cb0b61f' });
     }
     static get cmpMeta() { return {
         "$flags$": 772,
@@ -7630,32 +8052,22 @@ const sdRadioButtonGroupCss = () => `sd-radio-button-group{display:inline-block}
 class SdRadioButtonGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdChange = createEvent(this, "sdChange");
+        this.change = createEvent(this, "sdUpdate");
     }
     value;
     radioOptions = [];
     size = 'md';
     disabled = false;
     name;
-    selectedValue;
-    sdChange;
-    componentWillLoad() {
-        if (this.value !== undefined && this.value !== null) {
-            this.selectedValue = this.value;
-        }
-    }
-    valueChanged(newValue) {
-        this.selectedValue = newValue;
-    }
+    change;
     handleRadioChange = (optionValue, optionDisabled) => {
         if (this.disabled || optionDisabled)
             return;
-        this.selectedValue = optionValue;
         this.value = optionValue;
-        this.sdChange.emit(optionValue);
+        this.change.emit(optionValue);
     };
     isOptionSelected(option) {
-        return this.selectedValue === option.value;
+        return this.value === option.value;
     }
     isOptionDisabled(option) {
         return this.disabled || !!option.disabled;
@@ -7676,32 +8088,28 @@ class SdRadioButtonGroup {
         const classes = ['sd-radio-button-group', `sd-radio-button-group--${this.size}`];
         return classes.join(' ');
     }
+    groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
     render() {
-        const groupName = this.name || `sd-radio-button-group-${Math.random().toString(36).substring(2, 11)}`;
-        return (hAsync("div", { key: '0142307292f00c3c590f732c465d1fea8b30e49b', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
+        return (hAsync("div", { key: '9fe1be694f1c30e4aa71a0be00218b1c5fa4db01', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
-            return (hAsync("label", { key: `radio-${index}`, class: this.getButtonClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button-group__label" }, option.label)));
+            return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button-group__label" }, option.label)));
         })));
     }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
     static get style() { return sdRadioButtonGroupCss(); }
     static get cmpMeta() { return {
         "$flags$": 768,
         "$tagName$": "sd-radio-button-group",
         "$members$": {
-            "value": [1544],
+            "value": [1032],
             "radioOptions": [1040],
             "size": [1],
             "disabled": [4],
-            "name": [1],
-            "selectedValue": [32]
+            "name": [1]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["value", "value"]]
+        "$attrsToReflect$": []
     }; }
 }
 
@@ -7710,7 +8118,7 @@ const sdRadioGroupCss = () => `sd-radio-group{display:inline-block}sd-radio-grou
 class SdRadioGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdChange = createEvent(this, "sdChange");
+        this.change = createEvent(this, "sdUpdate");
     }
     value;
     radioOptions = [];
@@ -7718,7 +8126,7 @@ class SdRadioGroup {
     disabled = false;
     name;
     selectedValue;
-    sdChange;
+    change;
     componentWillLoad() {
         if (this.value) {
             this.selectedValue = this.value;
@@ -7732,7 +8140,7 @@ class SdRadioGroup {
             return;
         this.selectedValue = optionValue;
         this.value = optionValue;
-        this.sdChange.emit(optionValue);
+        this.change.emit(optionValue);
     };
     isOptionSelected(option) {
         return this.selectedValue === option.value;
@@ -7758,7 +8166,7 @@ class SdRadioGroup {
     }
     render() {
         const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
-        return (hAsync("div", { key: 'c66984dc882990512082493a67df0d7cc6daea99', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
+        return (hAsync("div", { key: '9599dded7410ed41178f6cbf93aa24897cc9b030', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map((option, index) => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (hAsync("label", { key: `radio-${index}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, hAsync("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-group__label" }, option.label)));
@@ -7897,111 +8305,94 @@ class SelectKeyboardNavigation {
     }
 }
 
-const sdSelectCss = () => `.sd-select__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select__dropdown .sd-select__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select{display:inline-flex;width:fit-content;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{display:flex;width:var(--select-width, 200px);height:28px;position:relative;color:#333333;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}sd-select .sd-select:hover:not(.sd-select--disabled){background:#f6f6f6}sd-select .sd-select.sd-select--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}sd-select .sd-select.sd-select--disabled .sd-select__label{border-right:1px solid #cccccc}sd-select .sd-select.sd-select--disabled .sd-select__trigger{color:#888888}sd-select .sd-select.sd-select--disabled .sd-select__trigger:focus,sd-select .sd-select.sd-select--disabled .sd-select__trigger:focus-visible,sd-select .sd-select.sd-select--disabled .sd-select__trigger:focus-within{outline:none !important}sd-select .sd-select__label{font-size:12px;line-height:20px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6;display:inline-block;white-space:nowrap}sd-select .sd-select__container{position:relative;width:100%;display:flex}sd-select .sd-select__container .sd-select__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select .sd-select__container .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select__container .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select__container .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select .sd-select__container .sd-select__arrow--open{transform:rotate(180deg)}.sd-select__dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column}`;
+const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
 
 class SdSelect extends BaseDropdownEvent {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.sdChange = createEvent(this, "sdChange");
-        this.dropDownShow = createEvent(this, "dropDownShow");
+        this.update = createEvent(this, "sdUpdate");
+        this.dropDownShow = createEvent(this, "sdDropDownShow");
     }
     get el() { return getElement(this); }
     // props
     value = null;
-    label = '';
     options = [];
     placeholder = '선택';
     optionPlaceholder = '옵션이 없습니다.';
     width = '200px';
     dropdownHeight = '260px';
+    autoFocus = false;
     disabled = false;
     clearable = false;
     searchable = false;
+    // props - label
+    label = '';
+    insideLabel = false;
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    // props - form
+    name;
+    rules = [];
+    error = false;
     // props - custom slots
     optionRenderer;
     // states
-    filteredOptions = this.options;
     isOpen = false;
-    searchText = null;
     itemIndex = -1;
     isScrolled = false;
     // events
-    sdChange;
+    update;
     dropDownShow;
     selectRef;
-    searchRef;
-    optionRef;
-    dropdownRef;
-    async open() {
+    triggerRef;
+    formField;
+    filteredOptions = this.options;
+    dropDownWidth = this.width;
+    async sdOpen() {
         this.isOpen = true;
     }
-    valueChanged() {
-        const selectedOption = this.getSelectedOption();
-        this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
-    }
-    optionsChanged() {
-        this.filteredOptions = this.options;
-        this.filterOptions();
+    async sdValidate() {
+        this.formField?.sdValidate();
     }
-    searchTextChanged() {
-        this.filterOptions();
+    async sdReset() {
+        this.formField?.sdReset();
     }
-    async itemIndexChanged(newIndex, oldIndex) {
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            if (this.itemIndex === -1) {
-                searchInput?.focus({ preventScroll: true });
-                return;
-            }
-            else if (searchInput?.matches(':focus')) {
-                searchInput?.blur();
-            }
-        }
-        const optionElements = this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];
-        const currentItem = optionElements?.[this.itemIndex];
-        if (!currentItem || !this.isOpen)
-            return;
-        this.optionRef = currentItem;
-        const isOptionDisabled = await this.optionRef.isDisabled();
-        if (isOptionDisabled) {
-            newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
-            return;
-        }
-        this.scrollToOption(currentItem);
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
     }
-    componentWillLoad() {
-        // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
-        this.filteredOptions = this.options;
-        this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
+    async sdFocus() {
+        this.formField?.sdFocus();
     }
-    disconnectedCallback() {
-        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
+    async valueChanged() {
+        const selectedOption = this.getSelectedOption();
+        this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
     }
     async isOpenChanged() {
         // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
         this.onDropdownToggle(this.isOpen);
-        const selectedOption = this.getSelectedOption();
-        if (!selectedOption) {
-            this.itemIndex = /* this.searchable ?  */ -1 /* : 0 */;
-        }
-        else {
-            this.itemIndex = this.options.indexOf(selectedOption);
-        }
         this.dropDownShow?.emit({ isOpen: this.isOpen });
-        if (this.isOpen === false)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        const optionElements = this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];
-        const currentItem = optionElements?.[this.itemIndex];
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            searchInput?.focus({ preventScroll: true });
+        if (this.isOpen === false) {
+            await this.formField?.sdValidate();
         }
-        if (!currentItem)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        this.scrollToOption(currentItem);
+    }
+    componentWillLoad() {
+        this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
+    }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.selectRef?.focus();
+        }
+    }
+    // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
+    componentDidRender() {
+        const trigger = this.triggerRef;
+        const rect = trigger?.getBoundingClientRect();
+        this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
+    }
+    disconnectedCallback() {
+        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
     }
     handleDocumentClick(event) {
         if (!this.selectRef?.contains(event.target)) {
@@ -8025,35 +8416,197 @@ class SdSelect extends BaseDropdownEvent {
                 const selectedOption = this.filteredOptions[this.itemIndex];
                 if (selectedOption && !selectedOption.disabled) {
                     this.value = selectedOption.value;
-                    this.searchText = null;
                     this.isOpen = false;
                 }
-                break;
-            case 'Escape':
-                this.isOpen = false;
-                break;
-        }
+                break;
+            case 'Escape':
+                this.isOpen = false;
+                break;
+        }
+    }
+    getSelectedOption() {
+        return this.options.find(option => option.value === this.value);
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            this.dropDownShow?.emit({ isOpen: this.isOpen });
+        }
+    };
+    handleOptionClick = (detail) => {
+        const { option, event } = detail;
+        event.stopPropagation();
+        if (!option.disabled) {
+            this.value = option.value;
+            this.isOpen = false;
+        }
+    };
+    render() {
+        return (hAsync("sd-field", { key: '507736637b3b7acee4bfef07eac7175c5e196c86', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: 'd905202201f5977d04a929af507653900af3ee75', class: {
+                'sd-select': true,
+                'sd-select--disabled': this.disabled,
+                'sd-select--error': !!this.error,
+                'sd-select--label': !!this.label,
+            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
+    }
+    renderTrigger() {
+        const selectedOption = this.getSelectedOption();
+        return (hAsync("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, hAsync("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (hAsync("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: async (event) => {
+                event.stopPropagation();
+                this.value = null;
+                await this.formField?.sdValidate();
+            } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
+    }
+    renderDropdown() {
+        if (this.isOpen === false)
+            return null;
+        const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||
+            this.selectRef);
+        return (hAsync("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, hAsync("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "isOpen": ["isOpenChanged"]
+    }; }
+    static get style() { return sdSelectCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 768,
+        "$tagName$": "sd-select",
+        "$members$": {
+            "value": [1032],
+            "options": [1040],
+            "placeholder": [1],
+            "optionPlaceholder": [1, "option-placeholder"],
+            "width": [1],
+            "dropdownHeight": [1, "dropdown-height"],
+            "autoFocus": [4, "auto-focus"],
+            "disabled": [4],
+            "clearable": [4],
+            "searchable": [4],
+            "label": [1],
+            "insideLabel": [4, "inside-label"],
+            "useLabelRequired": [4, "use-label-required"],
+            "labelTooltip": [1, "label-tooltip"],
+            "labelTooltipProps": [16],
+            "name": [1],
+            "rules": [16],
+            "error": [4],
+            "optionRenderer": [16],
+            "isOpen": [32],
+            "itemIndex": [32],
+            "isScrolled": [32],
+            "sdOpen": [64],
+            "sdValidate": [64],
+            "sdReset": [64],
+            "sdResetValidate": [64],
+            "sdFocus": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const sdSelectDropdownCss = () => `.sd-select-dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-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;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
+
+class SdSelectDropdown {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.optionClick = createEvent(this, "sdOptionClick");
+        this.optionFiltered = createEvent(this, "sdOptionFiltered");
+        this.scroll = createEvent(this, "sdScroll");
+    }
+    itemIndex;
+    value = null;
+    options;
+    width;
+    dropdownHeight;
+    searchable;
+    optionPlaceholder;
+    useCheckbox = false;
+    useAll = false;
+    filteredOptions = this.options;
+    searchText = null;
+    isScrolled = false;
+    isDropdownReady = false;
+    optionClick;
+    optionFiltered;
+    scroll;
+    filteredOptionsChanged(newValue) {
+        this.optionFiltered.emit(newValue);
+    }
+    searchTextChanged() {
+        this.filterOptions();
+    }
+    async itemIndexChanged(newIndex, oldIndex) {
+        if (this.searchable) {
+            const searchInput = await this.getNativeInputElement();
+            if (this.itemIndex === -1) {
+                searchInput?.focus({ preventScroll: true });
+                return;
+            }
+            else if (searchInput?.matches(':focus')) {
+                searchInput?.blur();
+            }
+        }
+        const optionElements = this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];
+        const currentItem = optionElements?.[this.itemIndex];
+        if (!currentItem)
+            return;
+        this.optionRef = currentItem;
+        const isOptionDisabled = await this.optionRef.sdIsDisabled();
+        if (isOptionDisabled) {
+            newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
+            return;
+        }
+        this.scrollToOption(currentItem);
+    }
+    componentWillLoad() {
+        this.filteredOptions = this.options;
+        // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
+        requestAnimationFrame(() => {
+            requestAnimationFrame(async () => {
+                const selectedOptions = this.getSelectedOption();
+                // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
+                if (selectedOptions) {
+                    const selectedIndex = Array.isArray(selectedOptions)
+                        ? this.options.indexOf(selectedOptions[0])
+                        : this.options.indexOf(selectedOptions);
+                    const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option') || []);
+                    // 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, 'instant');
+                    }
+                }
+                this.isDropdownReady = true;
+                if (this.searchable) {
+                    const searchInput = await this.getNativeInputElement();
+                    if (searchInput) {
+                        requestAnimationFrame(() => {
+                            searchInput.focus({ preventScroll: true });
+                        });
+                    }
+                }
+            });
+        });
     }
-    // closeDropdown 메서드 구현 (Manager에서 호출됨)
-    closeDropdown() {
-        this.isOpen = false;
+    dropdownRef;
+    searchRef;
+    optionRef;
+    get dropdownSize() {
+        return {
+            '--select-dropdown-width': this.width || '200px',
+            '--select-dropdown-height': this.dropdownHeight || '260px',
+        };
     }
-    // event handlers
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        if (!this.disabled) {
-            this.isOpen = !this.isOpen;
-            this.dropDownShow?.emit({ isOpen: this.isOpen });
-        }
-    };
-    handleOptionClick = (detail) => {
-        const { option, event } = detail;
-        event.stopPropagation();
-        if (!option.disabled) {
-            this.value = option.value;
-            this.isOpen = false;
-        }
-    };
     filterOptions() {
         if (!this.searchText || this.searchText.trim() === '') {
             // 검색어가 없으면 전체 옵션 표시
@@ -8065,21 +8618,24 @@ class SdSelect extends BaseDropdownEvent {
         }
     }
     getSelectedOption() {
-        return this.options.find(option => option.value === this.value);
+        if (typeof this.value !== 'object') {
+            return this.options.find(option => option.value === this.value);
+        }
+        return this.options.filter(option => this.value?.includes(option));
+    }
+    isOptionSelected(value) {
+        if (Array.isArray(this.value)) {
+            return this.value.some(selected => selected.value === value);
+        }
+        return value === this.value;
     }
-    handleDropdownScroll = (event) => {
-        const target = event.target;
-        const scrollTop = target.scrollTop;
-        // 스크롤이 조금이라도 되면 그림자 표시
-        this.isScrolled = scrollTop > 0;
-    };
     async getNativeInputElement() {
         if (this.searchRef) {
-            return this.searchRef.getNativeElement();
+            return this.searchRef.sdGetNativeElement();
         }
         return null;
     }
-    scrollToOption(optionElement) {
+    scrollToOption(optionElement, scrollBehavior = 'smooth') {
         if (!this.dropdownRef || !optionElement)
             return;
         const dropdown = this.dropdownRef;
@@ -8087,79 +8643,55 @@ class SdSelect extends BaseDropdownEvent {
         const optionHeight = optionElement.offsetHeight;
         const dropdownScrollTop = dropdown.scrollTop;
         const dropdownHeight = dropdown.clientHeight;
-        const searchContainer = dropdown.querySelector('.sd-select__search-container');
+        const searchContainer = dropdown.querySelector('.sd-select-search-input');
         const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
         const visibleTop = dropdownScrollTop + searchOffset;
         const visibleBottom = dropdownScrollTop + dropdownHeight;
         if (optionTop < visibleTop) {
-            dropdown.scrollTop = optionTop - searchOffset;
+            dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });
         }
         else if (optionTop + optionHeight > visibleBottom) {
-            dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;
+            dropdown.scrollTo({
+                top: optionTop + optionHeight - dropdownHeight + searchOffset,
+                behavior: scrollBehavior,
+            });
         }
     }
-    // render method
+    handleDropdownScroll = (event) => {
+        const target = event.target;
+        const scrollTop = target.scrollTop;
+        // 스크롤이 조금이라도 되면 그림자 표시
+        this.isScrolled = scrollTop > 0;
+    };
     render() {
-        const style = {
-            '--select-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        return (hAsync(Host, { key: '8f90fd48d8e20b97d35a047d15507d3116c79b23', style: style }, hAsync("div", { key: '91bc6bab24b9d99ab595357ec5591b56510ed161', class: {
-                'sd-select': true,
-                'sd-select--open': this.isOpen,
-                'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'a2ceb7cc71b13887f55f3a44e0f1babd4be388b9', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
-    }
-    renderLabel(label) {
-        if (!label)
-            return null;
-        return hAsync("label", { class: "sd-select__label" }, label);
-    }
-    renderTrigger() {
-        const selectedOption = this.getSelectedOption();
-        return (hAsync("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, hAsync("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (hAsync("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: event => {
-                event.stopPropagation();
-                this.value = null;
-            } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
-    }
-    renderDropdown() {
-        const style = {
-            '--select-dropdown-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        if (this.isOpen === false)
-            return null;
-        return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, hAsync("div", { class: "sd-select__dropdown", style: style, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: option.value === this.value, isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail) }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select__option-placeholder' }, this.optionPlaceholder))))));
+        return (hAsync(Host, { key: 'de06f67bf93dce6db12fee6bce3c6b11b7ee375f', style: this.dropdownSize }, hAsync("div", { key: '42510dd6a21f1aa224f5141555c02729d09a6baf', class: {
+                'sd-select-dropdown': true,
+                'sd-select-dropdown--ready': this.isDropdownReady,
+            }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: '2177a7ad0dc3ea5ded63103a55e03b9b0d4d3913', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder))))));
     }
     static get watchers() { return {
-        "value": ["valueChanged"],
-        "options": ["optionsChanged"],
+        "filteredOptions": ["filteredOptionsChanged"],
         "searchText": ["searchTextChanged"],
-        "itemIndex": ["itemIndexChanged"],
-        "isOpen": ["isOpenChanged"]
+        "itemIndex": ["itemIndexChanged"]
     }; }
-    static get style() { return sdSelectCss(); }
+    static get style() { return sdSelectDropdownCss(); }
     static get cmpMeta() { return {
         "$flags$": 772,
-        "$tagName$": "sd-select",
+        "$tagName$": "sd-select-dropdown",
         "$members$": {
-            "value": [1032],
-            "label": [1],
-            "options": [1040],
-            "placeholder": [1],
-            "optionPlaceholder": [1, "option-placeholder"],
+            "itemIndex": [1026, "item-index"],
+            "value": [8],
+            "options": [16],
             "width": [1],
             "dropdownHeight": [1, "dropdown-height"],
-            "disabled": [4],
-            "clearable": [4],
             "searchable": [4],
-            "optionRenderer": [16],
+            "optionPlaceholder": [1, "option-placeholder"],
+            "useCheckbox": [4, "use-checkbox"],
+            "useAll": [4, "use-all"],
             "filteredOptions": [32],
-            "isOpen": [32],
             "searchText": [32],
-            "itemIndex": [32],
             "isScrolled": [32],
-            "open": [64]
+            "isDropdownReady": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8167,110 +8699,92 @@ class SdSelect extends BaseDropdownEvent {
     }; }
 }
 
-const sdSelectMultipleCss = () => `.sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}.sd-select-multiple__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333}.sd-select-multiple__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}`;
+const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
 
 class SdSelectMultiple extends BaseDropdownEvent {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.sdChange = createEvent(this, "sdChange");
-        this.dropDownShow = createEvent(this, "dropDownShow");
+        this.update = createEvent(this, "sdUpdate");
+        this.dropDownShow = createEvent(this, "sdDropDownShow");
     }
     get el() { return getElement(this); }
     // props
     value = null;
-    label = '';
     options = [];
     placeholder = '선택';
     optionPlaceholder = '옵션이 없습니다.';
     width = '200px';
     dropdownHeight = '260px';
+    autoFocus = false;
     disabled = false;
     clearable = false;
     searchable = false;
+    // props - select multiple specific
+    useAll = false;
     useCheckbox = false;
-    // props - custom slots
+    // props - label
+    label = '';
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    // props - form
+    name;
+    rules = [];
+    error = false;
     optionRenderer;
     // states
-    filteredOptions = this.options;
     isOpen = false;
-    searchText = null;
     itemIndex = -1;
     isScrolled = false;
     // events
-    sdChange;
+    update;
     dropDownShow;
     selectRef;
-    searchRef;
-    optionRef;
-    dropdownRef;
-    async open() {
+    triggerRef;
+    formField;
+    filteredOptions = this.options;
+    dropDownWidth = this.width;
+    async sdOpen() {
         this.isOpen = true;
     }
-    valueChanged() {
-        this.sdChange?.emit(this.value);
+    async sdValidate() {
+        this.formField?.sdValidate();
     }
-    optionsChanged() {
-        this.filteredOptions = this.options;
-        this.filterOptions();
+    async sdReset() {
+        this.formField?.sdReset();
     }
-    searchTextChanged() {
-        this.filterOptions();
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
     }
-    async itemIndexChanged(newIndex, oldIndex) {
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            if (this.itemIndex === -1) {
-                searchInput?.focus();
-                return;
-            }
-            else if (searchInput?.matches(':focus')) {
-                searchInput?.blur();
-            }
-        }
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || []);
-        const currentItem = optionElements?.[this.itemIndex];
-        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 sdFocus() {
+        this.formField?.sdFocus();
+    }
+    valueChanged() {
+        this.update?.emit(this.value);
     }
     async isOpenChanged() {
         // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
         this.onDropdownToggle(this.isOpen);
-        const selectedOption = this.getSelectedOption();
-        if (!selectedOption) {
-            this.itemIndex = -1;
-        }
-        else {
-            this.itemIndex = this.options.indexOf(selectedOption[0]);
-        }
         this.dropDownShow?.emit({ isOpen: this.isOpen });
-        if (this.isOpen === false)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || []);
-        const currentItem = optionElements?.[this.itemIndex];
-        // 드롭다운이 열릴 때 검색 입력에 포커스
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            searchInput?.focus();
+        if (this.isOpen === false) {
+            await this.formField?.sdValidate();
         }
-        if (!currentItem)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이
-        this.scrollToOption(currentItem);
     }
-    connectedCallback() {
-        // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
-        this.filteredOptions = this.options;
+    componentWillLoad() {
         this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
     }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.selectRef?.focus();
+        }
+    }
+    // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
+    componentDidRender() {
+        const trigger = this.triggerRef;
+        const rect = trigger?.getBoundingClientRect();
+        this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
+    }
     disconnectedCallback() {
         this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
     }
@@ -8303,44 +8817,6 @@ class SdSelectMultiple extends BaseDropdownEvent {
                 break;
         }
     }
-    // event handlers
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        if (!this.disabled) {
-            this.isOpen = !this.isOpen;
-            this.dropDownShow?.emit({ isOpen: this.isOpen });
-        }
-    };
-    handleOptionClick = (detail) => {
-        const { option, event } = detail;
-        event.stopPropagation();
-        this.handleOptionSelection(option);
-    };
-    filterOptions() {
-        if (!this.searchText || this.searchText.trim() === '') {
-            // 검색어가 없으면 전체 옵션 표시
-            this.filteredOptions = this.options;
-        }
-        else {
-            // 검색어가 있으면 필터링
-            this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
-        }
-    }
-    getSelectedOption() {
-        return this.options.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;
@@ -8354,98 +8830,86 @@ class SdSelectMultiple extends BaseDropdownEvent {
             this.value = [...(this.value || []), option];
         }
     };
+    getSelectedOption() {
+        return this.options.filter(option => this.value?.includes(option));
+    }
     closeDropdown() {
         this.isOpen = false;
     }
-    scrollToOption(optionElement) {
-        if (!this.dropdownRef || !optionElement)
-            return;
-        const dropdown = this.dropdownRef;
-        const optionTop = optionElement.offsetTop;
-        const optionHeight = optionElement.offsetHeight;
-        const dropdownScrollTop = dropdown.scrollTop;
-        const dropdownHeight = dropdown.clientHeight;
-        const searchContainer = dropdown.querySelector('.sd-select__search-container');
-        const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
-        const visibleTop = dropdownScrollTop + searchOffset;
-        const visibleBottom = dropdownScrollTop + dropdownHeight;
-        if (optionTop < visibleTop) {
-            dropdown.scrollTop = optionTop - searchOffset;
-        }
-        else if (optionTop + optionHeight > visibleBottom) {
-            dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            this.dropDownShow?.emit({ isOpen: this.isOpen });
         }
-    }
-    // render method
+    };
+    handleOptionClick = (detail) => {
+        const { option, event } = detail;
+        event.stopPropagation();
+        this.handleOptionSelection(option);
+    };
     render() {
-        const style = {
-            '--select-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        return (hAsync(Host, { key: 'aa11a88a19987be498da603cfa81c95e89f935c0', style: style }, hAsync("div", { key: '35d1a93e5bee37027d43a90fadc32c335569ce66', class: {
+        return (hAsync("sd-field", { key: 'cc40c09b8c1ea2aa049d12857c6cc80cd5a5966b', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '0d90b8368287d7e67a384234a976da5d387b065b', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'd4d581d5fe2589dfd5ed5072324954f75f6c7382', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
-    }
-    renderLabel(label) {
-        if (!label)
-            return null;
-        return hAsync("label", { class: "sd-select-multiple__label" }, label);
+                'sd-select-multiple--error': !!this.error,
+            }, style: { '--select-width': this.width || '200px' }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();
-        return (hAsync("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, hAsync("span", { class: "sd-select-multiple__value" }, !selectedOption
-            ? '선택'
-            : selectedOption.length
-                ? selectedOption.map(option => option.label).join(', ')
-                : this.placeholder), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple__clear", onClick: event => {
+        return (hAsync("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, hAsync("span", { class: "sd-select-multiple__value" }, !selectedOption || selectedOption.length === 0
+            ? this.placeholder
+            : selectedOption.map(option => option.label).join(', ')), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple__clear", onClick: async (event) => {
                 event.stopPropagation();
                 this.value = null;
+                await this.formField?.sdValidate();
             } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen } })));
     }
     renderDropdown() {
         if (this.isOpen === false)
             return null;
-        return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, hAsync("div", { class: "sd-select-multiple__dropdown", onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("div", { class: {
-                'sd-select-multiple__search-container': true,
-                'sd-select-multiple__search-container--scrolled': this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, hAsync("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;
-            } }, hAsync("sd-icon", { name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.value?.some(selected => selected.value === option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple__option-placeholder' }, this.optionPlaceholder))))));
+        const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__trigger') ||
+            this.selectRef);
+        return (hAsync("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, hAsync("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, useCheckbox: this.useCheckbox, useAll: this.useAll, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
-        "options": ["optionsChanged"],
-        "searchText": ["searchTextChanged"],
-        "itemIndex": ["itemIndexChanged"],
         "isOpen": ["isOpenChanged"]
     }; }
     static get style() { return sdSelectMultipleCss(); }
     static get cmpMeta() { return {
-        "$flags$": 772,
+        "$flags$": 768,
         "$tagName$": "sd-select-multiple",
         "$members$": {
             "value": [1040],
-            "label": [1],
             "options": [1040],
             "placeholder": [1],
             "optionPlaceholder": [1, "option-placeholder"],
             "width": [1],
             "dropdownHeight": [1, "dropdown-height"],
+            "autoFocus": [4, "auto-focus"],
             "disabled": [4],
             "clearable": [4],
             "searchable": [4],
+            "useAll": [4, "use-all"],
             "useCheckbox": [4, "use-checkbox"],
+            "label": [1],
+            "useLabelRequired": [4, "use-label-required"],
+            "labelTooltip": [1, "label-tooltip"],
+            "labelTooltipProps": [16],
+            "name": [1],
+            "rules": [16],
+            "error": [4],
             "optionRenderer": [16],
-            "filteredOptions": [32],
             "isOpen": [32],
-            "searchText": [32],
             "itemIndex": [32],
             "isScrolled": [32],
-            "open": [64]
+            "sdOpen": [64],
+            "sdValidate": [64],
+            "sdReset": [64],
+            "sdResetValidate": [64],
+            "sdFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8453,19 +8917,18 @@ class SdSelectMultiple extends BaseDropdownEvent {
     }; }
 }
 
-const sdSelectMultipleGroupCss = () => `.sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select-multiple-group{display:inline-block;height:fit-content}sd-select-multiple-group:focus,sd-select-multiple-group:focus-visible,sd-select-multiple-group:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white;color:#333333}sd-select-multiple-group .sd-select-multiple-group:hover:not(.sd-select-multiple-group--disabled){background:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__label{border-right:1px solid #cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger{color:#888888}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-visible,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group__container{position:relative;width:100%;display:flex}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-multiple-group__dropdown--ready{opacity:1}`;
+const sdSelectMultipleGroupCss = () => `.sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select-multiple-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple-group:focus,sd-select-multiple-group:focus-visible,sd-select-multiple-group:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group{width:100%}sd-select-multiple-group .sd-select-multiple-group .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 .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 .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 .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 .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}`;
 
 class SdSelectMultipleGroup extends BaseDropdownEvent {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.sdChange = createEvent(this, "sdChange");
-        this.dropDownShow = createEvent(this, "dropDownShow");
+        this.update = createEvent(this, "sdUpdate");
+        this.dropDownShow = createEvent(this, "sdDropDownShow");
     }
     get el() { return getElement(this); }
     // props
     value = null;
-    label = '';
     options = [];
     placeholder = '선택';
     optionPlaceholder = '옵션이 없습니다.';
@@ -8478,6 +8941,15 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     useAll = false;
     allCheckedLabel = '전체';
     allCheckOptionLabel = '전체';
+    // props - label
+    label = '';
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    // props - form
+    name;
+    rules = [];
+    error = false;
     // props - custom styles
     containerStyle = {};
     triggerStyle = {};
@@ -8494,14 +8966,33 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     isScrolled = false;
     isDropdownReady = false;
     // events
-    sdChange;
+    update;
     dropDownShow;
     selectRef;
     searchRef;
+    triggerRef;
     optionRef;
     dropdownRef;
+    formField;
+    dropDownWidth = this.width;
+    async sdOpen() {
+        await new Promise(resolve => setTimeout(resolve, 0));
+        this.isOpen = true;
+    }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
     valueChanged() {
-        this.sdChange?.emit(this.value);
+        this.update?.emit(this.value);
     }
     optionsChanged() {
         this.filteredOptions = this.options;
@@ -8541,6 +9032,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
         this.dropDownShow?.emit({ isOpen: this.isOpen });
         this.isDropdownReady = false;
         if (this.isOpen === false) {
+            await this.formField?.sdValidate();
             return;
         }
         // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
@@ -8572,15 +9064,17 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             });
         });
     }
-    async open() {
-        await new Promise(resolve => setTimeout(resolve, 0));
-        this.isOpen = true;
-    }
     componentWillLoad() {
         // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
         this.filteredOptions = this.options;
         this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
     }
+    // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
+    componentDidRender() {
+        const trigger = this.triggerRef;
+        const rect = trigger?.getBoundingClientRect();
+        this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
+    }
     disconnectedCallback() {
         this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
     }
@@ -8712,7 +9206,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     };
     async getNativeInputElement() {
         if (this.searchRef) {
-            return this.searchRef.getNativeElement();
+            return this.searchRef.sdGetNativeElement();
         }
         return null;
     }
@@ -8815,26 +9309,19 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        const style = {
-            '--select-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        return (hAsync(Host, { key: '9b9985d412b87c72d6408acd74f8f120a5918bc2', style: style }, hAsync("div", { key: '3e2c08541d14cc31ecf3f2d383ac20804ce809ef', class: {
+        return (hAsync("sd-field", { key: '7ec71405f801265b0abf2d381491a65454c540cd', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '80c1db9cd2c47e4acfece06a9b23896cc0acef88', 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), hAsync("div", { key: '2eded5c3c25b200bae874e0830ce9433744b2a53', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
-    }
-    renderLabel(label, labelStyle) {
-        if (!label)
-            return null;
-        return (hAsync("label", { class: "sd-select-multiple-group__label", style: labelStyle }, label));
+                'sd-select-multiple-group--label': !!this.label,
+            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();
-        return (hAsync("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, hAsync("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
+        return (hAsync("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, hAsync("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: async (event) => {
                 event.stopPropagation();
                 this.value = null;
+                await this.formField?.sdValidate();
             } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
                 'sd-select-multiple-group__arrow': true,
                 'sd-select-multiple-group__arrow--open': this.isOpen,
@@ -8842,7 +9329,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     }
     renderDropdown() {
         const style = {
-            '--select-width': this.width || '200px',
+            '--select-width': this.dropDownWidth || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
         if (this.isOpen === false)
@@ -8872,7 +9359,6 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
         "$tagName$": "sd-select-multiple-group",
         "$members$": {
             "value": [1040],
-            "label": [1],
             "options": [1040],
             "placeholder": [1],
             "optionPlaceholder": [1, "option-placeholder"],
@@ -8885,6 +9371,13 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             "useAll": [4, "use-all"],
             "allCheckedLabel": [1, "all-checked-label"],
             "allCheckOptionLabel": [1, "all-check-option-label"],
+            "label": [1],
+            "useLabelRequired": [4, "use-label-required"],
+            "labelTooltip": [1, "label-tooltip"],
+            "labelTooltipProps": [16],
+            "name": [1],
+            "rules": [16],
+            "error": [4],
             "containerStyle": [16],
             "triggerStyle": [16],
             "dropdownStyle": [16],
@@ -8897,7 +9390,11 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             "itemIndex": [32],
             "isScrolled": [32],
             "isDropdownReady": [32],
-            "open": [64]
+            "sdOpen": [64],
+            "sdValidate": [64],
+            "sdReset": [64],
+            "sdResetValidate": [64],
+            "sdFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8921,7 +9418,7 @@ class SdSelectOption {
     disabled = false;
     useCheckbox = false;
     isHovered = false;
-    async isDisabled() {
+    async sdIsDisabled() {
         return !!this.option.disabled;
     }
     optionClick;
@@ -8936,13 +9433,13 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync(Host, { key: '1a19f832f8cedf6ccc9ad6e0b973478c304b43e5' }, hAsync("div", { key: '22db5c447a29ffdb318c4814711160c71923914b', class: {
+        return (hAsync(Host, { key: '33542be792e3345ee693a6064f9398ecd1fceda1' }, hAsync("div", { key: '408d402f5e4a845ebb896f78a557ac93ca414eaa', 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 ? (hAsync("div", { class: "sd-select__option__checkbox-wrapper" }, hAsync("sd-checkbox", { checked: this.isSelected, disabled: this.option.disabled,
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: this.handleClick }, this.useCheckbox ? (hAsync("div", { class: "sd-select__option__checkbox-wrapper" }, hAsync("sd-checkbox", { value: this.isSelected, disabled: this.option.disabled,
             //   checkboxStyle={
             //    !this.isSelected
             //     ? { borderColor: '#888' }
@@ -8968,7 +9465,7 @@ class SdSelectOption {
             "disabled": [4],
             "useCheckbox": [4, "use-checkbox"],
             "isHovered": [32],
-            "isDisabled": [64]
+            "sdIsDisabled": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9022,7 +9519,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: 'f6f8a7ce8cb9c68e4f748e518d1fe3a4ae06802c', class: {
+        return (hAsync("div", { key: '9ba2c1d9963ae5b20d8823ed4e1054f4b1ea1164', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -9031,10 +9528,10 @@ class SdSelectOptionGroup {
                 '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) }, hAsync("div", { key: '0b5fe050c0d370bb92e63c0a54d4923b0d05e8d3', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '2d33a17d0f0104d72cd2ce54ec074a892765a70b', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: '6576ff206863a28062566b816cd81955f1890ec2', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'ad1367ec16aff35a09bc1ca62d4981a29ad0c20e', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: 'c13521ff2721292c8f06f619249ea7c4ab89e88c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'f9c9bf0a5d71161259bc72b14af0b20e57213f75', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: 'a51e3950353966056edd756259d3224bd588c78b', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'ed003ff2d7616096a4759b253718e5fc5a09c007', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss(); }
     static get cmpMeta() { return {
@@ -9059,41 +9556,41 @@ class SdSelectOptionGroup {
     }; }
 }
 
-const sdSelectSearchInputCss = () => `.sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select-search-input sd-input{width:100%}.sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
+const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center}sd-select-search-input .sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}sd-select-search-input .sd-select-search-input sd-input{width:100%}sd-select-search-input .sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
 
 class SdSelectSearchInput {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdSearchInput = createEvent(this, "sdSearchInput");
-        this.sdSearchFocus = createEvent(this, "sdSearchFocus");
+        this.searchInput = createEvent(this, "sdSearchInput");
+        this.searchFocus = createEvent(this, "sdSearchFocus");
     }
     isScrolled = false;
     searchText = '';
-    sdSearchInput;
-    sdSearchFocus;
+    searchInput;
+    searchFocus;
     searchRef;
-    async getNativeElement() {
+    async sdGetNativeElement() {
         if (this.searchRef) {
-            return this.searchRef.getNativeElement();
+            return this.searchRef.sdGetNativeElement();
         }
         return null;
     }
-    async searchInputFocus() {
-        const input = await this.getNativeElement();
+    async sdSearchInputFocus() {
+        const input = await this.sdGetNativeElement();
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (hAsync("div", { key: '65bd006cb11e8979bdfc15c647623f10b624d556', class: {
+        return (hAsync("div", { key: '199b6bdb1da143241f5e2cf797cc0f484b38aac0', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '153b003caf75f4deb45476d70b6695699ed08827', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
-                this.sdSearchInput.emit(String(event?.detail));
+            }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: 'c768d0a2324f3ea40cff3eb049ddfad3cddcb882', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+                this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
-                this.sdSearchFocus.emit();
+                this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, hAsync("sd-icon", { key: 'f55710c6a77d73cf0ff65891ca5028caefc174a2', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, hAsync("sd-icon", { key: '21062cf3032b5488487b61a08753de01a5de7b98', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get style() { return sdSelectSearchInputCss(); }
     static get cmpMeta() { return {
@@ -9102,8 +9599,8 @@ class SdSelectSearchInput {
         "$members$": {
             "isScrolled": [4, "is-scrolled"],
             "searchText": [1, "search-text"],
-            "getNativeElement": [64],
-            "searchInputFocus": [64]
+            "sdGetNativeElement": [64],
+            "sdSearchInputFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9111,275 +9608,7 @@ class SdSelectSearchInput {
     }; }
 }
 
-const sdTableCss = () => `.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:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;height:var(--table-height, auto)}.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;position:relative}.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 sd-tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-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 sd-tr sd-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 sd-tr sd-th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-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 sd-tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:calc(var(--table-height, auto) - 36px);min-height:calc(100% - 36px);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 sd-tbody sd-tr:last-of-type sd-td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-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 sd-tbody sd-tr sd-td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-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__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%)}`;
-
-let SdTable$1 = class SdTable {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.sdSelectChange = createEvent(this, "sdSelectChange");
-        this.sdPageChange = createEvent(this, "sdPageChange");
-        this.sdRowsPerPageChange = createEvent(this, "sdRowsPerPageChange");
-    }
-    get el() { return getElement(this); }
-    columns;
-    rows;
-    selected = new Set();
-    rowKey = 'id';
-    selectable = false;
-    resizable = false;
-    width;
-    height;
-    stickyHeader = false;
-    stickyColumn = { left: 0, right: 0 };
-    noDataLabel = '데이터가 없습니다.';
-    isLoading = false;
-    pagination;
-    bodyCellRenderer;
-    useInternalPagination = false;
-    useRowsPerPageSelect = false;
-    rowsPerPageOption = [
-        { label: '10개씩 보기', value: 10 },
-        { label: '25개씩 보기', value: 25 },
-        { label: '50개씩 보기', value: 50 },
-        { label: '100개씩 보기', value: 100 },
-    ];
-    sdSelectChange;
-    sdPageChange;
-    sdRowsPerPageChange;
-    currentPage = this.pagination?.page || 1;
-    innerRows = [];
-    innerSelected = new Set();
-    columnWidths = [];
-    scrolledLeft = false;
-    scrolledRight = false;
-    handleColumnsChange(newCols) {
-        this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
-    }
-    handleRowsChange(newRows) {
-        this.innerRows = [...newRows];
-    }
-    handleSelectedChange(newSelected) {
-        this.innerSelected = new Set(newSelected);
-    }
-    handlePaginationChange(newVal) {
-        if (newVal?.page && newVal.page !== this.currentPage)
-            this.currentPage = newVal.page;
-    }
-    componentWillLoad() {
-        this.innerRows = [...(this.rows || [])];
-        this.innerSelected = new Set(this.selected);
-        this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
-    }
-    componentDidLoad() {
-        // SSR 환경 체크
-        if (typeof window === 'undefined')
-            return;
-        const middle = this.el.querySelector('.sd-table__middle');
-        if (!middle)
-            return;
-        const onScroll = () => {
-            const { scrollLeft, scrollWidth, clientWidth } = middle;
-            this.scrolledLeft = scrollLeft > 0;
-            this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
-        };
-        middle.addEventListener('scroll', onScroll, { passive: true });
-        onScroll();
-    }
-    // ----- Derived getters -----
-    get visibleColumns() {
-        return this.columns.filter(col => col.visible !== false);
-    }
-    get paginatedRows() {
-        if (!this.pagination || !this.useInternalPagination)
-            return this.innerRows;
-        const { rowsPerPage = this.rows.length } = this.pagination || {};
-        const result = this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
-        return result;
-    }
-    get lastPageNumber() {
-        const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};
-        return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));
-    }
-    get sdTableClasses() {
-        return [
-            'sd-table',
-            this.stickyHeader && 'sd-table--sticky-header',
-            this.selectable && 'sd-table--selectable',
-            this.resizable && 'sd-table--resizable',
-            !this.innerRows.length && 'sd-table--no-data',
-            ((this.stickyColumn?.left ?? 0) > 0 || (this.stickyColumn?.right ?? 0) > 0) &&
-                'sd-table--sticky-column',
-            this.scrolledLeft && 'sd-table--scrolled-left',
-            this.scrolledRight && 'sd-table--scrolled-right',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-    // ----- Selection -----
-    //  private isRowSelected(row: Row): boolean {
-    //   return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
-    //  }
-    //  private updateRowSelect(row: Row) {
-    //   const selectedArray = Array.from(this.innerSelected);
-    //   const exists = this.isRowSelected(row);
-    //   const newSelected = exists
-    //    ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
-    //    : [...selectedArray, row];
-    //   // 동일 상태면 set하지 않음 → 불필요 렌더 방지
-    //   if (newSelected.length === selectedArray.length) return;
-    //   this.innerSelected = new Set(newSelected);
-    //   this.sdSelectChange.emit(Array.from(this.innerSelected));
-    //  }
-    toggleSelectAll(checked) {
-        if (checked) {
-            const pageRows = new Set([...this.paginatedRows]);
-            this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
-        }
-        else {
-            const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);
-            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
-        }
-        this.sdSelectChange.emit(Array.from(this.innerSelected));
-    }
-    get isAllChecked() {
-        const total = this.paginatedRows.length;
-        const selectedCount = this.paginatedRows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey] === row[this.rowKey])).length;
-        if (selectedCount === 0)
-            return false; // 아무것도 안 선택됨
-        if (selectedCount === total)
-            return true; // 전부 선택됨
-        return null; // 일부만 선택됨
-    }
-    // ----- Helpers -----
-    getStickyStyle(colIdx) {
-        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);
-        const rightOffset = this.columnWidths
-            .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)
-            .reduce((a, b) => a + b, 0);
-        return {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
-        };
-    }
-    handleResize(index, event) {
-        // SSR 환경 체크
-        if (typeof document === 'undefined')
-            return;
-        const startX = event.clientX;
-        const startWidth = this.columnWidths[index];
-        const handleMouseMove = (moveEvent) => {
-            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);
-            this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
-        };
-        const handleMouseUp = () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-    }
-    //  private getCellValue(column: SdTableColumn, row: Row) {
-    //   const { field, format, name } = column;
-    //   const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
-    //   return format ? format(value, row) : value;
-    //  }
-    // ----- Render -----
-    renderHeader() {
-        return (hAsync("thead", null, hAsync("sd-tr", null, this.selectable && (hAsync("sd-th", { class: {
-                'sd-th': true,
-                'sd-th--selected': true,
-                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
-            }, style: {
-                '--sticky-left-offset': '0px',
-            } }, hAsync("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), this.visibleColumns.map((col, colIdx) => (hAsync("sd-th", { key: col.name, class: {
-                'sd-th': true,
-                [`${col.thClass}`]: Boolean(col.thClass),
-                'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
-                'sticky-right': Boolean(this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right),
-                'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
-                'sticky-right-edge': Boolean(this.stickyColumn.right &&
-                    colIdx === this.visibleColumns.length - this.stickyColumn.right),
-            }, style: this.getStickyStyle(colIdx) }, hAsync("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, hAsync("slot", { name: `header-cell-${col.name}` }, hAsync("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (hAsync("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
-    }
-    render() {
-        return (hAsync(Host, { key: '2ebf8e9464f1cdf23182fca5c51b16a05bfe0dd7' }, hAsync("div", { key: 'd4fc8f59fd9b9d161514149a27746d83f99dc0f4', class: "sd-table__wrapper", style: {
-                '--table-width': this.width,
-                '--table-height': this.height,
-            } }, hAsync("div", { key: '0788f53b9e0945d4bdc0c0d57c946c3771034772', class: "sd-table__container" }, hAsync("div", { key: 'a784983bbd7fcc36d92a54bd3dbfa0726e03abbe', class: "sd-table__middle", role: "table" }, hAsync("div", { key: '17c733dd95289a3c96ed6715905c874c97a83815', part: "table", class: this.sdTableClasses }, this.renderHeader(), hAsync("sd-tbody", { key: '9c4190b99f8c25479860b2caf330a0153a995215' }, hAsync("slot", { key: '135f42fe21f830703b7e04acfdcd8a572b6dbf50' })))), hAsync("div", { key: '5e8955886809083ad94bf77c68cc5cc69ca893ac', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: 'c1c9fa082e817f4df5e393d21fb749c78f40db02', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'a10b36dbf2ae6fa80ee69f945e0577b38fd0fcee', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
-                if (!this.useInternalPagination) {
-                    this.sdPageChange.emit(e.detail);
-                }
-                else {
-                    this.currentPage = e.detail;
-                    this.sdPageChange.emit(this.currentPage);
-                }
-            } }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '005995ad1681f5e7dc16b0a711e87eccc2bedb01', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
-                const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
-                if (!this.useInternalPagination) {
-                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
-                }
-                else {
-                    const newRowsPerPage = Number(e.detail.value || 0);
-                    let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));
-                    let newCurrentPage = this.currentPage;
-                    if (newCurrentPage > newLastPage) {
-                        newCurrentPage = newLastPage;
-                    }
-                    this.pagination = {
-                        page: newCurrentPage,
-                        rowsPerPage: newRowsPerPage,
-                        lastPage: newLastPage,
-                    };
-                    this.currentPage = newCurrentPage;
-                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
-                }
-            } })))))));
-    }
-    static get watchers() { return {
-        "columns": ["handleColumnsChange"],
-        "rows": ["handleRowsChange"],
-        "selected": ["handleSelectedChange"],
-        "pagination": ["handlePaginationChange"]
-    }; }
-    static get style() { return sdTableCss(); }
-    static get cmpMeta() { return {
-        "$flags$": 772,
-        "$tagName$": "sd-table",
-        "$members$": {
-            "columns": [16],
-            "rows": [1040],
-            "selected": [1040],
-            "rowKey": [1, "row-key"],
-            "selectable": [4],
-            "resizable": [4],
-            "width": [1],
-            "height": [1],
-            "stickyHeader": [4, "sticky-header"],
-            "stickyColumn": [16],
-            "noDataLabel": [1, "no-data-label"],
-            "isLoading": [4, "is-loading"],
-            "pagination": [16],
-            "bodyCellRenderer": [16],
-            "useInternalPagination": [4, "use-internal-pagination"],
-            "useRowsPerPageSelect": [4, "use-rows-per-page-select"],
-            "rowsPerPageOption": [16],
-            "currentPage": [32],
-            "innerRows": [32],
-            "innerSelected": [32],
-            "columnWidths": [32],
-            "scrolledLeft": [32],
-            "scrolledRight": [32]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-};
-
-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 sdTableCss = () => `.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);display:flex;flex-direction:column;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{position:relative;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--selectable td.sd-td--selected sd-checkbox label,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label{position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label:before,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.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:transparent;text-align:center;display:flex;align-items:center;justify-content:center;flex:1;min-height:240px;translate:0 -10%;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{font-size:12px;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%}}`;
 
 class SdTable {
     constructor(hostRef) {
@@ -9391,7 +9620,7 @@ class SdTable {
     get el() { return getElement(this); }
     columns;
     rows;
-    selected = new Set();
+    selected = [];
     rowKey = 'id';
     selectable = false;
     resizable = false;
@@ -9506,7 +9735,7 @@ class SdTable {
     }
     componentWillLoad() {
         this.innerRows = [...(this.rows || [])];
-        this.innerSelected = new Set(this.selected);
+        this.innerSelected = new Set(this.selected || []);
         this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
         if (this.pagination?.page) {
             this.currentPage = this.pagination.page;
@@ -9706,6 +9935,7 @@ class SdTable {
             return;
         this.innerSelected = new Set(newSelected);
         this.cachedIsAllChecked = undefined;
+        this.selected = Array.from(this.innerSelected);
         this.sdSelectChange.emit(Array.from(this.innerSelected));
     }
     toggleSelectAll(checked) {
@@ -9718,6 +9948,7 @@ class SdTable {
             this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
         }
         this.cachedIsAllChecked = undefined;
+        this.selected = Array.from(this.innerSelected);
         this.sdSelectChange.emit(Array.from(this.innerSelected));
     }
     get isAllChecked() {
@@ -9925,7 +10156,7 @@ class SdTable {
                 'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
             }, style: {
                 '--sticky-left-offset': '0px',
-            } }, hAsync("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => {
+            } }, hAsync("sd-checkbox", { value: this.isAllChecked, disabled: !this.paginatedRows.length, onSdUpdate: (e) => this.toggleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => {
             const rendered = this.headerCellRenderer?.(col);
             return (hAsync("th", { key: col.name, class: {
                     'sd-th': true,
@@ -9969,7 +10200,7 @@ class SdTable {
                 'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
             }, style: {
                 '--sticky-left-offset': '0px',
-            } }, hAsync("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), stickyLeftCols.map((column, idx) => {
+            } }, hAsync("sd-checkbox", { value: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdUpdate: () => this.updateRowSelect(row) }))), stickyLeftCols.map((column, idx) => {
             const rendered = this.bodyCellRenderer?.(column, row);
             return (hAsync("td", { key: column.name, part: `td-${column.name}`, class: {
                     'sd-td': true,
@@ -10022,16 +10253,16 @@ class SdTable {
             }, "aria-hidden": "true" }, hAsync("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (hAsync(Host, { key: 'efc61eba99d3b97fe5b102374b94f1f1eaadd7eb' }, hAsync("div", { key: '71e7c6d7b7bd4fdd53e1c95a821600e11735ec76', class: "sd-table__wrapper", style: {
+        return (hAsync(Host, { key: 'e6ec01e7493b69bab1bf2766d9c322cee388b274' }, hAsync("div", { key: 'cc717d111a6ce64c34b6a23b1feb9cc8933a0438', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, hAsync("div", { key: 'e77acaaefdd2948540fcadec624944b66140556e', class: "sd-table__container", style: {
+            } }, hAsync("div", { key: '0c89a798a475bb25c10c5959b5e50c81f01503c4', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, hAsync("div", { key: 'd4c6a8fadd18abc1f6020ae9f5e7cf60afc79d7f', class: {
+            } }, hAsync("div", { key: 'e83ee499928d95e719ffca0411a422deeed162d0', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (hAsync("div", { key: 'ed768c01fe4a3f6fb85c25061ff6f7789571d149', class: "sd-table__middle--loading__spinner" }, hAsync("sd-loading-spinner", { key: 'a563c071edee17150d728f233d2700224e96c09b' }))), hAsync("table", { key: 'fbdab865f8fd3c83fb6e778324fb56239c1790f3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), hAsync("div", { key: '04e385b3ace1983ce0bb2b29db44ee1d1d8e147d', class: "sd-table__bottom" }, !this.paginatedRows.length && (hAsync("div", { key: 'b1a964204f68fc2058a6ff8c833e65567442f9ee', class: "sd-table__no-data" }, hAsync("slot", { key: '8d078f856e54f4be105b1c60c137b28f51a21bb4', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '718ff6d9be7f909e20673ab2af7a0d357fe8a6a2', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '23a117bc9f93fb68162c9c18ff309a110a0992a2', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'd233637ddd86f1abc63701443601bddc1439957d', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (hAsync("div", { key: '30d8283122a21484e0029128e637fdd9a5c6ae8c', class: "sd-table__middle--loading__spinner" }, hAsync("sd-loading-spinner", { key: '92911a08fa4d0776712e8c30be2f16d59d512cbc' }))), hAsync("table", { key: '209eb39f61bb46e9027046be619da492be2b080e', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (hAsync("div", { key: 'cb1fccb96bb51a4e14d40c2ff286f17d8bc8ce11', class: "sd-table__bottom" }, hAsync("div", { key: '9149ee50257114145d14e0666239f72dcfc5b01a', class: "sd-table__no-data" }, hAsync("slot", { key: 'a5ead23bc5a2e32418473f6f6737f3b156177842', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: 'd5482e1bb04d20579a88841bf8d885d08c1593b1', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '65425eff37a1f2c1add27b8923cd86fe8d98ba98', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'dfb3ba8654e33dc334392f37189f422d6a1f1416', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": ["handleColumnsChange"],
@@ -10040,10 +10271,10 @@ class SdTable {
         "selected": ["handleSelectedChange"],
         "pagination": ["handlePaginationChange"]
     }; }
-    static get style() { return sdTableBackupCss(); }
+    static get style() { return sdTableCss(); }
     static get cmpMeta() { return {
         "$flags$": 772,
-        "$tagName$": "sd-table-backup",
+        "$tagName$": "sd-table",
         "$members$": {
             "columns": [16],
             "rows": [1040],
@@ -10086,34 +10317,33 @@ class SdTable {
     }; }
 }
 
-const sdTabsCss = () => `sd-tabs{display:inline-block}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:4px;border-bottom:1px solid #0075ff}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid #cccccc;border-bottom:none;border-radius:4px 4px 0 0;background-color:#f6f6f6;color:#888888;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::after{content:attr(data-label);position:absolute;font-weight:400;transition:font-weight 0.2s ease}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.3s}sd-tabs .sd-tabs__tab--selected{border-color:#0075ff;color:#0075ff;background-color:white}sd-tabs .sd-tabs__tab--selected::after{font-weight:700}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:#0075ff;opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:#888888;opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:700;visibility:hidden}sd-tabs .sd-tabs--md .sd-tabs__tab{padding:12px 32px;font-size:12px;line-height:20px}sd-tabs .sd-tabs--sm .sd-tabs__tab{padding:8px 20px;font-size:12px;line-height:16px}sd-tabs .sd-tabs--sub{gap:32px;border-bottom:none}sd-tabs .sd-tabs--sub .sd-tabs__tab{border:none;border-radius:0;background-color:transparent;color:#222222;font-weight:400;padding:0 0 2px 0;position:relative}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;width:100%;background-color:#0075ff;opacity:0;transition:opacity 0.2s ease}sd-tabs .sd-tabs--sub .sd-tabs__tab::after{font-weight:400}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075ff;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::after{font-weight:700}`;
+const 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}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:700}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:#0075ff;opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:#888888;opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:700;visibility:hidden;position:relative}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:400;transition:font-weight 0.2s ease}sd-tabs .sd-tabs--md .sd-tabs__tab{padding:12px 32px;font-size:12px;line-height:20px}sd-tabs .sd-tabs--sm .sd-tabs__tab{padding:8px 20px;font-size:12px;line-height:16px}sd-tabs .sd-tabs--sub{gap:32px;border-bottom:none}sd-tabs .sd-tabs--sub .sd-tabs__tab{border:none;border-radius:0;background-color:transparent;color:#222222;font-weight:400;padding:0 0 2px 0;position:relative}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;width:100%;background-color:#0075ff;opacity:0;transition:opacity 0.2s ease}sd-tabs .sd-tabs--sub .sd-tabs__tab::after{font-weight:400}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075ff;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::after{font-weight:700}`;
 
 class SdTabs {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdChange = createEvent(this, "sdChange");
+        this.update = createEvent(this, "sdUpdate");
     }
     value;
     tabs = [];
     size = 'md';
     isSub = false;
-    selectedValue;
-    sdChange;
+    update;
     componentWillLoad() {
         if (this.value !== undefined && this.value !== null) {
-            this.selectedValue = this.value;
+            this.value = this.value;
         }
     }
     valueChanged(newValue) {
-        this.selectedValue = newValue;
+        this.value = newValue;
     }
     handleTabClick = (tabValue) => {
-        this.selectedValue = tabValue;
         this.value = tabValue;
-        this.sdChange.emit(tabValue);
+        this.value = tabValue;
+        this.update.emit(tabValue);
     };
     isTabSelected(tab) {
-        return this.selectedValue === tab.value;
+        return this.value === tab.value;
     }
     getTabClasses(tab) {
         const classes = [
@@ -10136,10 +10366,9 @@ class SdTabs {
         return { bgColor: '#E5E5E5', textColor: '#737373' };
     }
     render() {
-        return (hAsync("div", { key: 'c495facf1cbf50eaa08d663d16a6a67a0f6369e9', class: this.getContainerClasses(), role: "tablist" }, this.tabs.map((tab, index) => {
-            const isSelected = this.isTabSelected(tab);
+        return (hAsync("div", { key: '1f9b39d82a7a98bb9dffd522d9f703b41682ae71', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
             const badgeColors = this.getBadgeColors(tab);
-            return (hAsync("div", { key: `tab-${index}`, class: this.getTabClasses(tab), role: "tab", "aria-selected": isSelected.toString(), "aria-label": tab.label || 'tab', "data-label": tab.label, onClick: () => this.handleTabClick(tab.value) }, hAsync("span", { class: "sd-tabs__label" }, tab.label), tab.badge && (hAsync("sd-tag", { size: this.size, label: tab.badge.toString(), bgColor: badgeColors.bgColor, textColor: badgeColors.textColor, rounded: true }))));
+            return (hAsync("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, hAsync("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && (hAsync("sd-tag", { size: this.size, label: tab.badge.toString(), bgColor: badgeColors.bgColor, textColor: badgeColors.textColor, rounded: false }))));
         })));
     }
     static get watchers() { return {
@@ -10153,8 +10382,7 @@ class SdTabs {
             "value": [1537],
             "tabs": [1040],
             "size": [1],
-            "isSub": [4, "is-sub"],
-            "selectedValue": [32]
+            "isSub": [4, "is-sub"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -10205,7 +10433,7 @@ class SdTag {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (hAsync("span", { key: '44457ea67e6c6bc78f134df71beb8d16cc069f41', class: tagClasses, style: {
+        return (hAsync("span", { key: '2a25443d15ad9d0c9205455e80cf236d02cec6d9', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));
@@ -10220,60 +10448,7 @@ class SdTag {
             "rounded": [4],
             "label": [1],
             "bgColor": [1, "bg-color"],
-            "textColor": [1, "text-color"]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const sdTbodyCss = () => `sd-tbody{display:table-row-group}`;
-
-class SdTbody {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (hAsync(Host, { key: 'bef033a85bc25bdd4c08be9ac93e1dd7904d3b92' }, hAsync("slot", { key: '380295c93446b7c99068bddb1ebefeee25056759' })));
-    }
-    static get style() { return sdTbodyCss(); }
-    static get cmpMeta() { return {
-        "$flags$": 260,
-        "$tagName$": "sd-tbody",
-        "$members$": undefined,
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const sdTdCss = () => `sd-td{display:table-cell;padding:12px 16px;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}`;
-
-class SdTd {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    name = '';
-    align = 'left';
-    tdStyle;
-    tdClass;
-    render() {
-        return (hAsync(Host, { key: 'b220b330eccc8e87ba9b0333f25d5d8e922fbf5e', role: "cell", class: {
-                'sd-td': true,
-                [`sd-td--${this.align}`]: true,
-                [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, hAsync("slot", { key: '807cf20b823a3efa00ce4f690ff1be2226d6ad8f' })));
-    }
-    static get style() { return sdTdCss(); }
-    static get cmpMeta() { return {
-        "$flags$": 772,
-        "$tagName$": "sd-td",
-        "$members$": {
-            "name": [1],
-            "align": [1],
-            "tdStyle": [16],
-            "tdClass": [1, "td-class"]
+            "textColor": [1, "text-color"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -10281,20 +10456,125 @@ class SdTd {
     }; }
 }
 
-const sdThCss = () => `sd-th{display:table-cell;padding:12px;font-weight:bold;text-align:left;border-bottom:2px solid #ddd;background-color:#f1f1f1}`;
+const sdTextareaCss = () => `.sd-textarea{display:flex;flex-direction:column;color:#333333;font-size:12px;line-height:20px;width:var(--textarea-width, 100%)}.sd-textarea .sd-textarea__content{width:100%;display:flex;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-textarea .sd-textarea__content .sd-textarea__native{width:100%;min-height:100px;border:none;outline:none;background:transparent;padding:4px 8px;font-family:inherit;font-size:12px;line-height:20px;color:#333333;resize:vertical}.sd-textarea .sd-textarea__content .sd-textarea__native::placeholder{color:#aaaaaa}.sd-textarea--hovered .sd-textarea__content,.sd-textarea--focused .sd-textarea__content{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-textarea--disabled{cursor:not-allowed !important;box-shadow:none !important}.sd-textarea--disabled .sd-textarea__content{background:#eeeeee !important;border:1px solid #cccccc !important;color:#888888 !important}.sd-textarea--disabled .sd-textarea__content .sd-textarea__native{cursor:not-allowed !important;color:#888888 !important}.sd-textarea .sd-textarea__footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;line-height:20px}.sd-textarea .sd-textarea__help-text{font-size:12px;line-height:20px;font-weight:400;color:#222222}.sd-textarea .sd-textarea__counter{color:#cccccc;margin-left:auto}`;
 
-class SdTh {
+class SdTextarea {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.input = createEvent(this, "sdUpdate");
+        this.focus = createEvent(this, "sdFocus");
+        this.blur = createEvent(this, "sdBlur");
+    }
+    get host() { return getElement(this); }
+    value = null;
+    name;
+    disabled = false;
+    width;
+    autoFocus = false;
+    textareaClass = '';
+    helpText;
+    maxLength;
+    placeholder = '입력해 주세요.';
+    internalValue = null;
+    focused = false;
+    hovered = false;
+    nativeEl = undefined;
+    input;
+    focus;
+    blur;
+    valueChanged(newValue) {
+        this.internalValue = newValue;
+    }
+    internalValueChanged(newValue) {
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.input?.emit(this.value);
+        }
+    }
+    async sdFocus() {
+        this.nativeEl?.focus();
+    }
+    async getNativeElement() {
+        return this.nativeEl || null;
+    }
+    componentWillLoad() {
+        if (this.value !== null && this.value !== undefined) {
+            this.internalValue = this.value;
+        }
+    }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.nativeEl?.focus();
+        }
+    }
+    handleInput(event) {
+        const target = event.target;
+        this.internalValue = target.value;
+    }
+    handleFocus(type, event) {
+        this.focused = type === 'focus';
+        if (type === 'blur') {
+            this.blur?.emit(event);
+        }
+        else {
+            this.focus?.emit(event);
+        }
+    }
+    getTextareaStatus() {
+        if (this.disabled)
+            return 'sd-textarea--disabled';
+        if (this.hovered)
+            return 'sd-textarea--hovered';
+        if (this.focused)
+            return 'sd-textarea--focused';
+        return '';
+    }
+    getMaxLengthCounter() {
+        if (this.maxLength === undefined) {
+            return null;
+        }
+        const currentLength = (this.internalValue || '').length;
+        return `${currentLength}/${this.maxLength}`;
+    }
+    hasFooter() {
+        return this.helpText !== undefined || this.maxLength !== undefined;
     }
     render() {
-        return (hAsync(Host, { key: '1ffd60e25f49d7a2840e90e4813be0f249634a0e', role: "columnheader" }, hAsync("slot", { key: 'afc47eff5e8714aca488a928fdd356d58f20235a' })));
+        const textareaWidth = this.width
+            ? {
+                '--textarea-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
+            }
+            : {};
+        const maxLengthCounter = this.getMaxLengthCounter();
+        return (hAsync(Host, { key: 'db95720b6b96d950d6435b1881f95d58c6bc4637', style: textareaWidth, class: {
+                'sd-textarea': true,
+                [this.getTextareaStatus()]: true,
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '3dae36a9b56837fa7d770f295359d8ed9aa2a3e4', class: "sd-textarea__content" }, hAsync("textarea", { key: 'b9e4ff3cffc1b06e4ef6e5ffee240579c80c6d94', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: 'b0de9e449897f2a8d1e6a7204d2383551d3ae2e4', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: 'b4528beb70095d70a030a70f451c59e511865fcb', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: 'ce2d33888c7bd85ea240ce00851aec7ecd945adc', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
-    static get style() { return sdThCss(); }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "internalValue": ["internalValueChanged"]
+    }; }
+    static get style() { return sdTextareaCss(); }
     static get cmpMeta() { return {
-        "$flags$": 260,
-        "$tagName$": "sd-th",
-        "$members$": undefined,
+        "$flags$": 768,
+        "$tagName$": "sd-textarea",
+        "$members$": {
+            "value": [1025],
+            "name": [1],
+            "disabled": [4],
+            "width": [8],
+            "autoFocus": [4, "auto-focus"],
+            "textareaClass": [1, "textarea-class"],
+            "helpText": [1, "help-text"],
+            "maxLength": [2, "max-length"],
+            "placeholder": [1],
+            "internalValue": [32],
+            "focused": [32],
+            "hovered": [32],
+            "sdFocus": [64],
+            "getNativeElement": [64]
+        },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
@@ -10306,18 +10586,18 @@ const sdToastMessageCss = () => `.sd-toast-message.sc-sd-toast-message{display:f
 class SdToastMessage {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdClose = createEvent(this, "sdClose");
-        this.sdButtonClick = createEvent(this, "sdButtonClick");
+        this.close = createEvent(this, "sdClose");
+        this.buttonClick = createEvent(this, "sdButtonClick");
     }
     icon;
     message;
     link;
     linkLabel;
     buttonLabel;
-    close = false;
+    useClose = false;
     type = 'basicDark';
-    sdClose;
-    sdButtonClick;
+    close;
+    buttonClick;
     isVisible = true;
     static COLOR_OF_TYPE = {
         basicLight: { background: 'white', text: 'grey_95' },
@@ -10329,10 +10609,10 @@ class SdToastMessage {
     };
     handleClose = () => {
         this.isVisible = false;
-        this.sdClose.emit();
+        this.close.emit();
     };
     handleButtonClick = () => {
-        this.sdButtonClick.emit();
+        this.buttonClick.emit();
     };
     getContainerClasses() {
         const classes = ['sd-toast-message', `sd-toast-message--${this.type}`];
@@ -10347,10 +10627,10 @@ class SdToastMessage {
             background: resolveColor(colorTokens.background),
             text: resolveColor(colorTokens.text),
         };
-        return (hAsync(Host, { key: '08b9ea203d36fbb3c6da642f3fc4355209867042', style: {
+        return (hAsync(Host, { key: 'edd60b2a74bae15c88131baedaa3e913dc5326ae', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, hAsync("div", { key: '9b93919198c900453ff04a7dd71985f829967803', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '6d1775a1d5c9e4b55fdac888f9dea6e806a76b14', class: "sd-toast-message__icon" }, hAsync("sd-icon", { key: 'd122832fa3b011792eb81f31296177d2dd99d571', name: this.icon, size: 16, color: colors.text }))), hAsync("div", { key: '63e5f2f2bc800d24559fb5fb8a2e92e575f2b119', class: "sd-toast-message__content" }, hAsync("span", { key: '2422d351d2019333f5085e8c0fdcb3cbf58b5b67', class: "sd-toast-message__message" }, this.message)), this.link && (hAsync("a", { key: '766716d0ddf7da45d78b4e84a55f12c66e95a8f3', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '8b1e262e5da42e324cb392fc950c02c82005987c', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.close && (hAsync("button", { key: '42d20adef4a675644958116f8bbb987f131e194c', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: '5141cf3044ba13b541091bb79b3040e1eabc0b17', name: "close", size: 12, color: colors.text }))))));
+            } }, hAsync("div", { key: 'b41ad15e9fe7520ee8fbf683f6d95e327c59ac6c', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'def78fc8bc05ead9b97144dccc4f105fad953477', class: "sd-toast-message__icon" }, hAsync("sd-icon", { key: 'a01368892d295aee0339fa027663bffe31fb2c2b', name: this.icon, size: 16, color: colors.text }))), hAsync("div", { key: 'f0c6d32da360c2135aee2374b1091c27bddf4d22', class: "sd-toast-message__content" }, hAsync("span", { key: '0f1f7d81154470ad9bcc3d8d4c1ed0c0994da7bb', class: "sd-toast-message__message" }, this.message)), this.link && (hAsync("a", { key: '2a4f7b21940e2234653a18e8a677aba9586d18e3', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: 'd399961349429bee81fa395c555879fabef86136', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (hAsync("button", { key: '4bfae7573d5a5204c29d5ef0e2dc71e9a7622d62', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: '7ac20a34965ee46c8af76c6c862a69269a73f1a2', name: "close", size: 12, color: colors.text }))))));
     }
     static get style() { return sdToastMessageCss(); }
     static get cmpMeta() { return {
@@ -10362,7 +10642,7 @@ class SdToastMessage {
             "link": [1],
             "linkLabel": [1, "link-label"],
             "buttonLabel": [1, "button-label"],
-            "close": [4],
+            "useClose": [4, "use-close"],
             "type": [1],
             "isVisible": [32]
         },
@@ -10377,13 +10657,12 @@ const sdToggleCss = () => `sd-toggle{display:inline-block;height:20px;line-heigh
 class SdToggle {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdChange = createEvent(this, "sdChange");
+        this.change = createEvent(this, "sdUpdate");
     }
     value = false;
     label = '';
     disabled = false;
-    isChecked = false;
-    sdChange;
+    change;
     componentWillLoad() {
         this.updateCheckedState(this.value);
     }
@@ -10391,10 +10670,10 @@ class SdToggle {
         this.updateCheckedState(this.value);
     }
     updateCheckedState(value) {
-        this.isChecked = value;
+        this.value = value;
     }
     get toggleClasses() {
-        const classes = ['sd-toggle', this.isChecked ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];
+        const classes = ['sd-toggle', this.value ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];
         if (this.disabled) {
             classes.push('sd-toggle--disabled');
         }
@@ -10405,24 +10684,23 @@ class SdToggle {
             return;
         const newValue = !this.value;
         this.value = newValue;
-        this.sdChange.emit(newValue);
+        this.change.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: '98109b653fae3a6fb4da63974bd1cb3c298922a8', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: '72abccdd961d365d34aeaefe1a45ffb84de8c74f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: 'd8c2f68be88a9089ba494017f3d46a3151cfb882', class: "sd-toggle__label" }, this.label), hAsync("div", { key: 'be28af142749104d24172782817bdaa94bd24eb1', class: "sd-toggle__track" }, hAsync("div", { key: 'f3b000418dbaece07540ad3135ef629113274de4', class: "sd-toggle__thumb" }))));
+        return (hAsync("label", { key: 'ca85bc0493aff9ff17108696ddb8af29734b00f5', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'b99a4fa0d557968e50b302332778faaf1b46f8cc', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: 'e62ca806b95463c7807f82ace61b4aa0affec962', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '6923da9a043df0d0d7fc0ecf2fe175857279e9b3', class: "sd-toggle__track" }, hAsync("div", { key: '090dfbcf308f26b8e200d0e2cd69d44b0f5cb8bf', class: "sd-toggle__thumb" }))));
     }
     static get style() { return sdToggleCss(); }
     static get cmpMeta() { return {
         "$flags$": 768,
         "$tagName$": "sd-toggle",
         "$members$": {
-            "value": [1540],
+            "value": [1028],
             "label": [1],
-            "disabled": [4],
-            "isChecked": [32]
+            "disabled": [4]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["value", "value"]]
+        "$attrsToReflect$": []
     }; }
 }
 
@@ -10431,13 +10709,13 @@ const sdToggleButtonCss = () => `sd-toggle-button{display:inline-block;line-heig
 class SdToggleButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdChange = createEvent(this, "sdChange");
+        this.change = createEvent(this, "sdUpdate");
     }
     value = false;
     label = '';
     disabled = false;
     isActive = false;
-    sdChange;
+    change;
     componentWillLoad() {
         this.updateActiveState(this.value);
     }
@@ -10462,10 +10740,10 @@ class SdToggleButton {
             return;
         const newValue = !this.value;
         this.value = newValue;
-        this.sdChange.emit(newValue);
+        this.change.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: '98522762cdfcfd0b7ee4e460455c46e2e5aea679', class: this.buttonClasses, role: "button", "aria-pressed": this.isActive.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: '905fbcee8ca900a099b27c4fe90b87a1485aefd3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (hAsync("label", { key: '9eb4abcfe8f3894198c8d8643150daa507e6f0e9', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: 'e3d952af461da0fac978b8ce6bd55a6990907fb3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleButtonCss(); }
     static get cmpMeta() { return {
@@ -10483,7 +10761,7 @@ class SdToggleButton {
     }; }
 }
 
-const sdTooltipCss = () => `sd-tooltip [slot=content]{display:none}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__content p{margin:0}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}`;
+const sdTooltipCss = () => `sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}`;
 
 class SdTooltip {
     constructor(hostRef) {
@@ -10502,25 +10780,16 @@ class SdTooltip {
     noHover = true;
     useClose = false;
     showTooltip = false;
-    slotContent = null;
-    static COLOR_OF_TYPE = {
-        default: { background: 'oceanblue_85', text: 'white' },
-        caution: { background: 'red_20', text: 'red_70' },
-        notice: { background: 'orange_10', text: 'orange_65' },
-        accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },
-    };
+    slotContentHTML = '';
     buttonEl;
     handleClose = () => {
         this.showTooltip = false;
     };
-    // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에
-    // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)
-    // 따라서 slot내용을 받은 후에 복제하여 state에 저장
     componentWillLoad() {
-        const contentEl = this.el.querySelector('[slot="content"]');
-        if (contentEl) {
-            this.slotContent = contentEl.cloneNode(true);
-        }
+        this.slotContentHTML = this.el.innerHTML;
+        this.el.replaceChildren();
+        // 깜빡이는 현상을 막기 위해 기본으로 <sd-tooltip></sd-tooltip> hidden이 된 elment를 visible로 만들어줌
+        this.el.classList.toggle('visible', true);
     }
     render() {
         const handleTrigger = this.trigger === 'hover'
@@ -10531,20 +10800,12 @@ class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (hAsync(Fragment, { key: '5b1fc0676ab054ff35c241b75da7065d8bb5463f' }, this.label ? (hAsync("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 })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: 'c9dd7ad95c2ee7c4c15ef9670a55fd135ad31aef', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: 'b7f8ce9afe1c806711b356d008ba0a50c9a54817', 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,
-            } }, hAsync("i", { key: 'e8b1f776aa1f42355cbdfd36ed3018c18ccb974a', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '34af873af0b9705baae638f91daa99fdf283e11b', class: {
-                [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), hAsync("div", { key: '079e229d6edd5dbddcdd284bc476d65824e39123', class: "sd-tooltip-menu__content", ref: el => {
-                if (el && this.slotContent && !el.hasChildNodes()) {
-                    el.appendChild(this.slotContent.cloneNode(true));
-                }
-            } }, !this.slotContent && hAsync("span", { key: '4d83f9d9289673949af26a2d3a22891effaad6cd' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '8794541b5a28fc1b452cdf64ab716ccc5b92b77e', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: '98434991dc4d234903d19598d897499ed25b1ffb', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '6a79435ca69bd531929ef0be82989dc766dd833d', name: "close", size: "12", color: "#AAAAAA" })))))))));
+        return (hAsync(Fragment, { key: 'd0db4bd2d57b38eae1522abd96c2776d6ffdd7c7' }, this.label ? (hAsync("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 })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-floating-portal", { key: 'ef5951d34aa4a0b5b831eadf464ab2c6711b9320', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, hAsync("div", { key: '07f7090e1de9461d1a67b092631e1c8daae1abaa', class: {
+                'sd-floating-menu': true,
+                [`sd-floating-menu--${this.type}`]: true,
+                [`sd-floating-menu--${this.placement}`]: true,
+                'sd-floating-menu--with-close': this.useClose,
+            } }, hAsync("i", { key: '2e8a1f6d7c2159ed48819229ee41ab75237ad2c2', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '8bc18f6aeb197026ead06ef02837a70f924752f5' })), hAsync("div", { key: 'cb91d969f481e7e1cf22e4a84aed3237b7b22376', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }), this.useClose && (hAsync("div", { key: '856bf6d63862406177c32400e3d919f5fcd1c8df', class: "sd-floating-menu__close-button" }, hAsync("button", { key: '83e107c58f9bc7927c449a186b19e6fa4730e53f', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: this.handleClose.bind(this) }, hAsync("sd-icon", { key: 'dc9dc331be0c6eb3ae96150ea50515f021746260', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {
@@ -10563,196 +10824,8 @@ class SdTooltip {
             "noHover": [4, "no-hover"],
             "useClose": [4, "use-close"],
             "showTooltip": [32],
-            "slotContent": [32]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-class SdTooltipPortal {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.sdClose = createEvent(this, "sdClose");
-    }
-    get el() { return getElement(this); }
-    to = 'body';
-    parentRef = null;
-    offset = [0, 0];
-    zIndex = 9999;
-    placement = 'bottom';
-    open = false;
-    sdClose;
-    container;
-    wrapper;
-    rafId;
-    isInsideClick = false;
-    resizeObserver;
-    mutationObserver;
-    static ARROW_SIZE = 11.2;
-    componentDidLoad() {
-        this.container = this.resolveContainer();
-        this.createWrapper();
-        this.moveSlotContent();
-        // DOM이 완전히 렌더링된 후 위치 계산
-        requestAnimationFrame(() => {
-            this.updatePosition();
-            if (this.wrapper) {
-                this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시
-            }
-        });
-        this.observeParent();
-    }
-    componentDidRender() {
-        if (!this.wrapper)
-            return;
-        // this.wrapper.style.display = this.open ? 'block' : 'none';
-        // if (this.open) this.updatePosition();
-        if (this.open) {
-            this.wrapper.style.display = 'block';
-            // RAF를 사용해서 다음 프레임에 위치 업데이트
-            requestAnimationFrame(() => {
-                this.updatePosition();
-                if (this.wrapper) {
-                    this.wrapper.style.visibility = 'visible';
-                }
-            });
-        }
-        else {
-            this.wrapper.style.display = 'none';
-            this.wrapper.style.visibility = 'hidden';
-        }
-    }
-    disconnectedCallback() {
-        if (this.rafId)
-            cancelAnimationFrame(this.rafId);
-        this.unobserveParent();
-        this.wrapper?.remove();
-    }
-    resolveContainer() {
-        const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
-        return el instanceof HTMLElement ? el : document.body;
-    }
-    createWrapper() {
-        this.wrapper = document.createElement('div');
-        Object.assign(this.wrapper.style, {
-            position: 'absolute',
-            zIndex: this.zIndex.toString(),
-            transition: 'opacity 0.4s',
-            top: '-9999px',
-            left: '-9999px',
-        });
-        this.container.appendChild(this.wrapper);
-    }
-    moveSlotContent() {
-        if (!this.wrapper)
-            return;
-        const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);
-        nodes.forEach(n => this.wrapper.appendChild(n));
-    }
-    // 위치 갱신 (scroll / resize)
-    updatePosition() {
-        if (this.rafId)
-            cancelAnimationFrame(this.rafId);
-        this.rafId = requestAnimationFrame(() => {
-            if (!this.parentRef || !this.wrapper)
-                return;
-            const rect = this.parentRef.getBoundingClientRect();
-            if (!rect.width && !rect.height)
-                return; // 요소가 보이지 않는 경우
-            const [offsetX, offsetY] = this.offset;
-            const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;
-            let top = 0;
-            let left = 0;
-            switch (this.placement) {
-                case 'top':
-                    top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
-                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
-                    break;
-                case 'bottom':
-                    top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
-                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
-                    break;
-                case 'left':
-                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
-                    left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
-                    break;
-                case 'right':
-                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
-                    left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
-                    break;
-            }
-            Object.assign(this.wrapper.style, {
-                top: `${top}px`,
-                left: `${left}px`,
-            });
-        });
-    }
-    // parentRef의 이동 / 크기변경 감지
-    observeParent() {
-        if (!this.parentRef)
-            return;
-        this.resizeObserver = new ResizeObserver(() => this.updatePosition());
-        this.resizeObserver.observe(this.parentRef);
-        this.mutationObserver = new MutationObserver(() => this.updatePosition());
-        this.mutationObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    unobserveParent() {
-        this.resizeObserver?.disconnect();
-        this.mutationObserver?.disconnect();
-    }
-    // 외부 클릭 감지
-    handleMouseDown(e) {
-        this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
-            (this.parentRef && this.parentRef.contains(e.target)));
-    }
-    handleWindowClick(e) {
-        if (this.isInsideClick) {
-            this.isInsideClick = false;
-            return;
-        }
-        if (this.wrapper?.contains(e.target))
-            return;
-        this.sdClose.emit();
-    }
-    render() {
-        return hAsync("slot", { key: 'aa077fc67880fd159b08f0333e000b4cc73df394' });
-    }
-    static get cmpMeta() { return {
-        "$flags$": 777,
-        "$tagName$": "sd-tooltip-portal",
-        "$members$": {
-            "to": [1],
-            "parentRef": [16],
-            "offset": [16],
-            "zIndex": [2, "z-index"],
-            "placement": [1],
-            "open": [4]
+            "slotContentHTML": [32]
         },
-        "$listeners$": [[9, "scroll", "updatePosition"], [9, "resize", "updatePosition"], [9, "mousedown", "handleMouseDown"], [8, "click", "handleWindowClick"]],
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const sdTrCss = () => `sd-tr{display:table-row}`;
-
-class SdTr {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (hAsync(Host, { key: '384b83fc792b3482a2f5e299c248ccfe52e23aab', role: "row" }, hAsync("slot", { key: '49d0f2140923af7709222b596e6cdc511bbac0a3' })));
-    }
-    static get style() { return sdTrCss(); }
-    static get cmpMeta() { return {
-        "$flags$": 260,
-        "$tagName$": "sd-tr",
-        "$members$": undefined,
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
@@ -10767,7 +10840,10 @@ registerComponents([
   SdDateBox,
   SdDatePicker,
   SdDateRangePicker,
+  SdField,
   SdFilePicker,
+  SdFloatingPopover,
+  SdForm,
   SdGuide,
   SdIcon,
   SdInput,
@@ -10781,24 +10857,20 @@ registerComponents([
   SdRadioButtonGroup,
   SdRadioGroup,
   SdSelect,
+  SdSelectDropdown,
   SdSelectMultiple,
   SdSelectMultipleGroup,
   SdSelectOption,
   SdSelectOptionGroup,
   SdSelectSearchInput,
-  SdTable$1,
   SdTable,
   SdTabs,
   SdTag,
-  SdTbody,
-  SdTd,
-  SdTh,
+  SdTextarea,
   SdToastMessage,
   SdToggle,
   SdToggleButton,
   SdTooltip,
-  SdTooltipPortal,
-  SdTr,
 ]);
 
 exports.hydrateApp = hydrateApp;