@sellmate/design-system 0.0.43 → 0.0.45

package/hydrate/index.js

@@ -3682,7 +3682,7 @@ class SdBadge {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (hAsync(Host, { key: 'f5aec7173946083ad1ef376564a796ed8cb3cf0b' }, hAsync("div", { key: '79f668240ed83b0e74fa7d0de8429f2b8434bdf3', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'e562c933d17047ff841624a252fb4a05cc09a5e3', class: "sd-badge__dot" }), hAsync("div", { key: 'd7e53aa3cbc429138c38d81888ee50269d1cbb6c', class: "sd-badge__label" }, this.label))));
+        return (hAsync(Host, { key: 'b88fba271994742a1a1d3379db44e8a307c5a308' }, hAsync("div", { key: '961c25f3f87dc51cd670aa18706d5a5f3517f8bf', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '2de1b86cc1e714a436cb2d2810b2646a2ac4fd7c', class: "sd-badge__dot" }), hAsync("div", { key: '89943a046b33c105155236a7e0b411dfbcd72487', class: "sd-badge__label" }, this.label))));
     }
     static get style() { return sdBadgeCss; }
     static get cmpMeta() { return {
@@ -3699,7 +3699,7 @@ class SdBadge {
     }; }
 }
 
-const sdButtonCss = ".sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}";
+const sdButtonCss = "sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}";
 
 const ICON_SIZES = {
     xs: 12,
@@ -3789,7 +3789,7 @@ class SdCard {
     bordered = true;
     class = '';
     render() {
-        return (hAsync(Host, { key: '8bc5c53ae7a166de72a89e407f55c19bc49d8429' }, hAsync("div", { key: '891fc0291a35c110d63aeda09bdaf64e6fa45d42', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, hAsync("slot", { key: '0bac0a6b5d7b1284008ba24d69a6d06dc0659bdf' }))));
+        return (hAsync(Host, { key: 'b39b016a66f0df13d09ff3a1ce453bb5eda23b52' }, hAsync("div", { key: '2a22dcc5ede4067ecbb2bbbe985d95ffaee3a3a6', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, hAsync("slot", { key: 'f73cae0097be43bcd666ade2db27c585090eca75' }))));
     }
     static get style() { return sdCardCss; }
     static get cmpMeta() { return {
@@ -4100,7 +4100,7 @@ class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (hAsync(Host, { key: 'ceaa6b5321f565e0560feb4218205925210d0967', class: "sd-date-picker" }, hAsync("sd-input", { key: '1b5e1afcbad3daf40766977edd17077d9bc18200', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: 'd61cc0a28f65c77a80ebf216a259b66b17615054', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '2e41787708d795d727edf1d21398bc70e31f41e0', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '579adc1459a9fd6ee9313eec5a4d03b2a2e61222', class: "sd-date-picker__menu" }, hAsync("div", { key: '5bae8978c6a4bb25f430f94d2c66927031a8e646', class: "sd-date-picker__header" }, hAsync("div", { key: 'e4482baaa76c96740c2ff9eea4182b7bda59b974', class: "year-nav" }, hAsync("button", { key: 'eb439c8147be7fe8d351c30e6b516db19ccbbc0d', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '7a685bd6c07cdd8eff0ac0c8e19c07f6c2d826dc', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: 'e19520fa7dd4a6f19ff30482a9291caa83471b41', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '5ff3333f877ca6b7faddc4494d0c88747c29c714', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: '2d02cf464f98aafc9a929414b88e77d0167983a5', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '6195fc68cb522b0368344057da580ff73dfe6efd', class: "month-nav" }, hAsync("button", { key: 'c68a01bb06f8ac2276f678c916f41d52cc17fb69', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '12873470bf8ca8c1e834f7953429a3e77ca24c6d', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: 'fb0db178bc0dc078f532ca955d6007fbccabb97d', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: 'd4871fe7e7328b060bdf9f2b56153e81d9c6a5b5', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: 'cf8467b63261012751ca0abafde6846eb397f13f', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: 'a5d9cacac573f545b1fe1c321d5971d50db6e957', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: 'dc2769b821cda06b29c6f45ac2363a2df7a32d04', class: "sd-date-picker__body" }, [
+        return (hAsync(Host, { key: '67bc480db5e0f16fa5af8bd75b6dde76d457b4dd', class: "sd-date-picker" }, hAsync("sd-input", { key: 'd31e41161179efb1b961ea00f7333b048e43467a', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '1a3c2d291628a00d217a0b20ddeb38d8590706f7', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '85b52726ad96ed74cb42e1eda4e014eb8095face', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: 'e398ac0094ef23907b7d3a7f88b37587207ade33', class: "sd-date-picker__menu" }, hAsync("div", { key: '328de8581f0cb895bb3e6e3758a7adedbad302de', class: "sd-date-picker__header" }, hAsync("div", { key: '633feae88e423ffa6fa6eb6841a937be3558ccc5', class: "year-nav" }, hAsync("button", { key: '89c3d4593c0a2c2917003a93ac1ff0176c611d72', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '140655e36c73784f4704a51a89c79ae72d237218', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '3917a8caec91a855b9bf6f42b3c8e856d490817a', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: 'b5a7e7903594482bff30c72afaca8609b04f8aea', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: '49364c66f35a9a5e724644963f3ab276245241af', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '153ee788090ed23b32cec5f660eeda741076b2a6', class: "month-nav" }, hAsync("button", { key: '33f7a059d08bd761cc6ca083f5fd1980017e3f2d', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: 'c641505d42a0683bea0e6b7a3db9cf6352a78d4d', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '5fb032ee2040e4abd333dc640c3998e3288662f2', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: 'da13b27ba6f74fae110383e294be1d01e0d74eb1', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '223b006490c3f3a3d6d7036115da2b88e801dca7', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: '1251dd00b4cb02ebddaf1aa93e1fc8a351bee10f', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: '474772b41df806093a4e578b67420adb6a973018', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
@@ -4273,9 +4273,9 @@ class SdDateRangePicker {
         this.isOpen = false;
     };
     render() {
-        return (hAsync(Host, { key: '43de817f75cdcc0bfe2b3de2091007dc161a7c11', class: "sd-date-range-picker" }, hAsync("sd-input", { key: '54ea327695939b32d678c5888dcb85aadd47735c', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (hAsync(Host, { key: '01d8def2e141ae3767fb57880482845a5bfcc6ca', class: "sd-date-range-picker" }, hAsync("sd-input", { key: 'f3738314482ac84517958672d2f75cdc7cd6d354', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '08300ae0452a157ee26488f63a9352bc49ada8ba', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: 'ef0c93df45c0a9aa8aaf9b2bd2e031a1a5158806', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '769361e46fe458b3f4674a14175677157e36240b', class: "sd-date-range-picker__menu" }, hAsync("div", { key: 'f9af2fa4add883227fad96826cad0e5ef88a427c', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: 'd7e7db3bd1941ed68b8b07237bd8a96c2d00a34e', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: 'a2c069938f4e840e4fcca4beb69e28f56f2b8d70', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: 'ee48baa353e0a9016090194aacf9af61245ad557', class: "header-label" }, this.prevYear), hAsync("button", { key: 'e8cc4adf150736c44292f82c4cfbfc7c74f1c75e', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: 'c06b18b0e09ff740afc7857d7c41329829068f86', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '22d12259763c47ff3cb27d41a40132ebacb6f5af', 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
+            }, onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '2ca7e4428256374866a74bf550fd7fc825fca4c1', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '381b44e43ed021a1200854e445f113e02112b21b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '47f31a5136e236899ac861cdd66a0424ed9507ee', class: "sd-date-range-picker__menu" }, hAsync("div", { key: '3c5c4050f4ea36e93b7cc02e0935f3898bca7523', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: 'b5ddf46fbc15290df316697c99502a07499452fb', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: 'fded6383fd7a90e80cba1b222a334764bcd1f4c2', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: 'b8408d970c42fc373b5300ce91887010e78c29f9', class: "header-label" }, this.prevYear), hAsync("button", { key: 'bc4c97952e8ae30ad685de8f966e5b0445e5f6a0', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '7dff57a2d3c44a810ab078c9418155dbadb7988d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '9c43dd586c0f702490093204c06102186cf27ebe', 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.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===
@@ -4305,13 +4305,13 @@ class SdDateRangePicker {
     }; }
 }
 
-const sdGuideCss = "@charset \"UTF-8\";.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-block;height:fit-content}sd-guide .sd-guide{display:inline-block}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #12b553}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:\"-\";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:\"•\"}.sd-guide__popup__list__item--depth-2{padding-left:26px}";
+const sdGuideCss = "@charset \"UTF-8\";sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-block;height:fit-content}sd-guide .sd-guide{display:inline-block}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #12b553}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:\"-\";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:\"•\"}.sd-guide__popup__list__item--depth-2{padding-left:26px}";
 
 const GUIDE_LABEL = {
     help: '활용 TIP',
     pdf: 'PDF Guide',
     youtube: 'Video Guide',
-    notion: '사용 가이드',
+    notion: '사용법 안내',
     event: 'Event Button',
 };
 const GUIDE_ICON = {
@@ -4334,6 +4334,7 @@ class SdGuide {
     label = '';
     message = '';
     guideUrl = '';
+    popupTitle = '';
     popupWidth;
     popupShow = false;
     guideRef;
@@ -4357,11 +4358,11 @@ class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (hAsync(Host, { key: '151e2b8148ed0dc26f97fd81902be88edc10933a', style: {
+        return (hAsync(Host, { key: '8de1cc4591dd1294a374421965322d6a958c9797', style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, hAsync("sd-button", { key: '05d6fdf5721d1ef5be5646227b6db112560f944e', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', 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: '63b86edca7f72a5a74477140d01be873bc2a6fbc', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '8a5cae088afd50f005a10eebcf66ae57f3661710', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: '2734f07d8b9fcbbeaa2942c9219461f5888e38b0', class: "sd-guide__popup__close", icon: "close", color: colors$1.grey_65, size: "md", variant: "ghost", noHover: true,
+            } }, hAsync("sd-button", { key: '8dc820b941d8e3003f2440a4fa1ccd36be0a854e', 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: 'd8cbafa686da33b2ced3a00fe13f673ebab247e5', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: 'f5048c842dcec0414ee747f69c2033b688ba1672', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: 'a7cb87e50b7b9ff3a40742cd4881ac8c413f18a5', class: "sd-guide__popup__close", icon: "close", color: colors$1.grey_65, size: "md", variant: "ghost", noHover: true,
             // buttonStyle={{ padding: '0px', minHeight: '0px' }}
-            onSdClick: this.closeDropdown }), hAsync("div", { key: '5b602905d247032b7bb09c1635de094505295178', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '9156d751748598fbe657626899d5e6730a0c0ba2', name: "helpOutline", size: 24, color: colors$1.green_65 }), hAsync("h3", { key: '881b74e449725b1953b6a81c4c042748ae609319', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), hAsync("ul", { key: '51a13a02e2c1beefcfc11a1cdc602f433572e157', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            onSdClick: this.closeDropdown }), hAsync("div", { key: 'dd2a7ceeb8fa28c2d430a2d10778b87db5bc576d', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '40ccb8d9fc31c7f0c68ce4fd8aacbfdf7e4cf4dc', name: "helpOutline", size: 24, color: colors$1.green_65 }), hAsync("h3", { key: '55726b9de8d9cd996154700ffb0c5178face6916', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '3221ed8367735883cb65c8ab66b63d977eae24dd', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -4388,6 +4389,7 @@ class SdGuide {
             "label": [1],
             "message": [1],
             "guideUrl": [1, "guide-url"],
+            "popupTitle": [1, "popup-title"],
             "popupWidth": [2, "popup-width"],
             "popupShow": [32]
         },
@@ -6406,7 +6408,7 @@ class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (hAsync("i", { key: '6e960b0cd16604be33d46a82e51f681cb3c16cbf', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '61ed4a9607f3dcc656b991b0705e6623d1c690db', color: this.resolvedColor })));
+        return (hAsync("i", { key: '738453a8bc8d1b9bb67fbaaffb7de203c2982c30', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '2f970609756be608b660a522949dd79cca64fcc8', color: this.resolvedColor })));
     }
     static get style() { return sdIconCss; }
     static get cmpMeta() { return {
@@ -6526,11 +6528,11 @@ class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (hAsync(Host, { key: '331f9b3473c6fbd88b05013dc9a3fdd8d88a8a43', style: inputWidth }, this.label && hAsync("div", { key: '9f998c7e3e0350cb4c81fb40881bf60bd85262fd', class: "sd-input__label" }, this.label), hAsync("label", { key: '201572ad47dcbae9da7ea68247e3af729c815578', class: {
+        return (hAsync(Host, { key: '87a102220530a2e06620619967f1925f193b4794', style: inputWidth }, this.label && hAsync("div", { key: 'dec1ef5b27dadc7b2c6c0e9f5dab978b338b5a45', class: "sd-input__label" }, this.label), hAsync("label", { key: '72ba8b8b0019fd1bfc222207df4b42735457873d', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("slot", { key: '976c8e1a97dc03ffe30216f2b9a331da1e5e80bd', name: "prefix" }), hAsync("input", { key: '42bb9cfd1864294550422f23f7989cf391da732a', 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: '55a23ec021df0f071eeef45092cd71527ede09c5', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: 'a96f46a1b1fce96da2547c40173b3f044686813e', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("slot", { key: '7745177f5638351670adb3610325d44df156826e', name: "prefix" }), hAsync("input", { key: '976949537b8071a409d94e93f803128946d73d48', 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: 'b62387e0c2122cfb9f5599a108d54682df59fef6', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: 'b860d9c2387adf97d7317bba550b169ac9f4ac49', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);
@@ -6577,7 +6579,7 @@ class SdLoadingSpinner {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'b385493be341259280856202db561334e9473795' }, hAsync("svg", { key: '00f946045a4ca0ab1a103d10290c297716908adf', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, hAsync("circle", { key: '9c10f467346e80574d7bab90dcde650a67a12329', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (hAsync(Host, { key: '54446b42c83eff572c2d0d63c367a7e407d722a5' }, hAsync("svg", { key: '92ad1f0446dc5912a656512d09ab4b8b3b262156', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, hAsync("circle", { key: 'b9b0c2ea5233fb5f5c784d0262c6ba526dc00622', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get style() { return sdLoadingSpinnerCss; }
     static get cmpMeta() { return {
@@ -6590,6 +6592,71 @@ 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}";
+
+class SdModalCard {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sdClose = createEvent(this, "sdClose");
+        this.sdConfirm = createEvent(this, "sdConfirm");
+    }
+    type = 'info';
+    system = 'normal';
+    useCloseButton = true;
+    modalTitle = 'normal';
+    buttonFlexDirection = 'row';
+    buttonProps = [
+        {
+            label: '확인',
+            color: 'grey_80',
+            size: 'md',
+        },
+    ];
+    message = [];
+    modalClass = '';
+    sdClose;
+    sdConfirm;
+    get pointColor() {
+        if (this.type !== 'normal') {
+            return 'grey_95';
+        }
+        switch (this.system) {
+            case 'positive':
+                return resolveColor('brilliantblue_75');
+            case 'negative':
+                return resolveColor('red_75');
+            default:
+                return resolveColor('grey_95');
+        }
+    }
+    get getModalClass() {
+        let modalClass = `sd-modal-card ${this.modalClass}`;
+        modalClass += ' ' + `sd-modal-card-${this.system}`;
+        return modalClass;
+    }
+    render() {
+        return (hAsync(Host, { key: 'a7b84787e02fd73d3df5af58011b92bd70bf5418', style: { '--point-color': this.pointColor } }, hAsync("div", { key: 'ee1e08e2dca1c4192bbdf21cba148a1ad72459e1', class: this.getModalClass }, this.useCloseButton && (hAsync("sd-icon", { key: 'ec9aad87db22a57f01326db6fac695eb2d4617ad', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.sdClose.emit() })), this.type !== 'normal' && (hAsync("sd-icon", { key: 'ccf36cbb5ef0a793d422cee2312d338436bd6d61', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), hAsync("h2", { key: '9d1e9f949bc75697960d2c44667f7cad52d976c4', class: "sd-modal-card__title" }, this.modalTitle), hAsync("slot", { key: 'f2b75146e58d78ac8431a1549068e9a219be4506' }, hAsync("div", { key: '75d035874b34f388c3c6acb60f4a90dae46ff7e6', class: `sd-modal-card__message-container` }, this.message.map(msg => (hAsync("p", { class: "sd-modal-card__message" }, msg))))), hAsync("div", { key: '39f99159776d7c107b2b3410e5681a67766b2ce8', 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 }) })))))));
+    }
+    static get style() { return sdModalCardCss; }
+    static get cmpMeta() { return {
+        "$flags$": 772,
+        "$tagName$": "sd-modal-card",
+        "$members$": {
+            "type": [1],
+            "system": [1],
+            "useCloseButton": [4, "use-close-button"],
+            "modalTitle": [1, "modal-title"],
+            "buttonFlexDirection": [1, "button-flex-direction"],
+            "buttonProps": [16],
+            "message": [16],
+            "modalClass": [1, "modal-class"]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const sdPaginationCss = ".sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006ac1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006ac1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}";
 
 const BUTTON_WIDTH = {
@@ -6609,12 +6676,6 @@ class SdPagination {
     lastPage = 1;
     simple = false;
     pageChange;
-    onPropChange() {
-        console.log('Pagination props changed', {
-            currentPage: this.currentPage,
-            lastPage: this.lastPage,
-        });
-    }
     get paginationClasses() {
         const classes = ['sd-pagination'];
         if (this.simple) {
@@ -6670,17 +6731,13 @@ class SdPagination {
         }
     }
     render() {
-        return (hAsync("div", { key: 'c200da844c5cd3bac4693979edfd4936fca50e96', class: this.paginationClasses }, hAsync("div", { key: 'aebfbdc184eb7c71e05db5fd42ec8b5f6bf3603f', 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: '3b65d74d4b70b8b3292a20daa5d89ffb7d9a66e7', class: this.paginationClasses }, hAsync("div", { key: 'a3be2b1c24ac6ac7ecde25223d9208e63e558bf3', 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: '9b15a86715af6e7f4aa89bd43494211449d7b683', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '9c145c18eacc2ab0115d162cbb50e5ad3ea62c80', class: "append-btns" }, this.renderNextButtons())));
     }
-    static get watchers() { return {
-        "currentPage": ["onPropChange"],
-        "lastPage": ["onPropChange"]
-    }; }
     static get style() { return sdPaginationCss; }
     static get cmpMeta() { return {
         "$flags$": 768,
@@ -6727,18 +6784,17 @@ class SdPopover {
     componentWillLoad() {
         this.showPopover = this.show;
         this.slotContent = this.el.innerHTML;
-        console.log(this.el);
     }
     buttonEl;
     handleClose = () => {
         this.showPopover = false;
     };
     render() {
-        return (hAsync(Fragment, { key: '933a0e45b636c25278bda7f3ec231aeeadcbbf0b' }, 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: () => (console.log('click popover'), (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: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (hAsync("sd-tooltip-portal", { key: '070852610c2740a2397f63114e0f098bb58425f2', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '4b8e62bb99d39272c0c40224895ddc36fde01cc9', class: {
+        return (hAsync(Fragment, { key: '60031ca070a366a90f74d93908ec956076b4e8be' }, 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: '199246e3638600c05ae9f9cab99c00540f2525ef', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '204b3dcf316277e5b2ce4fab3273c7726f1485c7', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, hAsync("i", { key: '2c5deb2e3eb7627eaefc2b66b1a0e9884fbf5591', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'f0707847886ad91eb973d559dd6f7be9f69a74fb' })), hAsync("div", { key: '210e85e37075e3d00d388ae0bdbdb67589e2acaa', class: "sd-popover-menu__content" }, this.menuTitle && hAsync("div", { key: '177c935306265772e14c751fbc4b10a33c904f02', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '1debeda00bee4fa53f3bee230ecb54cf07239e7a', class: "sd-popover-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '261614e9e4cb9a2dd19edd66c758a692b6941aa0', 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: 'ca9d1548006958fbac52bf223a933fba1010ce02', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '9a9fff28deb4fb2af65aa84944b2c59b9f374cff', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, hAsync("i", { key: '344b1aace077490124078499dbcc08c3bc9af92d', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'be3b82a87f9292d44177927330e0b7d7b1ba2c0f' })), hAsync("div", { key: 'ac1223f53514958384fa1b3e7f3bad84933436cd', class: "sd-popover-menu__content" }, this.menuTitle && hAsync("div", { key: 'a191a3fa975ff94711a6bbc7ab2fdc4bea0d5f9c', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: 'a830419f35e0cdf43cf4059d1a815d4b169a4625', class: "sd-popover-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: 'd66775a5ec5899caa040e0ae53a1bce0eea3c167', 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: '19f1f43ec6908e51f3f5b07268f0c59c3f1db1fe', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: 'b658485e35e837c50886da6cf911d1b9d8f81ff1', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]
@@ -6889,7 +6945,7 @@ class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: '120ce8e686e5935293738aa5a470b960dfd518c5' });
+        return hAsync("slot", { key: 'b24b7f844564365e887dc8cee8b98e26a94961cd' });
     }
     static get cmpMeta() { return {
         "$flags$": 772,
@@ -6926,10 +6982,10 @@ class SdProgress {
         error: '#FB4444',
     };
     render() {
-        return (hAsync(Host, { key: '68cca90181920f534f2c1d0cf846542b938f5822', style: {
+        return (hAsync(Host, { key: 'e5a1be5c3343e0645db107b076fac36d1a935ca7', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '76b37297e94712a559aa90f723fa56ec20ea591c', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'd2676df17ad3474f88d3c0972802a7b373b5652e', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
@@ -7276,11 +7332,11 @@ class SdSelect extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '8706a1e60e18e90e05429bb838de6d3a4da6d4bc', style: style }, hAsync("div", { key: 'fbec6760ae66d6ca43c504ab7ab6e1655d72b267', class: {
+        return (hAsync(Host, { key: '94880c07678eb6a478c9c80de0c42c5c7724936e', style: style }, hAsync("div", { key: '872f918214118adb99b50533c323e9de7ca27353', 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: 'b8ecf2553fc65a009cda2fabe3d4fdafdd4cf57c', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: '30e44d67c6d8b81c59c798ffa4de43337de6f195', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -7557,11 +7613,11 @@ class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '79bce82ded286fe421a1fe02a2c931c03d7d7073', style: style }, hAsync("div", { key: '12008fb3c09ab6cd6c66ac04170e69334f4761b4', class: {
+        return (hAsync(Host, { key: '0e488c3906b12e73abc6e6216e14b2b4e6a130c8', style: style }, hAsync("div", { key: '714a95f446631269a19e44d098ef0dc81c7c6fd5', 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: 'e1a007b915f0366ff3092c494efc9ae60ce9ee50', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: '08912b8586c926107cbcaed28b73bd6eb94d47d9', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -7969,11 +8025,11 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: 'c85e1e6bd6d030ff2da5009a6f72a557d026250b', style: style }, hAsync("div", { key: '991f74b5a6bf357225e3c1b2513c1605acc5c047', class: {
+        return (hAsync(Host, { key: 'bcafcfbb33940882bd7e22a6d197974194554968', style: style }, hAsync("div", { key: 'a8547e4aa07d8ccdfbb7955f122eaa3955c5d30e', 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: '5bc92be9cdc3768db4b79c2310f62f41ca7dec8c', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), hAsync("div", { key: '90ba61f1d83692e2eaf430f42a1a0fd55380d774', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label, labelStyle) {
         if (!label)
@@ -8091,7 +8147,7 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync(Host, { key: '70e4b495a158c9da1b2a5d6298a5053f70b84a7b' }, hAsync("div", { key: '6c37c08ce1cb4654bf8ea53ceb52daee1dcfe79f', class: {
+        return (hAsync(Host, { key: 'f1874b4e539573ddaa48cb2bdc9d13ea96bf350e' }, hAsync("div", { key: '5a3bbd66f6623a1c02d5e1295bb974e82883b8a1', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -8177,7 +8233,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: '3bf35086c47fa2eb837105a82adccc8bb6c9d5ea', class: {
+        return (hAsync("div", { key: 'e96411f172ed4ed5359fef2a124bf49df88e10ec', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -8186,10 +8242,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: '6239186c53037410527408a0b6eac0cba720563e', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '49acfb365f4b8c24c3a28e0ec4d1f75b3f0e9ac6', 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: 'fa9464cac1ee58b46b983f17882eeb847e3dc9b7', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'f9a7ab839d566671d6ee9e7164424d307a81f2d6', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: '96bb75ffa1f2a69f91328f13c413ce0c9aa392c8', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'e91455e0536be1a32bc37146ffa98a377746c674', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: 'ee27fb5e2d14acf898c7ce1e22b8cbffe59cec31', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'aaf9552da0a665ac34848ab5649d5993133394c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss; }
     static get cmpMeta() { return {
@@ -8408,10 +8464,10 @@ let SdTable$1 = class SdTable {
             }, 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: 'f5a96627bda89ab76d03781d8a84931cfac9d4d9' }, hAsync("div", { key: '8f96a9381579acb56b5551de90b2f1dcb02db2ef', class: "sd-table__wrapper", style: {
+        return (hAsync(Host, { key: '9b6b47737ddd9b97c477fb029260bbdb5088593a' }, hAsync("div", { key: '4235585df56fb9c83606e58d2b3ad6efc7b50259', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, hAsync("div", { key: 'acf8435ff60702d0b54477edcea0f7a92dfe66ca', class: "sd-table__container" }, hAsync("div", { key: 'ec02d6ceb21021c1cb9605a5bda1d0f44fbbd5af', class: "sd-table__middle", role: "table" }, hAsync("div", { key: '40544c9ab218f8931ce2add45e1d8adb83423472', part: "table", class: this.sdTableClasses }, this.renderHeader(), hAsync("sd-tbody", { key: '706311e5a9ddddacadcf632b22a25871cc066ce3' }, hAsync("slot", { key: 'f6c415352bb3b3f91acf5852e3b6b53bd6567238' })))), hAsync("div", { key: '5b95f5bb444839da29ded159327c7e09f3a07a58', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: 'bdfadea5466840f4185bef70e06392cbc4b9d87b', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '0683704cd48839846201048097836b337e4cf534', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+            } }, hAsync("div", { key: 'ea92597b3cba31951da90d3d42a7783ef043248a', class: "sd-table__container" }, hAsync("div", { key: '95b5ef2432643b3c1386f52344e91d17dd6ba726', class: "sd-table__middle", role: "table" }, hAsync("div", { key: '1e834ed7ce963ff0e3bc0c22c7b5d8dcd02d754d', part: "table", class: this.sdTableClasses }, this.renderHeader(), hAsync("sd-tbody", { key: 'f7cf5c3d5e430f4259b2dae2660c38b0b0f6d17e' }, hAsync("slot", { key: 'b21b99f21baaf9431ce653e680a59531cc275c26' })))), hAsync("div", { key: '3fb77951c1e27c6feb13411aa56b4ac907135e24', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: 'e74003c49fa592869346f28dfd10ef6acd6a64e9', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '0284aa186f53cac17cecc45770afce1cb1675c36', 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);
                 }
@@ -8419,7 +8475,7 @@ let SdTable$1 = class SdTable {
                     this.currentPage = e.detail;
                     this.sdPageChange.emit(this.currentPage);
                 }
-            } }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '6a555c46a088cf181b820da1b3ab312bf5e50c04', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+            } }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '23a648a6581bee5cf755afbb9146bf2090e6be65', 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);
@@ -8482,7 +8538,7 @@ let SdTable$1 = class SdTable {
     }; }
 };
 
-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-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}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important}.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--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 .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;min-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 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%)}";
+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-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}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important}.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, 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] 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 .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;min-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 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%)}";
 
 class SdTable {
     constructor(hostRef) {
@@ -8514,6 +8570,9 @@ class SdTable {
         { label: '50개씩 보기', value: 50 },
         { label: '100개씩 보기', value: 100 },
     ];
+    useVirtualScroll = false; // 가상 스크롤 사용 여부
+    virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 가상 스크롤 사용시 필수값
+    virtualBufferSize = 5; // 가상 스크롤 위아래 버퍼 크기
     sdSelectChange;
     sdPageChange;
     sdRowsPerPageChange;
@@ -8523,18 +8582,34 @@ class SdTable {
     columnWidths = [];
     scrolledLeft = false;
     scrolledRight = false;
+    virtualStartIndex = 0; // 렌더링 시작 인덱스
+    virtualEndIndex = 0; // 렌더링 종료 인덱스
+    scrollTopPosition = 0;
+    scrollRequestAnimationFrame = null;
+    scrollContainer = null;
     handleColumnsChange(newCols) {
         this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
     }
     handleRowsChange(newRows) {
         this.innerRows = [...newRows];
+        if (this.useVirtualScroll) {
+            requestAnimationFrame(() => {
+                this.calculateVisibleRange();
+            });
+        }
     }
     handleSelectedChange(newSelected) {
         this.innerSelected = new Set(newSelected);
     }
     handlePaginationChange(newVal) {
-        if (newVal?.page && newVal.page !== this.currentPage)
+        if (newVal?.page && newVal.page !== this.currentPage) {
             this.currentPage = newVal.page;
+            if (this.useVirtualScroll && this.scrollContainer) {
+                this.scrollContainer.scrollTop = 0;
+                this.scrollTopPosition = 0;
+                this.calculateVisibleRange();
+            }
+        }
     }
     componentWillLoad() {
         this.innerRows = [...(this.rows || [])];
@@ -8551,14 +8626,30 @@ class SdTable {
         const middle = this.el.querySelector('.sd-table__middle');
         if (!middle)
             return;
+        this.scrollContainer = middle;
         const onScroll = () => {
-            const { scrollLeft, scrollWidth, clientWidth } = middle;
+            const { scrollLeft, scrollWidth, clientWidth, scrollTop } = middle;
             this.scrolledLeft = scrollLeft > 0;
             this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
+            if (this.useVirtualScroll) {
+                if (this.scrollRequestAnimationFrame !== null) {
+                    cancelAnimationFrame(this.scrollRequestAnimationFrame);
+                }
+                this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
+                    this.scrollTopPosition = scrollTop;
+                    this.calculateVisibleRange();
+                    this.scrollRequestAnimationFrame = null;
+                });
+            }
         };
         middle.addEventListener('scroll', onScroll, { passive: true });
         onScroll();
     }
+    disconnectedCallback() {
+        if (this.scrollRequestAnimationFrame !== null) {
+            cancelAnimationFrame(this.scrollRequestAnimationFrame);
+        }
+    }
     // ----- Derived getters -----
     get visibleColumns() {
         return this.columns.filter(col => col.visible !== false);
@@ -8570,6 +8661,33 @@ class SdTable {
         const result = this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
         return result;
     }
+    get virtualRows() {
+        if (!this.useVirtualScroll) {
+            return this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
+        }
+        return this.paginatedRows
+            .slice(this.virtualStartIndex, this.virtualEndIndex + 1)
+            .map((row, relativeIdx) => ({
+            row,
+            actualIndex: this.virtualStartIndex + relativeIdx,
+        }));
+    }
+    get topSpacerHeight() {
+        if (!this.useVirtualScroll || this.virtualStartIndex === 0)
+            return 0;
+        return this.virtualStartIndex * this.virtualRowHeight;
+    }
+    get bottomSpacerHeight() {
+        if (!this.useVirtualScroll)
+            return 0;
+        const remainingRows = this.paginatedRows.length - this.virtualEndIndex - 1;
+        return remainingRows > 0 ? remainingRows * this.virtualRowHeight : 0;
+    }
+    get totalVirtualHeight() {
+        if (!this.useVirtualScroll)
+            return 0;
+        return this.paginatedRows.length * this.virtualRowHeight;
+    }
     get lastPageNumber() {
         const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};
         return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));
@@ -8625,6 +8743,20 @@ class SdTable {
             return true; // 전부 선택됨
         return null; // 일부만 선택됨
     }
+    calculateVisibleRange() {
+        if (!this.useVirtualScroll) {
+            this.virtualStartIndex = 0;
+            this.virtualEndIndex = this.paginatedRows.length - 1;
+            return;
+        }
+        const scrollTop = this.scrollTopPosition;
+        const containerHeight = this.scrollContainer?.clientHeight || 0;
+        const startIndex = Math.floor(scrollTop / this.virtualRowHeight);
+        const visibleCount = Math.ceil(containerHeight / this.virtualRowHeight);
+        const endIndex = startIndex + visibleCount;
+        this.virtualStartIndex = Math.max(0, startIndex - this.virtualBufferSize);
+        this.virtualEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + this.virtualBufferSize);
+    }
     // ----- Helpers -----
     getStickyStyle(colIdx) {
         const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);
@@ -8685,37 +8817,47 @@ class SdTable {
             }, style: { ...col.thStyle, ...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) }))))))));
     }
     renderBody() {
-        return (hAsync("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }) }, this.isLoading && (hAsync("div", { class: "sd-table__loading" }, hAsync("sd-loading-spinner", null))), this.paginatedRows.length > 0 &&
-            this.paginatedRows.map((row, rowIdx) => (hAsync("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6" }, this.selectable && (hAsync("td", { class: {
+        return (hAsync("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }), class: `sd-table-tbody ${this.useVirtualScroll ? 'sd-table-tbody--virtual-scroll' : ''}`, style: { '--total-virtual-height': `${this.totalVirtualHeight}px` } }, this.isLoading && (hAsync("div", { class: "sd-table__loading" }, hAsync("sd-loading-spinner", null))), this.useVirtualScroll && this.topSpacerHeight > 0 && (hAsync("tr", { key: "virtual-top-spacer", style: {
+                height: `${this.topSpacerHeight}px`,
+            }, "aria-hidden": "true" })), this.paginatedRows.length > 0 &&
+            this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll && this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "virtual-bottom-spacer", style: {
+                height: `${this.bottomSpacerHeight}px`,
+            }, "aria-hidden": "true" }))));
+    }
+    renderRow(row, rowIdx) {
+        return (hAsync("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6", style: this.useVirtualScroll
+                ? {
+                    height: `${this.virtualRowHeight}px`,
+                }
+                : {} }, this.selectable && (hAsync("td", { class: {
+                'sd-td': true,
+                'sd-td--selected': true,
+                '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) }))), this.visibleColumns.map((column, colIdx) => {
+            const rendered = this.bodyCellRenderer?.(column, row);
+            return (hAsync("td", { key: column.name, part: `td-${column.name}`, class: {
                     'sd-td': true,
-                    'sd-td--selected': true,
-                    '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) }))), this.visibleColumns.map((column, colIdx) => {
-                const rendered = this.bodyCellRenderer?.(column, row);
-                return (hAsync("td", { key: column.name, part: `td-${column.name}`, class: {
-                        'sd-td': true,
-                        [`sd-td--${column.align || 'left'}`]: true,
-                        '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),
-                        [`${column.tdClass}`]: Boolean(column.tdClass),
-                    }, style: this.getStickyStyle(colIdx) }, hAsync("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
-            }))))));
+                    [`sd-td--${column.align || 'left'}`]: true,
+                    '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),
+                    [`${column.tdClass}`]: Boolean(column.tdClass),
+                }, style: this.getStickyStyle(colIdx) }, hAsync("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
+        })));
     }
     render() {
-        return (hAsync(Host, { key: 'aeee4ce21accb3f3d8aceb832483f579eea1e02a' }, hAsync("div", { key: '88e617de6e9db905d930c8f3dc313809305b39d7', class: "sd-table__wrapper", style: {
+        return (hAsync(Host, { key: 'd115d90e244b233e0387352e7c26b3dea94e26a5' }, hAsync("div", { key: '8c4f4b675a8448e9acddc5411a6ab2cb3ef489c5', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, hAsync("div", { key: '1eaa7ae773587f3d83cef82689de583fc8e971ec', class: "sd-table__container" }, hAsync("div", { key: '391f50ec78bdfd063f32966a98be5b907833f166', class: {
+            } }, hAsync("div", { key: 'dd5c88ed37ab202dacb295c503ff2184b6440f5b', class: "sd-table__container" }, hAsync("div", { key: '5cf3e8b5c99a486e494803319d76a7e32cf0f9a9', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, hAsync("table", { key: 'e6f0d9296fe865ae666f8506b4ed753e60fef64e', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), hAsync("div", { key: 'c2cc49ef0a7c62cd744466c718f2a4a2fe536efd', class: "sd-table__bottom" }, !this.paginatedRows.length && (hAsync("div", { key: '9ac5ed21fb902584de9d8fb390ba9bb4493dd46d', class: "sd-table__no-data" }, hAsync("slot", { key: 'ae9a048dbe43f8006d682d5baf1c2851b0947e5a', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '365d564b85fd2fe03180e4afed98fa36a7883f60', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '3d9f8d9a85134903daed271baf661f07cd05872f', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+            } }, hAsync("table", { key: 'e73f16d894af4ef1c9ed657db6c1bc98ce855961', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), hAsync("div", { key: '462ad10d70dcff218b39a68a610cef43fe976de6', class: "sd-table__bottom" }, !this.paginatedRows.length && (hAsync("div", { key: '865e54d58c0f7b67d7ad6b323f671bb837e074e4', class: "sd-table__no-data" }, hAsync("slot", { key: '29b4a7f1eeaf588a4e6eed9d58adfd366b0dcce0', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '870b309d1876ea9880342d1d5da70619bb8fcaad', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '1f037172e2220912c9f81a106ae6dcc30e267273', 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);
                 }
@@ -8723,7 +8865,7 @@ class SdTable {
                     this.currentPage = e.detail;
                     this.sdPageChange.emit(this.currentPage);
                 }
-            } }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'c419907c500ea77c1a357edc7953806d640fdd92', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+            } }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'c767d22ce24a4c10886eeee8410362ac9391b22d', 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);
@@ -8773,12 +8915,18 @@ class SdTable {
             "useInternalPagination": [4, "use-internal-pagination"],
             "useRowsPerPageSelect": [4, "use-rows-per-page-select"],
             "rowsPerPageOption": [16],
+            "useVirtualScroll": [4, "use-virtual-scroll"],
+            "virtualRowHeight": [2, "virtual-row-height"],
+            "virtualBufferSize": [2, "virtual-buffer-size"],
             "currentPage": [32],
             "innerRows": [32],
             "innerSelected": [32],
             "columnWidths": [32],
             "scrolledLeft": [32],
-            "scrolledRight": [32]
+            "scrolledRight": [32],
+            "virtualStartIndex": [32],
+            "virtualEndIndex": [32],
+            "scrollTopPosition": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8829,7 +8977,7 @@ class SdTag {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (hAsync("span", { key: '88925b8c30e7b909b6518edc9deaa58c82de17a0', class: tagClasses, style: {
+        return (hAsync("span", { key: '674d187602c90a83016377bd8c25bd288aa819ec', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));
@@ -8859,7 +9007,7 @@ class SdTbody {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '210b6c0005314fab15c92697347a3f21dd70ef6f' }, hAsync("slot", { key: 'ea78b27ab6c8b131d4940d1b2fea20d90e6393f3' })));
+        return (hAsync(Host, { key: 'b94310b0ad1566cf9ccbac3ccdc5fbcdd2e53f8c' }, hAsync("slot", { key: '382fb835aa4516adad374443556084703b8560c3' })));
     }
     static get style() { return sdTbodyCss; }
     static get cmpMeta() { return {
@@ -8883,11 +9031,11 @@ class SdTd {
     tdStyle;
     tdClass;
     render() {
-        return (hAsync(Host, { key: 'd97cb05ec639ea64724b4107985248e9c9e89381', role: "cell", class: {
+        return (hAsync(Host, { key: '87c947cf0092ac524cdfed0be5f1703685a64db6', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, hAsync("slot", { key: '685d2a07497781f3ff563cf10694a5c51eb963eb' })));
+            }, style: this.tdStyle }, hAsync("slot", { key: '4369629e345d8cc5bb17166d6877dba421522e4d' })));
     }
     static get style() { return sdTdCss; }
     static get cmpMeta() { return {
@@ -8912,7 +9060,7 @@ class SdTh {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '1c1c403a374a1d575739457ea011e72cbbae2a8a', role: "columnheader" }, hAsync("slot", { key: 'f5653df6fc113940f3c6fae07a74b43f5f116dae' })));
+        return (hAsync(Host, { key: 'cf30b704166adc6d7de5ade8d455d34ecf575199', role: "columnheader" }, hAsync("slot", { key: '7863306b924a749aba5ba55f70b8b3d5c205d133' })));
     }
     static get style() { return sdThCss; }
     static get cmpMeta() { return {
@@ -8973,20 +9121,20 @@ class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (hAsync(Fragment, { key: '11cc88df1f3afd9c6227f7e0bbf908605ab32f31' }, 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: 'b1c1d591b08d76b576ae307c752ff5399bf4e7ee', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: '836d1ce210fb6358d92ac65a992ec111d53ef0a5', class: {
+        return (hAsync(Fragment, { key: 'fc892ba2872491bca673db93fed5c4b724c7141d' }, 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: 'd6b8099b49ffc120c05bd797e3eb2c2c9c40238e', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: '06eca5d091eec639a556472605140bdccf6c4869', 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: '43f7dfc3afde28f61d1b2a757f605c22712568dd', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '58ddae5a489c5ae5ca8208f3e1d2003373a68d4e', class: {
+            } }, hAsync("i", { key: '38ad3f0461c6578140e9a0f253c1f0cd5343f0bf', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '58b5d5e25512f191ee652c34815f8ad33a496a31', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), hAsync("div", { key: '259e21849cbd581f4b83247bb609efc3adffc62d', class: "sd-tooltip-menu__content", ref: el => {
+            } })), hAsync("div", { key: 'a29c4aa221aa9b833b9b0de101b658f5c5351ec0', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && hAsync("span", { key: '43aeb9bc7b62f880a80b14771a8a49f9af45dfe3' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '1d71390a6abec398a0f0be0955bc089116f880a0', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: 'f3ff311db0b8633a2b7b692c9e6b51f5171bcaa7', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '6dc3a1234ba43406659707cb64b3fa21e96f25d2', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && hAsync("span", { key: 'a9e016d086156d522980b99187c9b040ccb232b9' }, this.el.textContent)), this.useClose && (hAsync("div", { key: 'ae54793f18dcb7e759bd4ea2d7570cd56f45eb9a', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: '1c3dc26d1bba1eaaed42757dae9a38613a86aea8', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '3b7f9dafaa7f1a3686f123a12acae6b35fd1849d', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get style() { return sdTooltipCss; }
     static get cmpMeta() { return {
@@ -9162,7 +9310,7 @@ class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: '918c09f6f9b248a6ba08e622c375b63adb36d0c3' });
+        return hAsync("slot", { key: 'b8c60526ca9acb16821b1952b526fad452d1d5e7' });
     }
     static get cmpMeta() { return {
         "$flags$": 777,
@@ -9188,7 +9336,7 @@ class SdTr {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '2dc11b6c66458e889e231c422c06b5ddee7ae88a', role: "row" }, hAsync("slot", { key: '66640e770921eda343e2798a0b167bae5db1fbca' })));
+        return (hAsync(Host, { key: '2cfec32649fa440cb44f83392c439e58dcb24644', role: "row" }, hAsync("slot", { key: '0146af3690a7a6445b65893f86e0b9e5cd1d8a02' })));
     }
     static get style() { return sdTrCss; }
     static get cmpMeta() { return {
@@ -9213,6 +9361,7 @@ registerComponents([
   SdIcon,
   SdInput,
   SdLoadingSpinner,
+  SdModalCard,
   SdPagination,
   SdPopover,
   SdPortal,