@sellmate/design-system 0.0.1 → 0.0.3

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

@@ -0,0 +1,223 @@
+import { Host, h } from "@stencil/core";
+import colors from "../../styles/color.json";
+export class SdGuide {
+    el;
+    type = 'help';
+    popupTitle = '';
+    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;
+            return;
+        }
+        if (this.guideUrl) {
+            window.open(this.guideUrl, '_blank');
+        }
+    };
+    getGuideClasses() {
+        const classes = ['sd-guide'];
+        classes.push(`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 };
+    }
+    closeDropdown = () => {
+        this.popupShow = false;
+    };
+    render() {
+        const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
+        return (h(Host, { key: 'a56286f0027547de784fe294510b3249f7899f15', style: this.getGuideStyle() }, h("sd-button", { key: 'c1db0647448b3830f05b9cd9856f349fc9b3c2ca', 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: 'bbd220ae09816df67a7cff96f5a8d7359ea02a0a', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 24] }, h("div", { key: '839444f5533beba6a66a565bd28a59e0663eefef', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'eaf414c9d50d43fc12faab1a03c943b82d054a94', 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: 'e3195a06835a8c98a3591e820ef2183446fdc685', class: "sd-guide__popup__header" }, h("sd-icon", { key: '5544db3d1bb4d887cf008b8ee9658ea0b5c5208f', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '9492b9846a7b00dd67f01e44c95c19c427e36b52', class: "sd-guide__popup__title" }, this.popupTitle || SdGuide.guideTitle[this.type])), h("ul", { key: 'abf36fa7c8a413c4d26eb8c981badfcbf38989a7', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+    }
+    // 현재 2depth까지만 스타일 적용
+    renderListItem(message, depth = 0) {
+        const listItems = [];
+        if (Array.isArray(message)) {
+            const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
+            listItems.push(...depthMsg.flat());
+        }
+        else {
+            listItems.push(this.renderLi(message, depth));
+        }
+        return listItems;
+    }
+    renderLi = (message, depth) => {
+        const listContent = message.replace(/ /gi, ' ');
+        return (h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, h("p", { innerHTML: listContent })));
+    };
+    static get is() { return "sd-guide"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-guide.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-guide.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuideType",
+                    "resolved": "\"event\" | \"help\" | \"notion\" | \"pdf\" | \"youtube\"",
+                    "references": {
+                        "GuideType": {
+                            "location": "global",
+                            "id": "global::GuideType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'help'"
+            },
+            "popupTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popup-title",
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "guideUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "guide-url",
+                "defaultValue": "''"
+            },
+            "popupWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popup-width"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "popupShow": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=sd-guide.js.map

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

@@ -0,0 +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})\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"]}

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { Icons } from "../assets/index";
+import { resolveColor } from "../../utils/color";
 export class SdIcon {
     /** 아이콘명 */
     name;
@@ -11,6 +12,7 @@ export class SdIcon {
     rotate;
     /** 접근성을 위한 라벨 */
     label;
+    iconStyle = {};
     getIconClasses() {
         const classes = ['sd-icon'];
         if (this.rotate) {
@@ -18,9 +20,12 @@ export class SdIcon {
         }
         return classes.join(' ');
     }
+    get resolvedColor() {
+        return resolveColor(this.color);
+    }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '30977b51dcabd6e45df3cb9e56496bc87aecb25f', class: this.getIconClasses() }, h(IconComponent, { key: 'a4f46dfd37fdcb8655a89582bd33ad1f34d0a9b7', color: this.color })));
+        return (h("i", { key: 'e4a18e5410daf717d400488c1d68f1dd20017e71', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '1300823f018f8f63a23b9caf1529beafb0b3583c', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get encapsulation() { return "scoped"; }
@@ -41,7 +46,7 @@ export class SdIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"helpOutline\" | \"pageMove\" | \"search\"",
+                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -136,6 +141,29 @@ export class SdIcon {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label"
+            },
+            "iconStyle": {
+                "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": "{}"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"sd-icon.js","sourceRoot":"","sources":["../../../src/components/sd-icon/sd-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAOxC,MAAM,OAAO,MAAM;IAClB,WAAW;IACH,IAAI,CAAY;IAExB,aAAa;IACL,IAAI,GAAoB,EAAE,CAAC;IAEnC,aAAa;IACL,KAAK,CAAU;IAEvB,8BAA8B;IACtB,MAAM,CAAsB;IAEpC,iBAAiB;IACT,KAAK,CAAU;IAEf,cAAc;QACrB,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;QAE5B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAChD,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM;QACL,MAAM,aAAa,GAAI,KAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7D,OAAO,CACN,0DAAG,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC9B,EAAC,aAAa,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CACjC,CACJ,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\r\nimport { Icons } from '../assets/index';\r\n\r\n@Component({\r\n tag: 'sd-icon',\r\n styleUrl: 'sd-icon.scss',\r\n scoped: true,\r\n})\r\nexport class SdIcon {\r\n /** 아이콘명 */\r\n @Prop() name!: IconName;\r\n\r\n /** 아이콘 크기 */\r\n @Prop() size: number | string = 12;\r\n\r\n /** 아이콘 색상 */\r\n @Prop() color?: string;\r\n\r\n /** 회전 각도 (0, 90, 180, 270) */\r\n @Prop() rotate?: 0 | 90 | 180 | 270;\r\n\r\n /** 접근성을 위한 라벨 */\r\n @Prop() label?: string;\r\n\r\n private getIconClasses(): string {\r\n  const classes = ['sd-icon'];\r\n\r\n  if (this.rotate) {\r\n   classes.push(`sd-icon--rotate-${this.rotate}`);\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const IconComponent = (Icons as any)[this.name]?.[this.size];\r\n\r\n  return (\r\n   <i class={this.getIconClasses()}>\r\n    <IconComponent color={this.color} />\r\n   </i>\r\n  );\r\n }\r\n}\r\n"]}
+{"version":3,"file":"sd-icon.js","sourceRoot":"","sources":["../../../src/components/sd-icon/sd-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,OAAO,MAAM;IAClB,WAAW;IACH,IAAI,CAAY;IAExB,aAAa;IACL,IAAI,GAAoB,EAAE,CAAC;IAEnC,aAAa;IACL,KAAK,CAAU;IAEvB,8BAA8B;IACtB,MAAM,CAAsB;IAEpC,iBAAiB;IACT,KAAK,CAAU;IAEf,SAAS,GAAe,EAAE,CAAC;IAE3B,cAAc;QACrB,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;QAE5B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAChD,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,IAAY,aAAa;QACxB,OAAO,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAED,MAAM;QACL,MAAM,aAAa,GAAI,KAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7D,OAAO,CACN,0DAAG,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS;YACrD,EAAC,aAAa,qDAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,CACzC,CACJ,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\r\nimport { Icons } from '../assets/index';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\n@Component({\r\n tag: 'sd-icon',\r\n styleUrl: 'sd-icon.scss',\r\n scoped: true,\r\n})\r\nexport class SdIcon {\r\n /** 아이콘명 */\r\n @Prop() name!: IconName;\r\n\r\n /** 아이콘 크기 */\r\n @Prop() size: number | string = 12;\r\n\r\n /** 아이콘 색상 */\r\n @Prop() color?: string;\r\n\r\n /** 회전 각도 (0, 90, 180, 270) */\r\n @Prop() rotate?: 0 | 90 | 180 | 270;\r\n\r\n /** 접근성을 위한 라벨 */\r\n @Prop() label?: string;\r\n\r\n @Prop() iconStyle: StyleProps = {};\r\n\r\n private getIconClasses(): string {\r\n  const classes = ['sd-icon'];\r\n\r\n  if (this.rotate) {\r\n   classes.push(`sd-icon--rotate-${this.rotate}`);\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private get resolvedColor(): string {\r\n  return resolveColor(this.color);\r\n }\r\n\r\n render() {\r\n  const IconComponent = (Icons as any)[this.name]?.[this.size];\r\n\r\n  return (\r\n   <i class={this.getIconClasses()} style={this.iconStyle}>\r\n    <IconComponent color={this.resolvedColor} />\r\n   </i>\r\n  );\r\n }\r\n}\r\n"]}

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: 'b01d939e0fb4b9d524fff9683686d8d253a8eecf', style: inputWidth }, this.label && h("div", { key: '346385bdc560de391146f0c0ddd018456a37a61e', class: "sd-input__label" }, this.label), h("label", { key: '4cdc9831e793411f5706c5a1e1d50bb8c43f8785', class: {
+        return (h(Host, { key: 'd3d47bbc1d893415b3c04575abb474447b61c9cc', style: inputWidth }, this.label && h("div", { key: '80b9b4e3d39956b9582d7cd6cf1fa7558c2fa400', class: "sd-input__label" }, this.label), h("label", { key: '6a39cf5d0218196c2acf946995f0992abc1b1fdc', 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: 'ecaa663e9f7187369fdb6176914d30b5f9ba58f1', name: "prefix" }), h("input", { key: 'a2ca59d9d382b3c6b0c4d60f7d1b3f010dd2309f', 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: '6d7088d2963f9abd9f67fa46362e4704170cab92', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '316af2379845fdd28d64205fe004db14af57c620', 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: '64b0e848cb47fb226f72fe49a11e8743b01d73f0', name: "prefix" }), h("input", { key: '9d2a3b64cf708859b2612a67e54fff2e0978d3c4', 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: '40788d6c7294cacb0849a4ba6a0d4e3616e69c3a', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '5b407126127593c49a277b7461c912bed02073be', 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: '92c957c60ffeeeda3e63539f9c3cab2a095dbc7c', class: this.paginationClasses }, h("div", { key: '52ac01ba1fc359e4115b1e2e6e36a128d8e14872', 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: '21ac7d547e0a2ebc9bc285f3561278d373a70560', class: this.paginationClasses }, h("div", { key: 'b2e1dee06d5a3751d395fef397f9fd745a49b598', 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: '3546d87c8903e81bcdc63b06dd32bd6d2499e4fc', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '714367c37a7db25e5aadd00bb4ca102578d224bf', 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: '9aec040a3383939f677e753d9464fb59158d5222' }, 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: '5f81b8619b7c89c24112c179b38d741521db5172', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '0bb3e6d03cdfbba23f6db385df69779468b3cfde', class: {
+        return (h(Fragment, { key: 'd9ce7f31132bea70b2ff39bb6660053030ee2b5e' }, 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: '85bfde26c1020ab51e36d33ad427135d0fb98a80', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'd273fc2d701b6f3ab9328cccb000c00317738eb5', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: 'c7d1c7cbe97c30e98f20a19714af784c2baeedbb', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'b6785978514bbc0c003ac31c1558887a5a12b61a' })), h("div", { key: '90b03b3e7d35df967c85e2a118241962ef38565b', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '3891421b76a7a497c79a5b991d6ba53260689875', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '18eeae75241b756f99bd905edf202249e4bc8127', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '3babbd30d59d9de39e57c4643d8c3d51c0e83fd5', 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: '9416d777768cec79799e32adc68fb7efece9f46d', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '87ca1c2934cf5417baccbd257f789afdfaad3785', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: 'f9740977811bfd4f2b171e74482a3c7e71aebb06', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'c261ab4805baf022ca6dbab05c947ada6aa26db2' })), h("div", { key: '962f6cbcada06ebaad1083126573e2255665513d', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '0d39ddeaf9bbf1a59f35b02b6eb572c625ad7bf6', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '2ba5d4b5fafc792cc3095cb378f88a257a048a99', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '9b883a14a83f53e30fdc6f2a41a8f3741911d9bc', 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: '58d3669781fbdae03bfb6c9564e7d81a9d74cdf4', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '4cd92022824f8cc453181dccc50b4e591b312117', 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\" | \"helpOutline\" | \"pageMove\" | \"search\"",
+                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"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: 'afda2f6a1d9df008cd61bec755730911f8a78ad5' });
+        return h("slot", { key: '32b0689ed1ad8c20bc400292b63597bc3e56ce2b' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: '5ecd5d5c8b000e6b505be3cb198396871ac5a7d8', class: {
+        return (h("div", { key: 'afd8da214335c6ea6036a51c617b2b35df104f69', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

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

@@ -27,11 +27,11 @@ export class SdTooltip {
             : {
                 onClick: () => (console.log('click tooltip'), (this.showTooltip = !this.showTooltip)),
             };
-        return (h(Fragment, { key: '59b3dae6a52e0222d374414c9b5c048d4316dfc3' }, 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-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: 'a3170e8fcec8f32b757e1aee6d34aca2ad73473f', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: 'da74b401f08522a893d42fa1f43c3ad841487740', class: {
+        return (h(Fragment, { key: 'd6d3b9dcfa7adca962c626da9001a7087dd1f73f' }, 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-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '0aafc7f41c8812a08c1002008056d01f62951d16', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '2022144bc19c4c0710d081d83c9493a9d1f53ffb', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
-            } }, h("i", { key: '4c43e4e435e0aea4a5c37a17fb513b074c165e7c', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'd622a668ce8060d54023c5644a00f72b2812b1d8' })), h("div", { key: '8ddc2c7eb11e45f64f8cccd86de7aaa1aa2c9e77', class: "sd-tooltip-menu__content" }, h("slot", { key: 'b309b4c4ba5dd154866ea19bffe9e9bb8d2507b1' }, this.el.textContent)), this.useClose && (h("div", { key: '11b93866fc4e154e77585b0870d850614108a46a', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'a8a6550f4e6e9d776330ef78f3a5395277dc8c8b', onClick: () => this.handleClose() }, h("sd-icon", { key: 'ff32d1cb8f73c13a4d65b8cc61371399a799d582', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, h("i", { key: '7c503ee13b978888d27bc2138775f34fc6c89972', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'f500163bbeecbd5d4f0130bde665248e6296d35c' })), h("div", { key: '06b374cad79577a3ac4de0ec9edd0d5fd6883b14', class: "sd-tooltip-menu__content" }, h("slot", { key: '22ac66831512016f59387c9a12cfadd69e63b1a9' }, this.el.textContent)), this.useClose && (h("div", { key: '13f4c362a5805e0e9641d2f96c7371212dcf9bc5', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'aab27523f623aa2d9cd5257f8a5cc500fceb68af', onClick: () => this.handleClose() }, h("sd-icon", { key: 'eab2407e4925a2b4efe735338d2ac18c2b5f9504', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get is() { return "sd-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -112,7 +112,7 @@ export class SdTooltip {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"helpOutline\" | \"pageMove\" | \"search\"",
+                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -143,7 +143,7 @@ export class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '3d42ac26283280aa2c4fa7778d688882add3a102' });
+        return h("slot", { key: 'ea3fc7fd112d453f3f58f6a736f583e75896b74c' });
     }
     static get is() { return "sd-tooltip-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/color/index.js

@@ -0,0 +1,3 @@
+export * from './isColorKey';
+export * from './resolveColor';
+//# sourceMappingURL=index.js.map

package/dist/collection/utils/color/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/color/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './isColorKey';\r\nexport * from './resolveColor';\r\n"]}

package/dist/collection/utils/color/isColorKey.js

@@ -0,0 +1,7 @@
+import rawColors from "../../styles/color.json";
+export const colors = rawColors;
+// 키 존재 여부 타입 가드
+export function isColorKey(input) {
+    return input in colors;
+}
+//# sourceMappingURL=isColorKey.js.map

package/dist/collection/utils/color/isColorKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isColorKey.js","sourceRoot":"","sources":["../../../src/utils/color/isColorKey.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAGhD,MAAM,CAAC,MAAM,MAAM,GAAa,SAAqB,CAAC;AAGtD,gBAAgB;AAEhB,MAAM,UAAU,UAAU,CAAC,KAAa;IACvC,OAAO,KAAK,IAAI,MAAM,CAAC;AACxB,CAAC","sourcesContent":["import rawColors from '../../styles/color.json';\r\n\r\nexport type ColorMap = Record<string, string>;\r\nexport const colors: ColorMap = rawColors as ColorMap;\r\nexport type ColorKey = keyof typeof colors;\r\n\r\n// 키 존재 여부 타입 가드\r\n\r\nexport function isColorKey(input: string): input is ColorKey {\r\n return input in colors;\r\n}\r\n"]}

package/dist/collection/utils/color/resolveColor.js

@@ -0,0 +1,11 @@
+import rawColors from "../../styles/color.json";
+const colors = rawColors;
+// 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,
+// 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.
+export function resolveColor(input, fallback = '#025497') {
+    if (!input)
+        return fallback;
+    const mapped = colors[input];
+    return mapped || input;
+}
+//# sourceMappingURL=resolveColor.js.map

package/dist/collection/utils/color/resolveColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveColor.js","sourceRoot":"","sources":["../../../src/utils/color/resolveColor.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAGhD,MAAM,MAAM,GAAa,SAAqB,CAAC;AAE/C,0CAA0C;AAC1C,gDAAgD;AAEhD,MAAM,UAAU,YAAY,CAC3B,KAAgC,EAChC,WAAmB,SAAS;IAE5B,IAAI,CAAC,KAAK;QAAE,OAAO,QAAQ,CAAC;IAC5B,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7B,OAAO,MAAM,IAAI,KAAK,CAAC;AACxB,CAAC","sourcesContent":["import rawColors from '../../styles/color.json';\r\n\r\ntype ColorMap = Record<string, string>;\r\nconst colors: ColorMap = rawColors as ColorMap;\r\n\r\n// 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,\r\n// 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.\r\n\r\nexport function resolveColor(\r\n input: string | undefined | null,\r\n fallback: string = '#025497',\r\n): string {\r\n if (!input) return fallback;\r\n const mapped = colors[input];\r\n return mapped || input;\r\n}\r\n"]}

package/dist/components/{p-Cx7oaMbq.js → p-B9i2YE0t.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-dHboNV0o.js';
-import { d as defineCustomElement$2 } from './p-bl2GJqlS.js';
-import { d as defineCustomElement$1 } from './p-CKRSlqok.js';
+import { d as defineCustomElement$2 } from './p-ru6C2WME.js';
+import { d as defineCustomElement$1 } from './p-CUaQiV_x.js';
 
 const sdSelectOptionCss = "@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\");}:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}.sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px}.sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-select__option--focused{background-color:#e6f1ff}.sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox),.sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox){color:#0075ff;font-weight:700}.sd-select__option--disabled{color:#aaaaaa;cursor:not-allowed}.sd-select__option:hover:not(.sd-select__option--disabled){background-color:#0075ff;color:white}";
 
@@ -37,7 +37,7 @@ const SdSelectOption = /*@__PURE__*/ proxyCustomElement(class SdSelectOption ext
         }
     };
     render() {
-        return (h("div", { key: '5ecd5d5c8b000e6b505be3cb198396871ac5a7d8', class: {
+        return (h("div", { key: 'afd8da214335c6ea6036a51c617b2b35df104f69', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -89,6 +89,6 @@ function defineCustomElement() {
 }
 
 export { SdSelectOption as S, defineCustomElement as d };
-//# sourceMappingURL=p-Cx7oaMbq.js.map
+//# sourceMappingURL=p-B9i2YE0t.js.map
 
-//# sourceMappingURL=p-Cx7oaMbq.js.map
+//# sourceMappingURL=p-B9i2YE0t.js.map

package/dist/components/{p-Cx7oaMbq.js.map → p-B9i2YE0t.js.map}

@@ -1 +1 @@
-{"file":"p-Cx7oaMbq.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,+lpBAA+lpB;;MCQ5mpB,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AAGlB,IAAA,MAAM;AACN,IAAA,KAAK;IACL,UAAU,GAAY,KAAK;IAC3B,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAE3B,SAAS,GAAY,KAAK;AAGnC,IAAA,MAAM,UAAU,GAAA;AACf,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;;AAGrB,IAAA,WAAW;AAMZ,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;QAC3C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;;AAEJ,KAAC;IAED,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,mBAAmB,EAAE,IAAI;gBACzB,6BAA6B,EAAE,IAAI,CAAC,UAAU;AAC9C,gBAAA,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBACrD,4BAA4B,EAAE,IAAI,CAAC,SAAS;gBAC5C,iCAAiC,EAAE,IAAI,CAAC,WAAW;AACnD,aAAA,EACD,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,EACX,YAAA,EAAA,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,EAExB,EAAA,IAAI,CAAC,WAAW,IAChB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qCAAqC,EAAA,EAC/C,CAAA,CAAA,aAAA,EAAA,EACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC9B,aAAa,EACZ,CAAC,IAAI,CAAC;AACL,kBAAE,EAAE,WAAW,EAAE,MAAM;kBACrB,IAAI,CAAC;AACL,sBAAE,EAAE,WAAW,EAAE,OAAO;sBACtB,EAAE,WAAW,EAAE,SAAS,EAAE,EAEhC,OAAO,EAAE,CAAC,IAAG;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;AACpB,aAAC,EACa,CAAA,EACf,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAE,EAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,CAC3D,KAEN,IAAI,CAAC,MAAM,CAAC,KAAK,CACjB,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-option/sd-select-option.scss?tag=sd-select-option&encapsulation=shadow","src/components/sd-select/sd-select-option/sd-select-option.tsx"],"sourcesContent":["@import 'global';\r\n\r\n.sd-select__option {\r\n display: flex;\r\n padding: 4px 12px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n\r\n &__checkbox-wrapper {\r\n  display: flex;\r\n  width: 100%;\r\n  column-gap: 8px;\r\n  align-items: center;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n }\r\n\r\n &--focused {\r\n  background-color: $brilliantblue_20;\r\n }\r\n\r\n &--selected,\r\n &--focused {\r\n  &:not(:hover):not(.sd-select__option--use-checkbox) {\r\n   color: $brilliantblue_75;\r\n   font-weight: 700;\r\n  }\r\n }\r\n\r\n &--disabled {\r\n  color: $grey_55;\r\n  cursor: not-allowed;\r\n }\r\n\r\n &:hover {\r\n  &:not(.sd-select__option--disabled) {\r\n   background-color: $brilliantblue_75;\r\n   color: white;\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\r\nimport type { SelectOption } from '../../../types/select';\r\n\r\n@Component({\r\n tag: 'sd-select-option',\r\n styleUrl: 'sd-select-option.scss',\r\n shadow: true,\r\n})\r\nexport class SdSelectOption {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOption;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n  return !!this.option.disabled;\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n  option: SelectOption;\r\n  index: number;\r\n  event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n  event.stopPropagation();\r\n\r\n  if (!this.option.disabled && !this.disabled) {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    index: this.index,\r\n    event,\r\n   });\r\n  }\r\n };\r\n\r\n render() {\r\n  return (\r\n   <div\r\n    class={{\r\n     'sd-select__option': true,\r\n     'sd-select__option--selected': this.isSelected,\r\n     'sd-select__option--disabled': !!this.option.disabled,\r\n     'sd-select__option--focused': this.isFocused,\r\n     'sd-select__option--use-checkbox': this.useCheckbox,\r\n    }}\r\n    onMouseEnter={() => (this.isHovered = true)}\r\n    onMouseLeave={() => (this.isHovered = false)}\r\n    style={this.optionStyle}\r\n    data-index={this.index}\r\n    onClick={this.handleClick}\r\n   >\r\n    {this.useCheckbox ? (\r\n     <div class=\"sd-select__option__checkbox-wrapper\">\r\n      <sd-checkbox\r\n       checked={this.isSelected}\r\n       disabled={this.option.disabled}\r\n       checkboxStyle={\r\n        !this.isSelected\r\n         ? { borderColor: '#888' }\r\n         : this.isHovered\r\n           ? { borderColor: 'white' }\r\n           : { borderColor: '#0075ff' }\r\n       }\r\n       onClick={e => {\r\n        e.preventDefault();\r\n        this.handleClick(e);\r\n       }}\r\n      ></sd-checkbox>\r\n      <span class=\"sd-select__option-label\">{this.option.label}</span>\r\n     </div>\r\n    ) : (\r\n     this.option.label\r\n    )}\r\n   </div>\r\n  );\r\n }\r\n}\r\n"],"version":3}
+{"file":"p-B9i2YE0t.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,+lpBAA+lpB;;MCQ5mpB,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AAGlB,IAAA,MAAM;AACN,IAAA,KAAK;IACL,UAAU,GAAY,KAAK;IAC3B,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAE3B,SAAS,GAAY,KAAK;AAGnC,IAAA,MAAM,UAAU,GAAA;AACf,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;;AAGrB,IAAA,WAAW;AAMZ,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;QAC3C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;;AAEJ,KAAC;IAED,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,mBAAmB,EAAE,IAAI;gBACzB,6BAA6B,EAAE,IAAI,CAAC,UAAU;AAC9C,gBAAA,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBACrD,4BAA4B,EAAE,IAAI,CAAC,SAAS;gBAC5C,iCAAiC,EAAE,IAAI,CAAC,WAAW;AACnD,aAAA,EACD,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,EACX,YAAA,EAAA,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,EAExB,EAAA,IAAI,CAAC,WAAW,IAChB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qCAAqC,EAAA,EAC/C,CAAA,CAAA,aAAA,EAAA,EACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC9B,aAAa,EACZ,CAAC,IAAI,CAAC;AACL,kBAAE,EAAE,WAAW,EAAE,MAAM;kBACrB,IAAI,CAAC;AACL,sBAAE,EAAE,WAAW,EAAE,OAAO;sBACtB,EAAE,WAAW,EAAE,SAAS,EAAE,EAEhC,OAAO,EAAE,CAAC,IAAG;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;AACpB,aAAC,EACa,CAAA,EACf,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAE,EAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,CAC3D,KAEN,IAAI,CAAC,MAAM,CAAC,KAAK,CACjB,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-option/sd-select-option.scss?tag=sd-select-option&encapsulation=shadow","src/components/sd-select/sd-select-option/sd-select-option.tsx"],"sourcesContent":["@import 'global';\r\n\r\n.sd-select__option {\r\n display: flex;\r\n padding: 4px 12px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n\r\n &__checkbox-wrapper {\r\n  display: flex;\r\n  width: 100%;\r\n  column-gap: 8px;\r\n  align-items: center;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n }\r\n\r\n &--focused {\r\n  background-color: $brilliantblue_20;\r\n }\r\n\r\n &--selected,\r\n &--focused {\r\n  &:not(:hover):not(.sd-select__option--use-checkbox) {\r\n   color: $brilliantblue_75;\r\n   font-weight: 700;\r\n  }\r\n }\r\n\r\n &--disabled {\r\n  color: $grey_55;\r\n  cursor: not-allowed;\r\n }\r\n\r\n &:hover {\r\n  &:not(.sd-select__option--disabled) {\r\n   background-color: $brilliantblue_75;\r\n   color: white;\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\r\nimport type { SelectOption } from '../../../types/select';\r\n\r\n@Component({\r\n tag: 'sd-select-option',\r\n styleUrl: 'sd-select-option.scss',\r\n shadow: true,\r\n})\r\nexport class SdSelectOption {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOption;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n  return !!this.option.disabled;\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n  option: SelectOption;\r\n  index: number;\r\n  event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n  event.stopPropagation();\r\n\r\n  if (!this.option.disabled && !this.disabled) {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    index: this.index,\r\n    event,\r\n   });\r\n  }\r\n };\r\n\r\n render() {\r\n  return (\r\n   <div\r\n    class={{\r\n     'sd-select__option': true,\r\n     'sd-select__option--selected': this.isSelected,\r\n     'sd-select__option--disabled': !!this.option.disabled,\r\n     'sd-select__option--focused': this.isFocused,\r\n     'sd-select__option--use-checkbox': this.useCheckbox,\r\n    }}\r\n    onMouseEnter={() => (this.isHovered = true)}\r\n    onMouseLeave={() => (this.isHovered = false)}\r\n    style={this.optionStyle}\r\n    data-index={this.index}\r\n    onClick={this.handleClick}\r\n   >\r\n    {this.useCheckbox ? (\r\n     <div class=\"sd-select__option__checkbox-wrapper\">\r\n      <sd-checkbox\r\n       checked={this.isSelected}\r\n       disabled={this.option.disabled}\r\n       checkboxStyle={\r\n        !this.isSelected\r\n         ? { borderColor: '#888' }\r\n         : this.isHovered\r\n           ? { borderColor: 'white' }\r\n           : { borderColor: '#0075ff' }\r\n       }\r\n       onClick={e => {\r\n        e.preventDefault();\r\n        this.handleClick(e);\r\n       }}\r\n      ></sd-checkbox>\r\n      <span class=\"sd-select__option-label\">{this.option.label}</span>\r\n     </div>\r\n    ) : (\r\n     this.option.label\r\n    )}\r\n   </div>\r\n  );\r\n }\r\n}\r\n"],"version":3}