@sellmate/design-system 0.0.12 → 0.0.15

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

@@ -2,14 +2,13 @@ import { h, Host, } from "@stencil/core";
 export class SdCheckbox {
     el;
     /** 현재 선택 상태 또는 배열 형태의 값 */
-    checked = false;
+    checked;
     /** 배열 모드에서의 개별 값 */
     val;
     /** 비활성화 여부 */
     disabled = false;
     /** 표시할 라벨 텍스트 */
     label = '';
-    checkboxStyle = {};
     /** 내부 체크 상태 */
     isChecked = false;
     /** 값 변경 이벤트 */
@@ -17,18 +16,27 @@ export class SdCheckbox {
     componentWillLoad() {
         this.updateCheckedState(this.checked);
     }
+    componentWillRender() {
+        this.updateCheckedState(this.checked);
+    }
     watchValueHandler(newValue) {
         this.updateCheckedState(newValue);
     }
-    getCheckboxClasses() {
-        const classes = ['sd-checkbox', `sd-checkbox--${this.isChecked ? 'checked' : 'unchecked'}`];
+    get checkboxClasses() {
+        const classes = [
+            'sd-checkbox',
+            `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,
+        ];
         if (this.disabled) {
             classes.push('sd-checkbox--disabled');
         }
         return classes.join(' ');
     }
     updateCheckedState(value) {
-        if (typeof value === 'boolean') {
+        if (value === null) {
+            this.isChecked = null;
+        }
+        else if (typeof value === 'boolean') {
             this.isChecked = value;
         }
         else if (Array.isArray(value)) {
@@ -48,7 +56,6 @@ export class SdCheckbox {
         else if (Array.isArray(this.checked)) {
             if (this.val === undefined) {
                 console.warn('A "val" property is required when using an array for the "value" property.');
-                return;
             }
             const valueSet = new Set(this.checked);
             valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
@@ -60,7 +67,7 @@ export class SdCheckbox {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (h(Host, { key: '33dcecda70333bd89c1ca7f463dff7ab7f831d3f' }, h("label", { key: 'e4dd05930a655be5a86eeee294d8f8df5c944880', class: this.getCheckboxClasses() }, h("input", { key: '9beb8dd096c1a3de891e446e124c49cfdc3d94de', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: this.handleChange }), h("div", { key: '551540600b67521601d5e487b2aa0229390357cb', class: "sd-checkbox__bg", style: this.checkboxStyle }, this.isChecked ? (h("sd-icon", { name: "check", size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && h("span", { key: '56e548b559c3491051cd6a490c1a150850926389', class: "sd-checkbox__label" }, this.label))));
+        return (h(Host, { key: '953aa5173d5e89247d80f3ee4c258f322122df24' }, h("label", { key: 'ef7e3b50f134307ecbfee42daf8e858891fcea75', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "checkbox", "aria-label": this.label || 'checkbox', class: this.checkboxClasses }, h("input", { key: 'd10e690b3cfd6141ff091563189540ad6c50b4a8', type: "checkbox", value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.label || 'checkbox' }), h("div", { key: '0bc77af921869f65ccd0ce220d6198160efb46e4', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && h("span", { key: '0d111f7f1e6d19cb0da67589c1ec4853ab543e71', class: "sd-checkbox__label" }, this.label))));
     }
     static get is() { return "sd-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -77,14 +84,20 @@ export class SdCheckbox {
     static get properties() {
         return {
             "checked": {
-                "type": "any",
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "any[] | any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "CheckedType",
+                    "resolved": "any[] | boolean | null",
+                    "references": {
+                        "CheckedType": {
+                            "location": "local",
+                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-checkbox/sd-checkbox.tsx",
+                            "id": "src/components/sd-checkbox/sd-checkbox.tsx::CheckedType"
+                        }
+                    }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -93,8 +106,7 @@ export class SdCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "checked",
-                "defaultValue": "false"
+                "attribute": "checked"
             },
             "val": {
                 "type": "any",
@@ -154,29 +166,6 @@ export class SdCheckbox {
                 "reflect": false,
                 "attribute": "label",
                 "defaultValue": "''"
-            },
-            "checkboxStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "StyleProps",
-                    "resolved": "{ [key: string]: any; }",
-                    "references": {
-                        "StyleProps": {
-                            "location": "global",
-                            "id": "global::StyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
             }
         };
     }
@@ -197,9 +186,15 @@ export class SdCheckbox {
                     "text": "\uAC12 \uBCC0\uACBD \uC774\uBCA4\uD2B8"
                 },
                 "complexType": {
-                    "original": "any | any[]",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "CheckedType",
+                    "resolved": "any[] | boolean | null",
+                    "references": {
+                        "CheckedType": {
+                            "location": "local",
+                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-checkbox/sd-checkbox.tsx",
+                            "id": "src/components/sd-checkbox/sd-checkbox.tsx::CheckedType"
+                        }
+                    }
                 }
             }];
     }

package/dist/collection/components/sd-checkbox/sd-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-checkbox.js","sourceRoot":"","sources":["../../../src/components/sd-checkbox/sd-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n Prop,\r\n h,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Watch,\r\n Host,\r\n} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-checkbox',\r\n styleUrl: 'sd-checkbox.scss',\r\n scoped: true,\r\n})\r\nexport class SdCheckbox {\r\n @Element() el!: HTMLElement;\r\n\r\n /** 현재 선택 상태 또는 배열 형태의 값 */\r\n @Prop() checked: any[] | any = false;\r\n\r\n /** 배열 모드에서의 개별 값 */\r\n @Prop() val?: any;\r\n\r\n /** 비활성화 여부 */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** 표시할 라벨 텍스트 */\r\n @Prop() label: string = '';\r\n\r\n @Prop() checkboxStyle: StyleProps = {};\r\n\r\n /** 내부 체크 상태 */\r\n @State() private isChecked: boolean = false;\r\n\r\n /** 값 변경 이벤트 */\r\n @Event() sdChange!: EventEmitter<any | any[]>;\r\n\r\n componentWillLoad() {\r\n  this.updateCheckedState(this.checked);\r\n }\r\n\r\n @Watch('checked')\r\n watchValueHandler(newValue: any | any[]) {\r\n  this.updateCheckedState(newValue);\r\n }\r\n\r\n private getCheckboxClasses(): string {\r\n  const classes = ['sd-checkbox', `sd-checkbox--${this.isChecked ? 'checked' : 'unchecked'}`];\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-checkbox--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private updateCheckedState(value: any | any[]) {\r\n  if (typeof value === 'boolean') {\r\n   this.isChecked = value;\r\n  } else if (Array.isArray(value)) {\r\n   this.isChecked = this.val !== undefined && value.includes(this.val);\r\n  } else {\r\n   this.isChecked = false;\r\n  }\r\n }\r\n\r\n private handleChange = () => {\r\n  if (this.disabled) return;\r\n\r\n  let newValue: any | any[];\r\n\r\n  if (typeof this.checked === 'boolean') {\r\n   newValue = !this.checked;\r\n  } else if (Array.isArray(this.checked)) {\r\n   if (this.val === undefined) {\r\n    console.warn('A \"val\" property is required when using an array for the \"value\" property.');\r\n    return;\r\n   }\r\n\r\n   const valueSet = new Set(this.checked);\r\n   valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\r\n   newValue = Array.from(valueSet);\r\n  } else {\r\n   newValue = !this.isChecked;\r\n  }\r\n\r\n  this.sdChange.emit(newValue);\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host>\r\n    <label class={this.getCheckboxClasses()}>\r\n     <input\r\n      type=\"checkbox\"\r\n      checked={this.isChecked}\r\n      disabled={this.disabled}\r\n      onChange={this.handleChange}\r\n     />\r\n     <div class=\"sd-checkbox__bg\" style={this.checkboxStyle}>\r\n      {this.isChecked ? (\r\n       <sd-icon name=\"check\" size={12} color={this.disabled ? '#888888' : 'white'} />\r\n      ) : null}\r\n     </div>\r\n     {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\r\n    </label>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"]}
+{"version":3,"file":"sd-checkbox.js","sourceRoot":"","sources":["../../../src/components/sd-checkbox/sd-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n Prop,\r\n h,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Watch,\r\n Host,\r\n} from '@stencil/core';\r\n\r\nexport type CheckedType = boolean | any[] | null;\r\n\r\n@Component({\r\n tag: 'sd-checkbox',\r\n styleUrl: 'sd-checkbox.scss',\r\n scoped: true,\r\n})\r\nexport class SdCheckbox {\r\n @Element() el!: HTMLElement;\r\n\r\n /** 현재 선택 상태 또는 배열 형태의 값 */\r\n @Prop() checked!: CheckedType;\r\n\r\n /** 배열 모드에서의 개별 값 */\r\n @Prop() val?: any;\r\n\r\n /** 비활성화 여부 */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** 표시할 라벨 텍스트 */\r\n @Prop() label: string = '';\r\n\r\n /** 내부 체크 상태 */\r\n @State() private isChecked: boolean | null = false;\r\n\r\n /** 값 변경 이벤트 */\r\n @Event() sdChange!: EventEmitter<CheckedType>;\r\n\r\n componentWillLoad() {\r\n  this.updateCheckedState(this.checked);\r\n }\r\n\r\n componentWillRender() {\r\n  this.updateCheckedState(this.checked);\r\n }\r\n\r\n @Watch('checked')\r\n watchValueHandler(newValue: CheckedType) {\r\n  this.updateCheckedState(newValue);\r\n }\r\n\r\n private get checkboxClasses(): string {\r\n  const classes = [\r\n   'sd-checkbox',\r\n   `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,\r\n  ];\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-checkbox--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private updateCheckedState(value: CheckedType) {\r\n  if (value === null) {\r\n   this.isChecked = null;\r\n  } else if (typeof value === 'boolean') {\r\n   this.isChecked = value;\r\n  } else if (Array.isArray(value)) {\r\n   this.isChecked = this.val !== undefined && value.includes(this.val);\r\n  } else {\r\n   this.isChecked = false;\r\n  }\r\n }\r\n\r\n private handleChange = () => {\r\n  if (this.disabled) return;\r\n\r\n  let newValue: CheckedType;\r\n\r\n  if (typeof this.checked === 'boolean') {\r\n   newValue = !this.checked;\r\n  } else if (Array.isArray(this.checked)) {\r\n   if (this.val === undefined) {\r\n    console.warn('A \"val\" property is required when using an array for the \"value\" property.');\r\n   }\r\n\r\n   const valueSet = new Set(this.checked);\r\n   valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\r\n   newValue = Array.from(valueSet);\r\n  } else {\r\n   newValue = !this.isChecked;\r\n  }\r\n\r\n  this.sdChange.emit(newValue);\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host>\r\n    <label\r\n     aria-checked={this.isChecked === null ? 'mixed' : this.isChecked.toString()}\r\n     aria-disabled={this.disabled.toString()}\r\n     role=\"checkbox\"\r\n     aria-label={this.label || 'checkbox'}\r\n     class={this.checkboxClasses}\r\n    >\r\n     <input\r\n      type=\"checkbox\"\r\n      value={this.val}\r\n      checked={!!this.isChecked}\r\n      disabled={this.disabled}\r\n      onChange={this.handleChange}\r\n      name={this.label || 'checkbox'}\r\n     />\r\n     <div class=\"sd-checkbox__bg\">\r\n      {this.isChecked !== false ? (\r\n       <sd-icon\r\n        name={this.isChecked === true ? 'check' : 'minus'}\r\n        size={12}\r\n        color={this.disabled ? '#888888' : 'white'}\r\n       />\r\n      ) : null}\r\n     </div>\r\n     {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\r\n    </label>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"]}

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

@@ -23,7 +23,7 @@ export class SdDateBox {
         this.sdMouseOver?.emit(this.date);
     }
     render() {
-        return (h(Host, { key: '992ba0be8b908a910f2d572c665fce75570e7956', role: "button", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
+        return (h(Host, { key: 'ace5d023959d41d2a2255e70ad9d5bad9df4f9fe', role: "button", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -34,7 +34,7 @@ export class SdDateBox {
                 'sd-date-box--in-range': this.inRange,
                 'sd-date-box--type-start': this.type === 'start',
                 'sd-date-box--type-end': this.type === 'end',
-            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: '5673658e4532547f57e86babfce2ac9c8399cfa7', class: "sd-date-box__content" }, h("div", { key: '1e978a0bbf7a1f3e8d13d541d5d75e1b8568ddd8', class: "sd-date-box__label" }, this.date))));
+            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: '2fdeea79f2eeb28da3b9999f7326996531cb6c88', class: "sd-date-box__content" }, h("div", { key: '0f7839e75905b04f99a23603326099953f5e2990', class: "sd-date-box__label" }, this.date))));
     }
     static get is() { return "sd-date-box"; }
     static get encapsulation() { return "scoped"; }

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

@@ -74,9 +74,9 @@ export class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: '073aefcfa73d78e3e42c27b8b14afd3756d954bd', class: "sd-date-picker" }, h("sd-input", { key: 'c46c12e0bf11cc2e5a7ae6a8e9ddfa146563163c', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: 'f445a752123f1a1a7f8d28ca7472a8ffabda9441', class: "sd-date-picker" }, h("sd-input", { key: '85662ea61b192562311af23f67c1a1ad05636813', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '412b708ed864833ec83cdaecc1e9c1d7808068e3', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '87fddfdadfc39778d516369d0acd3e73b89f810d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '87944e2df0a81a75a13c42ea8e0d9b5979ed85af', class: "sd-date-picker__menu" }, h("div", { key: 'a7c035944794022eccb1b19e54d80b7157a54107', class: "sd-date-picker__header" }, h("div", { key: 'ae4b0e6e8764501dae7415b263a846e215734d82', class: "year-nav" }, h("button", { key: 'a6831bf4ed39bd406362fd1e6f6b443acec8213f', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'b3f52472a598fa0779a74e0032cf25f5044d92e6', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '136e2730aefa9ce02cca085d2a8dc1ae13ede1aa', class: "year-nav__current" }, this.currentYear), h("button", { key: 'abf7c4d914ae33811339f81dd54fe600998f90c6', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '2dd8c6a58838272f24ff602ffe385f1e574c2da3', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '74123866c86d484fa1005626fca0a96e40ab12d0', class: "month-nav" }, h("button", { key: '133ab31234a32aea40919b3f1cad38b1473973ad', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '3d1bdf5ea9ad80b065863a0afac05e3d1e46e3c5', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'e833ffc8ab88463416e0d35a5b14339489905015', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '9dfa18116b469aa5cc081c3e30f95d3e3a1f7516', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '4324a57675a9119d8f47247f769a44c85e3be55b', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '5f140871bdaaa1ed75743a98b4d77d14b1f7c970', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'c2b132cbba69b74d8408199d211a50a48419c173', class: "sd-date-picker__body" }, [
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '41634f9170073fbde5e44c55b5985da90763f819', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'ce630583ef81cd72ad1b8fdaab7cab2d1df278cb', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '55d4c73a3e17991ebf68495d7bed96399857de1e', class: "sd-date-picker__menu" }, h("div", { key: '0800e3a37eec27bb8a8c59a2ebd8ffdbf4e813a7', class: "sd-date-picker__header" }, h("div", { key: '1518b578ad87a0f5875d980d1c974492f32714e3', class: "year-nav" }, h("button", { key: 'e70f1d4e73650c7bccb1629b679ca366717e5506', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'f679a54b76e304d08c132d6784575831a5d5d61b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '634dcbfe81d328cbc0460958208dc17aaf218158', class: "year-nav__current" }, this.currentYear), h("button", { key: '7e7cef51d7b47b7280cfff4234b88394708ea01a', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '8a6fc4a40f567d2d1ffef5dbc08de5148203970c', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '8fad6e92b899a0cb38398ec2f4036b959377d99b', class: "month-nav" }, h("button", { key: '3180c35ad42239a6a97480a4db860182b98724f3', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '6ccef0b13fde4124e0e14959687f60dab753ae51', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'db7db67a1a77f02451bc0a7c97e87e3cd6c9d453', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '5df06269331e9f7ee1cb4801bfd713d433f00af4', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '65b0f49b205e9aa38a46cbe672665b31c9ffe542', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '68f3c05f2ffb57b7fc032209dd709e5eaa6fcbdd', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '452c22746ace6b3923acf4912edba2509a56b369', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

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

@@ -137,9 +137,9 @@ export class SdDateRangePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: 'c29f3b26096b1a1edb62bff1f04445c288f94510', class: "sd-date-range-picker" }, h("sd-input", { key: 'fed72858cd1f3a2121d385adaec9e9de9dc1bb57', 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 (h(Host, { key: '3d95128a2a654e38ceae60e6b89482a454488286', class: "sd-date-range-picker" }, h("sd-input", { key: '4f170abfe6214ffa1044020b2cd59a9219f3ef09', 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() }, h("sd-icon", { key: '2aa096be9c411ada92d44d87c3a4c47ab68d1f96', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'e50f39e684f3aee7e5ce8bb0315ea7c60e977617', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '9a6d640f0bca411dfbf0da87c49c74fc4f80ed67', class: "sd-date-range-picker__menu" }, h("div", { key: '7da9b5ba70b388aef2dc8925bfd8a148f1ed0c41', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'ec1056f9342e6032b57c4722fa88c4a4a30a6613', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: 'ac27149302a409ca3e078b9f99dc97ea79d199fd', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '4f4bba8fd720e05a09f77a529edfa8cd663e3e92', class: "header-label" }, this.prevYear), h("button", { key: 'deb376d80e857f44e7d5d8066bd5dc6082cd12af', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '6851c389b13c53a94bc294201da37fb6c7e2465a', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '15d26dacba9e5f2e2f97171fc7ea4fbc6769804d', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '7c12c7e3331638f333efdea4bcd3d452eb032561', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '7312ab4a79877de6d6be3edaa404e0b9c52e28d8', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '20a485d128de2b2d0a8043cb5fe0de990364bbd8', class: "sd-date-range-picker__menu" }, h("div", { key: '19a0489246b5dccc183f3d3a040086a6a2c565f3', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '1f9c5f1188234e2306c033e8e67f9a106b3b39bc', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '52805839d2092886fe4f07c9f95a2e948b00c917', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'e9f323504223ccfbc4b5703346a310e58d1621c3', class: "header-label" }, this.prevYear), h("button", { key: '810c6fb9eaa16291550455ac1099c15da7b80ed6', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '44cf361ed854292f90c954522c356e17d5a45d29', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '4cc859482a2c010261b64b8ce15f5c754a2234fd', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===

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

@@ -1360,6 +1360,14 @@ textarea {
   cursor: pointer;
 }
 
+.sd-guide :deep(.sd-button) {
+  padding: 0 16px 0 12px;
+  border-radius: 16px;
+}
+.sd-guide :deep(.sd-button) .sd-button__content .sd-button__label {
+  color: #333333;
+}
+
 .sd-guide__popup {
   position: relative;
   padding: 20px 32px;

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

@@ -1,21 +1,32 @@
 import { Host, h } from "@stencil/core";
 import colors from "../../styles/color.json";
+const GUIDE_LABEL = {
+    help: '활용 TIP',
+    pdf: 'PDF Guide',
+    youtube: 'Video Guide',
+    notion: '사용 가이드',
+    event: 'Event Button',
+};
+const GUIDE_ICON = {
+    help: {
+        name: 'helpOutline',
+        size: 20,
+        color: colors.green_65,
+    },
+    pdf: { name: 'pdf', size: 20, color: colors.red_75 },
+    youtube: { name: 'youtube', size: 20, color: colors.red_75 },
+    notion: { name: 'notion', size: 16, color: colors.black },
+    event: { name: 'event', size: 16, color: colors.brilliantblue_70 },
+};
 export class SdGuide {
     el;
     type = 'help';
-    popupTitle = '';
+    label = '';
     message = '';
     guideUrl = '';
     popupWidth;
     popupShow = false;
     guideRef;
-    static guideTitle = {
-        help: '활용 Tip',
-        pdf: 'PDF Guide',
-        youtube: 'Video Guide',
-        notion: '사용 가이드',
-        event: 'Event Button',
-    };
     handleClickGuide = () => {
         if (this.type === 'help') {
             this.popupShow = !this.popupShow;
@@ -25,58 +36,59 @@ export class SdGuide {
             window.open(this.guideUrl, '_blank');
         }
     };
-    getGuideClasses() {
-        const classes = ['sd-guide'];
-        classes.push(`sd-guide--${this.type}`);
+    get guideClass() {
+        const classes = ['sd-guide', `sd-guide--${this.type}`];
         if (this.popupShow)
             classes.push('sd-guide--active');
         return classes.join(' ');
     }
-    getGuideStyle() {
-        const styles = {};
-        if (this.type === 'help') {
-            styles['--guide-border'] = this.popupShow ? colors.green_65 : colors.grey_45;
-            styles['--guide-color'] = this.popupShow ? colors.white : colors.grey_90;
-            styles['--guide-background'] = this.popupShow ? colors.green_65 : colors.white;
-        }
-        else {
-            styles['--guide-border'] = colors.grey_45;
-            styles['--guide-color'] = colors.grey_90;
-            styles['--guide-background'] = colors.white;
-        }
-        return styles;
-    }
-    getGuidIcon() {
-        if (this.type === 'pdf') {
-            return { name: 'pdf', size: 20, color: colors.red_75 };
-        }
-        else if (this.type === 'youtube') {
-            return { name: 'youtube', size: 20, color: colors.red_75 };
-        }
-        else if (this.type === 'notion') {
-            return { name: 'notion', size: 16, color: colors.black };
-        }
-        else if (this.type === 'event') {
-            return { name: 'event', size: 16, color: colors.brilliantblue_70 };
-        }
-        return { name: 'helpOutline', size: 20, color: this.popupShow ? colors.white : colors.green_65 };
-    }
+    // private getGuideStyle(): StyleProps {
+    //  const styles: StyleProps = {};
+    //  if (this.type === 'help') {
+    //   styles['--guide-border'] = this.popupShow ? colors.green_65 : colors.grey_45;
+    //   styles['--guide-color'] = this.popupShow ? colors.white : colors.grey_90;
+    //   styles['--guide-background'] = this.popupShow ? colors.green_65 : colors.white;
+    //  } else {
+    //   styles['--guide-border'] = colors.grey_45;
+    //   styles['--guide-color'] = colors.grey_90;
+    //   styles['--guide-background'] = colors.white;
+    //  }
+    //  return styles;
+    // }
+    // private getGuidIcon(): { name: IconName; size: number; color: string } {
+    //  if (this.type === 'pdf') {
+    //   return { name: 'pdf', size: 20, color: colors.red_75 };
+    //  } else if (this.type === 'youtube') {
+    //   return { name: 'youtube', size: 20, color: colors.red_75 };
+    //  } else if (this.type === 'notion') {
+    //   return { name: 'notion', size: 16, color: colors.black };
+    //  } else if (this.type === 'event') {
+    //   return { name: 'event', size: 16, color: colors.brilliantblue_70 };
+    //  }
+    //  return { name: 'helpOutline', size: 20, color: this.popupShow ? colors.white : colors.green_65 };
+    // }
     closeDropdown = () => {
         this.popupShow = false;
     };
     render() {
-        const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
-        return (h(Host, { key: '585c486de8a31b8ce09f45eefe6331737fb3e624', style: this.getGuideStyle() }, h("sd-button", { key: 'b7d53b84e674556729119b00c000efba46fcd8e0', ref: el => (this.guideRef = el), class: this.getGuideClasses(), variant: "outline", label: SdGuide.guideTitle[this.type], size: "md", color: "var(--guide-color)", icon: iconName, iconColor: iconColor, iconSize: iconSize, iconStyle: { marginRight: '4px' }, buttonStyle: {
-                height: '28px',
-                minHeight: '28px',
-                padding: '4px 12px',
-                borderRadius: '16px',
-                borderColor: 'var(--guide-border)',
-                color: 'var(--guide-color)',
-                fontSize: '12px',
-                fontWeight: '400',
-                backgroundColor: 'var(--guide-background)',
-            }, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '8335f1cd0011db8a9e795433ed5373fb800ca932', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 24] }, h("div", { key: '5bac23fa3c20da12bf70e983a8503274b442befb', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '86f3ebd2bf06d61bc0c1e0e61cdb1bf942bc5210', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true, buttonStyle: { padding: '0px', minHeight: '0px' }, onSdClick: this.closeDropdown }), h("div", { key: 'ee8ba978a89525d88d7bdbb0f8bcd45b9f166e3c', class: "sd-guide__popup__header" }, h("sd-icon", { key: '2a2cb57fb9d280426e550559e79ac6b8f78035c5', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'e5d554ae090bba6245023af7530c1acf3ebd9c98', class: "sd-guide__popup__title" }, this.popupTitle || SdGuide.guideTitle[this.type])), h("ul", { key: '5a9aaaca0da567b3ac08fe2b96426a0f66ff927f', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+        // const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
+        const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
+        return (h(Host, { key: '9f8b8af98d5bbcbde8544d0e8e337068e8e5778d' }, h("sd-button", { key: '13cd8b97e2c017f5e31344cb9ded45015bfe8364', ref: el => (this.guideRef = el), class: this.guideClass, variant: "outline", label: GUIDE_LABEL[this.type], size: "sm", color: "grey_45", icon: iconName, iconColor: iconColor, iconSize: iconSize,
+            // iconStyle={{ marginRight: '4px' }}
+            // buttonStyle={{
+            //  height: '28px',
+            //  minHeight: '28px',
+            //  padding: '4px 12px',
+            //  borderRadius: '16px',
+            //  borderColor: 'var(--guide-border)',
+            //  color: 'var(--guide-color)',
+            //  fontSize: '12px',
+            //  fontWeight: '400',
+            //  backgroundColor: 'var(--guide-background)',
+            // }}
+            onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '5e199a2c2d5bc42fa87c651ef4d07fa0ab091558', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '625d746fedfc57df447f754ae477d89058152ead', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'ac0f7809af22910f677df3a3ec48dd370dac0f9e', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            // buttonStyle={{ padding: '0px', minHeight: '0px' }}
+            onSdClick: this.closeDropdown }), h("div", { key: '747244da8b2cd0c6b59bdaa2bc7967017dcc1a6b', class: "sd-guide__popup__header" }, h("sd-icon", { key: '7899329aed456415febc12184d7fb276eeb011fd', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '9cbbe86aa294d9831e1f7a3a6a0aece5b74b6171', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: '1a2cc3226c080db952adcf458511a5efec61e797', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -133,7 +145,7 @@ export class SdGuide {
                 "attribute": "type",
                 "defaultValue": "'help'"
             },
-            "popupTitle": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -150,7 +162,7 @@ export class SdGuide {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "popup-title",
+                "attribute": "label",
                 "defaultValue": "''"
             },
             "message": {

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

@@ -1 +1 @@
-{"version":3,"file":"sd-guide.js","sourceRoot":"","sources":["../../../src/components/sd-guide/sd-guide.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n scoped: true,\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: GuideType = 'help';\r\n @Prop() popupTitle: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n static guideTitle = {\r\n  help: '활용 Tip',\r\n  pdf: 'PDF Guide',\r\n  youtube: 'Video Guide',\r\n  notion: '사용 가이드',\r\n  event: 'Event Button',\r\n };\r\n\r\n private handleClickGuide = () => {\r\n  if (this.type === 'help') {\r\n   this.popupShow = !this.popupShow;\r\n   return;\r\n  }\r\n\r\n  if (this.guideUrl) {\r\n   window.open(this.guideUrl, '_blank');\r\n  }\r\n };\r\n\r\n private getGuideClasses(): string {\r\n  const classes = ['sd-guide'];\r\n\r\n  classes.push(`sd-guide--${this.type}`);\r\n\r\n  if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private getGuideStyle(): StyleProps {\r\n  const styles: StyleProps = {};\r\n\r\n  if (this.type === 'help') {\r\n   styles['--guide-border'] = this.popupShow ? colors.green_65 : colors.grey_45;\r\n   styles['--guide-color'] = this.popupShow ? colors.white : colors.grey_90;\r\n   styles['--guide-background'] = this.popupShow ? colors.green_65 : colors.white;\r\n  } else {\r\n   styles['--guide-border'] = colors.grey_45;\r\n   styles['--guide-color'] = colors.grey_90;\r\n   styles['--guide-background'] = colors.white;\r\n  }\r\n\r\n  return styles;\r\n }\r\n\r\n private getGuidIcon(): { name: IconName; size: number; color: string } {\r\n  if (this.type === 'pdf') {\r\n   return { name: 'pdf', size: 20, color: colors.red_75 };\r\n  } else if (this.type === 'youtube') {\r\n   return { name: 'youtube', size: 20, color: colors.red_75 };\r\n  } else if (this.type === 'notion') {\r\n   return { name: 'notion', size: 16, color: colors.black };\r\n  } else if (this.type === 'event') {\r\n   return { name: 'event', size: 16, color: colors.brilliantblue_70 };\r\n  }\r\n\r\n  return { name: 'helpOutline', size: 20, color: this.popupShow ? colors.white : colors.green_65 };\r\n }\r\n\r\n closeDropdown = () => {\r\n  this.popupShow = false;\r\n };\r\n\r\n render() {\r\n  const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();\r\n\r\n  return (\r\n   <Host style={this.getGuideStyle()}>\r\n    <sd-button\r\n     ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n     class={this.getGuideClasses()}\r\n     variant=\"outline\"\r\n     label={SdGuide.guideTitle[this.type]}\r\n     size=\"md\"\r\n     color=\"var(--guide-color)\"\r\n     icon={iconName}\r\n     iconColor={iconColor}\r\n     iconSize={iconSize}\r\n     iconStyle={{ marginRight: '4px' }}\r\n     buttonStyle={{\r\n      height: '28px',\r\n      minHeight: '28px',\r\n      padding: '4px 12px',\r\n      borderRadius: '16px',\r\n      borderColor: 'var(--guide-border)',\r\n      color: 'var(--guide-color)',\r\n      fontSize: '12px',\r\n      fontWeight: '400',\r\n      backgroundColor: 'var(--guide-background)',\r\n     }}\r\n     onSdClick={this.handleClickGuide}\r\n    />\r\n    {this.type === 'help' && this.popupShow && (\r\n     <sd-portal\r\n      open={this.popupShow}\r\n      parentRef={this.guideRef}\r\n      onSdClose={this.closeDropdown}\r\n      offset={[0, 24]}\r\n     >\r\n      <div\r\n       class=\"sd-guide__popup\"\r\n       style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n      >\r\n       <sd-button\r\n        class=\"sd-guide__popup__close\"\r\n        icon=\"close\"\r\n        color={colors.grey_65}\r\n        size=\"md\"\r\n        variant=\"ghost\"\r\n        noHover\r\n        buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n        onSdClick={this.closeDropdown}\r\n       />\r\n       <div class=\"sd-guide__popup__header\">\r\n        <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n        <h3 class=\"sd-guide__popup__title\">{this.popupTitle || SdGuide.guideTitle[this.type]}</h3>\r\n       </div>\r\n       <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n  const listItems: HTMLElement[] = [];\r\n\r\n  if (Array.isArray(message)) {\r\n   const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n   listItems.push(...depthMsg.flat());\r\n  } else {\r\n   listItems.push(this.renderLi(message, depth));\r\n  }\r\n\r\n  return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n  const listContent = message.replace(/ /gi, '&nbsp;');\r\n  return (\r\n   <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n    <p innerHTML={listContent}></p>\r\n   </li>\r\n  );\r\n };\r\n}\r\n"]}
+{"version":3,"file":"sd-guide.js","sourceRoot":"","sources":["../../../src/components/sd-guide/sd-guide.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAI7C,MAAM,WAAW,GAAG;IACnB,IAAI,EAAE,QAAQ;IACd,GAAG,EAAE,WAAW;IAChB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,cAAc;CACrB,CAAC;AAEF,MAAM,UAAU,GAAG;IAClB,IAAI,EAAE;QACL,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,MAAM,CAAC,QAAQ;KACtB;IACD,GAAG,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;IACpD,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;IAC5D,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE;IACzD,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,gBAAgB,EAAE;CACzD,CAAC;AAOX,MAAM,OAAO,OAAO;IACR,EAAE,CAAe;IAEpB,IAAI,GAAc,MAAM,CAAC;IACzB,KAAK,GAAW,EAAE,CAAC;IACnB,OAAO,GAAsB,EAAE,CAAC;IAChC,QAAQ,GAAW,EAAE,CAAC;IACtB,UAAU,CAAU;IAEnB,SAAS,GAAY,KAAK,CAAC;IAE5B,QAAQ,CAAe;IAEvB,gBAAgB,GAAG,GAAG,EAAE;QAC/B,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAC1B,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;YACjC,OAAO;QACR,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACtC,CAAC;IACF,CAAC,CAAC;IAEF,IAAY,UAAU;QACrB,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,aAAa,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAErD,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,wCAAwC;IACxC,kCAAkC;IAElC,+BAA+B;IAC/B,kFAAkF;IAClF,8EAA8E;IAC9E,oFAAoF;IACpF,YAAY;IACZ,+CAA+C;IAC/C,8CAA8C;IAC9C,iDAAiD;IACjD,KAAK;IAEL,kBAAkB;IAClB,IAAI;IAEJ,2EAA2E;IAC3E,8BAA8B;IAC9B,4DAA4D;IAC5D,yCAAyC;IACzC,gEAAgE;IAChE,wCAAwC;IACxC,8DAA8D;IAC9D,uCAAuC;IACvC,wEAAwE;IACxE,KAAK;IAEL,qGAAqG;IACrG,IAAI;IAEJ,aAAa,GAAG,GAAG,EAAE;QACpB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM;QACL,mFAAmF;QACnF,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEnF,OAAO,CACN,EAAC,IAAI;YACJ,kEACC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAA4B,CAAC,EACzD,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAC7B,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;gBAClB,qCAAqC;gBACrC,iBAAiB;gBACjB,mBAAmB;gBACnB,sBAAsB;gBACtB,wBAAwB;gBACxB,yBAAyB;gBACzB,uCAAuC;gBACvC,gCAAgC;gBAChC,qBAAqB;gBACrB,sBAAsB;gBACtB,+CAA+C;gBAC/C,KAAK;gBACL,SAAS,EAAE,IAAI,CAAC,gBAAgB,GAC/B;YACD,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,IAAI,CAC1C,kEACC,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;gBAEd,4DACC,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,EAAS;oBAE3E,kEACC,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,OAAO,EACrB,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,OAAO;wBACP,qDAAqD;wBACrD,SAAS,EAAE,IAAI,CAAC,aAAa,GAC5B;oBACF,4DAAK,KAAK,EAAC,yBAAyB;wBACnC,gEAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,GAAI;wBAChE,2DAAI,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAM,CACzE;oBACN,2DAAI,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAM,CACrE,CACK,CACZ,CACK,CACP,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,cAAc,CAAC,OAA0B,EAAE,QAAgB,CAAC;QAC3D,MAAM,SAAS,GAAkB,EAAE,CAAC;QAEpC,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;YAC5B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;YACzE,SAAS,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;QACpC,CAAC;aAAM,CAAC;YACP,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;QAC/C,CAAC;QAED,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,QAAQ,GAAG,CAAC,OAAe,EAAE,KAAa,EAAE,EAAE;QAC7C,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QACrD,OAAO,CACN,UAAI,KAAK,EAAE,kEAAkE,KAAK,EAAE;YACnF,SAAG,SAAS,EAAE,WAAW,GAAM,CAC3B,CACL,CAAC;IACH,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\nconst GUIDE_LABEL = {\r\n help: '활용 TIP',\r\n pdf: 'PDF Guide',\r\n youtube: 'Video Guide',\r\n notion: '사용 가이드',\r\n event: 'Event Button',\r\n};\r\n\r\nconst GUIDE_ICON = {\r\n help: {\r\n  name: 'helpOutline',\r\n  size: 20,\r\n  color: colors.green_65,\r\n },\r\n pdf: { name: 'pdf', size: 20, color: colors.red_75 },\r\n youtube: { name: 'youtube', size: 20, color: colors.red_75 },\r\n notion: { name: 'notion', size: 16, color: colors.black },\r\n event: { name: 'event', size: 16, color: colors.brilliantblue_70 },\r\n} as const;\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n scoped: true,\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: GuideType = 'help';\r\n @Prop() label: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n private handleClickGuide = () => {\r\n  if (this.type === 'help') {\r\n   this.popupShow = !this.popupShow;\r\n   return;\r\n  }\r\n\r\n  if (this.guideUrl) {\r\n   window.open(this.guideUrl, '_blank');\r\n  }\r\n };\r\n\r\n private get guideClass(): string {\r\n  const classes = ['sd-guide', `sd-guide--${this.type}`];\r\n\r\n  if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n // private getGuideStyle(): StyleProps {\r\n //  const styles: StyleProps = {};\r\n\r\n //  if (this.type === 'help') {\r\n //   styles['--guide-border'] = this.popupShow ? colors.green_65 : colors.grey_45;\r\n //   styles['--guide-color'] = this.popupShow ? colors.white : colors.grey_90;\r\n //   styles['--guide-background'] = this.popupShow ? colors.green_65 : colors.white;\r\n //  } else {\r\n //   styles['--guide-border'] = colors.grey_45;\r\n //   styles['--guide-color'] = colors.grey_90;\r\n //   styles['--guide-background'] = colors.white;\r\n //  }\r\n\r\n //  return styles;\r\n // }\r\n\r\n // private getGuidIcon(): { name: IconName; size: number; color: string } {\r\n //  if (this.type === 'pdf') {\r\n //   return { name: 'pdf', size: 20, color: colors.red_75 };\r\n //  } else if (this.type === 'youtube') {\r\n //   return { name: 'youtube', size: 20, color: colors.red_75 };\r\n //  } else if (this.type === 'notion') {\r\n //   return { name: 'notion', size: 16, color: colors.black };\r\n //  } else if (this.type === 'event') {\r\n //   return { name: 'event', size: 16, color: colors.brilliantblue_70 };\r\n //  }\r\n\r\n //  return { name: 'helpOutline', size: 20, color: this.popupShow ? colors.white : colors.green_65 };\r\n // }\r\n\r\n closeDropdown = () => {\r\n  this.popupShow = false;\r\n };\r\n\r\n render() {\r\n  // const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();\r\n  const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\r\n\r\n  return (\r\n   <Host>\r\n    <sd-button\r\n     ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n     class={this.guideClass}\r\n     variant=\"outline\"\r\n     label={GUIDE_LABEL[this.type]}\r\n     size=\"sm\"\r\n     color=\"grey_45\"\r\n     icon={iconName}\r\n     iconColor={iconColor}\r\n     iconSize={iconSize}\r\n     // iconStyle={{ marginRight: '4px' }}\r\n     // buttonStyle={{\r\n     //  height: '28px',\r\n     //  minHeight: '28px',\r\n     //  padding: '4px 12px',\r\n     //  borderRadius: '16px',\r\n     //  borderColor: 'var(--guide-border)',\r\n     //  color: 'var(--guide-color)',\r\n     //  fontSize: '12px',\r\n     //  fontWeight: '400',\r\n     //  backgroundColor: 'var(--guide-background)',\r\n     // }}\r\n     onSdClick={this.handleClickGuide}\r\n    />\r\n    {this.type === 'help' && this.popupShow && (\r\n     <sd-portal\r\n      open={this.popupShow}\r\n      parentRef={this.guideRef}\r\n      onSdClose={this.closeDropdown}\r\n      offset={[0, 4]}\r\n     >\r\n      <div\r\n       class=\"sd-guide__popup\"\r\n       style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n      >\r\n       <sd-button\r\n        class=\"sd-guide__popup__close\"\r\n        icon=\"close\"\r\n        color={colors.grey_65}\r\n        size=\"md\"\r\n        variant=\"ghost\"\r\n        noHover\r\n        // buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n        onSdClick={this.closeDropdown}\r\n       />\r\n       <div class=\"sd-guide__popup__header\">\r\n        <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n        <h3 class=\"sd-guide__popup__title\">{this.label || GUIDE_LABEL[this.type]}</h3>\r\n       </div>\r\n       <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n  const listItems: HTMLElement[] = [];\r\n\r\n  if (Array.isArray(message)) {\r\n   const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n   listItems.push(...depthMsg.flat());\r\n  } else {\r\n   listItems.push(this.renderLi(message, depth));\r\n  }\r\n\r\n  return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n  const listContent = message.replace(/ /gi, '&nbsp;');\r\n  return (\r\n   <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n    <p innerHTML={listContent}></p>\r\n   </li>\r\n  );\r\n };\r\n}\r\n"]}

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

@@ -25,7 +25,7 @@ export class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: 'bd94fdfbe96f53ff5c15ed51826678658b92173f', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'c13fce9315b416b3162b98abf6f6354f61d6db68', color: this.resolvedColor })));
+        return (h("i", { key: 'b727103f18fb77aeffa1e826154ca3cffbd9fd1b', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '1993b16afde46ce507ed442c20d24179cbd079c7', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get encapsulation() { return "scoped"; }
@@ -46,7 +46,7 @@ export class SdIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\"",
+                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"minus\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -89,11 +89,11 @@ export class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: '7dc06031ab0de29582234116e81c97e5049f255f', style: inputWidth }, this.label && h("div", { key: '7e6e83718e8677781a25fd4626d04b9308251e31', class: "sd-input__label" }, this.label), h("label", { key: '2218eaa7cd1f9374dcf371ff73bac367f372ae71', class: {
+        return (h(Host, { key: '9a0b975f20b4b8bbc8bff2aef4ee9036450921d4', style: inputWidth }, this.label && h("div", { key: 'ec6c840dcdaa7b9788c32ecbd03dc5daee74c748', class: "sd-input__label" }, this.label), h("label", { key: '4c11c34fd26897b50e0cfbb569de476c9e06884c', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: 'ca4e0dd0cad6044451c4a0c44a52a714f56e79d7', name: "prefix" }), h("input", { key: '8431e475f8271b0b3aa901092a9a0c4801bf89ed', 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) }), h("slot", { key: '514b0cae863501f5446ab6dc6318014f4aaf3f7c', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '5b09019f6186bb2a00601a2827d7e30fbf5e7594', name: "close", color: "#888", style: { marginRight: '-4px', marginLeft: '8px', cursor: 'pointer' }, onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '0d7df02ed548b12f415bd72f84ea411fde5ef549', name: "prefix" }), h("input", { key: '6203dcb95fd486d263e0fe33495243e95c332e1a', 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) }), h("slot", { key: '21544173b390be5607c50faf84f1d47fa703e8bf', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '39ed103b452ae49e2f492d8d0072ee42a842c4c0', name: "close", color: "#888", style: { marginRight: '-4px', marginLeft: '8px', cursor: 'pointer' }, onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);

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

@@ -73,12 +73,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: 'b4b8a4b6ff7ae8296a15310a9e8819589dd25164', class: this.paginationClasses }, h("div", { key: '695d69098c97c4c4e4c5416b67bc075fb4e4b181', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: 'ae962ed1dfbcb79c23c402d52d0a83822b54d4b3', class: this.paginationClasses }, h("div", { key: 'efa0dfbcc8d71d2b9ff5b02334a3d1e119a7f469', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '3762f013f7772d97999373eda3723d962ec7d73b', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'f0bd3b291453696e22a34f182a852a2a092874f2', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,11 +31,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'e0e3b29b38cd9e74725d7eed7e42d64eb6e9e1f6' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: 'b19a77b871760484f3a89df50fdb3fd7451d5346', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '9776d4750b4b676d8464e2612ce200c18ca19418', class: {
+        return (h(Fragment, { key: 'fb877e8d016d13fb33b49a1a4dbfed9fc01b1336' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '02208721da61cb84086a57c823f8e31775fdbd5e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '3f3c4fc690dac5061bda08af37121e2b98374979', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '820cb08e906f5f0a03e495ceaa093239c0a06bfe', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '3e10009ce426c5699e474dad640baa0abbe62b3e' })), h("div", { key: 'cf2bd57e1fff8465e64caf92898ec784cb111eeb', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'b6270c6f37b6c7479adef1c1c02d090294b45096', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '0f519f8d73cb81db03daa269593a1313cef58727', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '598e1877f6239d069f237f8004cfc3a74504f1ef', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '3a3bd0400e096c18bf61f203e32adca3e508570f', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '8499cf3d5ee858eebd50fc2aa06595c0f2240cc0', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: '6f0df95bafc2cbf564fd0e5a133c89f03c3a924b', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '535acee0be86db4ed58d6cc1631732541f1e475e' })), h("div", { key: 'd4366800a8cbd5a1f9630344a5ca4241b0eaa8dd', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '1cd9de3129988c5d26be0ded5b03520ab591cb9a', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '5aae57948bd5e0fd98e73a8ae504b77ce6cdbe07', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '814ac9ba0b2cf4367bb4cd5e688fa5433fee7126', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'a21ad0a5e28f8609b2f9d9accd0be5d81ed9de5b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '10738ec0926ea5fbc0b30b5c8c08b6cc37bf47d3', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -116,7 +116,7 @@ export class SdPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\"",
+                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"minus\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -92,7 +92,7 @@ export class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: 'ce83d878db1baad99ef8aad0bbb40dc679102cf7' });
+        return h("slot", { key: '00e0fc50bd1da8ae4f43b61ddcc37614a4738dde' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {