@sellmate/design-system 1.0.18 → 1.0.19

package/hydrate/index.mjs

@@ -5481,7 +5481,7 @@ class SdBadge {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (hAsync("div", { key: '30d12c1c50dd761e04f39c1e00d8bad166e63c99', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'f6eb92732c9b0768d8663c0cdb08b02654de8697', class: "sd-badge__dot" }), hAsync("div", { key: '4588f505fe8dc47b0ae51063db3728fcd3330d98', class: "sd-badge__label" }, this.label)));
+        return (hAsync("div", { key: 'eeb4866526fa9e628da7182d6caca317015d6452', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'b14add6e76ab27eba5883c641e0ffa840e170ba2', class: "sd-badge__dot" }), hAsync("div", { key: 'a53d4d487a6c97f87189c555f0a95640186fdf93', class: "sd-badge__label" }, this.label)));
     }
     static get style() { return sdBadgeCss(); }
     static get cmpMeta() { return {
@@ -5586,7 +5586,7 @@ class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (hAsync(Fragment, { key: 'e99e472e629ea22ebdeba34e87c6202bbde083fc' }, hAsync("div", { key: 'a8ea9e169ecafd14f8f528dc1c5534d2790a494f', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: '60f687272faa536e182e9a65ea0c07a233194bd8' }))));
+        return (hAsync(Fragment, { key: '155504b50cb1c21fc1f847af8a9e8b685f7881ef' }, hAsync("div", { key: 'c461e3e40da44586da5e02ad508bf59942a9e82a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: '0c0ee023155c08c565c3496c44699a900666b084' }))));
     }
     static get style() { return sdCardCss(); }
     static get cmpMeta() { return {
@@ -5902,7 +5902,7 @@ class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (hAsync("div", { key: '48a0f667e32a558c3740a9a7c08c828bc6351526', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: 'dbb1aa3920825121c96b1b52b0426cd147dc5a9c', 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: '2239f7d145f74429e5281dd2375fa3d7653f526f', 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: '713321553ad27a17ab6d680230f983e0eb6147a4', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '5d76ddefb3832251708406deec1731a7d0708839', class: "sd-date-picker__menu" }, hAsync("div", { key: '2a206d6f218f8076a3b40038e17ee51ea14f4209', class: "sd-date-picker__header" }, hAsync("div", { key: '0986903e283c554d71be5dcae48858eab3909cde', class: "year-nav" }, hAsync("button", { key: 'f9a047da8de609664b2a14f369cc3a56ee3e5d4b', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '967e915a3d5b6e2a394d6be2a5e482667bf3aa4e', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '3b732eee2b5db4bb56d1cd84887270c5dc57e249', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: 'a93b7f38a9c352120c9b3c4bc7cfb9461a546580', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: 'd4fc5451575d40a8d62d0b5cf6fb3cdd0e4a1cf7', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: 'de99ab843195d1c01e4af37a723ed0e101e84f7b', class: "month-nav" }, hAsync("button", { key: '1b9cf039c53437ddd6d90489ca6d87f8a57e43f2', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '09908b70655302fe6de6b0bfb05488a0de3abf79', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '1ebb8e3bd6bfccabd9503b8837a59bd0f27e10c9', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: 'ae4ede6b4a01bbcb543f8964961e665ef82adc7c', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: 'f14772e18bbf68528a1b399ba058fcf1e25b40c9', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: '7e699a1e5439c19ff78f311f90d31c246f67f6cb', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: '86939550882e9b76c119480eb16f6e30c0b7ac3c', class: "sd-date-picker__body" }, [
+        return (hAsync("div", { key: 'bb17d32f08d998e599c90cf1a7a35b17e19d3dc4', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: 'ae028d5999a8df40a83b0d77d2dd5c2e0d0d8eb0', 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: 'fbb954703d19161ab4507696a21278d5b4962b25', 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: 'a335d5d317718e30be14fdb4aa1a63cb1347b929', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '38deef7127db10c91a51b8d6cb017d85fce25888', class: "sd-date-picker__menu" }, hAsync("div", { key: 'f2ef8eb33086103df65b434360ecc1aac2949bf9', class: "sd-date-picker__header" }, hAsync("div", { key: '8b949551a157de1e2ded7f1de621ccacd136126e', class: "year-nav" }, hAsync("button", { key: 'b1bbd712094885223c21f030c32914d14f3904c2', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '7bb6f5f216d02cde59eff87fcaebc32eccbaac25', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '645c12556fe1b9f1d1c8f7c4cfe73c3b65ad7431', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: 'f6cb58c23effd1aa0566aaacf41170482f03df51', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: 'e92ef17b8d50e5115a159d2dd984e738a920f065', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '73018a9ca04929f4be017631e8e49a73cef71855', class: "month-nav" }, hAsync("button", { key: '0983ca35486b8ad29c09740848b4288b602d0cd9', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '2c9257564786287f825c83391f3e05745c23cf9a', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '0b9e048eeea62c452671b74db468aa5587e8ddbf', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: '3ead15a341d5e361e7fb9b1cb2842e5a38b0e03c', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: 'a3dbd8606dd51f72f1c315f2eea7ff089a95e6fa', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: '6bbadc79157ae64bf492a965b78d014dcd968ea6', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: '972c00769b40eff8015b68e0a9479a6c7c6009db', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
@@ -6094,10 +6094,10 @@ class SdDateRangePicker {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (hAsync("div", { key: 'ada8df3857c5eed11ea3fed9dbe366cae24d65d5', class: {
+        return (hAsync("div", { key: '96cd4e99ae976517e7b24c5ff3046af976adc5cb', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, hAsync("sd-input", { key: '7639d651fcd5e91ac6597d2e17a69f9bd81db566', 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: '4fec08e3f5197016bb93770c6bb91064ef10fa3f', 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: '62b921bdbbf811b9a284c14935f87f7ee1d8eac2', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: '93ffa95963c3622475722299a0d0472a2dd8a3a7', class: "sd-date-range-picker__menu" }, hAsync("div", { key: 'd3150332edca90965753e86c93be4e98008482bb', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: '19dfb8f00e7fa249db6b53e8a44e5bbfd4dbf92f', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: '28298db1a3f389e03e135633711b57877d3d5068', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: 'c766b56b7cb60d4c8fd4197ae976c883edfdf1a6', class: "header-label" }, this.prevYear), hAsync("button", { key: '30679ee6294a0fc1a9334086c758fa8087e35741', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '111feaca6378a929f84ef751bbf1d17a4ba98ed6', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '185b10c49244740b92f35319cdc1b1833753bdc7', 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: 'a84838a1a84d990b289f0b753ccf3e2f45da4770', 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: 'd926c672dcf457a68ebe644b32c90a03ba29b175', 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: '0af519c7ac2ade00972e23b9ecb0344989d87f51', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: 'd9109e573215092c6b386ae27ac7377c4347df4c', class: "sd-date-range-picker__menu" }, hAsync("div", { key: 'ca4743a26ed0571bc3b63218a32a113e50dbd81a', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: '6f0fe1ede6d171e749a241fbeec32056250709b9', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: '821526a069a845f271b0e5db607f747efe4e610c', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: 'e9402009c8b034953d7ff4be5a4eea64d7fed21d', class: "header-label" }, this.prevYear), hAsync("button", { key: 'b752631ab64e32a4a39c13898cc3db5e25897c4b', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '62c6e0004ff1a0d8f260e11b9d17ea7ccca942ee', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '3a05a7e02664be8d9dfb85d0bada03a2d352af12', 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)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }
@@ -6129,7 +6129,7 @@ class SdDateRangePicker {
     }; }
 }
 
-const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}sd-field .sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}sd-field .sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}sd-field .sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
+const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}sd-field .sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}sd-field .sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}sd-field .sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid #2bce6c !important}sd-field .sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
 
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -6249,15 +6249,15 @@ class SdField {
         }
     }
     render() {
-        return (hAsync("div", { key: 'b5e9d5d8ba103c51326a794f456e525cd3f74932', class: {
+        return (hAsync("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, hAsync("div", { key: '5270c71b689766d3a3edb39afdd356a91f1cbf8b', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'ce6bd24750c5709f01c9b75eacd156f4f951bae3', class: {
+            } }, hAsync("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, hAsync("slot", { key: '256ca195a91713bb16d2a0c4a95465319a72237b' }))), this.errorMsg && hAsync("div", { key: 'fa5c5adf31a2d65d9518225186a72062d5104f08', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, hAsync("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && hAsync("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
@@ -6391,15 +6391,15 @@ class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (hAsync("div", { key: '6c96e930758e62d66cb0a9c4449e06592667d9dc', class: {
+        return (hAsync("div", { key: '659ab6f0e1fedadfbef1838def391aab28ae6e62', 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: 'e611e2c14c312b053d645ea0e35cfda878ea382e', 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: '3733905eaea0203fb589858143c968850feae480', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: 'b7dec66670f67e69248292265fbc80e00ffea0ff', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("input", { key: '55ffb6c1b3ff502b555cb48a31301ac9b30701a4', 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: 'b7755876e0f327d15a886a86592cd59bd3435202', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: 'e1e2004c64166eb2b611c48ca51cc793fb90434c', 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: '81452b84daadf7b51f8383b756d4773b9f38411b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: '8e19381802185684f4982c588085c7948222cd73', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (hAsync("sd-icon", { key: '0a3c122382cab2148a88fbd4fdc9ff1f7cde757b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: '628717309bf16c0906e9ac21ecbf14a416eea8d8', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": [{
@@ -6578,7 +6578,7 @@ class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: 'e66f9bf4a2e6e85be4e66660232e3dcf3c993e67' });
+        return hAsync("slot", { key: '2f33d335a7cf00ace576aed610a0e77d711a5b10' });
     }
     static get style() { return sdFloatingPortalCss(); }
     static get cmpMeta() { return {
@@ -6735,9 +6735,9 @@ class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (hAsync("div", { key: '0b3cb2fd1bc331592f6f816aa729abce3fe7835e', class: "sd-guide", style: {
+        return (hAsync("div", { key: '2a7d3d040d3fbe7d0c22afc62d67a848fbae67d9', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, hAsync("sd-button", { key: '42ef456f180a0ef5faef5524aca6707adfd0218b', 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: '3820cd8e59c0609c32606339d51eb31e7981f551', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '8c2be02160082b0c43b7b75edb3422135045b913', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '94d7de120549fa16952aacc08d6ba67b3542cbb9', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: 'e1c0ac8509fc47e1afad3d9d898d95281cdd70c9', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: '864c8082c9fe43ca9d68f64530eab8b7b38fd6cc', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: 'db417ad8a23df1482d644f7fdee3ac60c86abf87', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: '1baa8e7c8beb29c5cb8c9226ba948023ef57d799', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '6513c9fadbc0c9eeca432a16b28815aa2beb1004', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, hAsync("sd-button", { key: 'e354fa7a48aacabbd7688f9546d71ec138b4a648', 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: '157583215cdba27ae493a07aaa3eb4a0e3923971', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '6aaa8f4ee6f44225ee63ef740d7398e87207c0c0', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '9184936963f96e2537b3713bd5ee38d0c058c72b', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: 'a1f653f7e40f6ad4e97dca82e10d4f03843469fd', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: '561433ec3fcf6f9de4badd8e24ffaffbab4e62df', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '69aafb073fa680f8353deccb860320da083ff121', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: '71f7fcb3068d572523c6bf53276e654feb1056f6', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '407db996ded71b9a5786b1e7967349517c7eb877', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -7513,7 +7513,7 @@ const CheckFilled20 = (props) => (hAsync("svg", { ...props, width: "20", height:
 
 const CheckFilled24 = (props) => (hAsync("svg", { ...props, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM18.1299 8.46973C17.837 8.17703 17.3622 8.1769 17.0693 8.46973L10.8125 14.7275L7.09961 11.0146C6.80684 10.7221 6.33191 10.7223 6.03906 11.0146C5.74625 11.3075 5.7464 11.7823 6.03906 12.0752L10.1045 16.1416C10.495 16.5321 11.129 16.5321 11.5195 16.1416L18.1299 9.53027C18.4228 9.23738 18.4228 8.76262 18.1299 8.46973Z", fill: "currentColor" })));
 
-const CheckFilled = {
+const checkFilled = {
     8: CheckFilled8,
     10: CheckFilled10,
     12: CheckFilled12,
@@ -7522,9 +7522,9 @@ const CheckFilled = {
     24: CheckFilled24,
 };
 
-var CheckFilled$1 = /*#__PURE__*/Object.freeze({
+var CheckFilled = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  CheckFilled: CheckFilled
+  checkFilled: checkFilled
 });
 
 const CheckOutline8 = (props) => (hAsync("svg", { ...props, width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M4 0.0332031C6.19058 0.0333789 7.9668 1.80938 7.9668 4C7.96662 6.19047 6.19047 7.96662 4 7.9668C1.80939 7.96679 0.0333844 6.19057 0.0332031 4C0.0332031 1.80927 1.80927 0.0332059 4 0.0332031ZM4 0.632812C2.14064 0.632815 0.632812 2.14064 0.632812 4C0.632994 5.8592 2.14076 7.36621 4 7.36621C5.8591 7.36603 7.36603 5.8591 7.36621 4C7.36621 2.14075 5.85921 0.632988 4 0.632812ZM5.6543 2.78809C5.77145 2.67093 5.96097 2.67093 6.07812 2.78809C6.19518 2.90525 6.19525 3.09479 6.07812 3.21191L3.875 5.41504C3.72544 5.5646 3.48274 5.56529 3.33301 5.41602L1.97754 4.06055C1.86045 3.94345 1.86057 3.75389 1.97754 3.63672C2.0947 3.51956 2.28421 3.51956 2.40137 3.63672L3.60352 4.83887L5.6543 2.78809Z", fill: "currentColor" })));
@@ -7539,7 +7539,7 @@ const CheckOutline20 = (props) => (hAsync("svg", { ...props, width: "20", height
 
 const CheckOutline24 = (props) => (hAsync("svg", { ...props, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M12 0.25C18.4893 0.25 23.75 5.51065 23.75 12C23.75 18.4893 18.4893 23.75 12 23.75C5.51065 23.75 0.25 18.4893 0.25 12C0.25 5.51065 5.51065 0.25 12 0.25ZM12 1.75C6.33908 1.75 1.75 6.33908 1.75 12C1.75 17.6609 6.33908 22.25 12 22.25C17.6609 22.25 22.25 17.6609 22.25 12C22.25 6.33908 17.6609 1.75 12 1.75ZM17.0693 8.46973C17.3622 8.1769 17.837 8.17703 18.1299 8.46973C18.4228 8.76262 18.4228 9.23738 18.1299 9.53027L11.5195 16.1416C11.129 16.5321 10.495 16.5321 10.1045 16.1416L6.03906 12.0752C5.7464 11.7823 5.74625 11.3075 6.03906 11.0146C6.33191 10.7223 6.80684 10.7221 7.09961 11.0146L10.8125 14.7275L17.0693 8.46973Z", fill: "currentColor" })));
 
-const CheckOutline = {
+const checkOutline = {
     8: CheckOutline8,
     10: CheckOutline10,
     12: CheckOutline12,
@@ -7548,9 +7548,9 @@ const CheckOutline = {
     24: CheckOutline24,
 };
 
-var CheckOutline$1 = /*#__PURE__*/Object.freeze({
+var CheckOutline = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  CheckOutline: CheckOutline
+  checkOutline: checkOutline
 });
 
 const ClockFilled8 = (props) => (hAsync("svg", { ...props, width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M4.00034 0.333313C6.02523 0.333489 7.66635 1.97537 7.66635 4.00031C7.66618 6.02509 6.02512 7.66614 4.00034 7.66632C1.9754 7.66632 0.333519 6.0252 0.333344 4.00031C0.333344 1.97526 1.97529 0.333313 4.00034 0.333313ZM4.00034 1.33331C3.81636 1.33331 3.66751 1.48239 3.66733 1.66632V3.99933C3.66733 4.18342 3.81624 4.33331 4.00034 4.33331H6.33334C6.51728 4.33313 6.66733 4.18331 6.66733 3.99933C6.66697 3.81565 6.51706 3.6665 6.33334 3.66632H4.33334V1.66632C4.33316 1.4825 4.18416 1.33349 4.00034 1.33331Z", fill: "currentColor" })));
@@ -8705,8 +8705,8 @@ const Icons = {
     ...CaretRight,
     ...CaretUp,
     ...Check,
-    ...CheckFilled$1,
-    ...CheckOutline$1,
+    ...CheckFilled,
+    ...CheckOutline,
     ...ClockFilled,
     ...ClockOutline,
     ...Close,
@@ -8782,7 +8782,7 @@ class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (hAsync("i", { key: '281baa39ffa7f3eaa1dad93658cb2c86fbfa8fb9', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '6759bd3374526b90ebffb60c3374385ca0f1b65a', color: this.resolvedColor })));
+        return (hAsync("i", { key: '1d6a48769c99bbfe9576016e24766b8c82ab570e', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '3fdb4195ef13656e79b402a4eae2fb0210fb3a97', color: this.resolvedColor })));
     }
     static get style() { return sdIconCss(); }
     static get cmpMeta() { return {
@@ -8907,7 +8907,7 @@ class SdInput {
         }
     };
     render() {
-        return (hAsync("sd-field", { key: 'e3a668f4065ad4d7d4075607d20cf5e678c0a1eb', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("label", { key: '4d0a91447a6b0c162a4dfdee5603fc107182a205', class: "sd-input__content", style: { width: '100%' } }, hAsync("slot", { key: 'c92e0603eee0f86ca0b1ed0ba48585ee75409475', name: "prefix" }), hAsync("input", { key: '823608a07cca038c0360ada0f918c3b20dfb4028', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '17214d9e18cb25c4938fd184b9506ccee0b34f56', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: '8cfdf4086544261be758df0ceaa822c6b313ec2e', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
+        return (hAsync("sd-field", { key: '87f02ba890fd952f89eb86d200318038137ba1a4', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("label", { key: '0bb5824067b33c178b1f60ececdccfe0a3d5f294', class: "sd-input__content", style: { width: '100%' } }, hAsync("slot", { key: '6f67712b4ca708ba511c57379a6b5118732f146a', name: "prefix" }), hAsync("input", { key: 'b337a1161dedb41ed29a690fa963c0ac60dd0c79', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'bf45d9fd71551dc6a3bb96cdc44512796beee923', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: 'aed0a5d9115ba8b7601dc62423349bee1a9978c7', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));
@@ -8970,7 +8970,7 @@ class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (hAsync(Fragment, { key: 'aea077417bbdc982ca01898a844a11aea1ea9f23' }, hAsync("svg", { key: 'f44999f62621e50fdcec62f7daa5f2ec82a20c07', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, hAsync("circle", { key: '54fb28e1408597bf9882b5160eaa48c244b2535e', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (hAsync(Fragment, { key: 'c3b3448fcc65334af3246f80157b195ec5595afe' }, hAsync("svg", { key: '24701b65d17e56434cf46b72dbd5acec208b5dc8', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, hAsync("circle", { key: 'e19c68c082348d36eecd05fa561eee91182349f2', 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 {
@@ -9221,6 +9221,7 @@ class SdNumberInput {
         }
     };
     handleFocus = (event) => {
+        this.focused = true;
         this.focus?.emit(event);
     };
     handleBlur = async (event) => {
@@ -9291,17 +9292,17 @@ class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (hAsync("sd-field", { key: '67a058098338d7caa85392f937f94ba3cb030de5', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, hAsync("label", { key: '2f49f1f6244814018c37c9b282d5b75bc3760fbe', class: {
+        return (hAsync("sd-field", { key: '7aa387eeb5850052e121931b3f8183373b4319aa', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, hAsync("label", { key: 'f5bbb6c76e32de4aefe59c6958a38e1a560f05c9', 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: '3969b4b771db408e01278c8afe94f046c88933cb', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (hAsync("div", { key: 'd9e5fe65e547d889e7de2b7101dddd24f9561ffb', class: "sd-number-input__buttons" }, hAsync("button", { key: '4929c32d892adee3472ba01d811d1c9dc2b8a85d', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: 'fc26b7cf0d121025c9a748b158640e03188d72d3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (hAsync("div", { key: 'c9325ea7dd19c02fead55a0d63ac0b7b16143d08', class: "sd-number-input__buttons" }, hAsync("button", { key: 'ec96811ce7046a3fe9506ca0635db97413d8283a', 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: '00f90c8f39b70efc832c1ba841275a55f4495dcf', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: '80f9c301c5a7c517f35d825610cfca0f37fbed31', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '70311a7723356ecc88125042d366bf567b0b5a2a', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: 'b7086218dc98fec4287e4becb0d834634fd52055', 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: '8173735e53fb25ba761ab8c316b7f9d245a161f6', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b945a1561978dc4bba1868fa57652e94a6bcfc34', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get watchers() { return {
         "value": [{
@@ -9425,12 +9426,12 @@ class SdPagination {
         }
     }
     render() {
-        return (hAsync("div", { key: 'b6c73445ec3610f63c59592ebb7422ea7bc9709d', class: this.paginationClasses }, hAsync("div", { key: '3392ad0991ea53bb9c85af8d647bd1c0ed22a29d', 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: 'feed08139c382f91539bc316a967ed1738529688', class: this.paginationClasses }, hAsync("div", { key: '42c908d7a685f2acab29a94d040e4f4c513fff38', 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: 'a5637dbbcf060aa0d36f26b0bbe6b2962995981a', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '2be11ae773c0bce71ecaf53f99daff3f5b2d567d', class: "append-btns" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss(); }
     static get cmpMeta() { return {
@@ -9484,11 +9485,11 @@ class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (hAsync(Fragment, { key: '7ca71e038f87350238a508661be8b3b72005cd8f' }, 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", onSdClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-floating-portal", { key: '8ec8e22abe86fc20b65ce27f666cfd673d546d52', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: 'fd3e4123530b1a13b0aafb2794429a64f77c6fce', class: {
+        return (hAsync(Fragment, { key: '883bea0d5ef88bb63b4a1a2d778aedf0bce6f000' }, 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", onSdClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-floating-portal", { key: 'f38658d537cd8cebb84e579b02c73209e8a81d3a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '472702d7d51c08051670012fc2e930f41ad7f1b5', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, hAsync("i", { key: 'd81bf70ae701d32fe0e524ff1758654037fbe8d7', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'a904112496703c5ef148537f383529621be36aff' })), hAsync("div", { key: 'aeade92b18cb6a3a9927236665254323613cf4a1', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '86b541c1e643d62da77a3aad02b7a2de6b2c60f3', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '13ab0f5b79d9dc52e8fbf1464fca6bc7870f574c', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '3cbc63be9af31d97252a7ca4d9fed1bc667cdaaa', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '6f6631280aac9d7416921844a815e1473b7db419', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '11374066cc8479b80cf1f92b6f9ce910fc9850bf', name: "close", size: "12", color: "gery_55" }))))))));
+            } }, hAsync("i", { key: '1895eba14b74f393c7221db83fdf97e9a8f3a1aa', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '4307eb8e750dc36cae5477b366a4ea08a59a5a45' })), hAsync("div", { key: '840d94cf1d4e3c63346cd48a2d47c1c0b0633046', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'ede807dfdb2efc2a8bf8f89ef597965092c79211', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '613ea1b46810eec1958b735fc23811d66ff2ebf8', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '06712ed73687c0e99778d5fda6d75a4e07d815dd', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '20d628d8d31bd6464c26f3cf5ba894c5c3a2428f', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: 'cd1dcbe02ed55a25364e88621db5ab287eb7ed8e', name: "close", size: "12", color: "gery_55" }))))))));
     }
     static get watchers() { return {
         "show": [{
@@ -9641,7 +9642,7 @@ class SdPortal {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: '94c0e115318d8f16bab2e2cb8c5be85d8f77279f' });
+        return hAsync("slot", { key: 'ba2bf5df16f9bef0acef1ac8a08b090a23d02bc7' });
     }
     static get cmpMeta() { return {
         "$flags$": 772,
@@ -9698,10 +9699,10 @@ class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (hAsync("div", { key: '8921667b793f16a9a163d81b685231bc78d555a8', style: {
+        return (hAsync("div", { key: '43da9dac67e760bfe53b8db11c27eef7ef0d8b3b', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'd87505bd6de6e791ea73ec4fdecf60ece8e83a3a', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'af4b1c44f655546fede8ad548bddc6afb7810d2b', 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, "%")));
@@ -10368,10 +10369,10 @@ class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (hAsync("div", { key: 'd52efe378d022f7bb7a50b078676ed48b6911e04', class: {
+        return (hAsync("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: '9c3db780e779ee0829ca41c2d85298e78f4e1da8', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: 'bfcee14aa06a9a259dd8e67013ed1074c1f9c318', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
         "filteredOptions": [{
@@ -10557,7 +10558,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (hAsync("sd-field", { key: 'f870320a5e124564c3f1666efb8a8e98d0fcaa4d', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'f6ba635376c512745488c7bd5ba29a8dd54552fa', class: {
+        return (hAsync("sd-field", { key: 'e445d2c3f80d78be0e74b1f54371eb27d9c316e8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '9fad0ed744cafb9e1e5f16ee413f36edd8f2c1f3', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
@@ -11150,7 +11151,7 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync("div", { key: '4b16081b491eefdff34e5c328a22d3e4f98bcd0a', class: {
+        return (hAsync("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -11236,7 +11237,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: '63fd6dc8fff45849440d58d0b7e650a6de050b75', class: {
+        return (hAsync("div", { key: '8e88aacd2c3122a563fcf78bcbe9731b6a29d8c5', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -11245,10 +11246,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: 'fc7f591e86c9aaf185112d54cdb267ada82c23aa', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'bd197505694f0286fa4824baa56c4d5620d455b5', value: 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: 'be4bc7f2867ea5c86505bc9284ac3de46f7077f9', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '00063ab3a6f1d4f44671ac82dd05524968bec668', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: '7ba3c181aa07d5e55116aa238c34fc2eb87ef469', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'f83d48bf3e7534c8cae987799a2b4c41bcadea87', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: '802c908d44bf1c0db5d64bf4c8d4bab4ebe2b87c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'efd26a2d6e4e2662410de3755b70a2a2585ad0c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss(); }
     static get cmpMeta() { return {
@@ -11297,17 +11298,17 @@ class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (hAsync("div", { key: 'abfb2e22bf259b2a8441984eb602188fcc471a07', class: {
+        return (hAsync("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '68d1d795b38973b48062fff42560289c6e6f1813', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, hAsync("sd-icon", { key: '6cd7f5c70e656c066d8aa0312a895a9cb30321a4', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, hAsync("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get style() { return sdSelectSearchInputCss(); }
     static get cmpMeta() { return {
@@ -12402,10 +12403,10 @@ class SdTextarea {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (hAsync("div", { key: '7583a322dfe260e0ce5ecde07bc72520cb1693f7', class: {
+        return (hAsync("div", { key: '888d11be57629e83e1215daddab63351a323672f', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '5f25a11f26a9b27c22f16c1513dea194d1e8b263', class: "sd-textarea__content" }, hAsync("textarea", { key: '8ed2397730c979694f24fe15e9735a245cad437c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: 'da85b650264d10d1fee3fd39eecd6f05af0197e5', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: '0510a4d3888c30a29e584b535e4745cedb3b1e80', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: '310a9cdc3c2c8ad836677cf83b870ea69d25fa27', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '1f91a1e435b2dba1817ce181f91bdf3829142682', class: "sd-textarea__content" }, hAsync("textarea", { key: 'd883f4cdfd56220cf4382893f94a469f7afd7ff2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: 'e9350d8e49eb87b2caddfc24079ece0d59c79739', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: 'cda9e2b8b0c15fbc7356597d4363d438688c8e4e', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: '491e990142e07837169e84a3fcc3e80c00bc7153', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": [{
@@ -12486,10 +12487,10 @@ class SdToast {
             background: resolveColor(colorTokens.background),
             text: resolveColor(colorTokens.text),
         };
-        return (hAsync("div", { key: 'c7e1ba9fbe5a72c40f9e07320f03b120b2d5e1b5', style: {
+        return (hAsync("div", { key: '8118f67a55a3080ea91ffdfbd929bbe3464ab044', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, hAsync("div", { key: '7670d3e2dfa498769339e46d112f912c202a4f65', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'ce80acefc1e158e1d5a115b0d87c133b4029641f', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '4aff360b1552fff624a15432cdec8db2197e57e1', name: this.icon, size: 16, color: colors.text }))), hAsync("div", { key: '2b8a6e16db7d0cc15118c542563d264ce42817a2', class: "sd-toast__content" }, hAsync("span", { key: 'af3eac296d5b0c61bbd60e644aa0058b3acc50b5', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'd4fa4ba71e023632b29d81fc119e8dee8c66fbc7', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '71788fd881e06fe4ce8970ec02e041a31c12403b', class: `sd-toast__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (hAsync("button", { key: 'a2d1b78f9b25db8c2de9a949c34ffbd9db3d1ab8', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: '6cb82a239b71c8303ec544cfa41fd91a940054d4', name: "close", size: 12, color: colors.text }))))));
+            } }, hAsync("div", { key: 'f05c16b0c8ef6de2d62161f80591cb3a82c24434', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'b16fee2031c4093c263229d2ef07ad8f6e69778b', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'cd8b4c4d9cbc329fdfc99236ca56a49658c0ca8c', name: this.icon, size: 16, color: colors.text }))), hAsync("div", { key: '888748872d886745ace2ef8491d7098528df8a46', class: "sd-toast__content" }, hAsync("span", { key: '31b285a6b6a03b833577b4a9fb860fd76e066cb6', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '61d1aacf70e7062abbedd2364474e7da990f485f', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '94aa75ef25ee18f0577d5539337152d654dab5c1', class: `sd-toast__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (hAsync("button", { key: 'db0b83f7030feb5459597156c2d25f3437b91904', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: 'a3aab6c19c32043182f2d05d2583271520458493', name: "close", size: 12, color: colors.text }))))));
     }
     static get style() { return sdToastCss(); }
     static get cmpMeta() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "1.0.18",
+ "version": "1.0.19",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",

package/dist/components/p-DHdV8DHV.js

@@ -1 +0,0 @@
-import{p as e,c as s,h as t,t as i}from"./p-4iQAU7kM.js";import{B as o,S as l}from"./p-Cc-cekjN.js";import{n as r}from"./p-CCwNgVmC.js";import{d}from"./p-B45-wHcP.js";import{d as a}from"./p-Csz5Om2E.js";import{d as n}from"./p-DOdjsjwr.js";import{d as c}from"./p-BkU8yMUR.js";import{d as h}from"./p-Bxs0Hp4o.js";import{d as p}from"./p-CIDMF6fj.js";import{d as m}from"./p-DojkP9rD.js";import{d as u}from"./p-CNgER9mk.js";import{d as f}from"./p-BDlbibwl.js";import{d as b}from"./p-IFDX7o1t.js";import{d as w}from"./p-Ay5V-5Fu.js";const g=e(class extends o{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.update=s(this,"sdUpdate"),this.dropDownShow=s(this,"sdDropDownShow")}get el(){return this}value=null;options=[];placeholder="선택";optionPlaceholder="선택지가 없습니다.";width="200px";dropdownHeight="260px";autoFocus=!1;disabled=!1;clearable=!1;searchable=!1;label="";insideLabel=!1;useLabelRequired=!1;labelTooltip="";labelTooltipProps=null;rules=[];error=!1;optionRenderer;isOpen=!1;itemIndex=-1;isScrolled=!1;update;dropDownShow;selectRef;triggerRef;formField;filteredOptions=this.options;dropDownWidth=this.width;name=r();async sdOpen(){this.isOpen=!0}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}async isOpenChanged(){this.onDropdownToggle(this.isOpen),this.dropDownShow?.emit({isOpen:this.isOpen}),!1===this.isOpen&&await(this.formField?.sdValidate())}componentWillLoad(){this.initializeEvent()}componentDidLoad(){this.autoFocus&&this.selectRef?.focus()}componentDidRender(){const e=this.triggerRef,s=e?.getBoundingClientRect();this.dropDownWidth=s?.width?`${s.width}px`:this.width}disconnectedCallback(){this.cleanupEvent()}handleDocumentClick(e){this.selectRef?.contains(e.target)||(this.isOpen=!1)}handleDocumentKeydown(e){if(e.stopPropagation(),["ArrowDown","ArrowUp","Enter","Escape"].includes(e.key))switch(e.preventDefault(),e.key){case"ArrowDown":case"ArrowUp":const s=new l(this.searchable,this.filteredOptions).getNextIndex(this.itemIndex,e.key);this.itemIndex=s;break;case"Enter":const t=this.filteredOptions[this.itemIndex];t&&!t.disabled&&(this.value=t.value,this.isOpen=!1);break;case"Escape":this.isOpen=!1}}getSelectedOption(){return this.options.find((e=>e.value===this.value))}closeDropdown(){this.isOpen=!1}handleTriggerClick=e=>{e.stopPropagation(),this.disabled||(this.isOpen=!this.isOpen,this.dropDownShow?.emit({isOpen:this.isOpen}))};handleOptionClick=e=>{const{option:s,event:t}=e;if(t.stopPropagation(),!s.disabled){this.value=s.value,this.isOpen=!1;const e=this.getSelectedOption();this.update?.emit({value:e?.value||null,option:e||null})}};render(){return t("sd-field",{key:"ad737ef5facfd4f2c8dfdbfc2c97010aa82ba39e",label:this.label,name:this.name,rules:this.rules,error:this.error,disabled:this.disabled,useLabelRequired:this.useLabelRequired,insideLabel:this.insideLabel,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,ref:e=>this.formField=e},t("div",{key:"ecff910f0d0d6b02f29c2f21a4264b1a573a9170",class:{"sd-select":!0,"sd-select--disabled":this.disabled,"sd-select--error":!!this.error,"sd-select--label":!!this.label},ref:e=>this.selectRef=e},this.renderTrigger(),this.renderDropdown()))}renderTrigger(){const e=this.getSelectedOption();return t("div",{class:"sd-select__trigger",tabindex:this.disabled?-1:0,onClick:this.handleTriggerClick,ref:e=>this.triggerRef=e},t("span",{class:"sd-select__value"},e?e.label:this.placeholder),this.clearable&&e&&!this.disabled&&t("sd-icon",{key:"clear-icon",name:"close",size:10,color:"#888",class:"sd-select__clear",onClick:async e=>{e.stopPropagation(),this.value=null,await(this.formField?.sdValidate())}}),t("sd-icon",{key:"arrow-icon",name:"arrowDown",color:"#888",class:{"sd-select__arrow":!0,"sd-select__arrow--open":this.isOpen}}))}renderDropdown(){if(!1===this.isOpen)return null;const e=this.selectRef?.querySelector(".sd-select__trigger")||this.selectRef;return t("sd-portal",{open:this.isOpen,parentRef:e,onSdClose:this.closeDropdown},t("sd-select-dropdown",{value:this.value,options:this.options,itemIndex:this.itemIndex,width:this.dropDownWidth,dropdownHeight:this.dropdownHeight,searchable:this.searchable,optionPlaceholder:this.optionPlaceholder,onSdOptionClick:({detail:e})=>this.handleOptionClick(e),onSdOptionFiltered:({detail:e})=>this.filteredOptions=e}))}static get watchers(){return{isOpen:[{isOpenChanged:0}]}}static get style(){return"sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}"}},[512,"sd-select",{value:[1032],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],autoFocus:[4,"auto-focus"],disabled:[4],clearable:[4],searchable:[4],label:[1],insideLabel:[4,"inside-label"],useLabelRequired:[4,"use-label-required"],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],rules:[16],error:[4],optionRenderer:[16],isOpen:[32],itemIndex:[32],isScrolled:[32],sdOpen:[64],sdValidate:[64],sdReset:[64],sdResetValidate:[64],sdFocus:[64]},void 0,{isOpen:[{isOpenChanged:0}]}]);function k(){"undefined"!=typeof customElements&&["sd-select","sd-button","sd-checkbox","sd-field","sd-floating-portal","sd-icon","sd-input","sd-portal","sd-select-dropdown","sd-select-option","sd-select-search-input","sd-tooltip"].forEach((e=>{switch(e){case"sd-select":customElements.get(i(e))||customElements.define(i(e),g);break;case"sd-button":customElements.get(i(e))||d();break;case"sd-checkbox":customElements.get(i(e))||a();break;case"sd-field":customElements.get(i(e))||n();break;case"sd-floating-portal":customElements.get(i(e))||c();break;case"sd-icon":customElements.get(i(e))||h();break;case"sd-input":customElements.get(i(e))||p();break;case"sd-portal":customElements.get(i(e))||m();break;case"sd-select-dropdown":customElements.get(i(e))||u();break;case"sd-select-option":customElements.get(i(e))||f();break;case"sd-select-search-input":customElements.get(i(e))||b();break;case"sd-tooltip":customElements.get(i(e))||w()}}))}export{g as S,k as d}

package/dist/design-system/p-31175b5c.entry.js

@@ -1 +0,0 @@
-import{r as d,h as e,F as r}from"./p-BNCQkS1w.js";const a=class{constructor(e){d(this,e)}bordered=!1;sdClass="";render(){return e(r,{key:"e99e472e629ea22ebdeba34e87c6202bbde083fc"},e("div",{key:"a8ea9e169ecafd14f8f528dc1c5534d2790a494f",class:`sd-card ${this.bordered?"sd-card--bordered":""} ${this.sdClass}`},e("slot",{key:"60f687272faa536e182e9a65ea0c07a233194bd8"})))}};a.style="sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #e1e1e1}";export{a as sd_card}