@sellmate/design-system 0.0.49 → 0.0.51

package/dist/cjs/{sd-button_12.cjs.entry.js → sd-button_15.cjs.entry.js}

@@ -1,10 +1,9 @@
 'use strict';
 
 var index = require('./index-Bxead0A0.js');
-var resolveColor = require('./resolveColor-CauSLF0s.js');
+var resolveColor = require('./resolveColor-DxvExwgo.js');
 var selectKeyboardNavigation = require('./select-keyboard-navigation-6fO_V4En.js');
 var tooltipArrow = require('./tooltipArrow-C7cIAuTo.js');
-require('./color-Oz29vj7L.js');
 
 const sdButtonCss = "sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}";
 
@@ -148,6 +147,84 @@ const SdCheckbox = class {
 };
 SdCheckbox.style = sdCheckboxCss;
 
+const sdGuideCss = "@charset \"UTF-8\";sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-block;height:fit-content}sd-guide .sd-guide{display:inline-block}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #12b553}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:\"-\";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:\"•\"}.sd-guide__popup__list__item--depth-2{padding-left:26px}";
+
+const GUIDE_LABEL = {
+    help: '활용 TIP',
+    pdf: 'PDF Guide',
+    youtube: 'Video Guide',
+    notion: '사용법 안내',
+    event: 'Event Button',
+};
+const GUIDE_ICON = {
+    help: {
+        name: 'helpOutline',
+        size: 20,
+        color: resolveColor.colors.green_70,
+    },
+    pdf: { name: 'pdf', size: 20, color: resolveColor.colors.red_75 },
+    youtube: { name: 'youtube', size: 20, color: resolveColor.colors.red_75 },
+    notion: { name: 'notion', size: 16, color: resolveColor.colors.black },
+    event: { name: 'event', size: 16, color: resolveColor.colors.brilliantblue_70 },
+};
+const SdGuide = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    type = 'help';
+    label = '';
+    message = '';
+    guideUrl = '';
+    popupTitle = '';
+    popupWidth;
+    popupShow = false;
+    guideRef;
+    handleClickGuide = () => {
+        if (this.type === 'help') {
+            this.popupShow = !this.popupShow;
+            return;
+        }
+        if (this.guideUrl) {
+            window.open(this.guideUrl, '_blank');
+        }
+    };
+    get guideClass() {
+        const classes = ['sd-guide', `sd-guide--${this.type}`];
+        if (this.popupShow)
+            classes.push('sd-guide--active');
+        return classes.join(' ');
+    }
+    closeDropdown = () => {
+        this.popupShow = false;
+    };
+    render() {
+        const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
+        return (index.h(index.Host, { key: '32cff34a733ab423b4db37aaa91f4c63152566a3', style: {
+                '--sd-guide-color': GUIDE_ICON[this.type].color,
+            } }, index.h("sd-button", { key: '7efc84462239fcab6ac7d532d75ff418bebee957', 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: '9868dd7fd8b5e42cfd6b2011c2a8679a8f9ece02', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '974448ac29c162372a7a5e8ba12c493d4e8a2287', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: 'e28679c5cdeac9ca8e0b5701d4979a94a7c4f182', class: "sd-guide__popup__close", icon: "close", color: resolveColor.colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            // buttonStyle={{ padding: '0px', minHeight: '0px' }}
+            onSdClick: this.closeDropdown }), index.h("div", { key: 'c598b70154a4b2c4a4a2790a0072eaf4f7de7099', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '6837f7934c24a7da2bf0558d7cdcd5effcdb5481', name: "helpOutline", size: 24, color: resolveColor.colors.green_65 }), index.h("h3", { key: '6b7b8f9d6f3602f3cd036efdd308318988ce339b', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: 'fbee7a0d4ad49cd6cac2ef5bb4617937aaff5882', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+    }
+    // 현재 2depth까지만 스타일 적용
+    renderListItem(message, depth = 0) {
+        const listItems = [];
+        if (Array.isArray(message)) {
+            const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
+            listItems.push(...depthMsg.flat());
+        }
+        else {
+            listItems.push(this.renderLi(message, depth));
+        }
+        return listItems;
+    }
+    renderLi = (message, depth) => {
+        const listContent = message.replace(/ /gi, ' ');
+        return (index.h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, index.h("p", { innerHTML: listContent })));
+    };
+};
+SdGuide.style = sdGuideCss;
+
 const Add8 = (props) => (index.h("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M3.99969 0.633484C4.16537 0.633484 4.29948 0.767622 4.2995 0.933289V3.69989H7.06708C7.23245 3.70014 7.36672 3.8343 7.36688 3.99969C7.36688 4.16523 7.23255 4.29925 7.06708 4.2995H4.2995V7.06708C4.29925 7.23255 4.16523 7.36688 3.99969 7.36688C3.8343 7.36672 3.70014 7.23245 3.69989 7.06708V4.2995H0.933289C0.767622 4.29948 0.633484 4.16537 0.633484 3.99969C0.633648 3.83416 0.767724 3.69991 0.933289 3.69989H3.69989V0.933289C3.69991 0.767724 3.83416 0.633648 3.99969 0.633484Z", fill: "currentColor" })));
 
 const Add10 = (props) => (index.h("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M5 0.766602C5.22088 0.766602 5.40034 0.946123 5.40039 1.16699V4.59961H8.83398C9.05461 4.59978 9.23317 4.77939 9.2334 5C9.2334 5.22081 9.05475 5.40022 8.83398 5.40039H5.40039V8.83398C5.40021 9.05475 5.22081 9.2334 5 9.2334C4.77939 9.23317 4.59979 9.05461 4.59961 8.83398V5.40039H1.16699C0.946123 5.40034 0.766602 5.22088 0.766602 5C0.766833 4.77931 0.946265 4.59966 1.16699 4.59961H4.59961V1.16699C4.59966 0.946265 4.77931 0.766833 5 0.766602Z", fill: "currentColor" })));
@@ -2157,7 +2234,7 @@ const SdIcon = class {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (index.h("i", { key: '856cad8bb2373b0d86734443144f79770c0715ec', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: 'd2a06ebbda1317cb72fec996b3bf3008ba171070', color: this.resolvedColor })));
+        return (index.h("i", { key: 'dc540c5746fedd2fed7bdf8e179b56878abe5a3b', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: 'ff1e903198b5362d8e3521c6477ddd0b96948ad9', color: this.resolvedColor })));
     }
 };
 SdIcon.style = sdIconCss;
@@ -2262,11 +2339,11 @@ const SdInput = class {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (index.h(index.Host, { key: '0fc9bec4559137ede7daa7f2da5df00595991d5a', style: inputWidth }, this.label && index.h("div", { key: '3fd4e7d08aca431d7743ec4249a221c77f2fefd1', class: "sd-input__label" }, this.label), index.h("label", { key: 'bc80c41ffcb1312261b1139dcd0c390db32932df', class: {
+        return (index.h(index.Host, { key: 'f793db1bf48fccad644292b06e725676568d2686', style: inputWidth }, this.label && index.h("div", { key: '1f59002678f46ffdfeb47a0adb9b48ad74c24191', class: "sd-input__label" }, this.label), index.h("label", { key: '2fa9f8744f1e6357aa864ea4b97685d35fd0e712', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("slot", { key: 'b1df6c52c2dc92adde26cd535b008d35bc1c73d2', name: "prefix" }), index.h("input", { key: '5c02cca10b415521d569151c3b05cd9b2ae4b9b7', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), index.h("slot", { key: 'f85912a8f17712d0a4950a68d10d885556a1de44', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: '3087e7d22f06e2b29d17b37d2e95bdcbcc511bd4', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("slot", { key: '6baa7f30c5057bcd96167741b7219877a0de8b81', name: "prefix" }), index.h("input", { key: 'd3210037a23b3015a3650f2771f0205d3baa9af8', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), index.h("slot", { key: '72cc3cf71cdcab1e540f68c54a7a7715cb73af83', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: '04a65fa5e2042ffad00a2cfae10d77babdeaaf28', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);
@@ -2286,7 +2363,7 @@ const SdLoadingSpinner = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'd064701b25e190fc5b7feefb542cbc7d30afc3f3' }, index.h("svg", { key: 'ec37a9ebea3e5b48817c687fae543186bb3cf29a', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, index.h("circle", { key: '0b61caa65955019ddb08ed52a51718cf3f55a6e3', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (index.h(index.Host, { key: '7538c9986c448d666ea1993324d8fd811c2ba289' }, index.h("svg", { key: '7e254a0b15ecda3e480582c336b33b1020715125', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, index.h("circle", { key: '8a6356ba2e8d42c9d1c789ba5676ca6f7485cda1', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss;
@@ -2365,12 +2442,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'c8c241301297c8281d02643f5a31c97f77706fff', class: this.paginationClasses }, index.h("div", { key: '12ca5b852a648b168928934729d2215f6648bcc1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (index.h("div", { key: 'e3abf3098a37fe058088304eefcfa9b6abbdbcaa', class: this.paginationClasses }, index.h("div", { key: '19db1f5ed8fd2ab9b4f6793b474bf4dd3f48f21c', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '0ff537ba6e5985be1e055f5b9eab5dd86dd11624', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '63096633349b138d679b2a735d0e8d246dfde312', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss;
@@ -2493,9 +2570,74 @@ const SdPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return index.h("slot", { key: '2f6a1908864a2b5bbe86127fbf41b6b44a599666' });
+        return index.h("slot", { key: 'a2227a90c04b58d7f8c468ebc84f0627055d4da8' });
+    }
+};
+
+const sdRadioGroupCss = "sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}sd-radio-group .sd-radio-group__option{width:fit-content;display:flex;align-items:center;gap:8px;font-weight:400;font-size:12px;line-height:20px;cursor:pointer}sd-radio-group .sd-radio-group__option:has(input:disabled){cursor:default}sd-radio-group .sd-radio-group__option input{position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;cursor:pointer;accent-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked{border-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked::before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075ff}sd-radio-group .sd-radio-group__option input:disabled{cursor:default;border-color:#cccccc;background-color:#eeeeee}sd-radio-group .sd-radio-group__option input:disabled:checked::before{background-color:#cccccc}sd-radio-group .sd-radio-group__option input:not(:disabled):hover{border-color:#0075ff;background-color:#d9eaff}sd-radio-group .sd-radio-group__label{font-size:12px;color:#333333;line-height:20px;user-select:none}sd-radio-group .sd-radio-group__option--disabled .sd-radio-group__label{color:#888888}";
+
+const SdRadioGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sdChange = index.createEvent(this, "sdChange");
+    }
+    value;
+    radioOptions = [];
+    direction = 'vertical';
+    disabled = false;
+    name;
+    selectedValue;
+    sdChange;
+    componentWillLoad() {
+        if (this.value) {
+            this.selectedValue = this.value;
+        }
+    }
+    valueChanged(newValue) {
+        this.selectedValue = newValue;
+    }
+    handleRadioChange = (optionValue, optionDisabled) => {
+        if (this.disabled || optionDisabled)
+            return;
+        this.selectedValue = optionValue;
+        this.value = optionValue;
+        this.sdChange.emit(optionValue);
+    };
+    isOptionSelected(option) {
+        return this.selectedValue === option.value;
+    }
+    isOptionDisabled(option) {
+        return this.disabled || !!option.disabled;
+    }
+    getRadioClasses(option) {
+        const classes = [
+            'sd-radio-group__option',
+            this.isOptionSelected(option)
+                ? 'sd-radio-group__option--selected'
+                : 'sd-radio-group__option--unselected',
+        ];
+        if (this.isOptionDisabled(option)) {
+            classes.push('sd-radio-group__option--disabled');
+        }
+        return classes.join(' ');
+    }
+    getGroupClasses() {
+        const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];
+        return classes.join(' ');
+    }
+    render() {
+        const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
+        return (index.h("div", { key: 'f817ced0e784c418c09c6c3e1cd6d9e045d32598', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index$1) => {
+            const isSelected = this.isOptionSelected(option);
+            const isDisabled = this.isOptionDisabled(option);
+            return (index.h("label", { key: `radio-${index$1}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, index.h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-group__label" }, option.label)));
+        })));
     }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
 };
+SdRadioGroup.style = sdRadioGroupCss;
 
 const sdSelectCss = ".sd-select__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select{display:flex;width:var(--select-width, 200px);height:28px;position:relative;color:#333333;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select:hover:not(.sd-select--disabled){background:#f6f6f6}.sd-select.sd-select--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select.sd-select--disabled .sd-select__label{border-right:1px solid #cccccc}.sd-select.sd-select--disabled .sd-select__trigger{color:#888888}.sd-select.sd-select--disabled .sd-select__trigger:focus,.sd-select.sd-select--disabled .sd-select__trigger:focus-visible,.sd-select.sd-select--disabled .sd-select__trigger:focus-within{outline:none !important}.sd-select__label{font-size:12px;line-height:20px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6;display:inline-block;white-space:nowrap}.sd-select__container{position:relative;width:100%;display:flex}.sd-select__container .sd-select__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select__container .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}.sd-select__container .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select__container .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select__container .sd-select__arrow--open{transform:rotate(180deg)}.sd-select__dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column}.sd-select__dropdown .sd-select__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select__dropdown .sd-select__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select__dropdown .sd-select__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";
 
@@ -2701,11 +2843,11 @@ const SdSelect = class extends selectKeyboardNavigation.BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (index.h(index.Host, { key: '94880c07678eb6a478c9c80de0c42c5c7724936e', style: style }, index.h("div", { key: '872f918214118adb99b50533c323e9de7ca27353', class: {
+        return (index.h(index.Host, { key: 'a99d2903e6156a30aa834dea2344829edbde67cb', style: style }, index.h("div", { key: '39862875a121d9add2c0101d81e223d475d14abb', class: {
                 'sd-select': true,
                 'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: '30e44d67c6d8b81c59c798ffa4de43337de6f195', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: '6a7e4ffc442e4edfe508e60c8b578f8c8fb5e409', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -2776,7 +2918,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '70eafe63e44409063337d0a43846c3be869086df' }, index.h("div", { key: '21cafb06d87968387f9b9ec91fdd09643cded1ca', class: {
+        return (index.h(index.Host, { key: '7cf5b51057f8eb7ad7cf7143225bcd842e5fa231' }, index.h("div", { key: 'ab9e02db38a0717b9aeb85890b150a6e59a9f7ee', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -2798,7 +2940,7 @@ const SdSelectOption = class {
 };
 SdSelectOption.style = sdSelectOptionCss;
 
-const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;min-height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner{position:absolute;top:0;left:0;width:var(--table-width, 100%);height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{padding-top:15%;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0 !important}.sd-table__wrapper .sd-table__virtual-spacer td,.sd-table__wrapper .sd-table__virtual-row-spacer td{padding:0 !important;border:none}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background-image:repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));background-size:100% 200%;animation:skeleton-loading 1.5s ease-in-out infinite;position:relative}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #e1e1e1 calc(var(--row-height, 44px) - 1px), #e1e1e1 var(--row-height, 44px));pointer-events:none}.sd-table__wrapper .sd-table__skeleton-cell{width:100%;height:20px;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}";
+const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;min-height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner{position:absolute;top:0;left:0;width:100%;height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{padding-top:15%;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0 !important}.sd-table__wrapper .sd-table__virtual-spacer td,.sd-table__wrapper .sd-table__virtual-row-spacer td{padding:0 !important;border:none}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background-image:repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));background-size:100% 200%;animation:skeleton-loading 1.5s ease-in-out infinite;position:relative}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #e1e1e1 calc(var(--row-height, 44px) - 1px), #e1e1e1 var(--row-height, 44px));pointer-events:none}.sd-table__wrapper .sd-table__skeleton-cell{width:100%;height:20px;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}";
 
 const SdTable = class {
     constructor(hostRef) {
@@ -2972,6 +3114,12 @@ const SdTable = class {
                     this.cachedContainerHeight = this.scrollContainer.clientHeight;
                     this.cachedContainerWidth = this.scrollContainer.clientWidth;
                     middle.addEventListener('scroll', this.onScroll, { passive: true });
+                    if (this.useVirtualScroll.vertical) {
+                        this.calculateVisibleRange();
+                    }
+                    if (this.useVirtualScroll.horizontal) {
+                        this.calculateVisibleColumnRange();
+                    }
                     this.onScroll();
                 }
             });
@@ -3435,16 +3583,16 @@ const SdTable = class {
             }, "aria-hidden": "true" }, index.h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (index.h(index.Host, { key: '8c01d8c3b3428d0fccb37e337fd12412c7aee51a' }, index.h("div", { key: 'be41d64f4b9daaa1440f2a89e253ce487894758e', class: "sd-table__wrapper", style: {
+        return (index.h(index.Host, { key: '1c762116fd35be7070aea38b052f8f619176cd32' }, index.h("div", { key: '4201639381ebbe400ab124e1ab0e2badd3ffba9e', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, index.h("div", { key: '580c4ca69d5374585eeacc756561e5caf2ea6e29', class: "sd-table__container", style: {
+            } }, index.h("div", { key: 'c17c7b76ab6f33faf605ad2c4f023f5f0411c847', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, index.h("div", { key: '2832a6e9078923daeefa28512450950abfca0aad', class: {
+            } }, index.h("div", { key: 'd7b1e53fbbe6c8c282b6455a113aa1fb7abf0f13', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (index.h("div", { key: '696cc35d6d3c58dabf92aa49dbff9a7034a0ed64', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '8cbd272006b64c4a6e10c87c58313a0792358451' }))), index.h("table", { key: 'de78dba38361cfebe39f8c3cddb57a1c93861ff6', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), index.h("div", { key: '662407b29c2ea446d96553dd548bec11e8179185', class: "sd-table__bottom" }, !this.paginatedRows.length && (index.h("div", { key: '3a475142c5da9cc40f92b761923415893a1366fa', class: "sd-table__no-data" }, index.h("slot", { key: '49e90e85516b6656c7019b4b33a50f6b36d949a8', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '460a669cb3841fdc7745e4acb774729910890b42', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '971f5e41f8df09f4455cdf41f969e5f47d2aac99', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: 'ed37b8efc95ae51bf4c903a5c7c5a068ec9bfcca', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (index.h("div", { key: '3c8d66915131a8388d19c2d6101716d709f29c4a', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '5bd2eb67b7f16929dc4829d3ed069ee7b976f4bf' }))), index.h("table", { key: 'be2d1b31673397a7aebeff85827d40343970aac0', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), index.h("div", { key: 'f6436dc02163f34d3f9efcd6bc312561e88f3d08', class: "sd-table__bottom" }, !this.paginatedRows.length && (index.h("div", { key: 'b0f27e8d1b7343619c356bc0d9c074e4dbe91ff0', class: "sd-table__no-data" }, index.h("slot", { key: '0ea8e9e5624ce063c88b71de32ab7c4607344af9', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '271d506c6f9e98a6f4e69364be977e299fa4f794', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '1bff466793f04d5c76b9682fa546a66f9546cf0a', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '51731aabcbfd68cf606423e008fcc89995419803', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": ["handleColumnsChange"],
@@ -3456,6 +3604,47 @@ const SdTable = class {
 };
 SdTable.style = sdTableBackupCss;
 
+const sdToggleCss = "sd-toggle{display:inline-block;height:20px;line-height:0}sd-toggle .sd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px}sd-toggle .sd-toggle>input{display:none}sd-toggle .sd-toggle__label{font-size:12px;color:#333333;line-height:20px}sd-toggle .sd-toggle__track{width:36px;height:20px;border-radius:12px;background:#cccccc;position:relative;transition:background-color 0.2s ease}sd-toggle .sd-toggle__thumb{width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:transform 0.2s ease}sd-toggle .sd-toggle--checked .sd-toggle__track{background:#0075ff}sd-toggle .sd-toggle--checked .sd-toggle__thumb{transform:translateX(16px)}sd-toggle .sd-toggle--disabled{cursor:not-allowed}sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track{background:#bbdaff}sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track{background:#eeeeee}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track{background:#005cc9}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track{background:#bbbbbb}";
+
+const SdToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sdChange = index.createEvent(this, "sdChange");
+    }
+    value = false;
+    label = '';
+    disabled = false;
+    isChecked = false;
+    sdChange;
+    componentWillLoad() {
+        this.updateCheckedState(this.value);
+    }
+    componentWillRender() {
+        this.updateCheckedState(this.value);
+    }
+    updateCheckedState(value) {
+        this.isChecked = value;
+    }
+    get toggleClasses() {
+        const classes = ['sd-toggle', this.isChecked ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];
+        if (this.disabled) {
+            classes.push('sd-toggle--disabled');
+        }
+        return classes.join(' ');
+    }
+    handleChange = () => {
+        if (this.disabled)
+            return;
+        const newValue = !this.value;
+        this.value = newValue;
+        this.sdChange.emit(newValue);
+    };
+    render() {
+        return (index.h("label", { key: '8b196fae6d8931cdd39c7eea51a7f1f843f4cb75', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '4a60ce883411cb2a598d003ff264fe6659d0df02', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: 'c0fb2edfb1a2854c31fb6eb0a4e4169e2e409db2', class: "sd-toggle__label" }, this.label), index.h("div", { key: 'c9f78f892be478cbd1232722487471eae53bee8a', class: "sd-toggle__track" }, index.h("div", { key: 'b6388556a0d6f4b9f74e6e2684ded4cde93d6384', class: "sd-toggle__thumb" }))));
+    }
+};
+SdToggle.style = sdToggleCss;
+
 const sdTooltipCss = "sd-tooltip [slot=content]{display:none}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__content p{margin:0}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}";
 
 const SdTooltip = class {
@@ -3504,20 +3693,20 @@ const SdTooltip = class {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (index.h(index.Fragment, { key: 'ca85f7063d836f7a33d893d262aea709e0db1d00' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-tooltip-portal", { key: 'ab8656db09fc630085a684ef124486551e33f910', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: 'ccd2369218d5b4dcb23280760c584f214beea932', class: {
+        return (index.h(index.Fragment, { key: '44ccb9c1a2e9113160ccb516e62fbd175e139f50' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-tooltip-portal", { key: '83f82f27164df34a1a8e0d1d8975b4f89a82691a', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: '544085a133cdbbe707ec0c2be35a9a42cd2372bc', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, index.h("i", { key: '077a1c19e4fa7a54a80dff168950ee0327240724', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '09d265c0412099b0bc64e6a5297011d7f4e74bb3', class: {
+            } }, index.h("i", { key: '4b335754d346d6ae244e83ccdcae25edf05a306a', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '567fc901e95b918fb0883f9c241836a10e1e58e9', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), index.h("div", { key: '13a0d079cae19cf77c55b9aa3b8325dc1d4daf82', class: "sd-tooltip-menu__content", ref: el => {
+            } })), index.h("div", { key: '1475d6f5d76f4e3860e2524cb571eb2704460203', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && index.h("span", { key: '79315652fc9db9aca0f06ef0f402d3302b909275' }, this.el.textContent)), this.useClose && (index.h("div", { key: '5ab0323020a5d3f2c13d690a906fde8de9df36c9', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: 'deed089b5bb820f54471d44ff0c69e69ffcddf22', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '6c93da0c7f425ad1111b68c508476db74462e2ad', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && index.h("span", { key: 'f821b0aa74de05c7728b06a2bd78367e43703684' }, this.el.textContent)), this.useClose && (index.h("div", { key: '2068c369ef957cb25b9ec74e22e2c78f9ffa6232', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: 'f61156a86ce1b3fd4f2fb97e507711f9602ac157', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '3ba6f3f4dc5379eb2d13aecb9ec1d5d6fdf20dec', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
 SdTooltip.style = sdTooltipCss;
@@ -3671,20 +3860,23 @@ const SdTooltipPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return index.h("slot", { key: '959737d1d7012ea468ab11bf2f1a8444e5274d4e' });
+        return index.h("slot", { key: '912ff6aba4bae810c40c95325ffb1109ddcfddbb' });
     }
 };
 
 exports.sd_button = SdButton;
 exports.sd_checkbox = SdCheckbox;
+exports.sd_guide = SdGuide;
 exports.sd_icon = SdIcon;
 exports.sd_input = SdInput;
 exports.sd_loading_spinner = SdLoadingSpinner;
 exports.sd_pagination = SdPagination;
 exports.sd_portal = SdPortal;
+exports.sd_radio_group = SdRadioGroup;
 exports.sd_select = SdSelect;
 exports.sd_select_option = SdSelectOption;
 exports.sd_table_backup = SdTable;
+exports.sd_toggle = SdToggle;
 exports.sd_tooltip = SdTooltip;
 exports.sd_tooltip_portal = SdTooltipPortal;
-//# sourceMappingURL=sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map
+//# sourceMappingURL=sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-toggle.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map

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

@@ -11,7 +11,7 @@ const SdCard = class {
     bordered = true;
     class = '';
     render() {
-        return (index.h(index.Host, { key: 'e9653557b36889a75002c32bde005c7b480b2f4b' }, index.h("div", { key: 'e34f53b49bdc412eaf82dbe21918cd6599d1d2c6', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, index.h("slot", { key: 'b5d06b44a1a960fe12424f43a39647a4646610d6' }))));
+        return (index.h(index.Host, { key: 'f19b796cbe69bb22165a52864cf0eef7c8afeac1' }, index.h("div", { key: '2a6272608b5fca143883d477ddb7f8fdb60acb0d', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, index.h("slot", { key: '60f687272faa536e182e9a65ea0c07a233194bd8' }))));
     }
 };
 SdCard.style = sdCardCss;

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

@@ -82,7 +82,7 @@ const SdDatePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (index.h(index.Host, { key: '3fe32fb440e95d43a7ba5ae40eebfec5b1f292f7', class: "sd-date-picker" }, index.h("sd-input", { key: '8aa313f14bd0305c0d28ba8e388c5c7d2ae2d3ec', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '350af44747b5f87c0e25dc01fc8aa25590363d5b', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '1c05d0d0b9cd54bd67b1d4411bd3ad2aded758ba', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '273c93d7b9635ebfab1350568f30da3f62996003', class: "sd-date-picker__menu" }, index.h("div", { key: '9da1cf5d0dc35f00018a2718787007749a84ca99', class: "sd-date-picker__header" }, index.h("div", { key: 'c2afcc7006276eca26d4f0d0c91350a0dee070cf', class: "year-nav" }, index.h("button", { key: '1b53d6e96c6f9ab93d67440450b35be096e9607b', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '7acd8f69406a83bcc9fef1745523d997d1b3f219', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: 'ad5f412960af38938d6efea1f0909293c3c6682c', class: "year-nav__current" }, this.currentYear), index.h("button", { key: 'fe2480d51d8a8a3b09d3d0d5e5c5c53982ebd20d', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: 'e7175f73e5efcef04a2b33a2ee7a57d2b025c3d8', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '76dcf13a864dffcb6a49683b590c19efb05c7367', class: "month-nav" }, index.h("button", { key: '2d300218750da2716e2558ff3145337ee6bcfa80', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '1972506ecb42922b6c742bd34186bdbf23f8d6b5', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '3037310072a6dcb71f2e662fb1dcfa07d44f2a70', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: '7cd60a470fd27f2028935748047f76945fc4fe99', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: 'd656f3dd638cab72e94f12036e77f46b9ab31c7f', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: '1710f916652929515916a122affda7cbdd311153', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: '201f7499819e88f291a3889fcbe854d2e2145fde', class: "sd-date-picker__body" }, [
+        return (index.h(index.Host, { key: '6f835c6778d618a0285dc070c43022e4787e9eb6', class: "sd-date-picker" }, index.h("sd-input", { key: '9d09bd679c1c239ad6106464b9b6b2bd2fd164cc', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'd3790bf739adeef7b381e983bb7426e8684b9e66', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '6e6833f13a1ec4083f06b09ebc61e378e47599cf', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: 'd6b36f1a26904a8287bcb3b3d64981a0f628a911', class: "sd-date-picker__menu" }, index.h("div", { key: '37b9795686360b719b69a9a385a7e4bf27c217e5', class: "sd-date-picker__header" }, index.h("div", { key: 'c885554693c93eddb3d1148e12ca8610f23625a4', class: "year-nav" }, index.h("button", { key: '8628fca079f02183aaf07f953ebcf9e4141060f3', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '3597f373c01ff11b4dcc97e692cedc31bcd8d548', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: 'ed71145dc3a34b8ae491088f65ea43b4cd0acec3', class: "year-nav__current" }, this.currentYear), index.h("button", { key: 'b1bbd644e7ff7bb8141758e3b897c93f5d2c1a38', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: '5a55e81f9e01f3acb73bbb7b6c6f4034430ad2a4', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '1e95092fd966e7d8c2480fd8823e8886a141c83b', class: "month-nav" }, index.h("button", { key: 'e49b6e1528ff2f814e021fb70a7df0425f0efb11', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '4d0e61ccb0fcf006d11b48acff31593c95426acd', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '8eacea2970a8b9f2963f4afd3f0e7aa4ee2bdca9', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: 'd209068e6b0e244b572c42cdc5a3ece8ed4be0fa', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: 'a067b7c5e59ae9b32f1e13e1a80b49055b451a80', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: 'c99e6a24b1113f5c78d17586a9491053e23ee053', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: '9e243d5edf78f0fd606e787b714ae993c549b828', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

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

@@ -157,9 +157,9 @@ const SdDateRangePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (index.h(index.Host, { key: 'b5f7be556686c3bb50147ed0b28cd47698d90e5c', class: "sd-date-range-picker" }, index.h("sd-input", { key: 'a457ab2b61354fe100fa31e1ab357649ceef63aa', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (index.h(index.Host, { key: 'a546e1ab7d199688377b3852b51711b283ed9735', class: "sd-date-range-picker" }, index.h("sd-input", { key: 'f7edc5f8e03d0f781f906cf1abc9f6eddd93f3b6', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'cc068925914495e21172020763c18627d3c8e8a2', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '0486ab86c422d98aa2e86bd4d327cc42f0e72ae9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '8b86d95d279d6f3036f2aacc0421ec4f715d91e7', class: "sd-date-range-picker__menu" }, index.h("div", { key: '0fa223b5fdc0a8195e1fbd433c235dc4473ad146', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: '2d512e7ffa9461f18ca67236a0539cdabcb384ac', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: 'aa23e83e33bfaaaee02f771e9aa3e7f84fe7ceae', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: '5c6e6ea57120081b466faa827e7bb014b5d20905', class: "header-label" }, this.prevYear), index.h("button", { key: '51f89a92ca77a98283a883316981b7df08e1fcef', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: '19a594a16b65668db23f5e77e61db7182591ac57', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '21073a5c2d4dd68aa4dce7be48eab0339dd3791d', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
+            }, onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'dbd1acab929f74afd822c9c9e2ca4bd8e6e25c02', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '86f98f816b61f3dcb49eb284266c32dd644d1641', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '221f126d9d4c92daf84312459b4e6aa9069b4131', class: "sd-date-range-picker__menu" }, index.h("div", { key: 'c3b10e8544af4e52509a90650946045c33cf909c', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: '253cdb65199cff3d4344eb0a1b0920939f917a18', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: '33480e0a2f498f5481908e9e1541bb1a26f2b9d2', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: '2db9fed11f2c923a6fba475cacb72cc1865beecd', class: "header-label" }, this.prevYear), index.h("button", { key: '36603bc40a926337d45f60b416d6dabaaa3cfc7e', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: '8d46e41a1fc5d4de945f92c5ae8842f8dd2c75cf', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '236b93e84d17746e4f8852a9beda0d398edf096b', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), index.h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), index.h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (index.h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index$1 === 0 ? this.prevYear : this.nextYear, index$1 === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index$1 === 0 ? this.prevYear : this.nextYear, index$1 === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: useDatePicker.today ===

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

@@ -1,8 +1,7 @@
 'use strict';
 
 var index = require('./index-Bxead0A0.js');
-var resolveColor = require('./resolveColor-CauSLF0s.js');
-require('./color-Oz29vj7L.js');
+var resolveColor = require('./resolveColor-DxvExwgo.js');
 
 const sdModalCardCss = "sd-modal-card{display:block}sd-modal-card .sd-modal-card{position:relative;padding:40px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2)}sd-modal-card .sd-modal-card__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon{display:block;width:32px;height:32px;margin:0 auto 12px auto}sd-modal-card .sd-modal-card__title{color:var(--point-color);font-size:18px;font-weight:700;line-height:30px;text-align:center;margin:0 0 20px 0}sd-modal-card .sd-modal-card__message{color:#222222;font-weight:400;font-size:12px;line-height:22px;text-align:center;margin:0}sd-modal-card .sd-modal-card__button-container{display:flex;margin:32px auto 0 auto;justify-content:center;align-items:center;gap:8px}sd-modal-card .sd-modal-card__button-container.flex-column{flex-direction:column}sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button{width:89px}";
 

package/dist/cjs/sd-modal-card.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-modal-card.entry.cjs.js","sources":["src/components/sd-modal-card/sd-modal-card.scss?tag=sd-modal-card","src/components/sd-modal-card/sd-modal-card.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-modal-card {\r\n display: block;\r\n .sd-modal-card {\r\n  position: relative;\r\n  padding: 40px 32px;\r\n  border-radius: 8px;\r\n  box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);\r\n\r\n  &__close-button {\r\n   position: absolute;\r\n   top: 16px;\r\n   right: 16px;\r\n   cursor: pointer;\r\n  }\r\n\r\n  sd-icon.sd-modal-card__icon {\r\n   display: block;\r\n   width: 32px;\r\n   height: 32px;\r\n   margin: 0 auto 12px auto;\r\n  }\r\n\r\n  &__title {\r\n   color: var(--point-color);\r\n   font-size: 18px;\r\n   font-weight: 700;\r\n   line-height: 30px;\r\n   text-align: center;\r\n   margin: 0 0 20px 0;\r\n  }\r\n\r\n  &__message {\r\n   color: $grey_95;\r\n   font-weight: 400;\r\n   font-size: 12px;\r\n   line-height: 22px;\r\n   text-align: center;\r\n   margin: 0;\r\n  }\r\n\r\n  &__button-container {\r\n   display: flex;\r\n   margin: 32px auto 0 auto;\r\n   justify-content: center;\r\n   align-items: center;\r\n   gap: 8px;\r\n   &.flex-column {\r\n    flex-direction: column;\r\n   }\r\n   button.sd-modal-card__button {\r\n    width: 89px;\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\n\r\nexport interface SdModalCardButtonProps {\r\n label: string;\r\n color: string;\r\n size: ButtonSize;\r\n variant?: ButtonVariant;\r\n class?: string;\r\n type?: 'confirm' | 'cancel';\r\n}\r\n\r\n@Component({\r\n tag: 'sd-modal-card',\r\n styleUrl: 'sd-modal-card.scss',\r\n})\r\nexport class SdModalCard {\r\n @Prop() type: 'info' | 'warning' | 'normal' = 'info';\r\n @Prop() system: 'normal' | 'positive' | 'negative' = 'normal';\r\n @Prop() useCloseButton: boolean = true;\r\n @Prop() modalTitle: string = 'normal';\r\n @Prop() buttonFlexDirection: 'row' | 'column' = 'row';\r\n @Prop() buttonProps: SdModalCardButtonProps[] = [\r\n  {\r\n   label: '확인',\r\n   color: 'grey_80',\r\n   size: 'md',\r\n  },\r\n ];\r\n @Prop() message: string[] = [];\r\n @Prop()\r\n modalClass: string = '';\r\n\r\n @Event() sdClose!: EventEmitter<MouseEvent>;\r\n @Event() sdConfirm!: EventEmitter<MouseEvent>;\r\n\r\n private get pointColor(): string {\r\n  if (this.type !== 'normal') {\r\n   return 'grey_95';\r\n  }\r\n\r\n  switch (this.system) {\r\n   case 'positive':\r\n    return resolveColor('brilliantblue_75');\r\n   case 'negative':\r\n    return resolveColor('red_75');\r\n   default:\r\n    return resolveColor('grey_95');\r\n  }\r\n }\r\n\r\n private get getModalClass(): string {\r\n  let modalClass = `sd-modal-card ${this.modalClass}`;\r\n  modalClass += ' ' + `sd-modal-card-${this.system}`;\r\n  return modalClass;\r\n }\r\n\r\n render() {\r\n  return (\r\n   <Host style={{ '--point-color': this.pointColor }}>\r\n    <div class={this.getModalClass}>\r\n     {this.useCloseButton && (\r\n      <sd-icon\r\n       class=\"sd-modal-card__close-button\"\r\n       name=\"close\"\r\n       size=\"20\"\r\n       color=\"grey_65\"\r\n       onClick={() => this.sdClose.emit()}\r\n      />\r\n     )}\r\n     {this.type !== 'normal' && (\r\n      <sd-icon\r\n       class=\"sd-modal-card__icon\"\r\n       name={this.type === 'info' ? 'notificationOutline' : 'warningOutline'}\r\n       size=\"32\"\r\n       color={this.type === 'info' ? 'brilliantblue_75' : 'red_75'}\r\n      />\r\n     )}\r\n     <h2 class=\"sd-modal-card__title\">{this.modalTitle}</h2>\r\n     <slot>\r\n      <div class={`sd-modal-card__message-container`}>\r\n       {this.message.map(msg => (\r\n        <p class=\"sd-modal-card__message\">{msg}</p>\r\n       ))}\r\n      </div>\r\n     </slot>\r\n     <div class={`sd-modal-card__button-container flex-${this.buttonFlexDirection}`}>\r\n      {this.buttonProps.map(button => (\r\n       <sd-button\r\n        class={'sd-modal-card__button'}\r\n        variant={button.variant ? button.variant : 'outline'}\r\n        label={button.label}\r\n        color={button.color}\r\n        size={button.size}\r\n        onClick={() =>\r\n         !button.type || button.type === 'confirm' ? this.sdConfirm.emit() : this.sdClose.emit()\r\n        }\r\n        {...(button.class && { class: button.class })}\r\n       ></sd-button>\r\n      ))}\r\n     </div>\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n\r\n//  <div\r\n//    style=\"\r\n//     width: 100%;\r\n//     display: flex;\r\n//     justify-content: center;\r\n//     align-items: center;\r\n//     gap: 40px;\r\n//     margin-top: 50px;\r\n//    \"\r\n//   >\r\n//    <sd-modal-card id=\"1\"></sd-modal-card>\r\n//    <sd-modal-card id=\"2\"></sd-modal-card>\r\n//    <sd-modal-card id=\"3\"></sd-modal-card>\r\n//   </div>\r\n//   <div\r\n//    style=\"\r\n//     width: 100%;\r\n//     display: flex;\r\n//     justify-content: center;\r\n//     align-items: center;\r\n//     gap: 40px;\r\n//     margin-top: 50px;\r\n//    \"\r\n//   >\r\n//    <sd-modal-card id=\"4\"></sd-modal-card>\r\n//    <sd-modal-card id=\"5\"></sd-modal-card>\r\n//    <sd-modal-card id=\"6\"></sd-modal-card>\r\n//   </div>\r\n//   <div\r\n//    style=\"\r\n//     width: 100%;\r\n//     display: flex;\r\n//     justify-content: center;\r\n//     align-items: center;\r\n//     gap: 40px;\r\n//     margin-top: 50px;\r\n//     margin-bottom: 50px;\r\n//    \"\r\n//   >\r\n//    <sd-modal-card id=\"7\"></sd-modal-card>\r\n//    <sd-modal-card id=\"8\"></sd-modal-card>\r\n//    <sd-modal-card id=\"9\"></sd-modal-card>\r\n//   </div>\r\n// <script>\r\n//    document.addEventListener('DOMContentLoaded', event => {\r\n//     const modalCard1 = document.getElementById('1');\r\n//     const modalCard2 = document.getElementById('2');\r\n//     const modalCard3 = document.getElementById('3');\r\n//     const modalCard4 = document.getElementById('4');\r\n//     const modalCard5 = document.getElementById('5');\r\n//     const modalCard6 = document.getElementById('6');\r\n//     const modalCard7 = document.getElementById('7');\r\n//     const modalCard8 = document.getElementById('8');\r\n//     const modalCard9 = document.getElementById('9');\r\n//     const message = [\r\n//      'Lorem ipsum dolor sit amet, consectetur adipisicing elit,',\r\n//      'incididunt ut labore et dolore magna aliqua.',\r\n//     ];\r\n//     const buttonProps = [\r\n//      {\r\n//       label: '취소',\r\n//       color: 'grey_80',\r\n//       size: 'md',\r\n//       type: 'cancel',\r\n//      },\r\n//      {\r\n//       label: '확인',\r\n//       color: 'oceanblue_75',\r\n//       size: 'md',\r\n//       variant: 'primary',\r\n//      },\r\n//     ];\r\n//     const colButtonProps = [\r\n//      {\r\n//       label: '확인',\r\n//       color: 'oceanblue_75',\r\n//       size: 'md',\r\n//       variant: 'primary',\r\n//      },\r\n//      {\r\n//       label: '취소',\r\n//       color: 'grey_80',\r\n//       size: 'md',\r\n//       type: 'cancel',\r\n//      },\r\n//     ];\r\n//     const handleClose = () => {\r\n//      console.log('Modal closed');\r\n//     };\r\n//     const handleConfirm = () => {\r\n//      console.log('Modal confirmed');\r\n//     };\r\n//     modalCard1.message = message;\r\n//     modalCard2.message = message;\r\n//     modalCard3.message = message;\r\n//     modalCard4.message = message;\r\n//     modalCard5.message = message;\r\n//     modalCard6.message = message;\r\n//     modalCard7.message = message;\r\n//     modalCard8.message = message;\r\n//     modalCard9.message = message;\r\n\r\n//     modalCard4.type = 'warning';\r\n//     modalCard5.type = 'warning';\r\n//     modalCard6.type = 'warning';\r\n//     modalCard7.type = 'normal';\r\n//     modalCard8.type = 'normal';\r\n//     modalCard9.type = 'normal';\r\n\r\n//     modalCard8.system = 'positive';\r\n//     modalCard9.system = 'negative';\r\n\r\n//     modalCard2.buttonProps = buttonProps;\r\n//     modalCard3.buttonProps = colButtonProps;\r\n//     modalCard3.buttonFlexDirection = 'column';\r\n\r\n//     const warningButtonProps = [buttonProps[0], { ...buttonProps[1], color: 'red_75' }];\r\n//     const warningColButtonProps = [{ ...colButtonProps[0], color: 'red_75' }, colButtonProps[1]];\r\n//     modalCard5.buttonProps = warningButtonProps;\r\n//     modalCard6.buttonProps = warningColButtonProps;\r\n//     modalCard6.buttonFlexDirection = 'column';\r\n\r\n//     modalCard1.addEventListener('sdClose', handleClose);\r\n//     modalCard2.addEventListener('sdClose', handleClose);\r\n//     modalCard3.addEventListener('sdClose', handleClose);\r\n//     modalCard1.addEventListener('sdConfirm', handleConfirm);\r\n//     modalCard2.addEventListener('sdConfirm', handleConfirm);\r\n//     modalCard3.addEventListener('sdConfirm', handleConfirm);\r\n//    });\r\n//   </script>\r\n"],"names":["resolveColor","h","Host"],"mappings":"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"}
+{"version":3,"file":"sd-modal-card.entry.cjs.js","sources":["src/components/sd-modal-card/sd-modal-card.scss?tag=sd-modal-card","src/components/sd-modal-card/sd-modal-card.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-modal-card {\r\n display: block;\r\n .sd-modal-card {\r\n  position: relative;\r\n  padding: 40px 32px;\r\n  border-radius: 8px;\r\n  box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);\r\n\r\n  &__close-button {\r\n   position: absolute;\r\n   top: 16px;\r\n   right: 16px;\r\n   cursor: pointer;\r\n  }\r\n\r\n  sd-icon.sd-modal-card__icon {\r\n   display: block;\r\n   width: 32px;\r\n   height: 32px;\r\n   margin: 0 auto 12px auto;\r\n  }\r\n\r\n  &__title {\r\n   color: var(--point-color);\r\n   font-size: 18px;\r\n   font-weight: 700;\r\n   line-height: 30px;\r\n   text-align: center;\r\n   margin: 0 0 20px 0;\r\n  }\r\n\r\n  &__message {\r\n   color: $grey_95;\r\n   font-weight: 400;\r\n   font-size: 12px;\r\n   line-height: 22px;\r\n   text-align: center;\r\n   margin: 0;\r\n  }\r\n\r\n  &__button-container {\r\n   display: flex;\r\n   margin: 32px auto 0 auto;\r\n   justify-content: center;\r\n   align-items: center;\r\n   gap: 8px;\r\n   &.flex-column {\r\n    flex-direction: column;\r\n   }\r\n   button.sd-modal-card__button {\r\n    width: 89px;\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\n\r\nexport interface SdModalCardButtonProps {\r\n label: string;\r\n color: string;\r\n size: ButtonSize;\r\n variant?: ButtonVariant;\r\n class?: string;\r\n type?: 'confirm' | 'cancel';\r\n}\r\n\r\n@Component({\r\n tag: 'sd-modal-card',\r\n styleUrl: 'sd-modal-card.scss',\r\n})\r\nexport class SdModalCard {\r\n @Prop() type: 'info' | 'warning' | 'normal' = 'info';\r\n @Prop() system: 'normal' | 'positive' | 'negative' = 'normal';\r\n @Prop() useCloseButton: boolean = true;\r\n @Prop() modalTitle: string = 'normal';\r\n @Prop() buttonFlexDirection: 'row' | 'column' = 'row';\r\n @Prop() buttonProps: SdModalCardButtonProps[] = [\r\n  {\r\n   label: '확인',\r\n   color: 'grey_80',\r\n   size: 'md',\r\n  },\r\n ];\r\n @Prop() message: string[] = [];\r\n @Prop()\r\n modalClass: string = '';\r\n\r\n @Event() sdClose!: EventEmitter<MouseEvent>;\r\n @Event() sdConfirm!: EventEmitter<MouseEvent>;\r\n\r\n private get pointColor(): string {\r\n  if (this.type !== 'normal') {\r\n   return 'grey_95';\r\n  }\r\n\r\n  switch (this.system) {\r\n   case 'positive':\r\n    return resolveColor('brilliantblue_75');\r\n   case 'negative':\r\n    return resolveColor('red_75');\r\n   default:\r\n    return resolveColor('grey_95');\r\n  }\r\n }\r\n\r\n private get getModalClass(): string {\r\n  let modalClass = `sd-modal-card ${this.modalClass}`;\r\n  modalClass += ' ' + `sd-modal-card-${this.system}`;\r\n  return modalClass;\r\n }\r\n\r\n render() {\r\n  return (\r\n   <Host style={{ '--point-color': this.pointColor }}>\r\n    <div class={this.getModalClass}>\r\n     {this.useCloseButton && (\r\n      <sd-icon\r\n       class=\"sd-modal-card__close-button\"\r\n       name=\"close\"\r\n       size=\"20\"\r\n       color=\"grey_65\"\r\n       onClick={() => this.sdClose.emit()}\r\n      />\r\n     )}\r\n     {this.type !== 'normal' && (\r\n      <sd-icon\r\n       class=\"sd-modal-card__icon\"\r\n       name={this.type === 'info' ? 'notificationOutline' : 'warningOutline'}\r\n       size=\"32\"\r\n       color={this.type === 'info' ? 'brilliantblue_75' : 'red_75'}\r\n      />\r\n     )}\r\n     <h2 class=\"sd-modal-card__title\">{this.modalTitle}</h2>\r\n     <slot>\r\n      <div class={`sd-modal-card__message-container`}>\r\n       {this.message.map(msg => (\r\n        <p class=\"sd-modal-card__message\">{msg}</p>\r\n       ))}\r\n      </div>\r\n     </slot>\r\n     <div class={`sd-modal-card__button-container flex-${this.buttonFlexDirection}`}>\r\n      {this.buttonProps.map(button => (\r\n       <sd-button\r\n        class={'sd-modal-card__button'}\r\n        variant={button.variant ? button.variant : 'outline'}\r\n        label={button.label}\r\n        color={button.color}\r\n        size={button.size}\r\n        onClick={() =>\r\n         !button.type || button.type === 'confirm' ? this.sdConfirm.emit() : this.sdClose.emit()\r\n        }\r\n        {...(button.class && { class: button.class })}\r\n       ></sd-button>\r\n      ))}\r\n     </div>\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n\r\n//  <div\r\n//    style=\"\r\n//     width: 100%;\r\n//     display: flex;\r\n//     justify-content: center;\r\n//     align-items: center;\r\n//     gap: 40px;\r\n//     margin-top: 50px;\r\n//    \"\r\n//   >\r\n//    <sd-modal-card id=\"1\"></sd-modal-card>\r\n//    <sd-modal-card id=\"2\"></sd-modal-card>\r\n//    <sd-modal-card id=\"3\"></sd-modal-card>\r\n//   </div>\r\n//   <div\r\n//    style=\"\r\n//     width: 100%;\r\n//     display: flex;\r\n//     justify-content: center;\r\n//     align-items: center;\r\n//     gap: 40px;\r\n//     margin-top: 50px;\r\n//    \"\r\n//   >\r\n//    <sd-modal-card id=\"4\"></sd-modal-card>\r\n//    <sd-modal-card id=\"5\"></sd-modal-card>\r\n//    <sd-modal-card id=\"6\"></sd-modal-card>\r\n//   </div>\r\n//   <div\r\n//    style=\"\r\n//     width: 100%;\r\n//     display: flex;\r\n//     justify-content: center;\r\n//     align-items: center;\r\n//     gap: 40px;\r\n//     margin-top: 50px;\r\n//     margin-bottom: 50px;\r\n//    \"\r\n//   >\r\n//    <sd-modal-card id=\"7\"></sd-modal-card>\r\n//    <sd-modal-card id=\"8\"></sd-modal-card>\r\n//    <sd-modal-card id=\"9\"></sd-modal-card>\r\n//   </div>\r\n// <script>\r\n//    document.addEventListener('DOMContentLoaded', event => {\r\n//     const modalCard1 = document.getElementById('1');\r\n//     const modalCard2 = document.getElementById('2');\r\n//     const modalCard3 = document.getElementById('3');\r\n//     const modalCard4 = document.getElementById('4');\r\n//     const modalCard5 = document.getElementById('5');\r\n//     const modalCard6 = document.getElementById('6');\r\n//     const modalCard7 = document.getElementById('7');\r\n//     const modalCard8 = document.getElementById('8');\r\n//     const modalCard9 = document.getElementById('9');\r\n//     const message = [\r\n//      'Lorem ipsum dolor sit amet, consectetur adipisicing elit,',\r\n//      'incididunt ut labore et dolore magna aliqua.',\r\n//     ];\r\n//     const buttonProps = [\r\n//      {\r\n//       label: '취소',\r\n//       color: 'grey_80',\r\n//       size: 'md',\r\n//       type: 'cancel',\r\n//      },\r\n//      {\r\n//       label: '확인',\r\n//       color: 'oceanblue_75',\r\n//       size: 'md',\r\n//       variant: 'primary',\r\n//      },\r\n//     ];\r\n//     const colButtonProps = [\r\n//      {\r\n//       label: '확인',\r\n//       color: 'oceanblue_75',\r\n//       size: 'md',\r\n//       variant: 'primary',\r\n//      },\r\n//      {\r\n//       label: '취소',\r\n//       color: 'grey_80',\r\n//       size: 'md',\r\n//       type: 'cancel',\r\n//      },\r\n//     ];\r\n//     const handleClose = () => {\r\n//      console.log('Modal closed');\r\n//     };\r\n//     const handleConfirm = () => {\r\n//      console.log('Modal confirmed');\r\n//     };\r\n//     modalCard1.message = message;\r\n//     modalCard2.message = message;\r\n//     modalCard3.message = message;\r\n//     modalCard4.message = message;\r\n//     modalCard5.message = message;\r\n//     modalCard6.message = message;\r\n//     modalCard7.message = message;\r\n//     modalCard8.message = message;\r\n//     modalCard9.message = message;\r\n\r\n//     modalCard4.type = 'warning';\r\n//     modalCard5.type = 'warning';\r\n//     modalCard6.type = 'warning';\r\n//     modalCard7.type = 'normal';\r\n//     modalCard8.type = 'normal';\r\n//     modalCard9.type = 'normal';\r\n\r\n//     modalCard8.system = 'positive';\r\n//     modalCard9.system = 'negative';\r\n\r\n//     modalCard2.buttonProps = buttonProps;\r\n//     modalCard3.buttonProps = colButtonProps;\r\n//     modalCard3.buttonFlexDirection = 'column';\r\n\r\n//     const warningButtonProps = [buttonProps[0], { ...buttonProps[1], color: 'red_75' }];\r\n//     const warningColButtonProps = [{ ...colButtonProps[0], color: 'red_75' }, colButtonProps[1]];\r\n//     modalCard5.buttonProps = warningButtonProps;\r\n//     modalCard6.buttonProps = warningColButtonProps;\r\n//     modalCard6.buttonFlexDirection = 'column';\r\n\r\n//     modalCard1.addEventListener('sdClose', handleClose);\r\n//     modalCard2.addEventListener('sdClose', handleClose);\r\n//     modalCard3.addEventListener('sdClose', handleClose);\r\n//     modalCard1.addEventListener('sdConfirm', handleConfirm);\r\n//     modalCard2.addEventListener('sdConfirm', handleConfirm);\r\n//     modalCard3.addEventListener('sdConfirm', handleConfirm);\r\n//    });\r\n//   </script>\r\n"],"names":["resolveColor","h","Host"],"mappings":"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"}