@sellmate/design-system 1.0.40 → 1.0.42

package/dist/collection/components/sd-button-v2/sd-button-v2.js

@@ -61,13 +61,13 @@ export class SdButtonV2 {
         const hasLabel = Boolean(this.label);
         const iconOnly = !this.label && Boolean(this.icon);
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        return (h("button", { key: '248e85751b7f7f1cdb770e4f4c1466fa8736f024', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: 'bf5687b1ddd3219232c88462b4067203ae2c3d14', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '0b68fdf9711cd26d6f143fec848d3e16e32c81e2', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '26bffa7135658f790e65a8b0aa32af055ea269f2', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-content)" })), this.label && h("span", { key: '5016092b05b4f068f823ae8dbd6a47ea23763086', class: "sd-button-v2__label" }, this.label))));
+            }, onClick: this.handleClick }, h("span", { key: '3294cdbae8d44d06ea800f701af23e5a228cca51', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '707c6716a97ac1c710d546eff6d4a2fb3c3b6206', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-content)" })), this.label && h("span", { key: 'f63f7c887ca2ee066dfb4c65fdd2e3586109a5dd', class: "sd-button-v2__label" }, this.label))));
     }
     static get is() { return "sd-button-v2"; }
     static get originalStyleUrls() {

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

@@ -3,7 +3,7 @@ export class SdCard {
     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' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.config.js

@@ -2,16 +2,19 @@ import modalTokens from "../../tokens/generated/component.modal.json";
 export const CONFIRM_MODAL_DEFAULT_BUTTON = {
     positive: 'primary_md',
     negative: 'danger_md',
+    default: 'neutral_outline_md',
 };
 export const CONFIRM_MODAL_ICON_MAP = {
     positive: 'notificationOutline',
     negative: 'warningOutline',
+    default: null,
 };
 export const CONFIRM_MODAL_ICON_COLOR = {
     positive: modalTokens.modal.confirm.positive.icon,
     negative: modalTokens.modal.confirm.negative.icon,
+    default: '',
 };
-export const TITLE_ICON_SIZE = Number(modalTokens.modal.title.icon);
+export const TITLE_ICON_SIZE = Number(modalTokens.modal.confirm.title.icon);
 export const CLOSE_ICON_SIZE = Number(modalTokens.modal.close.size);
 export const CLOSE_ICON_COLOR = modalTokens.modal.close.color;
 export const SUB_BUTTON_PRESET = 'neutral_outline_md';

package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.css

@@ -5,7 +5,7 @@ sd-confirm-modal {
 }
 sd-confirm-modal .sd-confirm-modal {
   position: relative;
-  padding: var(--sd-modal-modal-padding-y) var(--sd-modal-modal-padding-x);
+  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);
@@ -18,28 +18,28 @@ sd-confirm-modal .sd-confirm-modal__close-button {
 }
 sd-confirm-modal .sd-confirm-modal__icon {
   display: block;
-  width: var(--sd-modal-modal-title-icon);
-  height: var(--sd-modal-modal-title-icon);
-  margin: 0 auto var(--sd-modal-modal-title-gap) auto;
+  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-title-color);
-  font-size: var(--sd-modal-modal-title-typography-font-size);
-  font-weight: var(--sd-modal-modal-title-typography-font-weight);
-  line-height: var(--sd-modal-modal-title-typography-line-height);
+  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-body-gap) 0;
+  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-body-gap);
+  gap: var(--sd-modal-modal-confirm-body-gap);
 }
 sd-confirm-modal .sd-confirm-modal__message-text {
-  color: var(--sd-modal-modal-message-color);
-  font-size: var(--sd-modal-modal-message-typography-font-size);
-  font-weight: var(--sd-modal-modal-message-typography-font-weight);
-  line-height: var(--sd-modal-modal-message-typography-line-height);
+  color: var(--sd-modal-modal-confirm-message-color);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 22px;
   text-align: center;
   margin: 0;
 }
@@ -56,12 +56,12 @@ sd-confirm-modal .sd-confirm-modal__content-box {
 sd-confirm-modal .sd-confirm-modal__slot-label {
   font-size: 14px;
   font-weight: 700;
-  line-height: var(--sd-modal-modal-message-typography-line-height);
-  color: var(--sd-modal-modal-message-color);
+  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-button-gap);
+  gap: var(--sd-modal-modal-confirm-button-gap);
   margin-top: 32px;
 }

package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js

@@ -18,7 +18,7 @@ export class SdConfirmModal {
     slotLabel = '';
     tagContents;
     close;
-    confirm;
+    ok;
     componentWillLoad() {
         this.syncHasSlottedContent();
     }
@@ -66,9 +66,9 @@ export class SdConfirmModal {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (h("div", { key: '6fc7e6c41e74e44c1eb6228375a8230ffa46dab5', class: "sd-confirm-modal" }, h("sd-icon", { key: '79e901efb1b32fdd8d7be3bd8f33eb2d606cd25c', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), h("sd-icon", { key: '8d80711f1ddea567a388b0ad7c76608f0d794fde', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor }), h("h2", { key: '47dcfe8774e2d14d4edc8d1c23fff413146119e6', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'fb18833bd9f5cb858f2f5b05b7b45d5e0f3cdb72', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '9d158176578cb4374fe1ca37b62b4d61e81df6a1', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '4f781266ecdd43ac51195e1ee473d67d2bcff681', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        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: '04baced447a0cf11406df52b734f73ea39ff00d2', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '7054a3388d93610b21152c4c3df34445b7b64cdd', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '25fdec9094700beaf4d6fa0dee15920d6c3c294a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: '7611e5b0a187b1588026308220b09e3239f59463', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+            } })) : (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() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {
@@ -88,7 +88,7 @@ export class SdConfirmModal {
                 "mutable": false,
                 "complexType": {
                     "original": "ConfirmModalType",
-                    "resolved": "\"negative\" | \"positive\"",
+                    "resolved": "\"default\" | \"negative\" | \"positive\"",
                     "references": {
                         "ConfirmModalType": {
                             "location": "import",
@@ -191,7 +191,7 @@ export class SdConfirmModal {
                 "mutable": false,
                 "complexType": {
                     "original": "ConfirmModalMainButton",
-                    "resolved": "\"danger_md\" | \"danger_outline_md\" | \"primary_md\" | \"primary_outline_md\" | undefined",
+                    "resolved": "\"danger_md\" | \"danger_outline_md\" | \"neutral_outline_md\" | \"primary_md\" | \"primary_outline_md\" | undefined",
                     "references": {
                         "ConfirmModalMainButton": {
                             "location": "import",
@@ -365,8 +365,8 @@ export class SdConfirmModal {
                     "references": {}
                 }
             }, {
-                "method": "confirm",
-                "name": "sdConfirm",
+                "method": "ok",
+                "name": "sdOk",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -27,7 +27,7 @@ export class SdDatePicker {
         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 }))))));
     }
     static get is() { return "sd-date-picker"; }
     static get encapsulation() { return "scoped"; }

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

@@ -158,16 +158,16 @@ export class SdDateRangePicker {
         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)) }))))))))))))));
     }

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js

@@ -186,7 +186,7 @@ export class SdDropdownButton 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],
@@ -197,10 +197,10 @@ export class SdDropdownButton 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 is() { return "sd-dropdown-button"; }
     static get originalStyleUrls() {

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

@@ -5,6 +5,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',
@@ -131,15 +132,15 @@ export class SdField {
                 ? 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)));
     }

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

@@ -91,15 +91,15 @@ export class SdFilePicker {
     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 is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

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

@@ -144,7 +144,7 @@ export class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'f2000891d7d3bd71982f591bf953d1421f67fb5e' });
+        return h("slot", { key: 'd3ee1daa4b0009285df341cc1d8b892fb2a2fed6' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -47,9 +47,9 @@ export class SdGuide {
     };
     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) {

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: '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 })));
     }
     static get is() { return "sd-icon"; }
     static get originalStyleUrls() {

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

@@ -104,10 +104,10 @@ export class SdInput {
             '--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 is() { return "sd-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -6,7 +6,7 @@ export class SdLoadingSpinner {
         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" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-modal-container/sd-modal-container.js

@@ -17,7 +17,7 @@ export class SdModalContainer {
                 this.shakeModal(top.modalEl);
                 return;
             }
-            this.requestDismiss(top.id, 'cancel');
+            this.requestDismiss(top.id, 'close');
         }
     }
     async open(options, chain) {
@@ -27,33 +27,7 @@ export class SdModalContainer {
             clearTimeout(this.containerDismissTimerId);
             this.containerDismissTimerId = undefined;
         }
-        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closing: false }];
-        this.isVisible = true;
-        // Append after the container renders, then wait until the modal can paint before starting transitions.
-        requestAnimationFrame(() => {
-            if (this.contentRef) {
-                this.contentRef.appendChild(modalEl);
-                this.waitForModalReady(modalEl).then(() => {
-                    requestAnimationFrame(() => {
-                        const currentEntry = (this.entries ?? []).find(item => item.id === id);
-                        if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
-                            return;
-                        this.isBackdropVisible = true;
-                        modalEl.classList.add('sd-modal-container__modal--visible');
-                    });
-                });
-            }
-        });
-        return id;
-    }
-    async openNotice(options, chain) {
-        const id = `modal-${++modalIdCounter}`;
-        const modalEl = this.createNoticeModal(id, options);
-        if (this.containerDismissTimerId) {
-            clearTimeout(this.containerDismissTimerId);
-            this.containerDismissTimerId = undefined;
-        }
-        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closing: false }];
+        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closeAction: options.closeAction ?? 'none', closing: false }];
         this.isVisible = true;
         requestAnimationFrame(() => {
             if (this.contentRef) {
@@ -82,11 +56,11 @@ export class SdModalContainer {
         el.setAttribute('data-modal-id', id);
         el.classList.add('sd-modal-container__modal');
         this.applyProps(el, options);
-        el.addEventListener('sdConfirm', () => {
+        el.addEventListener('sdOk', () => {
             this.requestDismiss(id, 'confirm');
         });
         el.addEventListener('sdClose', () => {
-            this.requestDismiss(id, 'cancel');
+            this.requestDismiss(id, 'close');
         });
         return el;
     }
@@ -119,43 +93,6 @@ export class SdModalContainer {
         if (this.hasOwnProp(options, 'tagContents'))
             el.tagContents = options.tagContents;
     }
-    createNoticeModal(id, options) {
-        const el = document.createElement('sd-notice-modal');
-        el.setAttribute('data-modal-id', id);
-        el.classList.add('sd-modal-container__modal');
-        this.applyNoticeProps(el, options);
-        el.addEventListener('sdConfirm', () => {
-            this.requestDismiss(id, 'confirm');
-        });
-        el.addEventListener('sdClose', () => {
-            this.requestDismiss(id, 'cancel');
-        });
-        return el;
-    }
-    applyNoticeProps(el, options) {
-        if (this.hasOwnProp(options, 'title'))
-            this.setAttr(el, 'modal-title', options.title);
-        if (this.hasOwnProp(options, 'titleClass'))
-            this.setAttr(el, 'title-class', options.titleClass);
-        if (this.hasOwnProp(options, 'mainButtonLabel')) {
-            this.setAttr(el, 'main-button-label', options.mainButtonLabel);
-        }
-        if (this.hasOwnProp(options, 'subButtonLabel')) {
-            this.setAttr(el, 'sub-button-label', options.subButtonLabel);
-        }
-        if (this.hasOwnProp(options, 'tagPreset'))
-            this.setAttr(el, 'tag-preset', options.tagPreset);
-        if (this.hasOwnProp(options, 'tagLabel'))
-            this.setAttr(el, 'tag-label', options.tagLabel);
-        if (this.hasOwnProp(options, 'slotLabel'))
-            this.setAttr(el, 'slot-label', options.slotLabel);
-        if (this.hasOwnProp(options, 'topMessage'))
-            el.topMessage = options.topMessage ?? [];
-        if (this.hasOwnProp(options, 'bottomMessage'))
-            el.bottomMessage = options.bottomMessage ?? [];
-        if (this.hasOwnProp(options, 'tagContents'))
-            el.tagContents = options.tagContents;
-    }
     handleBackdropClick = () => {
         const top = this.getTopEntry();
         if (!top)
@@ -164,7 +101,7 @@ export class SdModalContainer {
             this.shakeModal(top.modalEl);
             return;
         }
-        this.requestDismiss(top.id, 'cancel');
+        this.requestDismiss(top.id, 'close');
     };
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
@@ -190,7 +127,6 @@ export class SdModalContainer {
         if (!entry || entry.closing)
             return;
         entry.modalEl.classList.remove('sd-modal-container__modal--visible');
-        // fade out backdrop simultaneously if this is the last active modal
         const remainingActive = (this.entries ?? []).filter(item => item.id !== id && !item.closing);
         if (remainingActive.length === 0) {
             this.isBackdropVisible = false;
@@ -199,10 +135,18 @@ export class SdModalContainer {
             this.finalizeDismiss(id);
         }, ANIMATION_DURATION);
         this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
-        if (reason === 'confirm')
-            entry.chain._triggerOk();
-        if (reason === 'cancel')
-            entry.chain._triggerCancel();
+        if (reason === 'close') {
+            if (entry.closeAction === 'ok')
+                entry.chain._triggerOk();
+            else if (entry.closeAction === 'cancel')
+                entry.chain._triggerCancel();
+        }
+        else {
+            if (reason === 'confirm')
+                entry.chain._triggerOk();
+            if (reason === 'cancel')
+                entry.chain._triggerCancel();
+        }
     }
     finalizeDismiss(id) {
         const entry = (this.entries ?? []).find(item => item.id === id);
@@ -306,53 +250,16 @@ export class SdModalContainer {
                     "tags": []
                 }
             },
-            "openNotice": {
-                "complexType": {
-                    "signature": "(options: NoticeModalOptions, chain: ModalDialogChainLike) => Promise<string>",
-                    "parameters": [{
-                            "name": "options",
-                            "type": "NoticeModalOptions",
-                            "docs": ""
-                        }, {
-                            "name": "chain",
-                            "type": "ModalDialogChainLike",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "NoticeModalOptions": {
-                            "location": "import",
-                            "path": "./sd-modal-container.config",
-                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::NoticeModalOptions",
-                            "referenceLocation": "NoticeModalOptions"
-                        },
-                        "ModalDialogChainLike": {
-                            "location": "import",
-                            "path": "./sd-modal-container.config",
-                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ModalDialogChainLike",
-                            "referenceLocation": "ModalDialogChainLike"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
             "update": {
                 "complexType": {
-                    "signature": "(id: string, props: Partial<ConfirmModalOptions & NoticeModalOptions>) => Promise<void>",
+                    "signature": "(id: string, props: Partial<ConfirmModalOptions>) => Promise<void>",
                     "parameters": [{
                             "name": "id",
                             "type": "string",
                             "docs": ""
                         }, {
                             "name": "props",
-                            "type": "{ type?: ConfirmModalType | undefined; title?: string | undefined; titleClass?: string | undefined; topMessage?: string[] | undefined; bottomMessage?: string[] | undefined; mainButtonName?: ConfirmModalMainButton | undefined; mainButtonLabel?: string | undefined; subButtonLabel?: string | undefined; tagPreset?: \"square_xs_red\" | \"square_xs_orange\" | \"square_xs_yellow\" | \"square_xs_green\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_indigo\" | \"square_xs_grey\" | \"square_sm_red\" | \"square_sm_orange\" | \"square_sm_yellow\" | \"square_sm_green\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_indigo\" | \"square_sm_grey\" | \"square_md_red\" | \"square_md_orange\" | \"square_md_yellow\" | \"square_md_green\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_indigo\" | \"square_md_grey\" | \"pill_xs_red\" | \"pill_xs_orange\" | \"pill_xs_yellow\" | \"pill_xs_green\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_indigo\" | \"pill_xs_grey\" | \"pill_sm_red\" | \"pill_sm_orange\" | \"pill_sm_yellow\" | \"pill_sm_green\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_indigo\" | \"pill_sm_grey\" | \"pill_md_red\" | \"pill_md_orange\" | \"pill_md_yellow\" | \"pill_md_green\" | \"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_indigo\" | \"pill_md_grey\" | undefined; tagLabel?: string | undefined; slotLabel?: string | undefined; tagContents?: HTMLElement | undefined; persistent?: boolean | undefined; }",
+                            "type": "{ type?: ConfirmModalType | undefined; title?: string | undefined; titleClass?: string | undefined; topMessage?: string[] | undefined; bottomMessage?: string[] | undefined; mainButtonName?: ConfirmModalMainButton | undefined; mainButtonLabel?: string | undefined; subButtonLabel?: string | undefined; tagPreset?: \"square_sm_red\" | \"square_sm_orange\" | \"square_sm_yellow\" | \"square_sm_green\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_indigo\" | \"square_sm_grey\" | \"square_md_red\" | \"square_md_orange\" | \"square_md_yellow\" | \"square_md_green\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_indigo\" | \"square_md_grey\" | \"square_xs_red\" | \"square_xs_orange\" | \"square_xs_yellow\" | \"square_xs_green\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_indigo\" | \"square_xs_grey\" | \"pill_sm_red\" | \"pill_sm_orange\" | \"pill_sm_yellow\" | \"pill_sm_green\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_indigo\" | \"pill_sm_grey\" | \"pill_md_red\" | \"pill_md_orange\" | \"pill_md_yellow\" | \"pill_md_green\" | \"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_indigo\" | \"pill_md_grey\" | \"pill_xs_red\" | \"pill_xs_orange\" | \"pill_xs_yellow\" | \"pill_xs_green\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_indigo\" | \"pill_xs_grey\" | undefined; tagLabel?: string | undefined; slotLabel?: string | undefined; tagContents?: HTMLElement | undefined; persistent?: boolean | undefined; closeAction?: CloseAction | undefined; }",
                             "docs": ""
                         }],
                     "references": {
@@ -369,12 +276,6 @@ export class SdModalContainer {
                             "path": "./sd-modal-container.config",
                             "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ConfirmModalOptions",
                             "referenceLocation": "ConfirmModalOptions"
-                        },
-                        "NoticeModalOptions": {
-                            "location": "import",
-                            "path": "./sd-modal-container.config",
-                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::NoticeModalOptions",
-                            "referenceLocation": "NoticeModalOptions"
                         }
                     },
                     "return": "Promise<void>"