@sellmate/design-system 1.0.50 → 1.0.51

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

@@ -1,4 +1,5 @@
 import { h, } from "@stencil/core";
+import { FILE_PICKER_LAYOUT, FILE_PICKER_COLORS } from "./sd-file-picker.config";
 export class SdFilePicker {
     el;
     value = null;
@@ -7,12 +8,31 @@ export class SdFilePicker {
     inline = false;
     multiple = false;
     accept;
-    internalValue = null;
+    maxFileSize;
+    maxTotalSize;
+    maxFiles;
+    // sd-field 패스스루 props
+    name = '';
+    label = '';
+    addonLabel = '';
+    hint = '';
+    errorMessage = '';
+    width = '';
+    rules;
+    error = false;
+    status;
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    focused = false;
     hovered = false;
+    internalValue = null;
     showTooltip = false;
     fileInputRef;
     fileNamesRef;
+    formField;
     update;
+    reject;
     valueChanged(newValue) {
         this.internalValue = newValue;
     }
@@ -22,6 +42,47 @@ export class SdFilePicker {
     componentDidUpdate() {
         this.checkOverflow();
     }
+    async sdValidate() {
+        return this.formField?.sdValidate() ?? Promise.resolve(true);
+    }
+    async sdReset() {
+        const clearedValue = this.multiple ? [] : null;
+        this.value = clearedValue;
+        this.internalValue = clearedValue;
+        if (this.fileInputRef) {
+            this.fileInputRef.value = '';
+        }
+        await this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        await this.formField?.sdResetValidation();
+    }
+    toBytes(value) {
+        if (value == null)
+            return undefined;
+        return typeof value === 'string' ? Number(value) : value;
+    }
+    validateFiles(files) {
+        const maxFileSize = this.toBytes(this.maxFileSize);
+        const maxTotalSize = this.toBytes(this.maxTotalSize);
+        const maxFiles = this.maxFiles != null ? Number(this.maxFiles) : undefined;
+        if (maxFiles != null && files.length > maxFiles) {
+            return { accepted: [], rejected: files, reason: 'max-files' };
+        }
+        if (maxFileSize != null) {
+            const oversized = files.filter(f => f.size > maxFileSize);
+            if (oversized.length > 0) {
+                return { accepted: [], rejected: oversized, reason: 'max-file-size' };
+            }
+        }
+        if (maxTotalSize != null) {
+            const totalSize = files.reduce((sum, f) => sum + f.size, 0);
+            if (totalSize > maxTotalSize) {
+                return { accepted: [], rejected: files, reason: 'max-total-size' };
+            }
+        }
+        return { accepted: files, rejected: [] };
+    }
     handleFileChange = (event) => {
         const input = event.target;
         const files = input.files;
@@ -29,11 +90,19 @@ export class SdFilePicker {
             return;
         }
         const fileArray = Array.from(files);
+        const { accepted, rejected, reason } = this.validateFiles(fileArray);
+        if (reason) {
+            this.reject?.emit({ files: rejected, reason });
+            if (this.fileInputRef) {
+                this.fileInputRef.value = '';
+            }
+            return;
+        }
         if (this.multiple) {
-            this.internalValue = fileArray;
+            this.internalValue = accepted;
         }
         else {
-            this.internalValue = fileArray[0];
+            this.internalValue = accepted[0];
         }
         this.value = this.internalValue;
         this.update?.emit(this.value);
@@ -55,13 +124,6 @@ export class SdFilePicker {
             return;
         this.fileInputRef?.click();
     };
-    getStatusClass() {
-        if (this.disabled)
-            return 'sd-file-picker--disabled';
-        if (this.hasFiles())
-            return 'sd-file-picker--active';
-        return '';
-    }
     hasFiles() {
         if (!this.internalValue)
             return false;
@@ -85,23 +147,36 @@ export class SdFilePicker {
         this.showTooltip = isOverflowing;
     }
     getIconColor() {
-        if (this.disabled) {
-            return this.inline ? 'grey_45' : 'grey_55';
-        }
-        return 'grey_70';
+        return this.disabled ? FILE_PICKER_COLORS.icon.disabled : FILE_PICKER_COLORS.icon.default;
     }
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: 'b30f68abd7b5954ed60843fb436963306b3c9d58', class: {
-                'sd-file-picker': true,
-                [this.getStatusClass()]: true,
-                'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '6b0432850bc995ced5a87d2db33d5c669bb9f53d', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: 'bf0efeaf7aac37cc8fed9a1f6dca8179be053506', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '7b8cdf49421b152f1cc14360a93b0b8a088e6125', ref: el => (this.fileNamesRef = el), class: {
+        const cssVars = {
+            '--sd-file-picker-font-size': `${FILE_PICKER_LAYOUT.fontSize}px`,
+            '--sd-file-picker-line-height': `${FILE_PICKER_LAYOUT.lineHeight}px`,
+            '--sd-file-picker-font-weight': FILE_PICKER_LAYOUT.fontWeight,
+            '--sd-file-picker-padding-x': `${FILE_PICKER_LAYOUT.paddingX}px`,
+            '--sd-file-picker-gap': `${FILE_PICKER_LAYOUT.gap}px`,
+            '--sd-file-picker-text-color': FILE_PICKER_COLORS.text.default,
+            '--sd-file-picker-placeholder-color': FILE_PICKER_COLORS.text.placeholder,
+            '--sd-file-picker-disabled-color': FILE_PICKER_COLORS.text.disabled,
+            // sd-field 시스템 변수 override
+            '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
+            '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
+        };
+        const content = (h("div", { class: "sd-file-picker__content", onClick: this.handleClick }, h("input", { ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { key: '73386aa53e838065297d444310a33e32e0cb7c8a', icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '54b4337797351ba86b391a020fa5260e807ff27e', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { class: "sd-file-picker__tooltip" }, displayText))));
+        if (this.inline) {
+            return (h("div", { class: {
+                    'sd-file-picker--inline': true,
+                    'sd-file-picker--inline-disabled': this.disabled,
+                }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
+        }
+        return (h("sd-field", { name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {
@@ -237,13 +312,360 @@ export class SdFilePicker {
                 "setter": false,
                 "reflect": false,
                 "attribute": "accept"
+            },
+            "maxFileSize": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-file-size"
+            },
+            "maxTotalSize": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-total-size"
+            },
+            "maxFiles": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-files"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "addonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-label",
+                "defaultValue": "''"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint",
+                "defaultValue": "''"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "''"
+            },
+            "rules": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Rule[]",
+                    "resolved": "Rule[] | undefined",
+                    "references": {
+                        "Rule": {
+                            "location": "import",
+                            "path": "../../types/form",
+                            "id": "src/types/form.d.ts::Rule",
+                            "referenceLocation": "Rule"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pass' | 'error'",
+                    "resolved": "\"default\" | \"error\" | \"pass\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "icon": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconProps",
+                    "resolved": "IconProps | undefined",
+                    "references": {
+                        "IconProps": {
+                            "location": "global",
+                            "id": "global::IconProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "undefined"
+            },
+            "labelTooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-tooltip",
+                "defaultValue": "''"
+            },
+            "labelTooltipProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdTooltipProps | null",
+                    "resolved": "SdTooltipProps | null",
+                    "references": {
+                        "SdTooltipProps": {
+                            "location": "import",
+                            "path": "../sd-tooltip/sd-tooltip.config",
+                            "id": "src/components/sd-tooltip/sd-tooltip.config.ts::SdTooltipProps",
+                            "referenceLocation": "SdTooltipProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "focused": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "focused",
+                "defaultValue": "false"
+            },
+            "hovered": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hovered",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
             "internalValue": {},
-            "hovered": {},
             "showTooltip": {}
         };
     }
@@ -268,8 +690,83 @@ export class SdFilePicker {
                         }
                     }
                 }
+            }, {
+                "method": "reject",
+                "name": "sdReject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ files: File[]; reason: 'max-file-size' | 'max-total-size' | 'max-files' }",
+                    "resolved": "{ files: File[]; reason: \"max-file-size\" | \"max-total-size\" | \"max-files\"; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
             }];
     }
+    static get methods() {
+        return {
+            "sdValidate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdReset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdResetValidate": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

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

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

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

@@ -35,7 +35,7 @@ export class SdGhostButton {
             ? GHOST_BUTTON_DISABLED_ICON
             : GHOST_BUTTON_CONTENT_COLORS[this.intent];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: '616698f4a8efbae1013d1f962cadedf72575789a', class: {
+        return (h("button", { key: '8d6aa7e82d3e3f31638e98870283723fdb87e0e2', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -44,7 +44,7 @@ export class SdGhostButton {
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: 'b8203a9ba9a6f385503289f299225e5df468ae8f', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: 'd858b173e3f93c49703b31cde6be4fa81440ae7a', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {

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

@@ -47,9 +47,9 @@ export class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h("div", { key: '1105258bc9d9d4d8d0c209ad735bb445e29ec0a0', class: "sd-guide", style: {
+        return (h("div", { key: 'd98a48deb586592dbb379acb4e3725a97601dccd', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '68b032fc6c5cb145002f7c982939a9f8f98b0039', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'd5a4cf958f0428606d21d7b0f1e2fc9a9820e374', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'be20ea71204a52c31d8cfc16a6dcb973542dd2d6', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '344111896761d721cc35e453cc3cf13cb4d6547b', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '984f743925fa2cae64b93103da38d6cbba0109fc', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: 'ae8d5c7e00035e81ebe39359ca0809c78688dd7d', class: "sd-guide__popup__header" }, h("sd-icon", { key: '7527b4a66b314279d3cdddfc448a2d7e00f25ac4', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: 'fe99c45c4a4b9fa970adbbb4d6f7902ce863b318', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '00ad86270d3639796fa3d6df3c763be899082d0b', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, h("sd-button", { key: '35b3215ac7d73f2ae9375ab46b2981b314769fdd', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '56bda42619f3f10fbdc428e3d11abc1a4a812029', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'a73954469eb2f711ece68c8b17fe2d197b4fd515', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: 'bf07222fe61b7121d99f0ae39e1e7ffb539db1de', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'c9b8d6c2a311e7a83e9c8b2568b3010e5619ad51', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: 'da280eb73610cb0f70c5adbf10e413ea4d8a4629', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'ec73b6ed0777b464208e9bf94d96b044d8770714', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '18a221c3dedb1882479c2a567b3c870d7dfd157b', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '5a8abec7b5c3246a5eb6a7ec45a3c16a05ccab72', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {