@sellmate/design-system 0.0.17 → 0.0.19

package/dist/cjs/sd-date-box.cjs.entry.js

@@ -33,7 +33,7 @@ const SdDateBox = class {
         this.sdMouseOver?.emit(this.date);
     }
     render() {
-        return (index.h(index.Host, { key: 'ace5d023959d41d2a2255e70ad9d5bad9df4f9fe', role: "button", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h(index.Host, { key: 'd38fb599ea91f851d33d43ffeb064b715dc1e4ad', role: "button", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -44,7 +44,7 @@ const SdDateBox = class {
                 'sd-date-box--in-range': this.inRange,
                 'sd-date-box--type-start': this.type === 'start',
                 'sd-date-box--type-end': this.type === 'end',
-            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, index.h("div", { key: '2fdeea79f2eeb28da3b9999f7326996531cb6c88', class: "sd-date-box__content" }, index.h("div", { key: '0f7839e75905b04f99a23603326099953f5e2990', class: "sd-date-box__label" }, this.date))));
+            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, index.h("div", { key: 'c2c7dcc9b384e8d000d8803fa4e4a5fcc1f2e527', class: "sd-date-box__content" }, index.h("div", { key: '7c002c5356d9c3fcf8ec0c8f751e97fd42e59645', class: "sd-date-box__label" }, this.date))));
     }
 };
 SdDateBox.style = sdDateBoxCss;

package/dist/cjs/sd-date-picker.cjs.entry.js

@@ -82,9 +82,9 @@ const SdDatePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (index.h(index.Host, { key: 'f445a752123f1a1a7f8d28ca7472a8ffabda9441', class: "sd-date-picker" }, index.h("sd-input", { key: '85662ea61b192562311af23f67c1a1ad05636813', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (index.h(index.Host, { key: '84beddb7facbc2eaabc5b606392b30f5c1601eb6', class: "sd-date-picker" }, index.h("sd-input", { key: 'e8110cae23aaa71047762850ab1ac0ecad39fbf8', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '41634f9170073fbde5e44c55b5985da90763f819', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'ce630583ef81cd72ad1b8fdaab7cab2d1df278cb', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '55d4c73a3e17991ebf68495d7bed96399857de1e', class: "sd-date-picker__menu" }, index.h("div", { key: '0800e3a37eec27bb8a8c59a2ebd8ffdbf4e813a7', class: "sd-date-picker__header" }, index.h("div", { key: '1518b578ad87a0f5875d980d1c974492f32714e3', class: "year-nav" }, index.h("button", { key: 'e70f1d4e73650c7bccb1629b679ca366717e5506', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: 'f679a54b76e304d08c132d6784575831a5d5d61b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '634dcbfe81d328cbc0460958208dc17aaf218158', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '7e7cef51d7b47b7280cfff4234b88394708ea01a', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: '8a6fc4a40f567d2d1ffef5dbc08de5148203970c', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '8fad6e92b899a0cb38398ec2f4036b959377d99b', class: "month-nav" }, index.h("button", { key: '3180c35ad42239a6a97480a4db860182b98724f3', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '6ccef0b13fde4124e0e14959687f60dab753ae51', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: 'db7db67a1a77f02451bc0a7c97e87e3cd6c9d453', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: '5df06269331e9f7ee1cb4801bfd713d433f00af4', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: '65b0f49b205e9aa38a46cbe672665b31c9ffe542', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: '68f3c05f2ffb57b7fc032209dd709e5eaa6fcbdd', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: '452c22746ace6b3923acf4912edba2509a56b369', class: "sd-date-picker__body" }, [
+            }, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '9668799fd1b978b8d84228cbce66020ecf9c953a', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'bdd3d055e108d0965fd33b39521e45d398d56657', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '32c9bf2c90f65d7341a06f1aa885eaf5830b790d', class: "sd-date-picker__menu" }, index.h("div", { key: '998be0bcd3acedce805fa64b6b1d627751c7a021', class: "sd-date-picker__header" }, index.h("div", { key: 'fbcc16d1a914086eac22ec0769041a7cfb68c4ac', class: "year-nav" }, index.h("button", { key: 'a0483c5a5c11b96e4d04a8705eaeb834a67aabc1', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '417934cc7f8d3a26a1ab7f7d06c4a19cc8f71838', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '9cc39d471b835312480483054b11bfb3a524a8a4', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '9963b625be6c33c9a7d6c4aabce8aeac04a5e5d8', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: '0414b554e1ae46b414d0829bbbbbd109241a1f0e', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '9eab999da7ef2a34f375f96ff799bf75500866da', class: "month-nav" }, index.h("button", { key: 'ba70f14d3344474b5faaa0778ce1838f00235880', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '3c69117050d690d06071040b7b110f28368d4b2b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: 'a3f85e24150dcfd644ac98f4075fc63b39cc389a', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: '4a2e1c80dad428397120cf226807491474b9fef0', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: '11f19f794d230afb29854717520dab17b90bf6e2', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: '0dc4fb36b3395f3f626726ffc2c564b7efa7bf1f', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: '973a4f62ac5588ad8398e668dfa9a1a5808e2860', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/cjs/sd-date-range-picker.cjs.entry.js

@@ -157,9 +157,9 @@ const SdDateRangePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (index.h(index.Host, { key: '3d95128a2a654e38ceae60e6b89482a454488286', class: "sd-date-range-picker" }, index.h("sd-input", { key: '4f170abfe6214ffa1044020b2cd59a9219f3ef09', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (index.h(index.Host, { key: '7b5927d900306fe0dd51931ccc606f8cc4799298', class: "sd-date-range-picker" }, index.h("sd-input", { key: 'a88ecd162f6bf66d6a81b008d990741c85836702', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '7c12c7e3331638f333efdea4bcd3d452eb032561', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '7312ab4a79877de6d6be3edaa404e0b9c52e28d8', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '20a485d128de2b2d0a8043cb5fe0de990364bbd8', class: "sd-date-range-picker__menu" }, index.h("div", { key: '19a0489246b5dccc183f3d3a040086a6a2c565f3', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: '1f9c5f1188234e2306c033e8e67f9a106b3b39bc', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: '52805839d2092886fe4f07c9f95a2e948b00c917', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: 'e9f323504223ccfbc4b5703346a310e58d1621c3', class: "header-label" }, this.prevYear), index.h("button", { key: '810c6fb9eaa16291550455ac1099c15da7b80ed6', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: '44cf361ed854292f90c954522c356e17d5a45d29', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '4cc859482a2c010261b64b8ce15f5c754a2234fd', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
+            }, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '22dd8cf3231fd7409cf37474c839d08230daaf0d', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'a5067d11416437d885a42745e95f614c8b85030d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: 'c4478289503f76363051fec4ea48eab63400da24', class: "sd-date-range-picker__menu" }, index.h("div", { key: '5aa461caf52b0cbcab7e9390b50988c410cac7cb', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: '9ee59b3d4d08ab1bb22f1ca9a99b658d25163f2b', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: '7478ca20ece1d0720c93ab809408af069c3a51e6', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: '221890339d4c692250a5c204c8ebffd7fff86f12', class: "header-label" }, this.prevYear), index.h("button", { key: 'ccc70fdb3fe6a50460d8156590927edeed0f2eba', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: 'e70523f34340c4948d014d861c5be107385e7181', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: 'ab67de7e6bcc992486bf030b5c648a22265ed411', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), index.h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), index.h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (index.h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index$1 === 0 ? this.prevYear : this.nextYear, index$1 === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index$1 === 0 ? this.prevYear : this.nextYear, index$1 === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: useDatePicker.today ===

package/dist/cjs/sd-guide.cjs.entry.js

@@ -81,7 +81,7 @@ const SdGuide = class {
     render() {
         // const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (index.h(index.Host, { key: 'e7148c94652d2e5a05a8fbdcdccd4b5189787061' }, index.h("sd-button", { key: '37cfdf20a31e5b0694cfbeabf068534a4dca0a7a', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: "grey_45", icon: iconName, iconColor: iconColor, iconSize: iconSize,
+        return (index.h(index.Host, { key: 'e6db8a6f508122254393eb1d9a1ccb5f10192e50' }, index.h("sd-button", { key: 'df737688c5eb29485eaec14894a051824d7c1c9b', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: "grey_45", icon: iconName, iconColor: iconColor, iconSize: iconSize,
             // buttonStyle={{
             //  height: '28px',
             //  minHeight: '28px',
@@ -93,9 +93,9 @@ const SdGuide = class {
             //  fontWeight: '400',
             //  backgroundColor: 'var(--guide-background)',
             // }}
-            onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: '00581c68ec13b7da4126d4467fc989037983cc40', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '387ab5da8f3cebb18fb0efd4905be983dde04078', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '929be3f65eed31422f40f9785abdfc1b8d658a26', class: "sd-guide__popup__close", icon: "close", color: color.colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: 'badde689ee0f6cdd0c3c0406894761be779e079e', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '5ac87ededf1b8b0ad1d5145551b74e0f2868b8a9', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '6e56ea467fdad7037c8331c5a35184530101962e', class: "sd-guide__popup__close", icon: "close", color: color.colors.grey_65, size: "md", variant: "ghost", noHover: true,
             // buttonStyle={{ padding: '0px', minHeight: '0px' }}
-            onSdClick: this.closeDropdown }), index.h("div", { key: '6cf04080dc39b2e69cc960d832934dfd2f6e5230', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: 'aed951b851f54d1afb8b3a1b37f47099d3df674b', name: "helpOutline", size: 24, color: color.colors.green_65 }), index.h("h3", { key: '485cfad889037e280cdd32d5616ab682f87159b1', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), index.h("ul", { key: '56b75b1d4fa43a7b08d4752a5360951a1e19dfa1', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            onSdClick: this.closeDropdown }), index.h("div", { key: '81414d84ee3314912035adce13afd8f559099b72', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: 'a90da4a81d2da7065bfa3335c26efd834bd941b3', name: "helpOutline", size: 24, color: color.colors.green_65 }), index.h("h3", { key: 'f01358a92ec297782f8ab394c3fa56277d2a9af1', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), index.h("ul", { key: '9d0c130e6fdfaa3016199029d0fef5ea153153ed', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/cjs/sd-pagination_2.cjs.entry.js

@@ -83,12 +83,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'ae962ed1dfbcb79c23c402d52d0a83822b54d4b3', class: this.paginationClasses }, index.h("div", { key: 'efa0dfbcc8d71d2b9ff5b02334a3d1e119a7f469', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (index.h("div", { key: 'c73e80cca3ae34331a653f40fcea9f21853729bc', class: this.paginationClasses }, index.h("div", { key: '0c1be2da1bbb9ca12ed44739c45c083da9b94657', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: 'f0bd3b291453696e22a34f182a852a2a092874f2', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '866070b571aab944f6f7521b72479c5b26fca000', class: "append-btns" }, this.renderNextButtons())));
     }
     static get watchers() { return {
         "currentPage": ["onPropChange"],
@@ -129,11 +129,11 @@ const SdTooltip = class {
             : {
                 onClick: () => (console.log('click tooltip'), (this.showTooltip = !this.showTooltip)),
             };
-        return (index.h(index.Fragment, { key: 'db5f9498990b6cc3941a1f276dc7b437f00ae3b1' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-tooltip-portal", { key: '19e133936ac7d7efc95292c0053a6eace81e7ccb', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: '2d0fed8f8f2f3e6dfe860c78f4c1af99f595e4d4', class: {
+        return (index.h(index.Fragment, { key: '888e359c993244c0175ee8526015b9e142110973' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-tooltip-portal", { key: 'bd304ee555a79fac52fcd03d6c27ba158800b531', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: '1c7fb484df8836ffc456029d9b394c249ab19d9d', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
-            } }, index.h("i", { key: '6ec7ba058e541d65eae3b5100ca8eb741a04d814', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '550d0629d949f9da13117c3c569e886b44e8b9bd' })), index.h("div", { key: '4a1fc247b84457ee8c962804ca91bd93b4de8948', class: "sd-tooltip-menu__content" }, index.h("slot", { key: '444c621343b3eeba8f89e85f06b9b66e39b626b1' }, this.el.textContent)), this.useClose && (index.h("div", { key: '570364c37b97299922b4c52192d52d1e0e20228d', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: '0e126ad1ed0238e8adbf7a82132e28c90bffa1a5', onClick: () => this.handleClose() }, index.h("sd-icon", { key: '796643e7a212b7a65f81671c46e2b992fe1ae0d1', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, index.h("i", { key: 'ea7c760b17635a7c09604d99f7d4216970c072db', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '92994ac4e8834bae876a9702f38d074dd697abee' })), index.h("div", { key: '979090bd76ae1a1e5a331faa03d9f670b646ec77', class: "sd-tooltip-menu__content" }, index.h("slot", { key: '273376d5996f788c50c6a0f5093ec766d8bb3b24' }, this.el.textContent)), this.useClose && (index.h("div", { key: 'a45363689d51ebdb68294ecd1b0a163a1175efe3', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: 'b9e73e19e0e03410fdcd71924a31217b6b58bca3', onClick: () => this.handleClose() }, index.h("sd-icon", { key: '75d7590ef875d3aa035af095bd6cc84a61fb2a43', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
 SdTooltip.style = sdTooltipCss;

package/dist/cjs/sd-popover.cjs.entry.js

@@ -39,11 +39,11 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (index.h(index.Fragment, { key: 'fb877e8d016d13fb33b49a1a4dbfed9fc01b1336' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (index.h("sd-tooltip-portal", { key: '02208721da61cb84086a57c823f8e31775fdbd5e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: '3f3c4fc690dac5061bda08af37121e2b98374979', class: {
+        return (index.h(index.Fragment, { key: 'dffadde8218c26c620b641a5d95799fbfe08b34b' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (index.h("sd-tooltip-portal", { key: '6cb7de8b74b9be12131a730a2d02bd304e3524e7', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: '901d1fc65e9d94c29acca872c55b02128835f4de', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, index.h("i", { key: '6f0df95bafc2cbf564fd0e5a133c89f03c3a924b', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '535acee0be86db4ed58d6cc1631732541f1e475e' })), index.h("div", { key: 'd4366800a8cbd5a1f9630344a5ca4241b0eaa8dd', class: "sd-popover-menu__content" }, this.menuTitle && index.h("div", { key: '1cd9de3129988c5d26be0ded5b03520ab591cb9a', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '5aae57948bd5e0fd98e73a8ae504b77ce6cdbe07', class: "sd-popover-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '814ac9ba0b2cf4367bb4cd5e688fa5433fee7126', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'a21ad0a5e28f8609b2f9d9accd0be5d81ed9de5b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '10738ec0926ea5fbc0b30b5c8c08b6cc37bf47d3', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, index.h("i", { key: '6465c9decc572754469759e6f9ba237e6098c245', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '8f65907035de80f0ac721df90a76c8cff706892e' })), index.h("div", { key: 'a7dedd510101561be1137fcb1f8c43dca2d13383', class: "sd-popover-menu__content" }, this.menuTitle && index.h("div", { key: '425038b84031c4082348d7a2d5bc3384f4ce87ea', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '0a07d84656579a773924b0b066c9dbd48d44c6b3', class: "sd-popover-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: 'b2daa7b83fbe582cbb829fa8b2bd8e73d3947b48', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: '3ceae5f183e487f30570a471bdfada588519ac30', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '7fe6275cc500f8e963766bdfedc3f3b8a79a3609', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]

package/dist/cjs/sd-table.cjs.entry.js

@@ -208,10 +208,10 @@ const SdTable = class {
         }))))));
     }
     render() {
-        return (index.h(index.Host, { key: '1cd1557ebe1c4c725be8a057c9d8df9cda11408f' }, index.h("div", { key: '977a603df44e4ce551e03edaf868c306126e5fb8', class: "sd-table__wrapper", style: {
+        return (index.h(index.Host, { key: 'c728250d385b4827eb4ba01f5f196f31d821a47a' }, index.h("div", { key: '53bae364e8b2e57e4da21a96f423260e4daa1258', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, index.h("div", { key: '144113aece88e6c13b3fc9fc38a77a43e49a5c10', class: "sd-table__container" }, index.h("div", { key: '035d74a22b20c6a3b6ebf0008f23c4581e461b1c', class: "sd-table__middle" }, index.h("table", { key: 'df8bc651e78ea05df59a01a3bd9b48a92246474c', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), index.h("div", { key: 'db2c20fde5a53ba65be056d1c6188229fa7cb4e6', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '770d12ab7f492f203b4aeb4345afb690929ccf48', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '67bc429e682655046403d7808b4ba601b03fcd5f', currentPage: this.currentPage, lastPage: this.lastPageNumber, onPageChange: (e) => {
+            } }, index.h("div", { key: '335f39cb9f01adce0b619d201cd8157c6abd6d77', class: "sd-table__container" }, index.h("div", { key: '0e8679571f1b06675a263a356cc2c7e7e9bcf38a', class: "sd-table__middle" }, index.h("table", { key: 'cdc472d67359460e73a52057dd9dc0793ff907a9', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), index.h("div", { key: '183446192b9724ef85fbcbcaded436d9247f52e0', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: 'd1d36cd90c3513bada8b86e38f637f318c0595ed', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'c6bba92b076e77f83577772ccbe54e7fc14e52dd', currentPage: this.currentPage, lastPage: this.lastPageNumber, onPageChange: (e) => {
                 this.currentPage = e.detail;
                 this.sdPageChange.emit(this.currentPage);
             } }))))));

package/dist/cjs/sd-tag.cjs.entry.js

@@ -45,7 +45,7 @@ const SdTag = class {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (index.h("span", { key: 'eff57a253b788f0435525cae9a15881cce8a08a0', class: tagClasses, style: {
+        return (index.h("span", { key: '42250b22292bd0f6d6ffd4dc46ceda624a7001ba', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));

package/dist/collection/components/sd-badge/sd-badge.js

@@ -6,7 +6,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (h(Host, { key: '5d8b9d87ef3d773e0bfae1b74db8fbcb5c663028' }, h("div", { key: '89a5f08b4294aeb92ecd66a8d45276d6cf1c9c0a', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '20f8f8d27f566e300418fd6eca6ff0dfd032cc74', class: "sd-badge__dot" }), h("div", { key: 'fe65df57e30ade4f8f2c65a4c4a6e9436a2a1970', class: "sd-badge__label" }, this.label))));
+        return (h(Host, { key: '51f36d44f20e67ac5fb02ad6ed546742c70a1683' }, h("div", { key: '40ae2bd020c4e13a663a58718c3500aac08dcfb5', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '0c807f3223d4911283d64c2d78200c0f0c64dc9e', class: "sd-badge__dot" }), h("div", { key: 'b024a9a0753ec9b1f7e6dcf8fd2b4ad1b011a01b', class: "sd-badge__label" }, this.label))));
     }
     static get is() { return "sd-badge"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sd-card/sd-card.js

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = true;
     class = '';
     render() {
-        return (h(Host, { key: 'bb5d75c00c43e981de3df9497d03510baf547b10' }, h("div", { key: '7b9724fd95fef0e4c374b6f3d8ba0586abed5045', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: '047683541469ee0490e296813cb7e303127ad200' }))));
+        return (h(Host, { key: 'aa59e9617d3a7a0f497328316d932499712e0ba1' }, h("div", { key: 'b3e91d70476abfaae652de71b4d9c2dc9ef268da', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: '03ea061b013a5fc927b0f7edca68195d0b01de2d' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-checkbox/sd-checkbox.css

@@ -1307,13 +1307,11 @@ textarea {
   cursor: pointer;
 }
 
-:host {
+sd-checkbox {
   display: inline-block;
-  height: fit-content;
-  line-height: 0;
+  height: 20px;
 }
-
-.sd-checkbox {
+sd-checkbox .sd-checkbox {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -1321,22 +1319,22 @@ textarea {
   height: 20px;
   max-height: 20px;
 }
-.sd-checkbox > input {
+sd-checkbox .sd-checkbox > input {
   display: none;
 }
-.sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg, .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg {
-  border-color: 1px solid #005cc9;
+sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg, sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg {
+  border-color: #005cc9;
   background: #005cc9;
 }
-.sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg {
+sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg {
   border: 1px solid #0075ff;
   background: #d9eaff;
 }
-.sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg {
+sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg {
   border: 1px solid transparent;
   background: #eeeeee;
 }
-.sd-checkbox__bg {
+sd-checkbox .sd-checkbox__bg {
   width: 16px;
   height: 16px;
   border-radius: 2px;
@@ -1348,26 +1346,26 @@ textarea {
   overflow: hidden;
   line-height: 0;
 }
-.sd-checkbox__label {
+sd-checkbox .sd-checkbox__label {
   font-size: 12px;
   color: #333333;
   line-height: 20px;
 }
-.sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg, .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg {
+sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg, sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg {
   background: #eeeeee;
   border: 1px solid #cccccc !important;
 }
-.sd-checkbox--checked .sd-checkbox__bg, .sd-checkbox--indeterminate .sd-checkbox__bg {
+sd-checkbox .sd-checkbox--checked .sd-checkbox__bg, sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg {
   border: 1px solid #0075ff;
   background: #0075ff;
 }
-.sd-checkbox--unchecked .sd-checkbox__bg {
+sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg {
   background: white;
 }
-.sd-checkbox--disabled {
+sd-checkbox .sd-checkbox--disabled {
   cursor: not-allowed;
 }
-.sd-checkbox--disabled .sd-checkbox__bg {
+sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg {
   background: #eeeeee;
   border: 1px solid #cccccc !important;
 }

package/dist/collection/components/sd-checkbox/sd-checkbox.js

@@ -1,4 +1,4 @@
-import { h, Host, } from "@stencil/core";
+import { h } from "@stencil/core";
 export class SdCheckbox {
     el;
     /** 현재 선택 상태 또는 배열 형태의 값 */
@@ -67,7 +67,7 @@ export class SdCheckbox {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (h(Host, { key: '624520a83168579af598630b2bfd0ccb7c425060' }, h("label", { key: '91466e48e57f8d3594e1d04d622f3bbe639c3538', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "checkbox", "aria-label": this.label || 'checkbox', class: this.checkboxClasses }, h("input", { key: '8816463c045a424983087e1202d661eaa86233a1', type: "checkbox", value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.label || 'checkbox' }), h("div", { key: '458875d9fdcd993c7038133d71bb85a879c1c018', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && h("span", { key: '37264c19fac0d72f425080ca9d7072a23a4251c9', class: "sd-checkbox__label" }, this.label))));
+        return (h("label", { key: 'ed21b6997c63578d297ab3e8f1955d369517f0d4', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "checkbox", "aria-label": this.label || 'checkbox', class: this.checkboxClasses }, h("input", { key: '6aa4fbfa0fb6ac3a4a70c8f9a5fd47e5c63ea1f6', type: "checkbox", value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.label || 'checkbox' }), h("div", { key: 'a5621e29c8ec928cfe746056e409cddfff2e7ede', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && h("span", { key: '1890cffd55e46bbde10bc4943b17dbe57212da5e', class: "sd-checkbox__label" }, this.label)));
     }
     static get is() { return "sd-checkbox"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-checkbox/sd-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-checkbox.js","sourceRoot":"","sources":["../../../src/components/sd-checkbox/sd-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n Prop,\r\n h,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Watch,\r\n Host,\r\n} from '@stencil/core';\r\n\r\nexport type CheckedType = boolean | any[] | null;\r\n\r\n@Component({\r\n tag: 'sd-checkbox',\r\n styleUrl: 'sd-checkbox.scss',\r\n})\r\nexport class SdCheckbox {\r\n @Element() el!: HTMLElement;\r\n\r\n /** 현재 선택 상태 또는 배열 형태의 값 */\r\n @Prop() checked!: CheckedType;\r\n\r\n /** 배열 모드에서의 개별 값 */\r\n @Prop() val?: any;\r\n\r\n /** 비활성화 여부 */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** 표시할 라벨 텍스트 */\r\n @Prop() label: string = '';\r\n\r\n /** 내부 체크 상태 */\r\n @State() private isChecked: boolean | null = false;\r\n\r\n /** 값 변경 이벤트 */\r\n @Event() sdChange!: EventEmitter<CheckedType>;\r\n\r\n componentWillLoad() {\r\n  this.updateCheckedState(this.checked);\r\n }\r\n\r\n componentWillRender() {\r\n  this.updateCheckedState(this.checked);\r\n }\r\n\r\n @Watch('checked')\r\n watchValueHandler(newValue: CheckedType) {\r\n  this.updateCheckedState(newValue);\r\n }\r\n\r\n private get checkboxClasses(): string {\r\n  const classes = [\r\n   'sd-checkbox',\r\n   `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,\r\n  ];\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-checkbox--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private updateCheckedState(value: CheckedType) {\r\n  if (value === null) {\r\n   this.isChecked = null;\r\n  } else if (typeof value === 'boolean') {\r\n   this.isChecked = value;\r\n  } else if (Array.isArray(value)) {\r\n   this.isChecked = this.val !== undefined && value.includes(this.val);\r\n  } else {\r\n   this.isChecked = false;\r\n  }\r\n }\r\n\r\n private handleChange = () => {\r\n  if (this.disabled) return;\r\n\r\n  let newValue: CheckedType;\r\n\r\n  if (typeof this.checked === 'boolean') {\r\n   newValue = !this.checked;\r\n  } else if (Array.isArray(this.checked)) {\r\n   if (this.val === undefined) {\r\n    console.warn('A \"val\" property is required when using an array for the \"value\" property.');\r\n   }\r\n\r\n   const valueSet = new Set(this.checked);\r\n   valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\r\n   newValue = Array.from(valueSet);\r\n  } else {\r\n   newValue = !this.isChecked;\r\n  }\r\n\r\n  this.sdChange.emit(newValue);\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host>\r\n    <label\r\n     aria-checked={this.isChecked === null ? 'mixed' : this.isChecked.toString()}\r\n     aria-disabled={this.disabled.toString()}\r\n     role=\"checkbox\"\r\n     aria-label={this.label || 'checkbox'}\r\n     class={this.checkboxClasses}\r\n    >\r\n     <input\r\n      type=\"checkbox\"\r\n      value={this.val}\r\n      checked={!!this.isChecked}\r\n      disabled={this.disabled}\r\n      onChange={this.handleChange}\r\n      name={this.label || 'checkbox'}\r\n     />\r\n     <div class=\"sd-checkbox__bg\">\r\n      {this.isChecked !== false ? (\r\n       <sd-icon\r\n        name={this.isChecked === true ? 'check' : 'minus'}\r\n        size={12}\r\n        color={this.disabled ? '#888888' : 'white'}\r\n       />\r\n      ) : null}\r\n     </div>\r\n     {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\r\n    </label>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"]}
+{"version":3,"file":"sd-checkbox.js","sourceRoot":"","sources":["../../../src/components/sd-checkbox/sd-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\r\n\r\nexport type CheckedType = boolean | any[] | null;\r\n\r\n@Component({\r\n tag: 'sd-checkbox',\r\n styleUrl: 'sd-checkbox.scss',\r\n})\r\nexport class SdCheckbox {\r\n @Element() el!: HTMLElement;\r\n\r\n /** 현재 선택 상태 또는 배열 형태의 값 */\r\n @Prop() checked!: CheckedType;\r\n\r\n /** 배열 모드에서의 개별 값 */\r\n @Prop() val?: any;\r\n\r\n /** 비활성화 여부 */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** 표시할 라벨 텍스트 */\r\n @Prop() label: string = '';\r\n\r\n /** 내부 체크 상태 */\r\n @State() private isChecked: boolean | null = false;\r\n\r\n /** 값 변경 이벤트 */\r\n @Event() sdChange!: EventEmitter<CheckedType>;\r\n\r\n componentWillLoad() {\r\n  this.updateCheckedState(this.checked);\r\n }\r\n\r\n componentWillRender() {\r\n  this.updateCheckedState(this.checked);\r\n }\r\n\r\n @Watch('checked')\r\n watchValueHandler(newValue: CheckedType) {\r\n  this.updateCheckedState(newValue);\r\n }\r\n\r\n private get checkboxClasses(): string {\r\n  const classes = [\r\n   'sd-checkbox',\r\n   `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,\r\n  ];\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-checkbox--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private updateCheckedState(value: CheckedType) {\r\n  if (value === null) {\r\n   this.isChecked = null;\r\n  } else if (typeof value === 'boolean') {\r\n   this.isChecked = value;\r\n  } else if (Array.isArray(value)) {\r\n   this.isChecked = this.val !== undefined && value.includes(this.val);\r\n  } else {\r\n   this.isChecked = false;\r\n  }\r\n }\r\n\r\n private handleChange = () => {\r\n  if (this.disabled) return;\r\n\r\n  let newValue: CheckedType;\r\n\r\n  if (typeof this.checked === 'boolean') {\r\n   newValue = !this.checked;\r\n  } else if (Array.isArray(this.checked)) {\r\n   if (this.val === undefined) {\r\n    console.warn('A \"val\" property is required when using an array for the \"value\" property.');\r\n   }\r\n\r\n   const valueSet = new Set(this.checked);\r\n   valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\r\n   newValue = Array.from(valueSet);\r\n  } else {\r\n   newValue = !this.isChecked;\r\n  }\r\n\r\n  this.sdChange.emit(newValue);\r\n };\r\n\r\n render() {\r\n  return (\r\n   <label\r\n    aria-checked={this.isChecked === null ? 'mixed' : this.isChecked.toString()}\r\n    aria-disabled={this.disabled.toString()}\r\n    role=\"checkbox\"\r\n    aria-label={this.label || 'checkbox'}\r\n    class={this.checkboxClasses}\r\n   >\r\n    <input\r\n     type=\"checkbox\"\r\n     value={this.val}\r\n     checked={!!this.isChecked}\r\n     disabled={this.disabled}\r\n     onChange={this.handleChange}\r\n     name={this.label || 'checkbox'}\r\n    />\r\n    <div class=\"sd-checkbox__bg\">\r\n     {this.isChecked !== false ? (\r\n      <sd-icon\r\n       name={this.isChecked === true ? 'check' : 'minus'}\r\n       size={12}\r\n       color={this.disabled ? '#888888' : 'white'}\r\n      />\r\n     ) : null}\r\n    </div>\r\n    {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\r\n   </label>\r\n  );\r\n }\r\n}\r\n"]}

package/dist/collection/components/sd-date-box/sd-date-box.js

@@ -23,7 +23,7 @@ export class SdDateBox {
         this.sdMouseOver?.emit(this.date);
     }
     render() {
-        return (h(Host, { key: 'ace5d023959d41d2a2255e70ad9d5bad9df4f9fe', role: "button", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
+        return (h(Host, { key: 'd38fb599ea91f851d33d43ffeb064b715dc1e4ad', role: "button", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -34,7 +34,7 @@ export class SdDateBox {
                 'sd-date-box--in-range': this.inRange,
                 'sd-date-box--type-start': this.type === 'start',
                 'sd-date-box--type-end': this.type === 'end',
-            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: '2fdeea79f2eeb28da3b9999f7326996531cb6c88', class: "sd-date-box__content" }, h("div", { key: '0f7839e75905b04f99a23603326099953f5e2990', class: "sd-date-box__label" }, this.date))));
+            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: 'c2c7dcc9b384e8d000d8803fa4e4a5fcc1f2e527', class: "sd-date-box__content" }, h("div", { key: '7c002c5356d9c3fcf8ec0c8f751e97fd42e59645', class: "sd-date-box__label" }, this.date))));
     }
     static get is() { return "sd-date-box"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sd-date-picker/sd-date-picker.js

@@ -74,9 +74,9 @@ export class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: 'f445a752123f1a1a7f8d28ca7472a8ffabda9441', class: "sd-date-picker" }, h("sd-input", { key: '85662ea61b192562311af23f67c1a1ad05636813', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: '84beddb7facbc2eaabc5b606392b30f5c1601eb6', class: "sd-date-picker" }, h("sd-input", { key: 'e8110cae23aaa71047762850ab1ac0ecad39fbf8', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '41634f9170073fbde5e44c55b5985da90763f819', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'ce630583ef81cd72ad1b8fdaab7cab2d1df278cb', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '55d4c73a3e17991ebf68495d7bed96399857de1e', class: "sd-date-picker__menu" }, h("div", { key: '0800e3a37eec27bb8a8c59a2ebd8ffdbf4e813a7', class: "sd-date-picker__header" }, h("div", { key: '1518b578ad87a0f5875d980d1c974492f32714e3', class: "year-nav" }, h("button", { key: 'e70f1d4e73650c7bccb1629b679ca366717e5506', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'f679a54b76e304d08c132d6784575831a5d5d61b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '634dcbfe81d328cbc0460958208dc17aaf218158', class: "year-nav__current" }, this.currentYear), h("button", { key: '7e7cef51d7b47b7280cfff4234b88394708ea01a', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '8a6fc4a40f567d2d1ffef5dbc08de5148203970c', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '8fad6e92b899a0cb38398ec2f4036b959377d99b', class: "month-nav" }, h("button", { key: '3180c35ad42239a6a97480a4db860182b98724f3', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '6ccef0b13fde4124e0e14959687f60dab753ae51', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'db7db67a1a77f02451bc0a7c97e87e3cd6c9d453', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '5df06269331e9f7ee1cb4801bfd713d433f00af4', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '65b0f49b205e9aa38a46cbe672665b31c9ffe542', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '68f3c05f2ffb57b7fc032209dd709e5eaa6fcbdd', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '452c22746ace6b3923acf4912edba2509a56b369', class: "sd-date-picker__body" }, [
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '9668799fd1b978b8d84228cbce66020ecf9c953a', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'bdd3d055e108d0965fd33b39521e45d398d56657', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '32c9bf2c90f65d7341a06f1aa885eaf5830b790d', class: "sd-date-picker__menu" }, h("div", { key: '998be0bcd3acedce805fa64b6b1d627751c7a021', class: "sd-date-picker__header" }, h("div", { key: 'fbcc16d1a914086eac22ec0769041a7cfb68c4ac', class: "year-nav" }, h("button", { key: 'a0483c5a5c11b96e4d04a8705eaeb834a67aabc1', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '417934cc7f8d3a26a1ab7f7d06c4a19cc8f71838', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '9cc39d471b835312480483054b11bfb3a524a8a4', class: "year-nav__current" }, this.currentYear), h("button", { key: '9963b625be6c33c9a7d6c4aabce8aeac04a5e5d8', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '0414b554e1ae46b414d0829bbbbbd109241a1f0e', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '9eab999da7ef2a34f375f96ff799bf75500866da', class: "month-nav" }, h("button", { key: 'ba70f14d3344474b5faaa0778ce1838f00235880', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '3c69117050d690d06071040b7b110f28368d4b2b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'a3f85e24150dcfd644ac98f4075fc63b39cc389a', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '4a2e1c80dad428397120cf226807491474b9fef0', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '11f19f794d230afb29854717520dab17b90bf6e2', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '0dc4fb36b3395f3f626726ffc2c564b7efa7bf1f', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '973a4f62ac5588ad8398e668dfa9a1a5808e2860', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -137,9 +137,9 @@ export class SdDateRangePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: '3d95128a2a654e38ceae60e6b89482a454488286', class: "sd-date-range-picker" }, h("sd-input", { key: '4f170abfe6214ffa1044020b2cd59a9219f3ef09', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: '7b5927d900306fe0dd51931ccc606f8cc4799298', class: "sd-date-range-picker" }, h("sd-input", { key: 'a88ecd162f6bf66d6a81b008d990741c85836702', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '7c12c7e3331638f333efdea4bcd3d452eb032561', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '7312ab4a79877de6d6be3edaa404e0b9c52e28d8', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '20a485d128de2b2d0a8043cb5fe0de990364bbd8', class: "sd-date-range-picker__menu" }, h("div", { key: '19a0489246b5dccc183f3d3a040086a6a2c565f3', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '1f9c5f1188234e2306c033e8e67f9a106b3b39bc', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '52805839d2092886fe4f07c9f95a2e948b00c917', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'e9f323504223ccfbc4b5703346a310e58d1621c3', class: "header-label" }, this.prevYear), h("button", { key: '810c6fb9eaa16291550455ac1099c15da7b80ed6', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '44cf361ed854292f90c954522c356e17d5a45d29', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '4cc859482a2c010261b64b8ce15f5c754a2234fd', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '22dd8cf3231fd7409cf37474c839d08230daaf0d', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'a5067d11416437d885a42745e95f614c8b85030d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'c4478289503f76363051fec4ea48eab63400da24', class: "sd-date-range-picker__menu" }, h("div", { key: '5aa461caf52b0cbcab7e9390b50988c410cac7cb', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '9ee59b3d4d08ab1bb22f1ca9a99b658d25163f2b', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '7478ca20ece1d0720c93ab809408af069c3a51e6', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '221890339d4c692250a5c204c8ebffd7fff86f12', class: "header-label" }, this.prevYear), h("button", { key: 'ccc70fdb3fe6a50460d8156590927edeed0f2eba', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'e70523f34340c4948d014d861c5be107385e7181', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'ab67de7e6bcc992486bf030b5c648a22265ed411', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("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')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===

package/dist/collection/components/sd-guide/sd-guide.js

@@ -73,7 +73,7 @@ export class SdGuide {
     render() {
         // const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h(Host, { key: 'e7148c94652d2e5a05a8fbdcdccd4b5189787061' }, h("sd-button", { key: '37cfdf20a31e5b0694cfbeabf068534a4dca0a7a', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: "grey_45", icon: iconName, iconColor: iconColor, iconSize: iconSize,
+        return (h(Host, { key: 'e6db8a6f508122254393eb1d9a1ccb5f10192e50' }, h("sd-button", { key: 'df737688c5eb29485eaec14894a051824d7c1c9b', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: "grey_45", icon: iconName, iconColor: iconColor, iconSize: iconSize,
             // buttonStyle={{
             //  height: '28px',
             //  minHeight: '28px',
@@ -85,9 +85,9 @@ export class SdGuide {
             //  fontWeight: '400',
             //  backgroundColor: 'var(--guide-background)',
             // }}
-            onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '00581c68ec13b7da4126d4467fc989037983cc40', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '387ab5da8f3cebb18fb0efd4905be983dde04078', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '929be3f65eed31422f40f9785abdfc1b8d658a26', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'badde689ee0f6cdd0c3c0406894761be779e079e', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '5ac87ededf1b8b0ad1d5145551b74e0f2868b8a9', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '6e56ea467fdad7037c8331c5a35184530101962e', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
             // buttonStyle={{ padding: '0px', minHeight: '0px' }}
-            onSdClick: this.closeDropdown }), h("div", { key: '6cf04080dc39b2e69cc960d832934dfd2f6e5230', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'aed951b851f54d1afb8b3a1b37f47099d3df674b', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '485cfad889037e280cdd32d5616ab682f87159b1', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: '56b75b1d4fa43a7b08d4752a5360951a1e19dfa1', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            onSdClick: this.closeDropdown }), h("div", { key: '81414d84ee3314912035adce13afd8f559099b72', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'a90da4a81d2da7065bfa3335c26efd834bd941b3', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'f01358a92ec297782f8ab394c3fa56277d2a9af1', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: '9d0c130e6fdfaa3016199029d0fef5ea153153ed', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/collection/components/sd-icon/sd-icon.js

@@ -25,7 +25,7 @@ export class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: 'c0d4a3993efc47345406ba9b30e49cefaa14f8da', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '47476081ac11dd8ef1b04d9372d05f4afe72b323', color: this.resolvedColor })));
+        return (h("i", { key: '20f187a90566d35f7c459480b6917061cd26c734', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '9db914748d948a695b248d04e5008e726ac6e4d2', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-input/sd-input.js

@@ -89,11 +89,11 @@ export class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: '9a0b975f20b4b8bbc8bff2aef4ee9036450921d4', style: inputWidth }, this.label && h("div", { key: 'ec6c840dcdaa7b9788c32ecbd03dc5daee74c748', class: "sd-input__label" }, this.label), h("label", { key: '4c11c34fd26897b50e0cfbb569de476c9e06884c', class: {
+        return (h(Host, { key: '099f819c08b8eb4627f7857d10877d2a9bbeac51', style: inputWidth }, this.label && h("div", { key: 'ef1dffa2707e2f2844efee6646e14b750ea7c319', class: "sd-input__label" }, this.label), h("label", { key: '89e8a0ea5a02ecd114b9e1a7cb9fdcdce0130849', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '0d7df02ed548b12f415bd72f84ea411fde5ef549', name: "prefix" }), h("input", { key: '6203dcb95fd486d263e0fe33495243e95c332e1a', 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) }), h("slot", { key: '21544173b390be5607c50faf84f1d47fa703e8bf', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'af486def3d146c4638d1f6fecf95a6de61e8d528', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: 'b1c64655ea940ae454bac4aed58df8944ed579a3', name: "prefix" }), h("input", { key: '1bb32efb0c46d3e1b91ac90c64e60943ac59ee41', 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) }), h("slot", { key: 'bcdc6e6780b6eba56e788665669abcfe04406e64', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '3f8d9fe950d5313f0df807b06ffd5872dc4b1835', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);

package/dist/collection/components/sd-pagination/sd-pagination.js

@@ -73,12 +73,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: 'ae962ed1dfbcb79c23c402d52d0a83822b54d4b3', class: this.paginationClasses }, h("div", { key: 'efa0dfbcc8d71d2b9ff5b02334a3d1e119a7f469', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: 'c73e80cca3ae34331a653f40fcea9f21853729bc', class: this.paginationClasses }, h("div", { key: '0c1be2da1bbb9ca12ed44739c45c083da9b94657', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'f0bd3b291453696e22a34f182a852a2a092874f2', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '866070b571aab944f6f7521b72479c5b26fca000', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-popover/sd-popover.js

@@ -31,11 +31,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'fb877e8d016d13fb33b49a1a4dbfed9fc01b1336' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '02208721da61cb84086a57c823f8e31775fdbd5e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '3f3c4fc690dac5061bda08af37121e2b98374979', class: {
+        return (h(Fragment, { key: 'dffadde8218c26c620b641a5d95799fbfe08b34b' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '6cb7de8b74b9be12131a730a2d02bd304e3524e7', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '901d1fc65e9d94c29acca872c55b02128835f4de', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '6f0df95bafc2cbf564fd0e5a133c89f03c3a924b', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '535acee0be86db4ed58d6cc1631732541f1e475e' })), h("div", { key: 'd4366800a8cbd5a1f9630344a5ca4241b0eaa8dd', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '1cd9de3129988c5d26be0ded5b03520ab591cb9a', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '5aae57948bd5e0fd98e73a8ae504b77ce6cdbe07', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '814ac9ba0b2cf4367bb4cd5e688fa5433fee7126', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'a21ad0a5e28f8609b2f9d9accd0be5d81ed9de5b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '10738ec0926ea5fbc0b30b5c8c08b6cc37bf47d3', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: '6465c9decc572754469759e6f9ba237e6098c245', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '8f65907035de80f0ac721df90a76c8cff706892e' })), h("div", { key: 'a7dedd510101561be1137fcb1f8c43dca2d13383', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '425038b84031c4082348d7a2d5bc3384f4ce87ea', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '0a07d84656579a773924b0b066c9dbd48d44c6b3', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'b2daa7b83fbe582cbb829fa8b2bd8e73d3947b48', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '3ceae5f183e487f30570a471bdfada588519ac30', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '7fe6275cc500f8e963766bdfedc3f3b8a79a3609', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-portal/sd-portal.js

@@ -92,7 +92,7 @@ export class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '00e0fc50bd1da8ae4f43b61ddcc37614a4738dde' });
+        return h("slot", { key: '9ccb84d877ac49b85e64a12c1f1ff4b3105b2213' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h(Host, { key: '23d87df53fa083e6c9aceb1956de51800117df9f' }, h("div", { key: '569c5d35098350fa4d186ba838925de4f966c491', class: {
+        return (h(Host, { key: 'cb2d7b25a778f3ea56dd6aaa880dde5b3f109d92' }, h("div", { key: '5b954062fdfc0466bcbbad7c86eeb9ed62655cf9', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

package/dist/collection/components/sd-select/sd-select.css

@@ -1430,7 +1430,7 @@ textarea {
   overflow-y: auto;
   color: #333333;
   display: flex;
-  flex-direction: column nowrap;
+  flex-direction: column;
 }
 .sd-select__dropdown .sd-select__search-container {
   position: sticky;

package/dist/collection/components/sd-select/sd-select.js

@@ -200,11 +200,11 @@ export class SdSelect extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: 'cf8f4ce07f7ee5fc9706bdcd0d34c5211113f21e', style: style }, h("div", { key: 'b2cc0ad9e72668d33255c4e7277fabfd121e8b72', class: {
+        return (h(Host, { key: '9e528b2c6dd8b59343cb6603dfacfd63b3958e83', style: style }, h("div", { key: 'a6f139df6b21a452bb1e9f1467ca18cbf3c50101', class: {
                 'sd-select': true,
                 'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '1be74d029ebbc24eecc6cbd2d2f236715282f350', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'cc86cf63a8d4f075d2bf5ba3a589f9a395372cc3', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)