@sellmate/design-system 0.0.55 → 0.0.56

package/hydrate/index.mjs

@@ -3890,16 +3890,16 @@ class SdButton {
     }; }
 }
 
-const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card.sd-card--bordered{border:1px solid #e1e1e1}`;
+const sdCardCss = () => `sd-card{display:block;height:fit-content;border-radius:8px}sd-card.sd-card--bordered{border:1px solid #e1e1e1}`;
 
 class SdCard {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     bordered = true;
-    class = '';
+    cardClassName = '';
     render() {
-        return (hAsync(Host, { key: '902920358ec434881c5e8d1ec77758dd74dd4c31' }, hAsync("div", { key: '9b2eb1ec45fc2345b30efe26a9aed2a44f39e0e1', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, hAsync("slot", { key: 'd31d14e706a89d53d5915e0a411838ad5567fd20' }))));
+        return (hAsync(Host, { key: '3182001dcfc5347e3995a31d8e333e01f285df5a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}` }, hAsync("slot", { key: 'e2824b9cd65b9c4ba668f7f3ba933a361405b822' })));
     }
     static get style() { return sdCardCss(); }
     static get cmpMeta() { return {
@@ -3907,7 +3907,7 @@ class SdCard {
         "$tagName$": "sd-card",
         "$members$": {
             "bordered": [4],
-            "class": [1]
+            "cardClassName": [1, "card-class-name"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -4213,7 +4213,7 @@ class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (hAsync(Host, { key: '6a1129da5526bd1d7b8f5f4f70b933beacc0d38a', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: 'a7b59caaf9150082bc70fb5e8d81740d47ce457f', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: 'f1420dfdf7283d71ab66f4c69f90f2e5bac25aab', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: 'c8bf0f440d8fa5eac3c539591eb783a0be61296c', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: 'd79caee7083cac735fe787f4ab15dd20ef19363b', class: "sd-date-picker__menu" }, hAsync("div", { key: '3189456edcb2bbf753bcfb659a6bed60aee6cfcb', class: "sd-date-picker__header" }, hAsync("div", { key: '739f9f37030efe12dc57d0a0ee16780cdb7ed0df', class: "year-nav" }, hAsync("button", { key: '5018b431579aefbebe47e64c9cc5e34aa31a7dbd', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '47981fbbd6f6245c543d92e4bebf0bc8e9440255', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '4bf48f6283187a6e641091ecf8ca6746bcc538f6', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '50eccfed91de1885cc49f71449eedc7160d78a4e', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: 'f220f5d65323ea11c054599a6a817346e864c156', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: 'ac4cadf1d92b7098a3c1830345acfa8680d9e104', class: "month-nav" }, hAsync("button", { key: '7afdfadccdf6d6ad07d035747b8e50a9e9d13af6', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: 'd382f9c32864b3d1f01aacd9a60d1a7799c49552', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '173659c7d34743aeaed7c7694f2db467edf8e7dc', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: 'cffad239c7896f21249ca66a91368050f51059c0', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '2e541317c81c3ef7ff7bc07d35619f78fbc09cd1', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: 'a8e9db7ed26405aeb61d49b827ca9c186766498c', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: '4d62d9bf10a1e208e0432fedc842519aeb472e9c', class: "sd-date-picker__body" }, [
+        return (hAsync(Host, { key: '339b8a2e02592a3a7c28e91b11dc3693b4fcb9db', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: '5cb7ee0544864681985ba4e2b4cfb4ca7eb88ba7', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: 'e465944f71022a7b7d7b6d719affa31bfc337ff8', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: 'e4af5d3a2c5619d12f0b473b80eed941df1eea06', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: 'a36e286d284f3f2545eb83e60f76bb74db1ee045', class: "sd-date-picker__menu" }, hAsync("div", { key: '95aa3b00666772cdaac5c458226b03ca8d814205', class: "sd-date-picker__header" }, hAsync("div", { key: '92d3553d46fc3b9681050d5cb8b834bf4c661792', class: "year-nav" }, hAsync("button", { key: 'ee0500f7c95bfd54e01a3dacba1f5510d1a6bbe6', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '16cf42b6e4d43858fc22745339c66ffb03862f00', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '9cd310082f173d1fadc046a0a7f6b1e4b63627e0', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '51d30f06c43c76226e995af3f3e3812ea48c2aad', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: '08b599372988f2563ccb6a25b64bbacef21e8c0b', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '3561b99251a0cc9ca5d81ed20369eb2d1702f253', class: "month-nav" }, hAsync("button", { key: '952c94808facf642dc219eaced8d58b3c2ceb389', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: 'd270c4e5934ebfff500d9a4252b9a4b0b6c24e41', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '3baf83873b332c1a3b340773a952b5f9a1b48bd4', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: 'fe744ca6c9896f8cf7bd2a00cdd4db94915be0e3', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: 'a00637d3bc309b429fd302b72ec940f3cdce8f84', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: '8a4c4fc3bfc55205912368f6d5f1e3acd7eadbdc', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: 'f4eaa43b531640ba7bb7b724cf52144f9870d520', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
@@ -4405,10 +4405,10 @@ class SdDateRangePicker {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (hAsync(Host, { key: '83bac4f3ca296d4384cd7133847a420cc964efe2', class: {
+        return (hAsync(Host, { key: '5220efe80a57b9591b4238b0f0cd646d76709a4c', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, hAsync("sd-input", { key: 'c2c0f2d34535b69e9b8e6a5b446a189aaf3868d9', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '0720129c8b59571f97c24f2a71d48a08c40314dc', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: 'd0f3142a8bba8ea231586111e1ccf931ee595d25', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: '072f7b56f1baea1a86916f3959e79462079fd6a8', class: "sd-date-range-picker__menu" }, hAsync("div", { key: '27bd45578453e74766e30be37ee990036c111a9d', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: 'fdcb11d94f83506a13b4b652a61e0a31630f2fa9', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: '2c0cd042d7d0544641410b077107c6cb0e1dc06b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: 'e1508e3c0630bbe960bccc6d520c128b28ad1b13', class: "header-label" }, this.prevYear), hAsync("button", { key: 'd1c985beec9ba680a72b64e20938a253b956c2cb', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '4b1ca637f060925886b20d5b6443b804501c60c3', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '42baa27309dd5edc1ab5713e42e52e8202882477', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, hAsync("sd-input", { key: '0f7bc52cbe8722e16b3c82dc847b0230149f4e6a', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: 'b21b38e104c2dd840af1670e4bedee84a4db10fa', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '56d74da3b2d783340d21503210eae4b89d540b9a', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: '89b88b2b16bb6b553ba18b686cfdb41bcdccfb33', class: "sd-date-range-picker__menu" }, hAsync("div", { key: 'b811cdb96de5cd8400ef413fe2537a5e9b36720d', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: '588814d15c2a6c8b8efcad9215ab015366709ee7', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: '330c17fb132b33140fb8cdf72c0bc75eca9814eb', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: 'b2f29d546ac19968045aa3803cea58693c9ac904', class: "header-label" }, this.prevYear), hAsync("button", { key: '183befff37c64110a8dc188b261aaa03330b7c9e', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: 'ea7ab0b1ff97a659b2adf3ab105945127fa5b066', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '13e7484f631f5045a49c1243c93ae211b3f70bec', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), hAsync("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), hAsync("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (hAsync("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onClick: () => this.handleDateClick(index, Number(day)), onMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }
@@ -4537,15 +4537,15 @@ class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (hAsync("div", { key: '2de0dd9880f816721fb36c3b01bbfdd15d0a4edd', class: {
+        return (hAsync("div", { key: '467ea6ab920e23a8cf98db73f3ba5507e0634bc8', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("input", { key: '8955ad7d1b2f854f21c274972c01092fb4ae8a25', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), hAsync("sd-icon", { key: 'bb376d3ee3264ae590f94d877f5f4d92eb7c2383', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: 'afbfc0ee30274b020e492e36fa7d75285fa908b2', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("input", { key: '20ff1404f15beaeff2f4f3e0b1772aadbd986934', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), hAsync("sd-icon", { key: '59e00f4ba49547aacf99dfab54c391c49895d8df', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: 'be74c5aebcc947aacf6841b15915cc98af5453e6', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (hAsync("sd-icon", { key: '181635bb288d34a3da7d1e368b8feafaddf4c9e7', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: '18adac8d177d2c5e88a35f50a23cd5ce9dbcbe3d', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (hAsync("sd-icon", { key: '0547537e85b8eb0f2678c3023eeec9241caf0ced', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: '86bf77f26f2aea00c31c9770c2142353d92d239c', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -4625,9 +4625,9 @@ class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (hAsync(Host, { key: '4b773c02856acdbe87d17794d2b09d03687cbfbf', style: {
+        return (hAsync(Host, { key: '73cc9c84ec4e921e83e9d0cde2971c5088cbb48f', style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, hAsync("sd-button", { key: '32f7288469230a3b9f63ee4518e12cd96dc954c5', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: 'e2f58c514c9f8a7ddf3cbfa01e595476df40555f', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '8ecbb7b326c6f69661bc809efcbb9ebbd148e9e8', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: 'b778c386e9ae56bc55405e80fce8e8b15d92ab80', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: 'b4e6890b28ffab4ca79119ece1515f898a4b8bdb', class: "sd-guide__popup__close", icon: "close", color: colors$1.grey_65, size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: '8e4ee14399a891be25f4df846e2ff64a26a5bd76', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '4de462413f81c110c6bb53984d8a49d3716e1357', name: "helpOutline", size: 24, color: colors$1.green_65 }), hAsync("h3", { key: '2193a1b5759a97907264f9054bea9ad4042716bd', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '455f1c2e9cfb7752d45937d21d2d38e182bfb6ca', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, hAsync("sd-button", { key: '310afd874d062a91fab4b179a9a4e2f340a95175', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: '133bb71a98efd9a15407aad915937caec728aa38', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '4a39145ce20e1e37ebc3f639712f635231f34f2d', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: 'e71a8217b3969db9fadf9083835402cf69e62c3c', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: 'f035ca961013d99305b0409f406fdd3063e11155', class: "sd-guide__popup__close", icon: "close", color: colors$1.grey_65, size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: 'a3d505a21abd77e85fac45a792ca7bb2b2448a6a', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '785bfbe594936b56f407edd2349e19076cf6ece9', name: "helpOutline", size: 24, color: colors$1.green_65 }), hAsync("h3", { key: 'da5dfaed05a11ccef574580a4c18341646d59e4f', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '0faa4a71c1d77d21490436323c2d80c792397991', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -6672,7 +6672,7 @@ class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (hAsync("i", { key: '88e60f381458c95d1c6abb893177d5da3e4d2639', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '459dcf88c8a28108052666028c8663fb5241a128', color: this.resolvedColor })));
+        return (hAsync("i", { key: '49cc8a7c8a0af18d920065232ef3e2127f6abb6c', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: 'cb8464e125ecfddc96621b57183fb26f37043f51', color: this.resolvedColor })));
     }
     static get style() { return sdIconCss(); }
     static get cmpMeta() { return {
@@ -6793,17 +6793,17 @@ class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (hAsync(Host, { key: '3e95d5ff30f78cff43d6ed263acf6d782ee082d9', style: inputWidth }, hAsync("div", { key: '6005f125ada3a94cf320d6390e8868c51b773b07', class: {
+        return (hAsync(Host, { key: '3babaa8e892b3e5e484d1bdbc28b0d209945ad69', style: inputWidth }, hAsync("div", { key: '31ea7cd711a33881144da3f0d4a6e98e6ec55244', class: {
                 'sd-input': true,
                 'sd-input--with-label': !!this.label,
                 'sd-input--inside-label': !!this.label && this.insideLabel,
                 'sd-input--barcode': !!this.barcode,
                 [this.getInputStatus()]: true,
-            } }, this.label && (hAsync("div", { key: '89009bc9f0bf631a0274c5261cacdc915548c4ca', class: {
+            } }, this.label && (hAsync("div", { key: '85596e41249b0f136c9c07bebe40e2bc2166ceba', class: {
                 'sd-input__label': true,
-            } }, this.label)), hAsync("label", { key: '83f40c08eef0754904941fffd00bec035f654bbf', class: {
+            } }, this.label)), hAsync("label", { key: 'd942a7cc950506a5cf2bcfd8984d3981af18cc7f', class: {
                 'sd-input__container': true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("slot", { key: '17d648f43076578e54f96c9e4fbd99553af45ef6', name: "prefix" }), hAsync("input", { key: '03a7c6da51930e629e75b8a0af8c3e843169a6df', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), hAsync("slot", { key: '604948d6bc07fb3e97e644c5459862b1fd3e91f0', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: '124d732eaa54a824dc82896d2bfc7520aa3dc2a2', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("slot", { key: '3add3a8c845be67ccd31ae98b30f5989d7e7dbf1', name: "prefix" }), hAsync("input", { key: 'b7297ae85e0f07c8a5696cc7072833dc6ade82bc', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), hAsync("slot", { key: 'c6ae6cb3f58da00c0ae80261e41841889347b73d', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: '662f365d57707b631f7a58b18330666521846e84', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);
@@ -6855,7 +6855,7 @@ class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (hAsync(Host, { key: 'aa2f775cec2d077ec5c90f56dfe6fc7c07d66ed3' }, hAsync("svg", { key: 'eb95e64d55a79a6937eec9b34cbe3ef538c773a5', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, hAsync("circle", { key: '3ce95d70dcdfe3a2ad83dc5fea1226e8e3948420', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (hAsync(Host, { key: 'a04395d2aaacdb74c06aebff6674ba82cc089a88' }, hAsync("svg", { key: 'e4a28205405702bb37b40aac4a73ae369605791d', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, hAsync("circle", { key: '31e0b13b0ab8dbf824fc6b40b020e7eb290f05f5', 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 {
@@ -7195,17 +7195,17 @@ class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (hAsync(Host, { key: 'ffe73be2e4061daf9cf4cff0956bcda7b38b9bcf', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && hAsync("div", { key: 'f68b7fceda7777b8f14d422a98af47571532d266', class: "sd-number-input__label" }, this.label), hAsync("label", { key: '408380758ce87949e0ec811bfa6c885d07d93a14', class: {
+        return (hAsync(Host, { key: '00862eac1b5ac354058dfc63ac7cbae7ea675c2e', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && hAsync("div", { key: '368ea9ee71d69fccd1f4793e990b1345e7d87cfe', class: "sd-number-input__label" }, this.label), hAsync("label", { key: '0f8d107bc23e308d6e9523f04199eccc39bd1268', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: '4e8313a42ecadb4e4d5b595af69d0cde0cf3d01d', ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, style: inputStyles }), this.useButton && (hAsync("div", { key: '0d892f1493ad23581e0c9b3d181a460fcf1e92ef', class: "sd-number-input__buttons" }, hAsync("button", { key: 'fcd18b53eec85898d7bbac22ccb61f865dc8aa17', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: '7f6f4a677ba9460ea022ae2060a73872123d19be', ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, style: inputStyles }), this.useButton && (hAsync("div", { key: 'fd85f670c841fd7aee190fa040b4e228af3075a6', class: "sd-number-input__buttons" }, hAsync("button", { key: 'c49d7ca15872cf5dc9fa6e46a3a7bca02a10d4d1', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'd52aee954ab3a205de0f3a106bd8097a23c44561', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), hAsync("button", { key: 'f18d76a1730f25773b0ba4266e682b40ed61376e', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '9fe03669015bbac1704f06bcacf8625c6937253d', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), hAsync("button", { key: '98ea1cc55299f03e1689bb9becc6e87ab5720d7a', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '608af5f9c7b837c823b4c196d2885b6db2b1dc9c', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b6d446dfdd0435b8c991901a2cb100af4ae4d8b5', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -7318,12 +7318,12 @@ class SdPagination {
         }
     }
     render() {
-        return (hAsync("div", { key: '2d6e0ff7f085eab4d36959d5d1509d02bec72602', class: this.paginationClasses }, hAsync("div", { key: '0bfc53f19760181a89833732c217385db02addf5', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (hAsync("div", { key: '0a55eddc4c434d3a7dc6afaa2386e68a6767300e', class: this.paginationClasses }, hAsync("div", { key: '8bb73906c74f1a8646286d0858ab6276531e4bd9', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: 'd22835ee79615e3f0700d4820df93e5bf91f68ba', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '2f6945f41f351153a9c182262ecef8c96d0ec1eb', class: "append-btns" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss(); }
     static get cmpMeta() { return {
@@ -7377,11 +7377,11 @@ class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (hAsync(Fragment, { key: 'd829713fa084f446de7a92b27c2a99989143c1cd' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-tooltip-portal", { key: '9599b6919adec483243bb7c3c9aa808314098e63', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: 'c6384698676c147395ea42569c4fdb58ce2c8d05', class: {
+        return (hAsync(Fragment, { key: '9d9b2e9ab7dd6d7b3a79fdf8468c1921b64c8e6f' }, 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: '44e2139f21c20017b93d59888ca358fe78bb21db', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: 'eac4edb768cc3e738d9fa0a9680d85aab5d9c795', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, hAsync("i", { key: 'e7db8d5465a337f579b0986dcadc3d3cba8dbc3a', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '83536de3473e209f30d9ba758537b8a38ee7eecf' })), hAsync("div", { key: 'be4eb9559697249db670333f4113192bd2faddf9', class: "sd-popover-menu__content" }, this.menuTitle && hAsync("div", { key: 'b80c8b40b00c3a97623c5ddae5fd1fea927b51e4', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: 'c05bbb176368895a04c58981af48f5ccd5dbe586', class: "sd-popover-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '8f70454411ea148dd0595b184b3a1798e2cd5b7c', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: 'fb399fcea8365695801a1001842f32cae2455a11', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '9f6cd57f9053d0c8e6d2cfef358867dd39b037bb', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, hAsync("i", { key: '8b4228cabeebf775419ce25c89a609c5a24bbc86', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '794ea65c5d1bd4362b5245611f49bab0bdbdf451' })), hAsync("div", { key: 'f3a756194b51dbfea1c2c1a9f09d390a7a01add2', class: "sd-popover-menu__content" }, this.menuTitle && hAsync("div", { key: 'e3425e647b09ad929741811f5962855d4b489a34', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '157ce5e1ceeee570cd12581471281124e91ccfe9', class: "sd-popover-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '82ce6ee0c7ab22981785df2751aab973321db044', 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: 'd5ce191f037db5c466f6de9ebdaabbbf3691f2b1', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '1ee550de3c8d8eaa72a3faa4d7abece5b4725452', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]
@@ -7532,7 +7532,7 @@ class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: 'f2884bc356461c20992f6bda70475eb0aa38a301' });
+        return hAsync("slot", { key: '05a54c512300d0616811e11a795170490feff876' });
     }
     static get cmpMeta() { return {
         "$flags$": 772,
@@ -7589,10 +7589,10 @@ class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (hAsync(Host, { key: 'fe3875178b9b621f5cb21dc030f736df71ee8f91', style: {
+        return (hAsync(Host, { key: 'b254676f6936364f895fd8dd85edd33b95b9d52e', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'bd4693197e530e6a836b076772bfd02a3c91ce3a', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'aeb82be4b54ec40dfec7dc8717faeea41c4fd0e8', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
@@ -8380,11 +8380,11 @@ class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: 'aa11a88a19987be498da603cfa81c95e89f935c0', style: style }, hAsync("div", { key: '35d1a93e5bee37027d43a90fadc32c335569ce66', class: {
+        return (hAsync(Host, { key: 'ff0653e24d97db442399017df0380a17f96dffe4', style: style }, hAsync("div", { key: 'd5f6c3425abfcfdd81e47529659aa591fc604b0b', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'd4d581d5fe2589dfd5ed5072324954f75f6c7382', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'ee82c8383eb3e98729b2d55065b66e9a84cf5215', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -8934,7 +8934,7 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync(Host, { key: '1a19f832f8cedf6ccc9ad6e0b973478c304b43e5' }, hAsync("div", { key: '22db5c447a29ffdb318c4814711160c71923914b', class: {
+        return (hAsync(Host, { key: 'cfb999f7001240e6bd5dc302b24aade477671f74' }, hAsync("div", { key: '053e073fee23e99bd23a9b9fa95cb9ddabf9d6bf', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -9020,7 +9020,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: 'f6f8a7ce8cb9c68e4f748e518d1fe3a4ae06802c', class: {
+        return (hAsync("div", { key: 'ed43a2fa2ae5b182f1c99b272126fb3629617681', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -9029,10 +9029,10 @@ class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: '0b5fe050c0d370bb92e63c0a54d4923b0d05e8d3', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '2d33a17d0f0104d72cd2ce54ec074a892765a70b', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: '97de3f6a855bf737cbaa5f23f7986b2c5ee10c52', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '7d8814dc060dd769f100be09d87edcc440cbf93d', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: 'c13521ff2721292c8f06f619249ea7c4ab89e88c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'f9c9bf0a5d71161259bc72b14af0b20e57213f75', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: '8fd8bf56260bf49f42a0cb205868a45912e5a4de', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'eaa10fa1f13f4f6bc48b22967b1b31a2e894865c', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss(); }
     static get cmpMeta() { return {
@@ -9081,17 +9081,17 @@ class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (hAsync("div", { key: '65bd006cb11e8979bdfc15c647623f10b624d556', class: {
+        return (hAsync("div", { key: '6d05eba9ab9a951d126f703ec9366d8b425581b7', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '153b003caf75f4deb45476d70b6695699ed08827', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
+            }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: 'e00b8cab50be8a096893c4cb4aceff0446cbfde4', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
                 this.sdSearchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.sdSearchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, hAsync("sd-icon", { key: 'f55710c6a77d73cf0ff65891ca5028caefc174a2', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, hAsync("sd-icon", { key: '951178d9cbe80fc944e708207b57949ecd6ed8fc', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get style() { return sdSelectSearchInputCss(); }
     static get cmpMeta() { return {
@@ -10233,7 +10233,7 @@ class SdTbody {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'bef033a85bc25bdd4c08be9ac93e1dd7904d3b92' }, hAsync("slot", { key: '380295c93446b7c99068bddb1ebefeee25056759' })));
+        return (hAsync(Host, { key: '5c25fa054aaea539d47625d367adeb18d771f070' }, hAsync("slot", { key: '17e9fd219974d986e154d72c82a3ac145af7e7a8' })));
     }
     static get style() { return sdTbodyCss(); }
     static get cmpMeta() { return {
@@ -10257,11 +10257,11 @@ class SdTd {
     tdStyle;
     tdClass;
     render() {
-        return (hAsync(Host, { key: 'b220b330eccc8e87ba9b0333f25d5d8e922fbf5e', role: "cell", class: {
+        return (hAsync(Host, { key: 'caaefa12c86561d1bbe8d10e4f25b079def2124e', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, hAsync("slot", { key: '807cf20b823a3efa00ce4f690ff1be2226d6ad8f' })));
+            }, style: this.tdStyle }, hAsync("slot", { key: '9ea243e4a6fcb4b6e1edc94b92eb4cc9d0e50a97' })));
     }
     static get style() { return sdTdCss(); }
     static get cmpMeta() { return {
@@ -10286,7 +10286,7 @@ class SdTh {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '1ffd60e25f49d7a2840e90e4813be0f249634a0e', role: "columnheader" }, hAsync("slot", { key: 'afc47eff5e8714aca488a928fdd356d58f20235a' })));
+        return (hAsync(Host, { key: '04e75c300b9147dc122570af4b1f4729d6ee1902', role: "columnheader" }, hAsync("slot", { key: '29cbcdc0f8b8087c4c8bf593a7dfe8cf56bcaf39' })));
     }
     static get style() { return sdThCss(); }
     static get cmpMeta() { return {
@@ -10406,7 +10406,7 @@ class SdToggle {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: '98109b653fae3a6fb4da63974bd1cb3c298922a8', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: '72abccdd961d365d34aeaefe1a45ffb84de8c74f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: 'd8c2f68be88a9089ba494017f3d46a3151cfb882', class: "sd-toggle__label" }, this.label), hAsync("div", { key: 'be28af142749104d24172782817bdaa94bd24eb1', class: "sd-toggle__track" }, hAsync("div", { key: 'f3b000418dbaece07540ad3135ef629113274de4', class: "sd-toggle__thumb" }))));
+        return (hAsync("label", { key: 'ba2398d6eb054c00c526ab1ada37b09e4d6602a3', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'b7da299e1dacd7d41bc1cd72d5bc135d5ecd52fd', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: 'b6ddc87485036dee698eb099d7343edd4163d7b0', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '2439852af329488d50907ee132a6fd819129a6a0', class: "sd-toggle__track" }, hAsync("div", { key: '72114f2bec9e0372b05d90df8099dc9aad812e3d', class: "sd-toggle__thumb" }))));
     }
     static get style() { return sdToggleCss(); }
     static get cmpMeta() { return {
@@ -10463,7 +10463,7 @@ class SdToggleButton {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: '98522762cdfcfd0b7ee4e460455c46e2e5aea679', class: this.buttonClasses, role: "button", "aria-pressed": this.isActive.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: '905fbcee8ca900a099b27c4fe90b87a1485aefd3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (hAsync("label", { key: '54d45d11b3944c61147d5bd0fa68078aa28737f1', class: this.buttonClasses, role: "button", "aria-pressed": this.isActive.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: 'cafb7edbcaead5e487b756a006cfee9b9d890558', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleButtonCss(); }
     static get cmpMeta() { return {
@@ -10529,20 +10529,20 @@ class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (hAsync(Fragment, { key: '5b1fc0676ab054ff35c241b75da7065d8bb5463f' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: 'c9dd7ad95c2ee7c4c15ef9670a55fd135ad31aef', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: 'b7f8ce9afe1c806711b356d008ba0a50c9a54817', class: {
+        return (hAsync(Fragment, { key: '1016ad941100e902068b5a7d7773a2dbf7ab0667' }, 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: '8370b55d3bafa7a5ca429ee17c7555cfdb9e51a2', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: '94a8d13f88050792b3e307901c2545995d92fdaf', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, hAsync("i", { key: 'e8b1f776aa1f42355cbdfd36ed3018c18ccb974a', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '34af873af0b9705baae638f91daa99fdf283e11b', class: {
+            } }, hAsync("i", { key: 'b13f215dc7f51af86e7748a0ac565f62cbd936ef', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'a043ccc525e18baed8c9b4d5cdd7651c4600b4e4', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), hAsync("div", { key: '079e229d6edd5dbddcdd284bc476d65824e39123', class: "sd-tooltip-menu__content", ref: el => {
+            } })), hAsync("div", { key: '60e67cc4620b07153a8cef098446e0a292f08230', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && hAsync("span", { key: '4d83f9d9289673949af26a2d3a22891effaad6cd' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '8794541b5a28fc1b452cdf64ab716ccc5b92b77e', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: '98434991dc4d234903d19598d897499ed25b1ffb', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '6a79435ca69bd531929ef0be82989dc766dd833d', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && hAsync("span", { key: 'e2e2afd2e2607be01d474c9329cd15b280214cd0' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '25962f34a91f8838e32c25529cacf048b2bbcf6b', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: '5e37a4c9bace03a0c2a26edb0125ac0f25c65784', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: 'ed7c97b16a507b8fad10d58f4e5a38061517b88a', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {
@@ -10718,7 +10718,7 @@ class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: 'aa077fc67880fd159b08f0333e000b4cc73df394' });
+        return hAsync("slot", { key: 'f26d3228d5c0965c2303e599259a6e93307009dc' });
     }
     static get cmpMeta() { return {
         "$flags$": 777,
@@ -10744,7 +10744,7 @@ class SdTr {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '384b83fc792b3482a2f5e299c248ccfe52e23aab', role: "row" }, hAsync("slot", { key: '49d0f2140923af7709222b596e6cdc511bbac0a3' })));
+        return (hAsync(Host, { key: '87cb4c63e4368106176b194602195b5a1e48c706', role: "row" }, hAsync("slot", { key: 'daeaecd458767c572d86cf05650230388f1a2cae' })));
     }
     static get style() { return sdTrCss(); }
     static get cmpMeta() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "0.0.55",
+ "version": "0.0.56",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",
@@ -92,5 +92,5 @@
   "@stencil/react-output-target": "^1.2.0",
   "@stencil/vue-output-target": "^0.11.8"
  },
- "gitHead": "7321b70e305dd0177f37d3c518217c0d675d77f1"
+ "gitHead": "bd639f1c664b680b44a40540998c72001781756c"
 }

package/dist/design-system/p-2c57bdea.entry.js

@@ -1,2 +0,0 @@
-import{r as s,a as e,h as t,F as o}from"./p-7X2nzJWz.js";import{T as i}from"./p-CdbtuKYR.js";const a=()=>`.sd-popover{position:relative;cursor:pointer;display:inline-block}`;const c=class{constructor(e){s(this,e)}get el(){return e(this)}show=false;placement="bottom";color="#01BB4B";icon="helpOutline";iconSize=12;label="";buttonSize="sm";buttonVariant="primary";menuTitle;messages=[];buttons=[];menuClass="";noHover=true;useClose=false;showPopover=false;slotContent="";watchShowHandler(s){this.showPopover=s}componentWillLoad(){this.showPopover=this.show;this.slotContent=this.el.innerHTML}buttonEl;handleClose=()=>{this.showPopover=false};render(){return t(o,{key:"d829713fa084f446de7a92b27c2a99989143c1cd"},this.label?t("sd-button",{ref:s=>this.buttonEl=s,label:this.label,icon:this.icon,size:this.buttonSize,color:this.color,variant:this.buttonVariant,class:"sd-popover",onClick:()=>this.showPopover=!this.showPopover}):t("sd-icon",{ref:s=>this.buttonEl=s,name:this.icon,size:this.iconSize,color:this.color,class:"sd-popover",onClick:()=>this.showPopover=!this.showPopover}),this.showPopover&&t("sd-tooltip-portal",{key:"9599b6919adec483243bb7c3c9aa808314098e63",parentRef:this.buttonEl,onSdClose:this.handleClose,placement:this.placement},t("div",{key:"c6384698676c147395ea42569c4fdb58ce2c8d05",class:{"sd-popover-menu":true,[`sd-popover-menu--${this.placement}`]:true,[this.menuClass]:!!this.menuClass}},t("i",{key:"e7db8d5465a337f579b0986dcadc3d3cba8dbc3a",class:`sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}`},t(i,{key:"83536de3473e209f30d9ba758537b8a38ee7eecf"})),t("div",{key:"be4eb9559697249db670333f4113192bd2faddf9",class:"sd-popover-menu__content"},this.menuTitle&&t("div",{key:"b80c8b40b00c3a97623c5ddae5fd1fea927b51e4",class:"sd-popover-menu__title"},this.menuTitle),this.messages.length>0&&t("div",{key:"c05bbb176368895a04c58981af48f5ccd5dbe586",class:"sd-popover-menu__messages"},this.messages.map((s=>t("div",null,s)))),this.buttons.length>0&&t("div",{key:"8f70454411ea148dd0595b184b3a1798e2cd5b7c",class:`sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}`},this.buttons.map((s=>t("sd-button",{...s}))))),this.useClose&&t("button",{key:"fb399fcea8365695801a1001842f32cae2455a11",class:"sd-popover-menu__close-button",onClick:()=>this.handleClose()},t("sd-icon",{key:"9f6cd57f9053d0c8e6d2cfef358867dd39b037bb",name:"close",size:"12",color:"#AAAAAA"})))))}static get watchers(){return{show:["watchShowHandler"]}}};c.style=a();export{c as sd_popover};
-//# sourceMappingURL=p-2c57bdea.entry.js.map

package/dist/design-system/p-3bc4effa.entry.js

@@ -1,2 +0,0 @@
-import{r as d,h as e,H as r}from"./p-7X2nzJWz.js";const s=()=>`sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card.sd-card--bordered{border:1px solid #e1e1e1}`;const c=class{constructor(e){d(this,e)}bordered=true;class="";render(){return e(r,{key:"902920358ec434881c5e8d1ec77758dd74dd4c31"},e("div",{key:"9b2eb1ec45fc2345b30efe26a9aed2a44f39e0e1",class:`sd-card ${this.bordered?"sd-card--bordered":""} ${this.class}`},e("slot",{key:"d31d14e706a89d53d5915e0a411838ad5567fd20"})))}};c.style=s();export{c as sd_card};
-//# sourceMappingURL=p-3bc4effa.entry.js.map

package/dist/design-system/p-3bc4effa.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["registerInstance","h","Host","sdCardCss","SdCard","constructor","hostRef","this","bordered","class","render","key","style"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAY,IAAM,4JAExB,MAAMC,EAAS,MACX,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,EAC3B,CACAE,SAAW,KACXC,MAAQ,GACR,MAAAC,GACI,OAAQT,EAAEC,EAAM,CAAES,IAAK,4CAA8CV,EAAE,MAAO,CAAEU,IAAK,2CAA4CF,MAAO,WAAWF,KAAKC,SAAW,oBAAsB,MAAMD,KAAKE,SAAWR,EAAE,OAAQ,CAAEU,IAAK,8CACpO,GAEJP,EAAOQ,MAAQT,WAENC","ignoreList":[]}

package/dist/design-system/p-97b271a7.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,H as d}from"./p-7X2nzJWz.js";const s=()=>`sd-tbody{display:table-row-group}`;const o=class{constructor(t){e(this,t)}render(){return t(d,{key:"bef033a85bc25bdd4c08be9ac93e1dd7904d3b92"},t("slot",{key:"380295c93446b7c99068bddb1ebefeee25056759"}))}};o.style=s();const r=()=>`sd-th{display:table-cell;padding:12px;font-weight:bold;text-align:left;border-bottom:2px solid #ddd;background-color:#f1f1f1}`;const a=class{constructor(t){e(this,t)}render(){return t(d,{key:"1ffd60e25f49d7a2840e90e4813be0f249634a0e",role:"columnheader"},t("slot",{key:"afc47eff5e8714aca488a928fdd356d58f20235a"}))}};a.style=r();const c=()=>`sd-tr{display:table-row}`;const b=class{constructor(t){e(this,t)}render(){return t(d,{key:"384b83fc792b3482a2f5e299c248ccfe52e23aab",role:"row"},t("slot",{key:"49d0f2140923af7709222b596e6cdc511bbac0a3"}))}};b.style=c();export{o as sd_tbody,a as sd_th,b as sd_tr};
-//# sourceMappingURL=p-97b271a7.entry.js.map

package/dist/design-system/p-fc3580fd.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,H as s}from"./p-7X2nzJWz.js";const l=()=>`sd-td{display:table-cell;padding:12px 16px;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}`;const d=class{constructor(t){e(this,t)}name="";align="left";tdStyle;tdClass;render(){return t(s,{key:"b220b330eccc8e87ba9b0333f25d5d8e922fbf5e",role:"cell",class:{"sd-td":true,[`sd-td--${this.align}`]:true,[this.tdClass||""]:Boolean(this.tdClass)},style:this.tdStyle},t("slot",{key:"807cf20b823a3efa00ce4f690ff1be2226d6ad8f"}))}};d.style=l();export{d as sd_td};
-//# sourceMappingURL=p-fc3580fd.entry.js.map