@sellmate/design-system 1.0.40 → 1.0.42

package/dist/esm/sd-button_20.entry.js

@@ -2,6 +2,7 @@ import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragm
 import { b as buttonTokens } from './component.button-KOzU1j2w.js';
 import { r as resolveColor, u as useDatePicker, t as today } from './useDatePicker-Ch0LooGd.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
+import { i as inputTokens } from './component.textinput-CbjDAdZ_.js';
 import { s as systemTokens } from './system-CS6ohqwt.js';
 import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
 import { S as SelectKeyboardNavigation } from './select-keyboard-navigation-Cy6HMEsK.js';
@@ -467,16 +468,16 @@ const SdDateRangePicker = class {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (h("div", { key: 'd76c5830570b080fe07fc01e9a3ea8f09ec1bf40', class: {
+        return (h("div", { key: '8870de35f713f9b5cd7756e87dcca0bff60acbcd', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: '3ecf2ccaa66e472037607fca63f29317a59e2f5d', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '317167fa8f25a25e869757dfdc6df63671caea57', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'f11baac3755a432b5c379a1b5a26590341136d68', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'c0cbd599dd4fac9970f3aa9bd84594fffb394533', class: "sd-date-range-picker__menu" }, h("div", { key: 'caaaa777a14f77d421b5d547ee45d71731390f74', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '6c5169b88ce2f6d132ae18f1944ab4dcae3ba304', type: "button", name: "prev", title: "Previous", onClick: () => {
+            } }, h("sd-input", { key: '602f5be4d5cf9cbd378ca1236ee28969b5e9ba12', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '06a5bf3feaea7606bddad3fa2e655d0cfbaaf89b', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '2e27d6573a72ba2639dc873e7e295b432908a954', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'b682a2ae8fdc168a56d77b32b05b239f2eb5a6cc', class: "sd-date-range-picker__menu" }, h("div", { key: '34b4d36dca8a51c7adae9584e62cd0aaf26021d8', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '47448fcf5ebc6cf8fd242119c7f318c72f69cd90', type: "button", name: "prev", title: "Previous", onClick: () => {
                 this.setPrevYear(this.prevYear - 1);
                 this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, h("sd-icon", { key: '19a1d47598e047faa63ad230e5470421e71ecc66', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '8f6d4100f1de0b5c830cc2b7cf1479a7e87f77f5', class: "header-label" }, this.prevYear), h("button", { key: '56d402286b78e5be0c2d1cc3227afbc6e8b327c7', type: "button", name: "next", title: "Next", onClick: () => {
+            } }, h("sd-icon", { key: '5f05f690e1493854c5c91b1b7e6c7f92b2285fe0', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'b8c1d2c567eda67a4c8f7a7e2aac740fe8c8a306', class: "header-label" }, this.prevYear), h("button", { key: '447fd54a95756777f665e628ccf747cf5c9f8bfa', type: "button", name: "next", title: "Next", onClick: () => {
                 this.setPrevYear(this.prevYear + 1);
                 this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, h("sd-icon", { key: '6d6faeb9a890643e8b4b79a40d5c71a4a0e488f6', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'a959a9309a6a6fe17f3cf4b813c865d0b0470722', 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
+            } }, h("sd-icon", { key: '0aeca212fd4ba80c91cdfeb092bcfc7b426ce3cb', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '1858318f65bde16201f9792499b246432f5c80f4', 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.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)) }))))))))))))));
     }
@@ -513,6 +514,7 @@ const FORM_PARENT_TAGS = [
     'sd-select-multiple',
     'sd-select-multiple-group',
     'sd-input',
+    'sd-barcode-input',
     'sd-textarea',
     'sd-number-input',
     'sd-select-v2',
@@ -642,15 +644,15 @@ const SdField = class {
                 ? addonTokens.border.disabled
                 : addonTokens.border.default,
         } : {};
-        return (h("div", { key: 'ecca8cb5318e97f79dc3df0a237ab77601c8b4a5', class: {
+        return (h("div", { key: '1badb3752c758c30995188f73505d912f4318ba3', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: addonCssVars }, h("div", { key: '9b5ced7254dfac995e866e14ff88f6345d4130c4', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '3f161316511918ae9ca968b525dbf6770b62823c', class: {
+            }, style: addonCssVars }, h("div", { key: 'b8c08b4783eb7035cc28e6ffb1d541871cd25616', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '31efca0604479d2fa9bed06aaaeb9ca9930c62fb', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            }, style: this.width ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width, flex: 'none' } : {} }, addon && (h("div", { key: 'a57de48c4757cd375648a0aad9613f876b1f2383', class: "sd-field__addon" }, addon)), h("slot", { key: '4a7c8d5455fe39cd76134ea67ea1dba9b6c3fc3e' }))), (this.errorMsg || this.errorMessage)
+            }, style: this.width ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width, flex: 'none' } : {} }, addon && (h("div", { key: '159191a432603cbfa4b1755fc7f4c784868b3749', class: "sd-field__addon" }, addon)), h("slot", { key: '58918e5af7dc2564af8d86b24cb5972cb9d0d67f' }))), (this.errorMsg || this.errorMessage)
             ? h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)
             : this.hint && h("div", { class: "sd-field__hint" }, this.hint)));
     }
@@ -813,7 +815,7 @@ const SdFloatingPopover = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'f2000891d7d3bd71982f591bf953d1421f67fb5e' });
+        return h("slot", { key: 'd3ee1daa4b0009285df341cc1d8b892fb2a2fed6' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -2935,46 +2937,11 @@ const SdIcon = class {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '8897b6261f767e2e43a312bd0c828bb018bb79e4', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'fdd8cfaca6eb8ef7407a92a7fe0fb48468731cbf', color: this.resolvedColor })));
+        return (h("i", { key: '64d1789805536124f229d7dde816ef986d583276', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '35ba2d95f6e3e9d7cb346b4872ba1a436a08e04d', color: this.resolvedColor })));
     }
 };
 SdIcon.style = sdIconCss();
 
-const input = {
-	sm: {
-		height: "28",
-		paddingX: "12",
-		gap: "8",
-		radius: "4",
-		typography: {
-			fontWeight: "400",
-			fontSize: "12",
-			lineHeight: "20"}
-	},
-	md: {
-		height: "36",
-		paddingX: "16",
-		gap: "12",
-		radius: "6",
-		typography: {
-			fontWeight: "400",
-			fontSize: "16",
-			lineHeight: "26"}
-	},
-	text: {
-		"default": "#222222",
-		placeholder: "#AAAAAA",
-		disabled: "#888888"},
-	size: {
-		icon: "16"
-	},
-	icon: {
-		"default": "#888888"
-	}};
-var inputTokens = {
-	input: input
-};
-
 const sm = inputTokens.input.sm;
 const md = inputTokens.input.md;
 const INPUT_SIZE_MAP = {
@@ -3117,10 +3084,10 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: 'a47aefb70ed6f02a009d0a661190eb0d96912e37', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '547dff2359e427a703ef11302e8970c9c2dabdfa', class: "sd-input__content" }, h("slot", { key: '306262759b0a43cf0d2a6175866f16a9d7aa0dff', name: "prefix" }), h("input", { key: 'caea921365e2f61fc1585a0fc40b98f9a22768c6', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : 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 }), h("slot", { key: '249f3824119ba0af6c7101af8a645abcef3463fd', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '708ef1f36ecfb8dbf0b30f33042c55c73da3db34', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '82adfc401e74a6d823aa4f95442aa74b663e3ee4', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '6c7a76e6d863cddf4e7ca83d1231255fe5e7edea', class: "sd-input__content" }, h("slot", { key: '14ab01247317f114f92127b6c1c43c42251fa90c', name: "prefix" }), h("input", { key: 'ee546204bc6cfa28f8e42dce6deebdf251dc04da', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : 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 }), h("slot", { key: '4f52aa176c00462996d8794da1d8fd86c468e132', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '40ab163ef22e68a261e639ec5d8fb3bc1d6cd42a', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-icon", { key: '18d6874fa503b1b2a11dde80099638237715bea6', name: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', color: INPUT_COLORS.icon.default, size: INPUT_ICON.frameSize, class: "sd-input__password-icon", onClick: () => { this.passwordVisible = !this.passwordVisible; } })))));
+            } })), this.type === 'password' && (h("sd-icon", { key: 'd841ed3ca46d065048107b8733c41e63155b0990', name: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', color: INPUT_COLORS.icon.default, size: INPUT_ICON.frameSize, class: "sd-input__password-icon", onClick: () => { this.passwordVisible = !this.passwordVisible; } })))));
     }
     static get watchers() { return {
         "value": [{
@@ -3144,7 +3111,7 @@ const SdLoadingSpinner = class {
         return resolveColor(this.color);
     }
     render() {
-        return (h(Fragment, { key: '463ab22264fafc013af7a602066eb8ebed10ac05' }, h("svg", { key: '6b90c0c3448c309813038fb8281b4ed73b1145d3', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: 'aa553d712b98c3316c98b7e52b955b7185eaee20', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Fragment, { key: 'debc93482bd2c47f317457fd97ee2bf40b6f3e59' }, h("svg", { key: '915a8e743e9286e32c81b1bf49714da01ba9a1c3', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '04abf57521d77d5492a0e5553a7f64017fe0d1a3', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss();
@@ -3399,17 +3366,17 @@ const SdNumberInput = class {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (h("sd-field", { key: 'd7e2abb6482c6861862456f72674ed48feb1d617', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, 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 }, h("label", { key: 'e733a22e50abdfc9a03753286c4614257a7380f6', class: {
+        return (h("sd-field", { key: '7c278ee43828ff5619efe471b7f2a8c6ea09c300', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, 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 }, h("label", { key: '10987e5255b183d774affb873866d2fab5721997', 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 }, h("input", { key: 'aa568fd5836adafc7ea4e9f1d51366e4ec0c2b1e', 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 && (h("div", { key: 'fa1cb14a367babcaa2b253f2e24dfc5b68cd7cc3', class: "sd-number-input__buttons" }, h("button", { key: '94ae3710515a5e2d29937aea5b643a3132d07552', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'ea09e409d3c4c0a9e59b57b8f0d9211ca271b0ed', 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 && (h("div", { key: '3539fa8237cde3c5220934d18152bd6e3c20b979', class: "sd-number-input__buttons" }, h("button", { key: '4b48a586dbe4509a9c780c1d23b06252f3e5cf55', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'e74cbeb24ac58cae25e43c40b7a1dbd9051c730c', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '7d593ba24ed62cfe6ca79a1c5a626151d21bbbd6', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '25076f714328a1bce556ecff6317573c98bd8214', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '99b5951b072d6bdbd1f36f217d441604aada3f4b', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '167b9cb37a439df8d9ecf4532e32d1323c9a7e57', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '13e8eda3bb5042bd65381057159dd60f04ecf69d', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get watchers() { return {
         "value": [{
@@ -3497,12 +3464,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (h("div", { key: '403af836a1c920164401029eb1e52339ddd4b69e', class: this.paginationClasses }, h("div", { key: '5b899b37cabe16ccef734f45a3ca8752b7f37b08', 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: 'fe61b181ec08d65564d8e68787403a7a83a90631', class: this.paginationClasses }, h("div", { key: '79237017bd874cf9bfa9af51e66f06ec641cefcf', 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: '58e0c871da394403b7504c9a8293b63703ca55f0', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '416e4c3b231a8a9987cce6bd4359edc759c134ee', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -3732,7 +3699,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'de500e5ee667c295313afda908429b55ed768969' });
+        return h("slot", { key: '04581cb6d22882520a7da534d19dcbec7b540af7' });
     }
     static get watchers() { return {
         "open": [{
@@ -4100,10 +4067,10 @@ const SdSelectDropdown = class {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: 'aca6d4044905863975c944afb44f92df0d6f1568', class: {
+        return (h("div", { key: '70bea150872ff4b70b70d358972b14bf0ad2bdf2', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'c87e4d9a391bf7b583bca1cda8930f977a1aec2c', 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) => (h("slot", { name: `option-${option.value}` }, h("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 }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: '79ebdc72ca4a905f700dc6293d8033a5ec22d679', 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) => (h("slot", { name: `option-${option.value}` }, h("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 }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
         "filteredOptions": [{
@@ -4150,7 +4117,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (h("div", { key: 'e28519019fa39af328fe7f5a25f18bb227e4d622', class: {
+        return (h("div", { key: '2e04258ee26b376794a5ebe76503875e48dd3ff2', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -4196,17 +4163,17 @@ const SdSelectSearchInput = class {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: '2f4e9dfd95524f7d62f49f2cba50f14157d56fe3', class: {
+        return (h("div", { key: '82fd2b838c46c47b51b93a23e5a837708fb944b1', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '509714588ae43b950ea7abc8cd045aee9007e04c', 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() }, h("sd-input", { key: 'fc0821ce63f445bed3dfce51668ece1831914f86', 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();
-            } }, h("sd-icon", { key: '1f13b6f332a930d7ffe515ccd4a77cf4e7e1af7f', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '6a9b19f5910132be045e3a2cc33546307e3d5cb9', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
 };
 SdSelectSearchInput.style = sdSelectSearchInputCss();
@@ -5106,10 +5073,10 @@ const SdTextarea = class {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (h("div", { key: '77a42aefa53924e33dd043dccc28fbb123649c85', class: {
+        return (h("div", { key: 'abc90981d61632afc86d158283575cd65031e10e', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'aee9a4c587b0a64c6c861734398b17b44e6ccf77', class: "sd-textarea__content" }, h("textarea", { key: 'c606304fe8a2fbc233e1d9a01a91b56b202dbf2e', 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() && (h("div", { key: 'a00d88133da74f13ca963cc7851139d21ff4a661', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: 'c1f44be6cd1f015606975e49f76bf5253eb259ef', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: '5e7eb56e43eee626056ae5f4b090d7f565ce4a1d', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'e2c3599dc763d59df0ba1ed6d80d2b8e6b9846f9', class: "sd-textarea__content" }, h("textarea", { key: 'f6ac448db448ed16eeac15313b3ca8016b51b70f', 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() && (h("div", { key: 'dfa41f4149b2f8b51c485e2f6306256982c7fdd1', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: '909c7c59fde0bec3ac398899e9301b2f93fbb0f4', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: 'a0907c3745f7b07ddc5458e5f822bf87873a5316', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": [{
@@ -5167,6 +5134,14 @@ const SdTooltip = class {
     showTooltip = false;
     slotContentHTML = '';
     buttonEl;
+    get tooltipOffset() {
+        switch (this.placement) {
+            case 'top': return [0, -4];
+            case 'bottom': return [0, 4];
+            case 'left': return [4, 0];
+            case 'right': return [4, 0];
+        }
+    }
     handleClose = () => {
         this.showTooltip = false;
     };
@@ -5193,14 +5168,14 @@ const SdTooltip = class {
             : {
                 onSdClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: '0285bd3138a01e99e0827289f8dba327af0c12a6' }, 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-tooltip", ...buttonTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-floating-portal", { key: 'e15b204793854bf7acbba1cda3da761bd32650c4', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, h("div", { key: '4b1359e07d819ad86a7be93f90832fd31af5302d', class: {
+        return (h(Fragment, { key: '2890811dd681299b155d191d6d6023441db6debc' }, 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-tooltip", ...buttonTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-floating-portal", { key: '666cf59e0548af92eff225cd91b485824b82249d', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement, offset: this.tooltipOffset }, h("div", { key: 'ad5285750f95fdb0829372dd3b45d96035a02315', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.tooltipType}`]: true,
                 [`sd-floating-menu--${this.placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            } }, h("i", { key: '53f069a3923f1b729cc36072b8a26d50f909793e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '569020e29c37c1f0c1c49faa48374c400aa562db' })), h("div", { key: 'a04f7d4b60eddab1ea2a14a8fc813436fd07d53c', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            } }, h("i", { key: 'ee92f004dbd17de84a3410bd555da735c5fcb4ca', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '04ccadfa1de8bcf3b64218e6e048fcbf09ff3301' })), h("div", { key: '0534c8cec5c79c8b0df3950d554a1b62d1e3b32b', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

package/dist/esm/sd-card.entry.js

@@ -9,7 +9,7 @@ const SdCard = class {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '01df653d1718aab046ee74275f13c926fbf05573' }, h("div", { key: '82dcf247f0f718328fa4f1c3548becff1c1d6fd3', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '33b518500426f3abd40ee4a5719c8f784bfeb65a' }))));
+        return (h(Fragment, { key: '155504b50cb1c21fc1f847af8a9e8b685f7881ef' }, h("div", { key: 'c461e3e40da44586da5e02ad508bf59942a9e82a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '0c0ee023155c08c565c3496c44699a900666b084' }))));
     }
 };
 SdCard.style = sdCardCss();

package/dist/esm/sd-confirm-modal.entry.js

@@ -0,0 +1,122 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-B8tGP77V.js';
+
+const modal = {
+	confirm: {
+		title: {
+			icon: "32"},
+		positive: {
+			icon: "#0075FF"
+		},
+		negative: {
+			icon: "#E30000"
+		}
+	},
+	close: {
+		size: "20",
+		color: "#888888"
+	}};
+var modalTokens = {
+	modal: modal
+};
+
+const CONFIRM_MODAL_DEFAULT_BUTTON = {
+    positive: 'primary_md',
+    negative: 'danger_md',
+    default: 'neutral_outline_md',
+};
+const CONFIRM_MODAL_ICON_MAP = {
+    positive: 'notificationOutline',
+    negative: 'warningOutline',
+    default: null,
+};
+const CONFIRM_MODAL_ICON_COLOR = {
+    positive: modalTokens.modal.confirm.positive.icon,
+    negative: modalTokens.modal.confirm.negative.icon,
+    default: '',
+};
+const TITLE_ICON_SIZE = Number(modalTokens.modal.confirm.title.icon);
+const CLOSE_ICON_SIZE = Number(modalTokens.modal.close.size);
+const CLOSE_ICON_COLOR = modalTokens.modal.close.color;
+const SUB_BUTTON_PRESET = 'neutral_outline_md';
+
+const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:22px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:32px}`;
+
+const SdConfirmModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "sdClose");
+        this.ok = createEvent(this, "sdOk");
+    }
+    get el() { return getElement(this); }
+    hasSlottedContent = false;
+    customContentRef;
+    slotObserver;
+    type = 'positive';
+    modalTitle = '';
+    titleClass = '';
+    topMessage = [];
+    bottomMessage = [];
+    mainButtonName;
+    mainButtonLabel = '확인';
+    subButtonLabel = '';
+    tagPreset = 'square_sm_grey';
+    tagLabel = '';
+    slotLabel = '';
+    tagContents;
+    close;
+    ok;
+    componentWillLoad() {
+        this.syncHasSlottedContent();
+    }
+    componentDidLoad() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.slotObserver = new MutationObserver(() => this.syncHasSlottedContent());
+        this.slotObserver.observe(this.el, {
+            childList: true,
+            characterData: true,
+        });
+    }
+    componentDidRender() {
+        if (this.customContentRef && this.tagContents instanceof HTMLElement) {
+            if (typeof this.customContentRef.replaceChildren === 'function') {
+                this.customContentRef.replaceChildren(this.tagContents);
+            }
+            else {
+                this.customContentRef.innerHTML = '';
+                this.customContentRef.appendChild(this.tagContents);
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.slotObserver?.disconnect();
+    }
+    get resolvedMainButton() {
+        return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.type];
+    }
+    get hasTagContent() {
+        return !!(this.tagLabel || this.slotLabel);
+    }
+    get showContentBox() {
+        return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
+    }
+    syncHasSlottedContent() {
+        const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
+            node.classList.contains('sd-confirm-modal')) &&
+            (node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
+        if (hasSlottedContent !== this.hasSlottedContent) {
+            this.hasSlottedContent = hasSlottedContent;
+        }
+    }
+    render() {
+        const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
+        const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
+        return (h("div", { key: '9dd835c1020a29e99257690b5d4d6038b13fe5e4', class: "sd-confirm-modal" }, h("sd-icon", { key: '17fea9642aabb047a8017c37beffe3e0b64707c2', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '5198d65dbac64b483f63f8a65f7cad987a14e24b', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '045887b2224ed46f4d6158a2d3ffc25261a0156d', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: '7f9ce8c5bef7a8f9ee580671ccdb79c093066ee3', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'ac533ca4a1dc011d0bbb0c5c72c14228f680741a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '2fde04429ca9efb0b9ae30116e9a0fd7f57b904e', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+                this.customContentRef = el;
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '5f97a8bf91a60b553b21d80f4b133d2c79e97ba6', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '4cde2779f11b274d71b90dd75584f8ccd9d3044d', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '9e64571f556c6cfdb9c69dc70e54a2f4bdec7bb6', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: 'dd86f7cce973862d94e26910341995f743e1944b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+    }
+};
+SdConfirmModal.style = sdConfirmModalCss();
+
+export { SdConfirmModal as sd_confirm_modal };

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

@@ -35,7 +35,7 @@ const SdDatePicker = class {
         this.viewChange.emit(e.detail);
     };
     render() {
-        return (h("div", { key: '9f1e5b391dec4623e6f628449a459ab1a6f6ec7d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '8473fc052a8e61b1b403328046b984b858a69ccd', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'ccc4ac16bcb3e340e574d1098d229d93bba32671', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '9b85074b30fc5d6e8204c1e815fe325871e8205a', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'fff4a6d1d2b1c0923b74abcf453a32829ee5865a', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'f157822fca3dffb9fbbaa05e9d9ba67ba6a440bb', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
+        return (h("div", { key: '308b6e499027b7316199713cddb8253308cee41d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '37afc5dd38a77e9e1a3c80df8c589cd1ee6f6185', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '91ca438a2ca3795d10a7671a6fc807eca11c4943', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '85bb2503ec3e9d928e572835a5a750a12972af70', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '9b8ccf203b013189df1ad9ecad9f5956a5dd7cef', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'b314b4c809cd4675d97892a5873fed8fdfb2b046', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
     }
 };
 SdDatePicker.style = sdDatePickerCss();

package/dist/esm/sd-dropdown-button.entry.js

@@ -244,7 +244,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: 'd2c725861a4667633a2726b47101d604436c5c16', class: "sd-dropdown-button" }, h("button", { key: '51a4a2f049f53d61f45632a89e179c95f9cf9755', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (h("div", { key: 'bdaf7f90ca47cc650fb60ed95b7e6ddeb688feaf', class: "sd-dropdown-button" }, h("button", { key: 'eb31263b21ddcd07e6a59c17ddb88af6906136b4', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
@@ -255,10 +255,10 @@ const SdDropdownButton = class extends BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, h("span", { key: '595bf90d834102371492f478e23f7886ec7e5dcf', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '79a12ecba11d82944e2563d60dfb76c5a9bb9a39', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '7160b1e8f7e25d822c539a57ab19ee2572c7b146', class: {
+            } }, h("span", { key: 'b9501cbab79d5472e9680528282191d97fb9c579', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '83c6b1e937bb7f7d676561d607e8223d05897715', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '58b1ed6195672372ecd180c9567bc74aeefb1db9', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: 'd041b1bfb0bb902f5b670fbf5524babfa0ee47ac', name: "arrowDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: 'd7dfe4aef651f4f55ed661f1d84850009a61bb2e', name: "arrowDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/esm/sd-file-picker.entry.js

@@ -98,15 +98,15 @@ const SdFilePicker = class {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: '598e284933fe6dbcbd1a1f77a8f530aa22be5456', class: {
+        return (h("div", { key: '3133b2f12d79b36a0f21bbb1d93ae738f35611ce', 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) }, h("input", { key: '3f84b668c107219a3acecb32c8d473f12c162e3f', 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 }), h("sd-icon", { key: '0fcc77f108d858f0ede5043c4da71988e68d8bd0', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '5aeb75690a1922d765e19ada43cf7ab034f79979', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '56bad5fd0fbd58effe130828312a2b199a132e3b', 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 }), h("sd-icon", { key: 'b1bba7f527e177a51939c98eefe0ca7b84dada7e', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '3a8717611a8716c64a028e5f2c8ac1784797e68c', 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 && (h("sd-icon", { key: '1da963ffaded05153eb72803b3ca4127e82b7386', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'd4fdd2e2ed990c17c35eca0164f93f3323ba728c', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: 'd05a21388823cc596d8c2f9e31f3fc39a2b84d09', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '24c65a0b7743fa66d44d24cc12bfff46172d620e', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -53,9 +53,9 @@ const SdGuide = class {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h("div", { key: '6160f0e15482053eadd72d57a15f3396541b083a', class: "sd-guide", style: {
+        return (h("div", { key: 'd6736d62ad87e750ed147e48d36d05e4304dae2b', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: 'cec37bacab4a2f2e932db6e55674d63cb4203ffd', 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 && (h("sd-portal", { key: 'be8e6a105b6cadbdccabb76d48c8077957da3a37', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '321c6fd059d24d632b434abc77e19dfb552756a0', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '90e051c0c7609ba0b9cc5e654aba8d806b278b8a', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '58712e7346d7482d6495394e981df5bfc42e1cdc', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '55e4711ee0bee9a4fd11280aacee78a41e613f5b', class: "sd-guide__popup__header" }, h("sd-icon", { key: '461cea2bab8c257d192623068793af58f821d7c9', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '0240dc09042adef7da4c6c57f888e7e4923c595e', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '906c5ac6ef8532482014478d360bdf892764acb0', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, h("sd-button", { key: '430e29a73b5bc5380f33773a13c53bc7d6f86590', 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 && (h("sd-portal", { key: '2b68fd8e9b67c831d212a90c0863551e022de7da', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '735de560510986e014611a2388b4eda55412282f', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '33f612c4c2241f539a84eee6ab8d5ae8d7f933bd', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '6770783357a95ade4f1037f55397394b64624e2b', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '1f5d49db7e830f14937db99348f0e1f2332db377', class: "sd-guide__popup__header" }, h("sd-icon", { key: '69faeb8e2de8e4d4895e0cd0938a027bcff2277b', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: 'c87c814502da7534382cf72b2bc2ab30003d7803', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '73a66a5a39d0b7c5eb9f4076eafdc0a8bf067deb', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {