@sellmate/design-system 1.0.37 → 1.0.39

package/dist/cjs/sd-confirm-modal_2.cjs.entry.js

@@ -0,0 +1,199 @@
+'use strict';
+
+var index = require('./index-Qvv0fGgj.js');
+
+const modal = {
+	title: {
+		icon: "32"
+	},
+	close: {
+		size: "20",
+		color: "#888888"
+	},
+	confirm: {
+		positive: {
+			icon: "#0075FF"
+		},
+		negative: {
+			icon: "#E30000"
+		}
+	}
+};
+var modalTokens = {
+	modal: modal
+};
+
+const CONFIRM_MODAL_DEFAULT_BUTTON = {
+    positive: 'primary_md',
+    negative: 'danger_md',
+};
+const CONFIRM_MODAL_ICON_MAP = {
+    positive: 'notificationOutline',
+    negative: 'warningOutline',
+};
+const CONFIRM_MODAL_ICON_COLOR = {
+    positive: modalTokens.modal.confirm.positive.icon,
+    negative: modalTokens.modal.confirm.negative.icon,
+};
+const TITLE_ICON_SIZE = Number(modalTokens.modal.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-padding-y) var(--sd-modal-modal-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-title-icon);height:var(--sd-modal-modal-title-icon);margin:0 auto var(--sd-modal-modal-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);text-align:center;margin:0 0 var(--sd-modal-modal-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-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);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:var(--sd-modal-modal-message-typography-line-height);color:var(--sd-modal-modal-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-button-gap);margin-top:32px}`;
+
+const SdConfirmModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.close = index.createEvent(this, "sdClose");
+        this.confirm = index.createEvent(this, "sdConfirm");
+    }
+    get el() { return index.getElement(this); }
+    hasSlottedContent = false;
+    customContentRef;
+    slotObserver;
+    type = 'positive';
+    modalTitle = '';
+    titleClass = '';
+    topMessage = [];
+    bottomMessage = [];
+    mainButtonName;
+    mainButtonLabel = '확인';
+    subButtonLabel = '';
+    tagPreset = 'square_sm_grey';
+    tagLabel = '';
+    slotLabel = '';
+    tagContents;
+    close;
+    confirm;
+    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 (index.h("div", { key: '6fc7e6c41e74e44c1eb6228375a8230ffa46dab5', class: "sd-confirm-modal" }, index.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() }), index.h("sd-icon", { key: '8d80711f1ddea567a388b0ad7c76608f0d794fde', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor }), index.h("h2", { key: '47dcfe8774e2d14d4edc8d1c23fff413146119e6', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'fb18833bd9f5cb858f2f5b05b7b45d5e0f3cdb72', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '9d158176578cb4374fe1ca37b62b4d61e81df6a1', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '4f781266ecdd43ac51195e1ee473d67d2bcff681', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+                this.customContentRef = el;
+            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '04baced447a0cf11406df52b734f73ea39ff00d2', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '7054a3388d93610b21152c4c3df34445b7b64cdd', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: '25fdec9094700beaf4d6fa0dee15920d6c3c294a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), index.h("sd-button-v2", { key: '7611e5b0a187b1588026308220b09e3239f59463', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+    }
+};
+SdConfirmModal.style = sdConfirmModalCss();
+
+const NOTICE_BUTTON_PRESET = 'neutral_outline_md';
+
+const sdNoticeModalCss = () => `sd-notice-modal{display:block;width:fit-content;min-width:520px}sd-notice-modal .sd-notice-modal{position:relative;padding:var(--sd-modal-modal-padding-y) var(--sd-modal-modal-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-notice-modal .sd-notice-modal__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-notice-modal .sd-notice-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);text-align:center;margin:0 0 var(--sd-modal-modal-body-gap) 0}sd-notice-modal .sd-notice-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-body-gap)}sd-notice-modal .sd-notice-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);text-align:center;margin:0}sd-notice-modal .sd-notice-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-notice-modal .sd-notice-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)}sd-notice-modal .sd-notice-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-button-gap);margin-top:32px}`;
+
+const SdNoticeModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.close = index.createEvent(this, "sdClose");
+        this.confirm = index.createEvent(this, "sdConfirm");
+    }
+    get el() { return index.getElement(this); }
+    hasSlottedContent = false;
+    customContentRef;
+    slotObserver;
+    modalTitle = '';
+    titleClass = '';
+    topMessage = [];
+    bottomMessage = [];
+    mainButtonLabel = '확인';
+    subButtonLabel = '';
+    tagPreset;
+    tagLabel = '';
+    slotLabel = '';
+    tagContents;
+    close;
+    confirm;
+    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 hasTagContent() {
+        return !!(this.tagLabel && this.tagPreset);
+    }
+    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-notice-modal')) &&
+            (node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
+        if (hasSlottedContent !== this.hasSlottedContent) {
+            this.hasSlottedContent = hasSlottedContent;
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'bdabd03353df6668e77ea29477e79586b9ee18ad', class: "sd-notice-modal" }, index.h("sd-icon", { key: '2369161b7a25a72da40235f32f6cc006c8b060bd', class: "sd-notice-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), index.h("h2", { key: '9a8b1c37f874b5299911ae5f081f692cd2bce470', class: `sd-notice-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'c44382d6484301d3ed4081cda456628bad387f53', class: "sd-notice-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '81ff93a305aeb3e1fac90362e0a5158355b96d88', class: "sd-notice-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-notice-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '5d3131ed1aba498fdadf4b035df9c1b178dd1b36', class: "sd-notice-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-notice-modal__custom-content", ref: el => {
+                this.customContentRef = el;
+            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && index.h("span", { class: "sd-notice-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '0c9e040dbcdb0873f6a4e1606ef0fa9729340860', class: "sd-notice-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-notice-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '7fe0737620fd3583300a62eb5b55704147a7511e', class: "sd-notice-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: '70f0d98a14eb0184ac08cd16aa0676e848fa035d', name: NOTICE_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), index.h("sd-button-v2", { key: '54554ce5c26fa59924db03728628cca8538de081', name: NOTICE_BUTTON_PRESET, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+    }
+};
+SdNoticeModal.style = sdNoticeModalCss();
+
+exports.sd_confirm_modal = SdConfirmModal;
+exports.sd_notice_modal = SdNoticeModal;

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

@@ -37,7 +37,7 @@ const SdDatePicker = class {
         this.viewChange.emit(e.detail);
     };
     render() {
-        return (index.h("div", { key: '45d377178babbbf10004c3551de90abb1f8137cc', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: '7850afd672ecbdcbee68002add8a7ee3b223fc20', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '5b37640ab87c5a963bf153943f42467e3fa5dbfc', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '3585b5cee494f3d0871d50f47351cf278b493c35', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '5ebb7dd31aac4a7e8402a4bc393ef6b2afaea0c2', class: "sd-date-picker__menu" }, index.h("sd-calendar", { key: 'e7150c47392fab2a79442e0ca86912e1bb534c9d', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
+        return (index.h("div", { key: '9f1e5b391dec4623e6f628449a459ab1a6f6ec7d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.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() }, index.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 && (index.h("sd-portal", { key: '9b85074b30fc5d6e8204c1e815fe325871e8205a', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: 'fff4a6d1d2b1c0923b74abcf453a32829ee5865a', class: "sd-date-picker__menu" }, index.h("sd-calendar", { key: 'f157822fca3dffb9fbbaa05e9d9ba67ba6a440bb', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
     }
 };
 SdDatePicker.style = sdDatePickerCss();

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

@@ -4,18 +4,7 @@ var index = require('./index-Qvv0fGgj.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
 var sdButtonV2_config = require('./sd-button-v2.config-DniiNqy_.js');
 var component_button = require('./component.button-BjTPq93d.js');
-
-const color = {
-	bg: {
-		accent: {
-			"default": "#0075FF"}},
-	content: {
-		secondary: "#555555",
-		inverse: "#FFFFFF"
-	}};
-var systemTokens = {
-	color: color
-};
+var system = require('./system-lN7yOMPF.js');
 
 const DROPDOWN_BUTTON_NAMES = Object.keys(sdButtonV2_config.BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
 const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, sdButtonV2_config.BUTTON_CONFIG[name]]));
@@ -35,9 +24,9 @@ const PRESET_DIVIDER_COLORS = {
     danger: component_button.buttonTokens.danger.strong.dropdown.divider,
     danger_outline: PRESET_BORDER_COLORS.danger_outline,
 };
-const MENU_ITEM_COLOR = systemTokens.color.content.secondary;
-const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
-const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.content.inverse;
+const MENU_ITEM_COLOR = system.systemTokens.color.content.secondary;
+const MENU_ITEM_ACTIVE_BACKGROUND = system.systemTokens.color.bg.accent.default;
+const MENU_ITEM_ACTIVE_COLOR = system.systemTokens.color.content.inverse;
 const PRESET_MENU_ITEM_COLORS = {
     primary: MENU_ITEM_COLOR,
     secondary: MENU_ITEM_COLOR,
@@ -257,7 +246,7 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (index.h("div", { key: '69db2205a157752f264128ed38c541edf7ae155a', class: "sd-dropdown-button" }, index.h("button", { key: 'a765967799282988bd05f06750828024a94c11a4', 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 (index.h("div", { key: 'd2c725861a4667633a2726b47101d604436c5c16', class: "sd-dropdown-button" }, index.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: {
                 '--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],
@@ -268,10 +257,10 @@ const SdDropdownButton = class extends baseDropdownEvent.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,
-            } }, index.h("span", { key: '9df1ce5517422a283015d3e06068ced63b7b7ffe', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: 'c3c577e7366c66fbc17457d26b0c07ac3e8d4553', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: '6df1177a45e91f5588c5c0688662e04b681a1b5e', class: {
+            } }, index.h("span", { key: '595bf90d834102371492f478e23f7886ec7e5dcf', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: '79a12ecba11d82944e2563d60dfb76c5a9bb9a39', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: '7160b1e8f7e25d822c539a57ab19ee2572c7b146', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, index.h("sd-icon", { key: '702ed4e27a5de332396d23c35405b4e9217162a8', name: "arrowDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, index.h("sd-icon", { key: 'd041b1bfb0bb902f5b670fbf5524babfa0ee47ac', name: "arrowDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -100,15 +100,15 @@ const SdFilePicker = class {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (index.h("div", { key: 'cb3a96b8911cb422bb30623d86b94b5c536f8f44', class: {
+        return (index.h("div", { key: 'f1a0f3eaf06618eb5e4c08f465425eeb969fffaa', 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) }, index.h("input", { key: 'f507cd78ac9a05eea64b209f11ed9ab048a925ca', 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 }), index.h("sd-icon", { key: '33f42ba84419b72a941b5e3162531fa795744525', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: '6e4252b659bc19d8f8841ff874a7bf50c86cee48', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("input", { key: '759217d5121c7b97dab6c70516efbf79b836884e', 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 }), index.h("sd-icon", { key: '95f94370b7b64e16220b7e4a63d4613790bb6e28', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: '1bae1466b85d68719bd558a67c64e86c6070b9d0', 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 && (index.h("sd-icon", { key: '5879b1d0783ad1fbdbe44621efc42c86ea13a9af', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { key: '59718655bc66a60ee7d1ca53e78a1deea592406d', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (index.h("sd-icon", { key: 'd45e9a39d8c2661f8e92bd7760c36b170c1a76c0', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { key: '8bcd7f87363167c482f3b99d931443491eaa7bbe', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -55,9 +55,9 @@ const SdGuide = class {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (index.h("div", { key: 'f10eb9b582266dc73234300007bbec176386bf14', class: "sd-guide", style: {
+        return (index.h("div", { key: '9dc36025eb3c7571bda1eefaee5dafd1f040ff30', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, index.h("sd-button", { key: '3b892dcc695f88a2085e0c69198951540153efa2', 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 && (index.h("sd-portal", { key: '8570eeb1d7a38e93934f132d97e25546a1234947', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '3fafc9a5c8251232f7d8991523d6e2fa3e1b039b', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '61da683399da9f2e3947173087e1ae4394994043', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '2614f524d0b7174a6b8d106ba6d7eb02914fe5c3', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: '8504a3a24c4d3b49b5d1f7f1492420fc124c3ee8', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: 'dac3e6e8429b21681d575e0b0908533a70753e33', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: '857808973c156e55473c97ddbf58990dfead8d22', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: '5ac7e38ba2b09fed2a09acce53e387a2e013bb65', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, index.h("sd-button", { key: '8b64096d65f427d62b783903ed58d8569a8f60c1', 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 && (index.h("sd-portal", { key: '255c720a0b9fe59e55bd53bd8463a18586b311c0', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '0b367183b33c6299afd7525b0ee09f342d1f3a53', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '2c8f947b3e127b968a62ad5965a040ae3f915484', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '856eba0563552527573e778cf26102a5bc47750c', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: '4741f95d5b63475bafc6cc3cd78f675c68ea1dd7', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '1b2a1303d08fe08b362300a0565ded6bff897159', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: '062bf0c82c7330cc93301d757316d6e691871c86', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: 'e2a239b690587639422d5d7a8dfeff2682198d27', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/cjs/sd-modal-container.cjs.entry.js

@@ -0,0 +1,263 @@
+'use strict';
+
+var index = require('./index-Qvv0fGgj.js');
+
+const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 10000);display:flex;align-items:center;justify-content:center}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1}sd-modal-container .sd-modal-container__content{position:relative;z-index:1;display:grid;place-items:center}sd-modal-container .sd-modal-container__content>*{grid-row:1;grid-column:1}sd-modal-container .sd-modal-container__modal{opacity:0;transform:scale(0);transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
+
+let modalIdCounter = 0;
+const ANIMATION_DURATION = 350;
+const SdModalContainer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    entries = [];
+    isVisible = false;
+    isBackdropVisible = false;
+    contentRef;
+    containerDismissTimerId;
+    handleKeydown(e) {
+        if (e.key === 'Escape') {
+            const top = this.getTopEntry();
+            if (!top)
+                return;
+            if (top.persistent) {
+                this.shakeModal(top.modalEl);
+                return;
+            }
+            this.requestDismiss(top.id, 'cancel');
+        }
+    }
+    async open(options, chain) {
+        const id = `modal-${++modalIdCounter}`;
+        const modalEl = this.createConfirmModal(id, options);
+        if (this.containerDismissTimerId) {
+            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.isVisible = true;
+        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 update(id, props) {
+        const entry = (this.entries ?? []).find(e => e.id === id);
+        if (!entry || entry.closing)
+            return;
+        this.applyProps(entry.modalEl, props);
+    }
+    createConfirmModal(id, options) {
+        const el = document.createElement('sd-confirm-modal');
+        el.setAttribute('data-modal-id', id);
+        el.classList.add('sd-modal-container__modal');
+        this.applyProps(el, options);
+        el.addEventListener('sdConfirm', () => {
+            this.requestDismiss(id, 'confirm');
+        });
+        el.addEventListener('sdClose', () => {
+            this.requestDismiss(id, 'cancel');
+        });
+        return el;
+    }
+    applyProps(el, options) {
+        if (this.hasOwnProp(options, 'type'))
+            this.setAttr(el, 'type', options.type);
+        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, 'mainButtonName')) {
+            this.setAttr(el, 'main-button-name', options.mainButtonName);
+        }
+        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;
+    }
+    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)
+            return;
+        if (top.persistent) {
+            this.shakeModal(top.modalEl);
+            return;
+        }
+        this.requestDismiss(top.id, 'cancel');
+    };
+    shakeModal(modalEl) {
+        const cls = 'sd-modal-container__modal--shake';
+        modalEl.classList.remove(cls);
+        modalEl.addEventListener('animationend', () => modalEl.classList.remove(cls), { once: true });
+        requestAnimationFrame(() => {
+            modalEl.classList.add(cls);
+        });
+    }
+    disconnectedCallback() {
+        (this.entries ?? []).forEach(entry => {
+            if (entry.dismissTimerId)
+                clearTimeout(entry.dismissTimerId);
+        });
+        if (this.containerDismissTimerId)
+            clearTimeout(this.containerDismissTimerId);
+    }
+    getTopEntry() {
+        return [...(this.entries ?? [])].reverse().find(entry => !entry.closing);
+    }
+    requestDismiss(id, reason) {
+        const entry = (this.entries ?? []).find(item => item.id === id);
+        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;
+        }
+        const dismissTimerId = setTimeout(() => {
+            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();
+    }
+    finalizeDismiss(id) {
+        const entry = (this.entries ?? []).find(item => item.id === id);
+        if (!entry)
+            return;
+        if (entry.dismissTimerId)
+            clearTimeout(entry.dismissTimerId);
+        entry.modalEl.remove();
+        const nextEntries = (this.entries ?? []).filter(item => item.id !== id);
+        this.entries = nextEntries;
+        if (nextEntries.length === 0) {
+            this.containerDismissTimerId = setTimeout(() => {
+                if ((this.entries ?? []).length === 0) {
+                    this.isVisible = false;
+                }
+                this.containerDismissTimerId = undefined;
+            }, ANIMATION_DURATION);
+        }
+    }
+    waitForModalReady(modalEl) {
+        const componentOnReady = modalEl.componentOnReady;
+        if (typeof componentOnReady === 'function') {
+            return componentOnReady.call(modalEl).then(() => undefined);
+        }
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => resolve());
+            });
+        });
+    }
+    hasOwnProp(options, key) {
+        return Object.prototype.hasOwnProperty.call(options, key);
+    }
+    setAttr(el, name, value) {
+        if (value == null)
+            return;
+        el.setAttribute(name, value);
+    }
+    render() {
+        if (!this.isVisible)
+            return null;
+        return (index.h("div", { class: "sd-modal-container" }, index.h("div", { class: {
+                'sd-modal-container__backdrop': true,
+                'sd-modal-container__backdrop--visible': this.isBackdropVisible,
+            }, onClick: this.handleBackdropClick }), index.h("div", { class: "sd-modal-container__content", ref: el => { this.contentRef = el; } })));
+    }
+};
+SdModalContainer.style = sdModalContainerCss();
+
+exports.sd_modal_container = SdModalContainer;

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

@@ -48,14 +48,14 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (index.h(index.Fragment, { key: '5503def56cb2dfa1e7374dc8d2968df5c0268f5f' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: 'ccd8b25cc328a78e66315745cd39e849abc1e2a1', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: 'b1359221e2bb9a7bfa36526620734c149ef2d3fe', class: {
+        return (index.h(index.Fragment, { key: '205b8f574ce69afcb2abef1b0d0d6ec769230783' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: 'af82589e6ed773709c83a6855c37b1ac7092b9ec', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: 'dfee40fa54b436a43583ebdc71830e6d590e1793', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, index.h("i", { key: 'f580b4344ae76e817e689889c9432b95e20a673d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'b0afd933d6782a31a30f3146f65590228efe22a3' })), index.h("div", { key: '97d42bf0a82251015a44437115fe1c3ebd517fd4', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '87573bec4894f55e537ac8d311e6bcc78343f034', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '58e7ef0535df0f10d7691bfe9794fd79b24a185d', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: 'bfbf4325963d09c22bcac0dbe1817360fed6d3bf', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'beec3d7985e50ab056254883bb79621689ce12d8', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '88709a46eee690e0d00667ea0e03ee21eedc8f46', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
+            } }, index.h("i", { key: '388ac52f514ddd9247e79d20309a1de029fcd601', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '2502e1a63e3dca7e9c6d66805a9ec04e3106dd99' })), index.h("div", { key: 'e12b0df1dbdfe4b34de81ed231e1578bb5361afa', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '91f068beee3338f547157db06a0eee4f5e88355d', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '1283a6209c1c062d925ae1c32ba2a4f2aa98c8fa', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '130f5468eb8ac34bb02dce9a5a55c1fad17c8dcf', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: '330fb79d032bac9da45afec3ccf0f2ec6e3dafba', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '7ba5d1e112ac776bb29253ac2cee510d36147ced', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get watchers() { return {
         "show": [{

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

@@ -41,10 +41,10 @@ const SdProgress = class {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (index.h("div", { key: '16662bc1806f9a33de6e90af3f8f285b322a2204', style: {
+        return (index.h("div", { key: '864f669831515b9c149ad579b6233e960eee79a9', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: 'c4dc49fbcdf9affee2470251fd9226cb262af045', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '42920cc06b249371ec7d98c07d2185d71265a538', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (index.h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, index.h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

package/dist/cjs/sd-radio-button-group.cjs.entry.js

@@ -45,7 +45,7 @@ const SdRadioButtonGroup = class {
     }
     groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
     render() {
-        return (index.h("div", { key: 'aa32ede3f18631ded3608ce415e7d9e6e365ca97', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
+        return (index.h("div", { key: '05df370841cb40291e350df3c7edf6b75be01f14', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (index.h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, index.h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-button-group__label" }, option.label)));

package/dist/cjs/sd-radio-group.cjs.entry.js

@@ -29,7 +29,7 @@ const SdRadioGroup = class {
         return classes.join(' ');
     }
     render() {
-        return (index.h("div", { key: '77ac0af3226b888547fd9fcb4f05a3cc402f6d09', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
+        return (index.h("div", { key: '264fed43fa10c8869762dab2b0530989e7901178', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
             return (index.h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: this.value, label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }