@sellmate/design-system 0.0.28 → 0.0.31

package/dist/collection/components/assets/notificationOutline/NotificationOutline32.js

@@ -0,0 +1,3 @@
+import { h } from "@stencil/core";
+export const NotificationOutline32 = (props) => (h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("g", { "clip-path": "url(#clip0_8699_12796)" }, h("g", { "clip-path": "url(#clip1_8699_12796)" }, h("path", { d: "M15.9993 1.39973C24.0625 1.39973 30.5996 7.93629 30.5999 15.9993C30.5999 24.0627 24.0627 30.5999 15.9993 30.5999C7.93627 30.5996 1.39972 24.0625 1.39972 15.9993C1.40008 7.93651 7.93649 1.40009 15.9993 1.39973ZM15.9993 3.39973C9.04106 3.40009 3.40008 9.04108 3.39972 15.9993C3.39972 22.9579 9.04084 28.5996 15.9993 28.5999C22.9581 28.5999 28.5999 22.9581 28.5999 15.9993C28.5996 9.04086 22.9579 3.39973 15.9993 3.39973ZM16.0003 20.6663C16.7365 20.6665 17.3333 21.264 17.3333 22.0003C17.3331 22.7365 16.7364 23.3332 16.0003 23.3333C15.264 23.3333 14.6665 22.7366 14.6663 22.0003C14.6663 21.2639 15.2639 20.6663 16.0003 20.6663ZM16.0003 8.50032C16.5524 8.50049 17.0003 8.94814 17.0003 9.50032V17.5003C17.0001 18.0524 16.5523 18.5002 16.0003 18.5003C15.4481 18.5003 15.0005 18.0525 15.0003 17.5003V9.50032C15.0003 8.94804 15.448 8.50032 16.0003 8.50032Z", fill: "currentColor" }))), h("defs", null, h("clipPath", { id: "clip0_8699_12796" }, h("rect", { width: "32", height: "32", fill: "transparent" })), h("clipPath", { id: "clip1_8699_12796" }, h("rect", { width: "32", height: "32", fill: "transparent" })))));
+//# sourceMappingURL=NotificationOutline32.js.map

package/dist/collection/components/assets/notificationOutline/NotificationOutline32.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationOutline32.js","sourceRoot":"","sources":["../../../../src/components/assets/notificationOutline/NotificationOutline32.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,CACzD,WACC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK;IAET,sBAAa,wBAAwB;QACpC,sBAAa,wBAAwB;YACpC,YACC,CAAC,EAAC,m1BAAm1B,EACr1B,IAAI,EAAC,cAAc,GAClB,CACC,CACD;IACJ;QACC,gBAAU,EAAE,EAAC,kBAAkB;YAC9B,YAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,aAAa,GAAG,CACxC;QACX,gBAAU,EAAE,EAAC,kBAAkB;YAC9B,YAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,aAAa,GAAG,CACxC,CACL,CACF,CACN,CAAC","sourcesContent":["import { h } from '@stencil/core';\n\nexport const NotificationOutline32 = (props: SVGProps) => (\n <svg\n  width=\"32\"\n  height=\"32\"\n  viewBox=\"0 0 32 32\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  {...props}\n >\n  <g clip-path=\"url(#clip0_8699_12796)\">\n   <g clip-path=\"url(#clip1_8699_12796)\">\n    <path\n     d=\"M15.9993 1.39973C24.0625 1.39973 30.5996 7.93629 30.5999 15.9993C30.5999 24.0627 24.0627 30.5999 15.9993 30.5999C7.93627 30.5996 1.39972 24.0625 1.39972 15.9993C1.40008 7.93651 7.93649 1.40009 15.9993 1.39973ZM15.9993 3.39973C9.04106 3.40009 3.40008 9.04108 3.39972 15.9993C3.39972 22.9579 9.04084 28.5996 15.9993 28.5999C22.9581 28.5999 28.5999 22.9581 28.5999 15.9993C28.5996 9.04086 22.9579 3.39973 15.9993 3.39973ZM16.0003 20.6663C16.7365 20.6665 17.3333 21.264 17.3333 22.0003C17.3331 22.7365 16.7364 23.3332 16.0003 23.3333C15.264 23.3333 14.6665 22.7366 14.6663 22.0003C14.6663 21.2639 15.2639 20.6663 16.0003 20.6663ZM16.0003 8.50032C16.5524 8.50049 17.0003 8.94814 17.0003 9.50032V17.5003C17.0001 18.0524 16.5523 18.5002 16.0003 18.5003C15.4481 18.5003 15.0005 18.0525 15.0003 17.5003V9.50032C15.0003 8.94804 15.448 8.50032 16.0003 8.50032Z\"\n     fill=\"currentColor\"\n    />\n   </g>\n  </g>\n  <defs>\n   <clipPath id=\"clip0_8699_12796\">\n    <rect width=\"32\" height=\"32\" fill=\"transparent\" />\n   </clipPath>\n   <clipPath id=\"clip1_8699_12796\">\n    <rect width=\"32\" height=\"32\" fill=\"transparent\" />\n   </clipPath>\n  </defs>\n </svg>\n);\n"]}

package/dist/collection/components/assets/notificationOutline/NotificationOutline8.js

@@ -0,0 +1,3 @@
+import { h } from "@stencil/core";
+export const NotificationOutline8 = (props) => (h("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("g", { "clip-path": "url(#clip0_8773_8722)" }, h("path", { d: "M4.00031 0.30014C6.04356 0.300351 7.6995 1.95704 7.69952 4.00034C7.69931 6.04348 6.04345 7.69934 4.00031 7.69955C1.95702 7.69951 0.300321 6.04358 0.30011 4.00034C0.300137 1.95693 1.95691 0.300184 4.00031 0.30014ZM4.00031 0.89975C2.28828 0.899794 0.899747 2.2883 0.899719 4.00034C0.89993 5.71221 2.28839 7.0999 4.00031 7.09995C5.71208 7.09973 7.0997 5.71211 7.09991 4.00034C7.09989 2.28841 5.71219 0.899961 4.00031 0.89975ZM4.00031 5.16635C4.18426 5.16652 4.33331 5.31634 4.33331 5.50034C4.33313 5.68417 4.18415 5.83318 4.00031 5.83334C3.81632 5.83334 3.6665 5.68428 3.66632 5.50034C3.66632 5.31624 3.81621 5.16635 4.00031 5.16635ZM4.00031 2.07553C4.16585 2.0757 4.30011 2.20975 4.30011 2.37534V4.37534C4.29993 4.54077 4.16574 4.67498 4.00031 4.67514C3.83473 4.67514 3.70068 4.54087 3.7005 4.37534V2.37534C3.7005 2.20965 3.83462 2.07553 4.00031 2.07553Z", fill: "currentColor" })), h("defs", null, h("clipPath", { id: "clip0_8773_8722" }, h("rect", { width: "8", height: "8", fill: "transparent" })))));
+//# sourceMappingURL=NotificationOutline8.js.map

package/dist/collection/components/assets/notificationOutline/NotificationOutline8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationOutline8.js","sourceRoot":"","sources":["../../../../src/components/assets/notificationOutline/NotificationOutline8.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,CACxD,WACC,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK;IAET,sBAAa,uBAAuB;QACnC,YACC,CAAC,EAAC,s1BAAs1B,EACx1B,IAAI,EAAC,cAAc,GAClB,CACC;IACJ;QACC,gBAAU,EAAE,EAAC,iBAAiB;YAC7B,YAAM,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAC,aAAa,GAAG,CACtC,CACL,CACF,CACN,CAAC","sourcesContent":["import { h } from '@stencil/core';\n\nexport const NotificationOutline8 = (props: SVGProps) => (\n <svg\n  width=\"8\"\n  height=\"8\"\n  viewBox=\"0 0 8 8\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  {...props}\n >\n  <g clip-path=\"url(#clip0_8773_8722)\">\n   <path\n    d=\"M4.00031 0.30014C6.04356 0.300351 7.6995 1.95704 7.69952 4.00034C7.69931 6.04348 6.04345 7.69934 4.00031 7.69955C1.95702 7.69951 0.300321 6.04358 0.30011 4.00034C0.300137 1.95693 1.95691 0.300184 4.00031 0.30014ZM4.00031 0.89975C2.28828 0.899794 0.899747 2.2883 0.899719 4.00034C0.89993 5.71221 2.28839 7.0999 4.00031 7.09995C5.71208 7.09973 7.0997 5.71211 7.09991 4.00034C7.09989 2.28841 5.71219 0.899961 4.00031 0.89975ZM4.00031 5.16635C4.18426 5.16652 4.33331 5.31634 4.33331 5.50034C4.33313 5.68417 4.18415 5.83318 4.00031 5.83334C3.81632 5.83334 3.6665 5.68428 3.66632 5.50034C3.66632 5.31624 3.81621 5.16635 4.00031 5.16635ZM4.00031 2.07553C4.16585 2.0757 4.30011 2.20975 4.30011 2.37534V4.37534C4.29993 4.54077 4.16574 4.67498 4.00031 4.67514C3.83473 4.67514 3.70068 4.54087 3.7005 4.37534V2.37534C3.7005 2.20965 3.83462 2.07553 4.00031 2.07553Z\"\n    fill=\"currentColor\"\n   />\n  </g>\n  <defs>\n   <clipPath id=\"clip0_8773_8722\">\n    <rect width=\"8\" height=\"8\" fill=\"transparent\" />\n   </clipPath>\n  </defs>\n </svg>\n);\n"]}

package/dist/collection/components/assets/notificationOutline/index.js

@@ -0,0 +1,17 @@
+import { NotificationOutline10 } from "./NotificationOutline10";
+import { NotificationOutline12 } from "./NotificationOutline12";
+import { NotificationOutline16 } from "./NotificationOutline16";
+import { NotificationOutline20 } from "./NotificationOutline20";
+import { NotificationOutline24 } from "./NotificationOutline24";
+import { NotificationOutline32 } from "./NotificationOutline32";
+import { NotificationOutline8 } from "./NotificationOutline8";
+export const notificationOutline = {
+    8: NotificationOutline8,
+    10: NotificationOutline10,
+    12: NotificationOutline12,
+    16: NotificationOutline16,
+    20: NotificationOutline20,
+    24: NotificationOutline24,
+    32: NotificationOutline32,
+};
+//# sourceMappingURL=index.js.map

package/dist/collection/components/assets/notificationOutline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/assets/notificationOutline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,CAAC,MAAM,mBAAmB,GAAG;IAClC,CAAC,EAAE,oBAAoB;IACvB,EAAE,EAAE,qBAAqB;IACzB,EAAE,EAAE,qBAAqB;IACzB,EAAE,EAAE,qBAAqB;IACzB,EAAE,EAAE,qBAAqB;IACzB,EAAE,EAAE,qBAAqB;IACzB,EAAE,EAAE,qBAAqB;CACzB,CAAC","sourcesContent":["import { NotificationOutline10 } from './NotificationOutline10';\nimport { NotificationOutline12 } from './NotificationOutline12';\nimport { NotificationOutline16 } from './NotificationOutline16';\nimport { NotificationOutline20 } from './NotificationOutline20';\nimport { NotificationOutline24 } from './NotificationOutline24';\nimport { NotificationOutline32 } from './NotificationOutline32';\nimport { NotificationOutline8 } from './NotificationOutline8';\n\nexport const notificationOutline = {\n 8: NotificationOutline8,\n 10: NotificationOutline10,\n 12: NotificationOutline12,\n 16: NotificationOutline16,\n 20: NotificationOutline20,\n 24: NotificationOutline24,\n 32: NotificationOutline32,\n};\n"]}

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

@@ -201,7 +201,7 @@ export class SdButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"youtube\" | \"search\" | \"pdf\" | \"notion\" | \"pageMove\" | \"minus\" | \"helpOutline\" | \"event\" | \"date\" | \"close\" | \"check\" | \"barcode\" | \"arrowUpDown\" | \"arrowUp\" | \"arrowRightEnd\" | \"arrowRight\" | \"arrowLeftEnd\" | \"arrowLeft\" | \"arrow2Down\" | \"arrowDown\" | undefined",
+                    "resolved": "\"youtube\" | \"search\" | \"pdf\" | \"notion\" | \"pageMove\" | \"notificationFilled\" | \"notificationOutline\" | \"minus\" | \"helpOutline\" | \"event\" | \"etc\" | \"date\" | \"close\" | \"CheckOutline\" | \"CheckFilled\" | \"check\" | \"barcode\" | \"arrowUpDown\" | \"arrowUp\" | \"arrowRightEnd\" | \"arrowRight\" | \"arrowLeftEnd\" | \"arrowLeft\" | \"arrow2Up\" | \"arrow2Down\" | \"arrowDown\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -263,7 +263,7 @@ export class SdButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"youtube\" | \"search\" | \"pdf\" | \"notion\" | \"pageMove\" | \"minus\" | \"helpOutline\" | \"event\" | \"date\" | \"close\" | \"check\" | \"barcode\" | \"arrowUpDown\" | \"arrowUp\" | \"arrowRightEnd\" | \"arrowRight\" | \"arrowLeftEnd\" | \"arrowLeft\" | \"arrow2Down\" | \"arrowDown\" | undefined",
+                    "resolved": "\"youtube\" | \"search\" | \"pdf\" | \"notion\" | \"pageMove\" | \"notificationFilled\" | \"notificationOutline\" | \"minus\" | \"helpOutline\" | \"event\" | \"etc\" | \"date\" | \"close\" | \"CheckOutline\" | \"CheckFilled\" | \"check\" | \"barcode\" | \"arrowUpDown\" | \"arrowUp\" | \"arrowRightEnd\" | \"arrowRight\" | \"arrowLeftEnd\" | \"arrowLeft\" | \"arrow2Up\" | \"arrow2Down\" | \"arrowDown\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -45,7 +45,7 @@ export class SdIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"arrow2Down\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"arrowUpDown\" | \"barcode\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"minus\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\"",
+                    "resolved": "\"youtube\" | \"search\" | \"pdf\" | \"notion\" | \"pageMove\" | \"notificationFilled\" | \"notificationOutline\" | \"minus\" | \"helpOutline\" | \"event\" | \"etc\" | \"date\" | \"close\" | \"CheckOutline\" | \"CheckFilled\" | \"check\" | \"barcode\" | \"arrowUpDown\" | \"arrowUp\" | \"arrowRightEnd\" | \"arrowRight\" | \"arrowLeftEnd\" | \"arrowLeft\" | \"arrow2Up\" | \"arrow2Down\" | \"arrowDown\"",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -116,7 +116,7 @@ export class SdPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"arrow2Down\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"arrowUpDown\" | \"barcode\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"minus\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\"",
+                    "resolved": "\"youtube\" | \"search\" | \"pdf\" | \"notion\" | \"pageMove\" | \"notificationFilled\" | \"notificationOutline\" | \"minus\" | \"helpOutline\" | \"event\" | \"etc\" | \"date\" | \"close\" | \"CheckOutline\" | \"CheckFilled\" | \"check\" | \"barcode\" | \"arrowUpDown\" | \"arrowUp\" | \"arrowRightEnd\" | \"arrowRight\" | \"arrowLeftEnd\" | \"arrowLeft\" | \"arrow2Up\" | \"arrow2Down\" | \"arrowDown\"",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -0,0 +1,61 @@
+sd-progress {
+  display: block;
+}
+sd-progress .sd-progress__bar {
+  position: relative;
+  width: 360px;
+  height: 20px;
+  overflow: hidden;
+  border-radius: 4px;
+  background-color: #eeeeee;
+  text-align: center;
+}
+sd-progress .sd-progress__bar__percent {
+  width: var(--progress-percentage);
+  height: 100%;
+  border-radius: 4px;
+  background-color: var(--progress-color, #0075ff);
+  transition: all 0.5s;
+}
+sd-progress .sd-progress__bar__percent.proceed {
+  border-top-right-radius: 50%;
+}
+sd-progress .sd-progress__bar__indicator {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 20px;
+  width: 100%;
+  background-color: #eeeeee;
+  line-height: 21px;
+  z-index: 1;
+}
+sd-progress .sd-progress__bar__indicator--left {
+  color: var(--progress-color, #0075ff);
+  clip-path: inset(0 0 0 var(--progress-percentage));
+}
+sd-progress .sd-progress__bar__indicator--right {
+  color: white;
+  background-color: var(--progress-color, #0075ff);
+  clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);
+}
+sd-progress .sd-progress__spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+sd-progress .sd-progress__spinner svg {
+  transform: rotate(-90deg);
+}
+sd-progress .sd-progress__spinner__label {
+  margin-top: 4px;
+  font-size: 16px;
+  color: var(--progress-color, #0075ff);
+}
+sd-progress .sd-progress__label {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #222222;
+  text-align: center;
+}

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

@@ -0,0 +1,194 @@
+import { Host, h } from "@stencil/core";
+export class SdProgress {
+    type = 'bar';
+    status = 'default';
+    percentage = 0;
+    size = 80;
+    strokeWidth = 12;
+    label;
+    statusColor = {
+        default: '#aaaaaa',
+        progress: '#0075ff',
+        complete: '#12B553',
+        error: '#FB4444',
+    };
+    render() {
+        return (h(Host, { key: '2e2f7cf77bbc63dfb15910a3bc50ac45601020cd', style: {
+                '--progress-color': this.statusColor[this.status],
+                '--progress-percentage': `${this.percentage}%`,
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '3e72a490e148886c59345e5ac3161f760e0f4e85', class: "sd-progress__label" }, this.label)));
+    }
+    renderBarProgress() {
+        return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
+    }
+    renderSpinnerProgress() {
+        const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
+        const circumference = 2 * Math.PI * radius; // 원의 둘레
+        const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset
+        const progressBgSize = `${this.size}px`;
+        const progressSize = `${this.size / 2}px`;
+        return (h("div", { class: `sd-progress__spinner sd-progress__spinner--${this.status}` }, h("svg", { width: progressBgSize, height: progressBgSize }, h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.statusColor[this.status], "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), h("strong", { class: "sd-progress__spinner__label" }, this.percentage, " %")));
+    }
+    static get is() { return "sd-progress"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-progress.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bar' | 'spinner'",
+                    "resolved": "\"bar\" | \"spinner\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'bar'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'progress' | 'complete' | 'error'",
+                    "resolved": "\"complete\" | \"default\" | \"error\" | \"progress\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "percentage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "percentage",
+                "defaultValue": "0"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "80"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "12"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//  <sd-progress id="sd-progress-1"></sd-progress>
+//  <sd-progress id="sd-progress-2" type="spinner"></sd-progress>
+//  <sd-progress id="sd-progress-3" type="spinner"></sd-progress>
+// <script>
+//  document.addEventListener('DOMContentLoaded', event => {
+//   progress = document.getElementById('sd-progress-1');
+//   progress2 = document.getElementById('sd-progress-2');
+//   progress3 = document.getElementById('sd-progress-3');
+//   progress2.label = 'test label...';
+//   progress3.percentage = 50;
+//   progress3.status = 'error';
+//   let percentage = 0;
+//   const interval = setInterval(() => {
+//    if (percentage >= 100) {
+//     clearInterval(interval);
+//     progress.status = 'complete';
+//     progress2.status = 'complete';
+//     return;
+//    }
+//    percentage += 10;
+//    progress.status = 'progress';
+//    progress.percentage = percentage;
+//    progress2.status = 'progress';
+//    progress2.percentage = percentage;
+//   }, 500);
+//  });
+// </script>
+//# sourceMappingURL=sd-progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-progress.js","sourceRoot":"","sources":["../../../src/components/sd-progress/sd-progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-progress',\n styleUrl: 'sd-progress.scss',\n})\nexport class SdProgress {\n @Prop() type: 'bar' | 'spinner' = 'bar';\n @Prop() status: 'default' | 'progress' | 'complete' | 'error' = 'default';\n @Prop() percentage: number = 0;\n @Prop() size: number = 80;\n @Prop() strokeWidth: number = 12;\n @Prop() label?: string;\n\n private statusColor = {\n  default: '#aaaaaa',\n  progress: '#0075ff',\n  complete: '#12B553',\n  error: '#FB4444',\n };\n\n render() {\n  return (\n   <Host\n    style={{\n     '--progress-color': this.statusColor[this.status],\n     '--progress-percentage': `${this.percentage}%`,\n    }}\n   >\n    {this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress()}\n    {this.label && <div class=\"sd-progress__label\">{this.label}</div>}\n   </Host>\n  );\n }\n\n renderBarProgress() {\n  return (\n   <div class={`sd-progress__bar sd-progress__bar--${this.status}`}>\n    <div\n     class={['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ')}\n    ></div>\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--left\">\n     {this.percentage}%\n    </div>\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--right\">\n     {this.percentage}%\n    </div>\n   </div>\n  );\n }\n\n renderSpinnerProgress() {\n  const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름\n  const circumference = 2 * Math.PI * radius; // 원의 둘레\n  const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset\n  const progressBgSize = `${this.size}px`;\n  const progressSize = `${this.size / 2}px`;\n\n  return (\n   <div class={`sd-progress__spinner sd-progress__spinner--${this.status}`}>\n    <svg width={progressBgSize} height={progressBgSize}>\n     <circle\n      cx={progressSize}\n      cy={progressSize}\n      r={radius}\n      stroke=\"#EEEEEE\"\n      stroke-width={this.strokeWidth}\n      fill=\"transparent\"\n     />\n     <circle\n      cx={progressSize}\n      cy={progressSize}\n      r={radius}\n      stroke={this.statusColor[this.status]}\n      stroke-width={this.strokeWidth}\n      fill=\"transparent\"\n      stroke-dasharray={circumference}\n      stroke-dashoffset={offset}\n      stroke-linecap=\"round\"\n      class=\"transition-all duration-500\"\n     />\n    </svg>\n    <strong class=\"sd-progress__spinner__label\">{this.percentage} %</strong>\n   </div>\n  );\n }\n}\n\n//  <sd-progress id=\"sd-progress-1\"></sd-progress>\n//  <sd-progress id=\"sd-progress-2\" type=\"spinner\"></sd-progress>\n//  <sd-progress id=\"sd-progress-3\" type=\"spinner\"></sd-progress>\n// <script>\n//  document.addEventListener('DOMContentLoaded', event => {\n//   progress = document.getElementById('sd-progress-1');\n//   progress2 = document.getElementById('sd-progress-2');\n//   progress3 = document.getElementById('sd-progress-3');\n//   progress2.label = 'test label...';\n//   progress3.percentage = 50;\n//   progress3.status = 'error';\n//   let percentage = 0;\n//   const interval = setInterval(() => {\n//    if (percentage >= 100) {\n//     clearInterval(interval);\n//     progress.status = 'complete';\n//     progress2.status = 'complete';\n//     return;\n//    }\n//    percentage += 10;\n//    progress.status = 'progress';\n//    progress.percentage = percentage;\n//    progress2.status = 'progress';\n//    progress2.percentage = percentage;\n//   }, 500);\n//  });\n// </script>\n"]}

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

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h(Host, { key: 'f627f75ea5e3765390729eac31e02e78ca084e95' }, h("div", { key: 'ce5f8aa53fb8ae3a3b165c5778aa352a99d0ddf8', class: {
+        return (h(Host, { key: '57acf795fbb642249d9716fc8fa4123f2d939d2b' }, h("div", { key: '6653deafa3142a3bf9b67290dae411c29fc38f41', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

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

@@ -208,11 +208,11 @@ export class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '8f2df6c0a3b6e8d2300a77bd84b993101824cae1', style: style }, h("div", { key: '9587ca5bb88d7767b5f48344063deef220964027', class: {
+        return (h(Host, { key: 'c569bb885003048b6ec22bfb0688c671a70a27d5', style: style }, h("div", { key: '94b43199502f44f7d663981c320696c6e8cf968f', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'f00fa7d7c2cbc6f751cc89411b1d77037a950e3e', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'd4fd6929b78add118c01d7b52c1c1e0be9867924', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

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

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: '6365bd1ae57487d7bbccf25637770aedecc2bc6c', class: {
+        return (h("div", { key: 'ab10e48405e8457f1319518f9790c5dd94d1b5e6', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'b48606dad43a722f434df8b384e3c92332d59f94', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '2c564c5480482ade27ebb0cb066cc3c971d1f8f2', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'e9b0636bc98818aa48b5d486c3e5b4c216b76046', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'b7495da88ddad187588569c64235ccc1697466fe', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '2175b4ec10bf631a419f5cfa439e0c24f6ccf5a7', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'bbb57f2a8c00e2bb56a4f6a5b68cb5d09d81d9c7', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'f8a51d2ea1a99ae17a1ba79fb6f802f0c2a27be1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'ee29e4503321462981c6d6fe497d70f271e5f814', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

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

@@ -43,20 +43,20 @@ export class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: '2a4473864df0253d22d03a7b1512d6261d2c5f1e' }, 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: '48ba8d56f7ee68ac71bd7076c98f8e7081635de5', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: 'edb64ac6facd530f02a3c663a4d7e728270bb914', class: {
+        return (h(Fragment, { key: '45dbef1d93b082f8fe42c003f997aa80ad297ee5' }, 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: '7357fe6678832a74c567b24e404d14d75a77b13f', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '3add41a611cb55fddaae7733b6db9ec996561723', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, h("i", { key: '2907f18d268eed0d0e70707b1fb113ca1b6ce1a6', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'fd6417e7cad6464f5830accca7842f9c2d5431ca', class: {
+            } }, h("i", { key: 'f62cfc386831412cb958da88a41e0487be40d119', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'daab1b1028832d95fb05456b96981cdeb1e31c4e', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), h("div", { key: '30e7d57e6bdd47ca5da01c8e94e6d29cc174de58', class: "sd-tooltip-menu__content", ref: el => {
+            } })), h("div", { key: 'ab7ca38aa68cf8279ff0d372651a4e26b217781c', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && h("span", { key: '9e6afb40c06db772ed94fd90c73713a1134e2866' }, this.el.textContent)), this.useClose && (h("div", { key: '8679d07e7d2e027f4a96ebaecd64b1fac9ecf503', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'aa018b14eeeb08f872af25d93c0bd36708bf36e8', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '0a0d3c6c246adccdb9b31502f13a1189a0a94554', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && h("span", { key: 'f5768e8b7e3033f64797aba77a504d57236e51e3' }, this.el.textContent)), this.useClose && (h("div", { key: '94bdf692fabf190912a64d6051957031b2964ae5', class: "sd-tooltip-menu__close-button" }, h("button", { key: '8826745fb1dab139358bc0d430d622abca333e5e', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '863f114251ec302425224a7385dd23292f7f6340', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {
@@ -156,7 +156,7 @@ export class SdTooltip {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"arrow2Down\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"arrowUpDown\" | \"barcode\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"minus\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\"",
+                    "resolved": "\"youtube\" | \"search\" | \"pdf\" | \"notion\" | \"pageMove\" | \"notificationFilled\" | \"notificationOutline\" | \"minus\" | \"helpOutline\" | \"event\" | \"etc\" | \"date\" | \"close\" | \"CheckOutline\" | \"CheckFilled\" | \"check\" | \"barcode\" | \"arrowUpDown\" | \"arrowUp\" | \"arrowRightEnd\" | \"arrowRight\" | \"arrowLeftEnd\" | \"arrowLeft\" | \"arrow2Up\" | \"arrow2Down\" | \"arrowDown\"",
                     "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: '094d59498ba589963103957db54a7eae9e9771c4' });
+        return h("slot", { key: '96e22fb7cd79afbef7bcb1a9b055e6a2bf54dd76' });
     }
     static get is() { return "sd-tooltip-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/{p-Dlnd_Pdj.js → p-B18yJb2O.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h } from './p-CbnL1UUF.js';
-import { d as defineCustomElement$2 } from './p-BClhb3Gm.js';
-import { d as defineCustomElement$1 } from './p-CWi3wc4b.js';
+import { d as defineCustomElement$2 } from './p-zEI1HiVv.js';
+import { d as defineCustomElement$1 } from './p-X8UHtq2f.js';
 
 const sdSelectOptionGroupCss = "sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:28px;font-size:12px;line-height:20px}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{padding-left:12px;background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox .sd-checkbox__bg{border-color:white !important}";
 
@@ -51,7 +51,7 @@ const SdSelectOptionGroup = /*@__PURE__*/ proxyCustomElement(class SdSelectOptio
         }
     };
     render() {
-        return (h("div", { key: '6365bd1ae57487d7bbccf25637770aedecc2bc6c', class: {
+        return (h("div", { key: 'ab10e48405e8457f1319518f9790c5dd94d1b5e6', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -60,10 +60,10 @@ const SdSelectOptionGroup = /*@__PURE__*/ proxyCustomElement(class SdSelectOptio
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'b48606dad43a722f434df8b384e3c92332d59f94', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '2c564c5480482ade27ebb0cb066cc3c971d1f8f2', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'e9b0636bc98818aa48b5d486c3e5b4c216b76046', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'b7495da88ddad187588569c64235ccc1697466fe', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '2175b4ec10bf631a419f5cfa439e0c24f6ccf5a7', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'bbb57f2a8c00e2bb56a4f6a5b68cb5d09d81d9c7', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'f8a51d2ea1a99ae17a1ba79fb6f802f0c2a27be1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'ee29e4503321462981c6d6fe497d70f271e5f814', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss; }
 }, [768, "sd-select-option-group", {
@@ -104,6 +104,6 @@ function defineCustomElement() {
 }
 
 export { SdSelectOptionGroup as S, defineCustomElement as d };
-//# sourceMappingURL=p-Dlnd_Pdj.js.map
+//# sourceMappingURL=p-B18yJb2O.js.map
 
-//# sourceMappingURL=p-Dlnd_Pdj.js.map
+//# sourceMappingURL=p-B18yJb2O.js.map

package/dist/components/{p-Dlnd_Pdj.js.map → p-B18yJb2O.js.map}

@@ -1 +1 @@
-{"file":"p-Dlnd_Pdj.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,4vEAA4vE;;MCO9wE,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGvB,IAAA,MAAM;AACN,IAAA,KAAK;IACL,UAAU,GAAmB,KAAK;IAClC,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAC5B,YAAY,GAAa,IAAI;AAC7B,IAAA,SAAS,GAAmD;AACnE,QAAA,aAAa,EAAE,CAAC;AAChB,QAAA,UAAU,EAAE,CAAC;KACb;IAEQ,SAAS,GAAY,KAAK;AAGnC,IAAA,MAAM,UAAU,GAAA;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU;;AAGxF,IAAA,WAAW;IAOZ,WAAW,GAAG,CACrB,MAAyB,EACzB,UAA0B,EAC1B,KAAiB,KACd;QACH,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,EAAE;AAC1D,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,UAAU;gBACV,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;YACF;;AAGD,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,UAAU;gBACV,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,yBAAyB,EAAE,IAAI;AAC/B,gBAAA,mCAAmC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;AACtD,gBAAA,mCAAmC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAC3D,kCAAkC,EAAE,IAAI,CAAC,SAAS;gBAClD,uCAAuC,EAAE,IAAI,CAAC,WAAW;AACzD,gBAAA,gCAAgC,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO;AAC9D,gBAAA,mCAAmC,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU;AACpE,gBAAA,+BAA+B,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM;aAC5D,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,EAAA,YAAA,EACX,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,EAAA,EAEvE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wCAAwC,EAAA,EACjD,IAAI,CAAC,WAAW,KAChB,oEACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC9B,OAAO,EAAE,CAAC,IAAG;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;AAClD,aAAC,GACa,CACf,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,EACrE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,KAChD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0CAA0C,EAAA,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,EAAE,aAAa,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,CAAQ,CAClI,CACI,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-option-group {\n display: block;\n height: fit-content;\n .sd-select__option-group {\n  display: flex;\n  padding: 4px 12px;\n  padding-left: 28px;\n  font-size: 12px;\n  line-height: 20px;\n\n  &.sd-select__option-group--group,\n  &.sd-select__option-group--subgroup {\n   &:not(.sd-select__option-group--use-checkbox) {\n    cursor: default;\n   }\n  }\n\n  &.sd-select__option-group--group {\n   padding-left: 12px;\n   background-color: $brilliantblue_05 !important;\n   color: $grey_90 !important;\n   font-weight: 700;\n  }\n\n  &.sd-select__option-group--subgroup {\n   padding-left: 20px;\n   background-color: $grey_05 !important;\n   color: $grey_90 !important;\n   font-weight: 500;\n  }\n\n  sd-checkbox {\n   &__bg {\n    border-color: $grey_65;\n   }\n  }\n\n  &__label-wrapper {\n   display: flex;\n   width: 100%;\n   column-gap: 8px;\n   align-items: center;\n   overflow: hidden;\n   white-space: nowrap;\n   text-overflow: ellipsis;\n\n   sd-checkbox {\n    flex-shrink: 0;\n   }\n\n   .sd-select__option-group-label {\n    flex: 0 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n   }\n\n   .sd-select__option-group__count-indicator {\n    width: fit-content;\n    flex-shrink: 0;\n    font-size: 12px;\n    font-weight: 500;\n    color: $grey_65;\n   }\n  }\n\n  &--focused {\n   background-color: $brilliantblue_20;\n  }\n\n  &--selected,\n  &--focused {\n   &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\n    color: $brilliantblue_75;\n    font-weight: 700;\n   }\n  }\n\n  &--disabled {\n   color: $grey_55;\n   cursor: not-allowed;\n  }\n\n  &:hover {\n   &:not(.sd-select__option-group--disabled) {\n    background-color: $brilliantblue_75;\n    color: white;\n   }\n\n   &.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox {\n    .sd-checkbox__bg {\n     border-color: white !important;\n    }\n   }\n  }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\n\n@Component({\n tag: 'sd-select-option-group',\n styleUrl: 'sd-select-option-group.scss',\n})\nexport class SdSelectOptionGroup {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOptionGroup;\n @Prop() index!: number;\n @Prop() isSelected: boolean | null = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n @Prop() useIndicator?: boolean = true;\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\n  selectedCount: 0,\n  totalCount: 0,\n };\n\n @State() isHovered: boolean = false;\n\n @Method()\n async isDisabled(): Promise<boolean> {\n  return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\n }\n\n @Event() optionClick!: EventEmitter<{\n  option: SelectOptionGroup;\n  isSelected: boolean | null;\n  index: number;\n  event: MouseEvent;\n }>;\n\n private handleClick = (\n  option: SelectOptionGroup,\n  isSelected: boolean | null,\n  event: MouseEvent,\n ) => {\n  event.stopPropagation();\n\n  if (option.type === 'group' || option.type === 'subgroup') {\n   this.optionClick.emit({\n    option: this.option,\n    isSelected,\n    index: this.index,\n    event,\n   });\n   return;\n  }\n\n  if (!this.option.disabled && !this.disabled) {\n   this.optionClick.emit({\n    option: this.option,\n    isSelected,\n    index: this.index,\n    event,\n   });\n  }\n };\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select__option-group': true,\n     'sd-select__option-group--selected': !!this.isSelected,\n     'sd-select__option-group--disabled': !!this.option.disabled,\n     'sd-select__option-group--focused': this.isFocused,\n     'sd-select__option-group--use-checkbox': this.useCheckbox,\n     'sd-select__option-group--group': this.option.type === 'group',\n     'sd-select__option-group--subgroup': this.option.type === 'subgroup',\n     'sd-select__option-group--item': this.option.type === 'item',\n    }}\n    onMouseEnter={() => (this.isHovered = true)}\n    onMouseLeave={() => (this.isHovered = false)}\n    style={this.optionStyle}\n    data-index={this.index}\n    onClick={event => this.handleClick(this.option, this.isSelected, event)}\n   >\n    <div class=\"sd-select__option-group__label-wrapper\">\n     {this.useCheckbox && (\n      <sd-checkbox\n       checked={this.isSelected}\n       disabled={this.option.disabled}\n       onClick={e => {\n        e.preventDefault();\n        this.handleClick(this.option, this.isSelected, e);\n       }}\n      ></sd-checkbox>\n     )}\n     <span class=\"sd-select__option-group-label\">{this.option.label}</span>\n     {this.useIndicator && this.option.type !== 'item' && (\n      <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\n     )}\n    </div>\n   </div>\n  );\n }\n}\n"],"version":3}
+{"file":"p-B18yJb2O.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-option-group {\n display: block;\n height: fit-content;\n .sd-select__option-group {\n  display: flex;\n  padding: 4px 12px;\n  padding-left: 28px;\n  font-size: 12px;\n  line-height: 20px;\n\n  &.sd-select__option-group--group,\n  &.sd-select__option-group--subgroup {\n   &:not(.sd-select__option-group--use-checkbox) {\n    cursor: default;\n   }\n  }\n\n  &.sd-select__option-group--group {\n   padding-left: 12px;\n   background-color: $brilliantblue_05 !important;\n   color: $grey_90 !important;\n   font-weight: 700;\n  }\n\n  &.sd-select__option-group--subgroup {\n   padding-left: 20px;\n   background-color: $grey_05 !important;\n   color: $grey_90 !important;\n   font-weight: 500;\n  }\n\n  sd-checkbox {\n   &__bg {\n    border-color: $grey_65;\n   }\n  }\n\n  &__label-wrapper {\n   display: flex;\n   width: 100%;\n   column-gap: 8px;\n   align-items: center;\n   overflow: hidden;\n   white-space: nowrap;\n   text-overflow: ellipsis;\n\n   sd-checkbox {\n    flex-shrink: 0;\n   }\n\n   .sd-select__option-group-label {\n    flex: 0 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n   }\n\n   .sd-select__option-group__count-indicator {\n    width: fit-content;\n    flex-shrink: 0;\n    font-size: 12px;\n    font-weight: 500;\n    color: $grey_65;\n   }\n  }\n\n  &--focused {\n   background-color: $brilliantblue_20;\n  }\n\n  &--selected,\n  &--focused {\n   &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\n    color: $brilliantblue_75;\n    font-weight: 700;\n   }\n  }\n\n  &--disabled {\n   color: $grey_55;\n   cursor: not-allowed;\n  }\n\n  &:hover {\n   &:not(.sd-select__option-group--disabled) {\n    background-color: $brilliantblue_75;\n    color: white;\n   }\n\n   &.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox {\n    .sd-checkbox__bg {\n     border-color: white !important;\n    }\n   }\n  }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\n\n@Component({\n tag: 'sd-select-option-group',\n styleUrl: 'sd-select-option-group.scss',\n})\nexport class SdSelectOptionGroup {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOptionGroup;\n @Prop() index!: number;\n @Prop() isSelected: boolean | null = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n @Prop() useIndicator?: boolean = true;\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\n  selectedCount: 0,\n  totalCount: 0,\n };\n\n @State() isHovered: boolean = false;\n\n @Method()\n async isDisabled(): Promise<boolean> {\n  return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\n }\n\n @Event() optionClick!: EventEmitter<{\n  option: SelectOptionGroup;\n  isSelected: boolean | null;\n  index: number;\n  event: MouseEvent;\n }>;\n\n private handleClick = (\n  option: SelectOptionGroup,\n  isSelected: boolean | null,\n  event: MouseEvent,\n ) => {\n  event.stopPropagation();\n\n  if (option.type === 'group' || option.type === 'subgroup') {\n   this.optionClick.emit({\n    option: this.option,\n    isSelected,\n    index: this.index,\n    event,\n   });\n   return;\n  }\n\n  if (!this.option.disabled && !this.disabled) {\n   this.optionClick.emit({\n    option: this.option,\n    isSelected,\n    index: this.index,\n    event,\n   });\n  }\n };\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select__option-group': true,\n     'sd-select__option-group--selected': !!this.isSelected,\n     'sd-select__option-group--disabled': !!this.option.disabled,\n     'sd-select__option-group--focused': this.isFocused,\n     'sd-select__option-group--use-checkbox': this.useCheckbox,\n     'sd-select__option-group--group': this.option.type === 'group',\n     'sd-select__option-group--subgroup': this.option.type === 'subgroup',\n     'sd-select__option-group--item': this.option.type === 'item',\n    }}\n    onMouseEnter={() => (this.isHovered = true)}\n    onMouseLeave={() => (this.isHovered = false)}\n    style={this.optionStyle}\n    data-index={this.index}\n    onClick={event => this.handleClick(this.option, this.isSelected, event)}\n   >\n    <div class=\"sd-select__option-group__label-wrapper\">\n     {this.useCheckbox && (\n      <sd-checkbox\n       checked={this.isSelected}\n       disabled={this.option.disabled}\n       onClick={e => {\n        e.preventDefault();\n        this.handleClick(this.option, this.isSelected, e);\n       }}\n      ></sd-checkbox>\n     )}\n     <span class=\"sd-select__option-group-label\">{this.option.label}</span>\n     {this.useIndicator && this.option.type !== 'item' && (\n      <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\n     )}\n    </div>\n   </div>\n  );\n }\n}\n"],"version":3}

package/dist/components/{p-c8NhJgfj.js → p-BLVHOrsi.js}

@@ -152,7 +152,7 @@ const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal e
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '094d59498ba589963103957db54a7eae9e9771c4' });
+        return h("slot", { key: '96e22fb7cd79afbef7bcb1a9b055e6a2bf54dd76' });
     }
 }, [769, "sd-tooltip-portal", {
         "to": [1],
@@ -177,6 +177,6 @@ function defineCustomElement() {
 }
 
 export { SdTooltipPortal as S, defineCustomElement as d };
-//# sourceMappingURL=p-c8NhJgfj.js.map
+//# sourceMappingURL=p-BLVHOrsi.js.map
 
-//# sourceMappingURL=p-c8NhJgfj.js.map
+//# sourceMappingURL=p-BLVHOrsi.js.map