@getflip/swirl-components 0.0.0-beta-20260114160010

package/dist/collection/components/swirl-icon/icons/swirl-icon-call-end.js

@@ -0,0 +1,83 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconCallEnd {
+    constructor() {
+        this.size = 24;
+    }
+    render() {
+        const viewBoxSize = this.size === 20 ? 24 : this.size;
+        const styles = {
+            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+        };
+        const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+        return (h("svg", { key: '9bbb7d03b1e0bb8cb80ac9660d52cc00aed78f7f', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: '03686bda97a81c33fdce0ea1f374762b22bf4cd0' }, h("path", { key: '6455568514f89f3ae7e6400f8d0f3861e2cb7e51', d: "M2.26666 10.9333L0.733325 9.43325C0.599992 9.29992 0.533325 9.14436 0.533325 8.96659C0.533325 8.78881 0.599992 8.63325 0.733325 8.49992C1.7111 7.44436 2.83888 6.6527 4.11666 6.12492C5.39444 5.59714 6.68888 5.33325 7.99999 5.33325C9.3111 5.33325 10.6028 5.59714 11.875 6.12492C13.1472 6.6527 14.2778 7.44436 15.2667 8.49992C15.4 8.63325 15.4667 8.78881 15.4667 8.96659C15.4667 9.14436 15.4 9.29992 15.2667 9.43325L13.7333 10.9333C13.6111 11.0555 13.4694 11.1221 13.3083 11.1333C13.1472 11.1444 13 11.0999 12.8667 10.9999L10.9333 9.53325C10.8444 9.46659 10.7778 9.38881 10.7333 9.29992C10.6889 9.21103 10.6667 9.11103 10.6667 8.99992V7.09992C10.2444 6.96659 9.8111 6.86103 9.36666 6.78325C8.92221 6.70547 8.46666 6.66659 7.99999 6.66659C7.53333 6.66659 7.07777 6.70547 6.63333 6.78325C6.18888 6.86103 5.75555 6.96659 5.33333 7.09992V8.99992C5.33333 9.11103 5.3111 9.21103 5.26666 9.29992C5.22221 9.38881 5.15555 9.46659 5.06666 9.53325L3.13333 10.9999C2.99999 11.0999 2.85277 11.1444 2.69166 11.1333C2.53055 11.1221 2.38888 11.0555 2.26666 10.9333ZM3.99999 7.63325C3.67777 7.79992 3.36666 7.99159 3.06666 8.20825C2.76666 8.42492 2.45555 8.66659 2.13333 8.93325L2.79999 9.59992L3.99999 8.66659V7.63325ZM12 7.66659V8.66659L13.2 9.59992L13.8667 8.96659C13.5444 8.6777 13.2333 8.4277 12.9333 8.21659C12.6333 8.00547 12.3222 7.82214 12 7.66659Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: '26db818063000a7829d58da6cb9f1a9672af5c07' }, h("path", { key: '2793785b4fb6eb886ae28c2e78e47f2a1126d9a3', d: "M3.39999 16.4L1.09999 14.15C0.899988 13.95 0.799988 13.7167 0.799988 13.45C0.799988 13.1833 0.899988 12.95 1.09999 12.75C2.56665 11.1667 4.25832 9.97917 6.17499 9.1875C8.09165 8.39583 10.0333 8 12 8C13.9667 8 15.9042 8.39583 17.8125 9.1875C19.7208 9.97917 21.4167 11.1667 22.9 12.75C23.1 12.95 23.2 13.1833 23.2 13.45C23.2 13.7167 23.1 13.95 22.9 14.15L20.6 16.4C20.4167 16.5833 20.2042 16.6833 19.9625 16.7C19.7208 16.7167 19.5 16.65 19.3 16.5L16.4 14.3C16.2667 14.2 16.1667 14.0833 16.1 13.95C16.0333 13.8167 16 13.6667 16 13.5V10.65C15.3667 10.45 14.7167 10.2917 14.05 10.175C13.3833 10.0583 12.7 10 12 10C11.3 10 10.6167 10.0583 9.94999 10.175C9.28332 10.2917 8.63332 10.45 7.99999 10.65V13.5C7.99999 13.6667 7.96665 13.8167 7.89999 13.95C7.83332 14.0833 7.73332 14.2 7.59999 14.3L4.69999 16.5C4.49999 16.65 4.27915 16.7167 4.03749 16.7C3.79582 16.6833 3.58332 16.5833 3.39999 16.4ZM5.99999 11.45C5.51665 11.7 5.04999 11.9875 4.59999 12.3125C4.14999 12.6375 3.68332 13 3.19999 13.4L4.19999 14.4L5.99999 13V11.45ZM18 11.5V13L19.8 14.4L20.8 13.45C20.3167 13.0167 19.85 12.6417 19.4 12.325C18.95 12.0083 18.4833 11.7333 18 11.5Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: '254a1c2fe48b88d0a92578caa275620b35e75cda' }, h("path", { key: '8b3d1181055138c8e7bd58ff011dbdeaef5e828c', d: "M3.96668 19.1333L1.28335 16.5083C1.05002 16.2749 0.93335 16.0027 0.93335 15.6916C0.93335 15.3805 1.05002 15.1083 1.28335 14.8749C2.99446 13.0277 4.96807 11.6423 7.20418 10.7187C9.44029 9.79506 11.7056 9.33325 14 9.33325C16.2945 9.33325 18.5549 9.79506 20.7813 10.7187C23.0077 11.6423 24.9861 13.0277 26.7167 14.8749C26.95 15.1083 27.0667 15.3805 27.0667 15.6916C27.0667 16.0027 26.95 16.2749 26.7167 16.5083L24.0333 19.1333C23.8195 19.3471 23.5715 19.4638 23.2896 19.4833C23.0077 19.5027 22.75 19.4249 22.5167 19.2499L19.1333 16.6833C18.9778 16.5666 18.8611 16.4305 18.7833 16.2749C18.7056 16.1194 18.6667 15.9444 18.6667 15.7499V12.4249C17.9278 12.1916 17.1695 12.0069 16.3917 11.8708C15.6139 11.7346 14.8167 11.6666 14 11.6666C13.1833 11.6666 12.3861 11.7346 11.6083 11.8708C10.8306 12.0069 10.0722 12.1916 9.33335 12.4249V15.7499C9.33335 15.9444 9.29446 16.1194 9.21668 16.2749C9.13891 16.4305 9.02224 16.5666 8.86668 16.6833L5.48335 19.2499C5.25002 19.4249 4.99238 19.5027 4.71043 19.4833C4.42849 19.4638 4.18057 19.3471 3.96668 19.1333ZM7.00002 13.3583C6.43613 13.6499 5.89168 13.9853 5.36668 14.3645C4.84168 14.7437 4.29724 15.1666 3.73335 15.6333L4.90002 16.7999L7.00002 15.1666V13.3583ZM21 13.4166V15.1666L23.1 16.7999L24.2667 15.6916C23.7028 15.186 23.1583 14.7485 22.6333 14.3791C22.1083 14.0096 21.5639 13.6888 21 13.4166Z", fill: "currentColor" })))));
+    }
+    static get is() { return "swirl-icon-call-end"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconColor",
+                    "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                    "references": {
+                        "SwirlIconColor": {
+                            "location": "import",
+                            "path": "../swirl-icon",
+                            "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconSize",
+                    "resolved": "16 | 20 | 24 | 28",
+                    "references": {
+                        "SwirlIconSize": {
+                            "location": "import",
+                            "path": "../swirl-icon.types",
+                            "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "24"
+            }
+        };
+    }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-call.js

@@ -0,0 +1,83 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconCall {
+    constructor() {
+        this.size = 24;
+    }
+    render() {
+        const viewBoxSize = this.size === 20 ? 24 : this.size;
+        const styles = {
+            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+        };
+        const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+        return (h("svg", { key: 'ce3c5bdad427e3478f04515855a284676f2b7884', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: 'fc77580ab729001ae266cfa2a06f5c4b41385bc1' }, h("path", { key: '426d3a91276bbd6c0a98c0efeef86236d8bf55fd', d: "M13.3 14C11.9111 14 10.5389 13.6972 9.18333 13.0917C7.82778 12.4861 6.59444 11.6278 5.48333 10.5167C4.37222 9.40556 3.51389 8.17222 2.90833 6.81667C2.30278 5.46111 2 4.08889 2 2.7C2 2.5 2.06667 2.33333 2.2 2.2C2.33333 2.06667 2.5 2 2.7 2H5.4C5.55556 2 5.69444 2.05278 5.81667 2.15833C5.93889 2.26389 6.01111 2.38889 6.03333 2.53333L6.46667 4.86667C6.48889 5.04444 6.48333 5.19444 6.45 5.31667C6.41667 5.43889 6.35556 5.54444 6.26667 5.63333L4.65 7.26667C4.87222 7.67778 5.13611 8.075 5.44167 8.45833C5.74722 8.84167 6.08333 9.21111 6.45 9.56667C6.79444 9.91111 7.15556 10.2306 7.53333 10.525C7.91111 10.8194 8.31111 11.0889 8.73333 11.3333L10.3 9.76667C10.4 9.66667 10.5306 9.59167 10.6917 9.54167C10.8528 9.49167 11.0111 9.47778 11.1667 9.5L13.4667 9.96667C13.6222 10.0111 13.75 10.0917 13.85 10.2083C13.95 10.325 14 10.4556 14 10.6V13.3C14 13.5 13.9333 13.6667 13.8 13.8C13.6667 13.9333 13.5 14 13.3 14ZM4.01667 6L5.11667 4.9L4.83333 3.33333H3.35C3.40556 3.78889 3.48333 4.23889 3.58333 4.68333C3.68333 5.12778 3.82778 5.56667 4.01667 6ZM9.98333 11.9667C10.4167 12.1556 10.8583 12.3056 11.3083 12.4167C11.7583 12.5278 12.2111 12.6 12.6667 12.6333V11.1667L11.1 10.85L9.98333 11.9667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: '71796c0da8aa0714e68b4cd2730ebdbb97082b12' }, h("path", { key: '766ad3368077cc3f691c04f477e882d43873706c', d: "M19.95 21C17.8667 21 15.8083 20.5458 13.775 19.6375C11.7417 18.7292 9.89167 17.4417 8.225 15.775C6.55833 14.1083 5.27083 12.2583 4.3625 10.225C3.45417 8.19167 3 6.13333 3 4.05C3 3.75 3.1 3.5 3.3 3.3C3.5 3.1 3.75 3 4.05 3H8.1C8.33333 3 8.54167 3.07917 8.725 3.2375C8.90833 3.39583 9.01667 3.58333 9.05 3.8L9.7 7.3C9.73333 7.56667 9.725 7.79167 9.675 7.975C9.625 8.15833 9.53333 8.31667 9.4 8.45L6.975 10.9C7.30833 11.5167 7.70417 12.1125 8.1625 12.6875C8.62083 13.2625 9.125 13.8167 9.675 14.35C10.1917 14.8667 10.7333 15.3458 11.3 15.7875C11.8667 16.2292 12.4667 16.6333 13.1 17L15.45 14.65C15.6 14.5 15.7958 14.3875 16.0375 14.3125C16.2792 14.2375 16.5167 14.2167 16.75 14.25L20.2 14.95C20.4333 15.0167 20.625 15.1375 20.775 15.3125C20.925 15.4875 21 15.6833 21 15.9V19.95C21 20.25 20.9 20.5 20.7 20.7C20.5 20.9 20.25 21 19.95 21ZM6.025 9L7.675 7.35L7.25 5H5.025C5.10833 5.68333 5.225 6.35833 5.375 7.025C5.525 7.69167 5.74167 8.35 6.025 9ZM14.975 17.95C15.625 18.2333 16.2875 18.4583 16.9625 18.625C17.6375 18.7917 18.3167 18.9 19 18.95V16.75L16.65 16.275L14.975 17.95Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: '4d41bfc289305da99690eebc2f8972e284fb0839' }, h("path", { key: '5c4e6c50e417da63bf025f3882140a1fd7f63486', d: "M23.275 24.5C20.8444 24.5 18.4431 23.9701 16.0708 22.9104C13.6986 21.8507 11.5403 20.3486 9.59583 18.4042C7.65139 16.4597 6.14931 14.3014 5.08958 11.9292C4.02986 9.55694 3.5 7.15556 3.5 4.725C3.5 4.375 3.61667 4.08333 3.85 3.85C4.08333 3.61667 4.375 3.5 4.725 3.5H9.45C9.72222 3.5 9.96528 3.59236 10.1792 3.77708C10.3931 3.96181 10.5194 4.18056 10.5583 4.43333L11.3167 8.51667C11.3556 8.82778 11.3458 9.09028 11.2875 9.30417C11.2292 9.51806 11.1222 9.70278 10.9667 9.85833L8.1375 12.7167C8.52639 13.4361 8.98819 14.1313 9.52292 14.8021C10.0576 15.4729 10.6458 16.1194 11.2875 16.7417C11.8903 17.3444 12.5222 17.9035 13.1833 18.4188C13.8444 18.934 14.5444 19.4056 15.2833 19.8333L18.025 17.0917C18.2 16.9167 18.4285 16.7854 18.7104 16.6979C18.9924 16.6104 19.2694 16.5861 19.5417 16.625L23.5667 17.4417C23.8389 17.5194 24.0625 17.6604 24.2375 17.8646C24.4125 18.0688 24.5 18.2972 24.5 18.55V23.275C24.5 23.625 24.3833 23.9167 24.15 24.15C23.9167 24.3833 23.625 24.5 23.275 24.5ZM7.02917 10.5L8.95417 8.575L8.45833 5.83333H5.8625C5.95972 6.63056 6.09583 7.41806 6.27083 8.19583C6.44583 8.97361 6.69861 9.74167 7.02917 10.5ZM17.4708 20.9417C18.2292 21.2722 19.0021 21.5347 19.7896 21.7292C20.5771 21.9236 21.3694 22.05 22.1667 22.1083V19.5417L19.425 18.9875L17.4708 20.9417Z", fill: "currentColor" })))));
+    }
+    static get is() { return "swirl-icon-call"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconColor",
+                    "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                    "references": {
+                        "SwirlIconColor": {
+                            "location": "import",
+                            "path": "../swirl-icon",
+                            "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconSize",
+                    "resolved": "16 | 20 | 24 | 28",
+                    "references": {
+                        "SwirlIconSize": {
+                            "location": "import",
+                            "path": "../swirl-icon.types",
+                            "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "24"
+            }
+        };
+    }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-cancel-filled.js

@@ -0,0 +1,83 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconCancelFilled {
+    constructor() {
+        this.size = 24;
+    }
+    render() {
+        const viewBoxSize = this.size === 20 ? 24 : this.size;
+        const styles = {
+            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+        };
+        const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+        return (h("svg", { key: '60f35d8f3006d7d2f79000ebbc47ec8abb517d9a', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: '86a0ed3d62b56f345381f37c20b2ef58481215ab' }, h("path", { key: 'b4d4e2af7c742e39b8c6ef4391e09cc5d95c96f7', d: "M7.99967 8.93398L9.93301 10.8673C10.0552 10.9895 10.2108 11.0507 10.3997 11.0507C10.5886 11.0507 10.7441 10.9895 10.8663 10.8673C10.9886 10.7451 11.0497 10.5895 11.0497 10.4007C11.0497 10.2118 10.9886 10.0562 10.8663 9.93398L8.93301 8.00065L10.8663 6.06732C10.9886 5.9451 11.0497 5.78954 11.0497 5.60065C11.0497 5.41176 10.9886 5.25621 10.8663 5.13398C10.7441 5.01176 10.5886 4.95065 10.3997 4.95065C10.2108 4.95065 10.0552 5.01176 9.93301 5.13398L7.99967 7.06732L6.06634 5.13398C5.94412 5.01176 5.78856 4.95065 5.59967 4.95065C5.41079 4.95065 5.25523 5.01176 5.13301 5.13398C5.01079 5.25621 4.94967 5.41176 4.94967 5.60065C4.94967 5.78954 5.01079 5.9451 5.13301 6.06732L7.06634 8.00065L5.13301 9.93398C5.01079 10.0562 4.94967 10.2118 4.94967 10.4007C4.94967 10.5895 5.01079 10.7451 5.13301 10.8673C5.25523 10.9895 5.41079 11.0507 5.59967 11.0507C5.78856 11.0507 5.94412 10.9895 6.06634 10.8673L7.99967 8.93398ZM7.99967 14.6673C7.07745 14.6673 6.21079 14.4923 5.39967 14.1423C4.58856 13.7923 3.88301 13.3173 3.28301 12.7173C2.68301 12.1173 2.20801 11.4118 1.85801 10.6007C1.50801 9.78954 1.33301 8.92287 1.33301 8.00065C1.33301 7.07843 1.50801 6.21176 1.85801 5.40065C2.20801 4.58954 2.68301 3.88398 3.28301 3.28398C3.88301 2.68398 4.58856 2.20898 5.39967 1.85898C6.21079 1.50898 7.07745 1.33398 7.99967 1.33398C8.9219 1.33398 9.78856 1.50898 10.5997 1.85898C11.4108 2.20898 12.1163 2.68398 12.7163 3.28398C13.3163 3.88398 13.7913 4.58954 14.1413 5.40065C14.4913 6.21176 14.6663 7.07843 14.6663 8.00065C14.6663 8.92287 14.4913 9.78954 14.1413 10.6007C13.7913 11.4118 13.3163 12.1173 12.7163 12.7173C12.1163 13.3173 11.4108 13.7923 10.5997 14.1423C9.78856 14.4923 8.9219 14.6673 7.99967 14.6673Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'ad6f192fb473ee91b59237fcf3b5ba1521e7ad6c' }, h("path", { key: 'd167812f325293dafe4ab33510da37a4f7ebcc8c', d: "M12 13.4L14.9 16.3C15.0833 16.4833 15.3167 16.575 15.6 16.575C15.8833 16.575 16.1167 16.4833 16.3 16.3C16.4833 16.1167 16.575 15.8833 16.575 15.6C16.575 15.3167 16.4833 15.0833 16.3 14.9L13.4 12L16.3 9.1C16.4833 8.91667 16.575 8.68333 16.575 8.4C16.575 8.11667 16.4833 7.88333 16.3 7.7C16.1167 7.51667 15.8833 7.425 15.6 7.425C15.3167 7.425 15.0833 7.51667 14.9 7.7L12 10.6L9.1 7.7C8.91667 7.51667 8.68333 7.425 8.4 7.425C8.11667 7.425 7.88333 7.51667 7.7 7.7C7.51667 7.88333 7.425 8.11667 7.425 8.4C7.425 8.68333 7.51667 8.91667 7.7 9.1L10.6 12L7.7 14.9C7.51667 15.0833 7.425 15.3167 7.425 15.6C7.425 15.8833 7.51667 16.1167 7.7 16.3C7.88333 16.4833 8.11667 16.575 8.4 16.575C8.68333 16.575 8.91667 16.4833 9.1 16.3L12 13.4ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: '30fa65717af545070a397828f7ff292c31132437' }, h("path", { key: '54a705ff42d02bdcfdc09f0a611b2aa976d25822', d: "M13.9997 15.634L17.383 19.0173C17.5969 19.2312 17.8691 19.3382 18.1997 19.3382C18.5302 19.3382 18.8025 19.2312 19.0163 19.0173C19.2302 18.8034 19.3372 18.5312 19.3372 18.2007C19.3372 17.8701 19.2302 17.5979 19.0163 17.384L15.633 14.0007L19.0163 10.6173C19.2302 10.4034 19.3372 10.1312 19.3372 9.80065C19.3372 9.4701 19.2302 9.19787 19.0163 8.98398C18.8025 8.7701 18.5302 8.66315 18.1997 8.66315C17.8691 8.66315 17.5969 8.7701 17.383 8.98398L13.9997 12.3673L10.6163 8.98398C10.4025 8.7701 10.1302 8.66315 9.79967 8.66315C9.46912 8.66315 9.1969 8.7701 8.98301 8.98398C8.76912 9.19787 8.66217 9.4701 8.66217 9.80065C8.66217 10.1312 8.76912 10.4034 8.98301 10.6173L12.3663 14.0007L8.98301 17.384C8.76912 17.5979 8.66217 17.8701 8.66217 18.2007C8.66217 18.5312 8.76912 18.8034 8.98301 19.0173C9.1969 19.2312 9.46912 19.3382 9.79967 19.3382C10.1302 19.3382 10.4025 19.2312 10.6163 19.0173L13.9997 15.634ZM13.9997 25.6673C12.3858 25.6673 10.8691 25.3611 9.44967 24.7486C8.03023 24.1361 6.79551 23.3048 5.74551 22.2548C4.69551 21.2048 3.86426 19.9701 3.25176 18.5507C2.63926 17.1312 2.33301 15.6145 2.33301 14.0007C2.33301 12.3868 2.63926 10.8701 3.25176 9.45065C3.86426 8.03121 4.69551 6.79648 5.74551 5.74648C6.79551 4.69648 8.03023 3.86523 9.44967 3.25273C10.8691 2.64023 12.3858 2.33398 13.9997 2.33398C15.6136 2.33398 17.1302 2.64023 18.5497 3.25273C19.9691 3.86523 21.2038 4.69648 22.2538 5.74648C23.3038 6.79648 24.1351 8.03121 24.7476 9.45065C25.3601 10.8701 25.6663 12.3868 25.6663 14.0007C25.6663 15.6145 25.3601 17.1312 24.7476 18.5507C24.1351 19.9701 23.3038 21.2048 22.2538 22.2548C21.2038 23.3048 19.9691 24.1361 18.5497 24.7486C17.1302 25.3611 15.6136 25.6673 13.9997 25.6673Z", fill: "currentColor" })))));
+    }
+    static get is() { return "swirl-icon-cancel-filled"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconColor",
+                    "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                    "references": {
+                        "SwirlIconColor": {
+                            "location": "import",
+                            "path": "../swirl-icon",
+                            "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconSize",
+                    "resolved": "16 | 20 | 24 | 28",
+                    "references": {
+                        "SwirlIconSize": {
+                            "location": "import",
+                            "path": "../swirl-icon.types",
+                            "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "24"
+            }
+        };
+    }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-cancel-outline.js

@@ -0,0 +1,83 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconCancelOutline {
+    constructor() {
+        this.size = 24;
+    }
+    render() {
+        const viewBoxSize = this.size === 20 ? 24 : this.size;
+        const styles = {
+            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+        };
+        const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+        return (h("svg", { key: 'd42b18964564fe98347cd6378bebcd077f4b6e21', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: '10be7e97c40dd765fc07c5f9ff372b5464a22a52' }, h("path", { key: 'e6d4eadf96deaaff44f5e67ff39c01915dda8515', d: "M8 8.93301L9.93333 10.8663C10.0556 10.9886 10.2111 11.0497 10.4 11.0497C10.5889 11.0497 10.7444 10.9886 10.8667 10.8663C10.9889 10.7441 11.05 10.5886 11.05 10.3997C11.05 10.2108 10.9889 10.0552 10.8667 9.93301L8.93333 7.99967L10.8667 6.06634C10.9889 5.94412 11.05 5.78856 11.05 5.59967C11.05 5.41079 10.9889 5.25523 10.8667 5.13301C10.7444 5.01079 10.5889 4.94967 10.4 4.94967C10.2111 4.94967 10.0556 5.01079 9.93333 5.13301L8 7.06634L6.06667 5.13301C5.94444 5.01079 5.78889 4.94967 5.6 4.94967C5.41111 4.94967 5.25555 5.01079 5.13333 5.13301C5.01111 5.25523 4.95 5.41079 4.95 5.59967C4.95 5.78856 5.01111 5.94412 5.13333 6.06634L7.06667 7.99967L5.13333 9.93301C5.01111 10.0552 4.95 10.2108 4.95 10.3997C4.95 10.5886 5.01111 10.7441 5.13333 10.8663C5.25555 10.9886 5.41111 11.0497 5.6 11.0497C5.78889 11.0497 5.94444 10.9886 6.06667 10.8663L8 8.93301ZM8 14.6663C7.07778 14.6663 6.21111 14.4913 5.4 14.1413C4.58889 13.7913 3.88333 13.3163 3.28333 12.7163C2.68333 12.1163 2.20833 11.4108 1.85833 10.5997C1.50833 9.78856 1.33333 8.9219 1.33333 7.99967C1.33333 7.07745 1.50833 6.21079 1.85833 5.39967C2.20833 4.58856 2.68333 3.88301 3.28333 3.28301C3.88333 2.68301 4.58889 2.20801 5.4 1.85801C6.21111 1.50801 7.07778 1.33301 8 1.33301C8.92222 1.33301 9.78889 1.50801 10.6 1.85801C11.4111 2.20801 12.1167 2.68301 12.7167 3.28301C13.3167 3.88301 13.7917 4.58856 14.1417 5.39967C14.4917 6.21079 14.6667 7.07745 14.6667 7.99967C14.6667 8.9219 14.4917 9.78856 14.1417 10.5997C13.7917 11.4108 13.3167 12.1163 12.7167 12.7163C12.1167 13.3163 11.4111 13.7913 10.6 14.1413C9.78889 14.4913 8.92222 14.6663 8 14.6663ZM8 13.333C9.48889 13.333 10.75 12.8163 11.7833 11.783C12.8167 10.7497 13.3333 9.48856 13.3333 7.99967C13.3333 6.51079 12.8167 5.24967 11.7833 4.21634C10.75 3.18301 9.48889 2.66634 8 2.66634C6.51111 2.66634 5.25 3.18301 4.21667 4.21634C3.18333 5.24967 2.66667 6.51079 2.66667 7.99967C2.66667 9.48856 3.18333 10.7497 4.21667 11.783C5.25 12.8163 6.51111 13.333 8 13.333Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: '24693acbcfcfe85a33b53bab62bc974fd3e486e1' }, h("path", { key: '72aaff164d9946305af6fd025fc75943ef440b01', d: "M12 13.4L14.9 16.3C15.0833 16.4833 15.3167 16.575 15.6 16.575C15.8833 16.575 16.1167 16.4833 16.3 16.3C16.4833 16.1167 16.575 15.8833 16.575 15.6C16.575 15.3167 16.4833 15.0833 16.3 14.9L13.4 12L16.3 9.1C16.4833 8.91667 16.575 8.68333 16.575 8.4C16.575 8.11667 16.4833 7.88333 16.3 7.7C16.1167 7.51667 15.8833 7.425 15.6 7.425C15.3167 7.425 15.0833 7.51667 14.9 7.7L12 10.6L9.1 7.7C8.91667 7.51667 8.68333 7.425 8.4 7.425C8.11667 7.425 7.88333 7.51667 7.7 7.7C7.51667 7.88333 7.425 8.11667 7.425 8.4C7.425 8.68333 7.51667 8.91667 7.7 9.1L10.6 12L7.7 14.9C7.51667 15.0833 7.425 15.3167 7.425 15.6C7.425 15.8833 7.51667 16.1167 7.7 16.3C7.88333 16.4833 8.11667 16.575 8.4 16.575C8.68333 16.575 8.91667 16.4833 9.1 16.3L12 13.4ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: 'cfe2b07cd3b6bb62e3777b94736a7a4fbccb3519' }, h("path", { key: '0f30d2fd5f5b72b8b0a7b95efcc497a9b9be88de', d: "M14 15.633L17.3833 19.0163C17.5972 19.2302 17.8694 19.3372 18.2 19.3372C18.5305 19.3372 18.8028 19.2302 19.0167 19.0163C19.2305 18.8025 19.3375 18.5302 19.3375 18.1997C19.3375 17.8691 19.2305 17.5969 19.0167 17.383L15.6333 13.9997L19.0167 10.6163C19.2305 10.4025 19.3375 10.1302 19.3375 9.79967C19.3375 9.46912 19.2305 9.1969 19.0167 8.98301C18.8028 8.76912 18.5305 8.66217 18.2 8.66217C17.8694 8.66217 17.5972 8.76912 17.3833 8.98301L14 12.3663L10.6167 8.98301C10.4028 8.76912 10.1305 8.66217 9.79999 8.66217C9.46944 8.66217 9.19722 8.76912 8.98333 8.98301C8.76944 9.1969 8.66249 9.46912 8.66249 9.79967C8.66249 10.1302 8.76944 10.4025 8.98333 10.6163L12.3667 13.9997L8.98333 17.383C8.76944 17.5969 8.66249 17.8691 8.66249 18.1997C8.66249 18.5302 8.76944 18.8025 8.98333 19.0163C9.19722 19.2302 9.46944 19.3372 9.79999 19.3372C10.1305 19.3372 10.4028 19.2302 10.6167 19.0163L14 15.633ZM14 25.6663C12.3861 25.6663 10.8694 25.3601 9.44999 24.7476C8.03055 24.1351 6.79583 23.3038 5.74583 22.2538C4.69583 21.2038 3.86458 19.9691 3.25208 18.5497C2.63958 17.1302 2.33333 15.6136 2.33333 13.9997C2.33333 12.3858 2.63958 10.8691 3.25208 9.44967C3.86458 8.03023 4.69583 6.79551 5.74583 5.74551C6.79583 4.69551 8.03055 3.86426 9.44999 3.25176C10.8694 2.63926 12.3861 2.33301 14 2.33301C15.6139 2.33301 17.1305 2.63926 18.55 3.25176C19.9694 3.86426 21.2042 4.69551 22.2542 5.74551C23.3042 6.79551 24.1354 8.03023 24.7479 9.44967C25.3604 10.8691 25.6667 12.3858 25.6667 13.9997C25.6667 15.6136 25.3604 17.1302 24.7479 18.5497C24.1354 19.9691 23.3042 21.2038 22.2542 22.2538C21.2042 23.3038 19.9694 24.1351 18.55 24.7476C17.1305 25.3601 15.6139 25.6663 14 25.6663ZM14 23.333C16.6055 23.333 18.8125 22.4288 20.6208 20.6205C22.4292 18.8122 23.3333 16.6052 23.3333 13.9997C23.3333 11.3941 22.4292 9.18717 20.6208 7.37884C18.8125 5.57051 16.6055 4.66634 14 4.66634C11.3944 4.66634 9.18749 5.57051 7.37916 7.37884C5.57083 9.18717 4.66666 11.3941 4.66666 13.9997C4.66666 16.6052 5.57083 18.8122 7.37916 20.6205C9.18749 22.4288 11.3944 23.333 14 23.333Z", fill: "currentColor" })))));
+    }
+    static get is() { return "swirl-icon-cancel-outline"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconColor",
+                    "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                    "references": {
+                        "SwirlIconColor": {
+                            "location": "import",
+                            "path": "../swirl-icon",
+                            "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconSize",
+                    "resolved": "16 | 20 | 24 | 28",
+                    "references": {
+                        "SwirlIconSize": {
+                            "location": "import",
+                            "path": "../swirl-icon.types",
+                            "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "24"
+            }
+        };
+    }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-cancel.js

@@ -0,0 +1,83 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconCancel {
+    constructor() {
+        this.size = 24;
+    }
+    render() {
+        const viewBoxSize = this.size === 20 ? 24 : this.size;
+        const styles = {
+            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+        };
+        const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+        return (h("svg", { key: '77dbb2fb82230f7f770ad0d0687d46536c937d83', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: '7d25eb7c25e153d3c8855e39a7724e15977128c4' }, h("path", { key: 'b7b09823f93b9b16f4aba7eb8939c5271456bb2e', d: "M8 1.33337C4.31334 1.33337 1.33334 4.31337 1.33334 8.00004C1.33334 11.6867 4.31334 14.6667 8 14.6667C11.6867 14.6667 14.6667 11.6867 14.6667 8.00004C14.6667 4.31337 11.6867 1.33337 8 1.33337ZM10.8667 10.8667C10.6067 11.1267 10.1867 11.1267 9.92667 10.8667L8 8.94004L6.07334 10.8667C5.81334 11.1267 5.39334 11.1267 5.13334 10.8667C4.87334 10.6067 4.87334 10.1867 5.13334 9.92671L7.06 8.00004L5.13334 6.07337C4.87334 5.81337 4.87334 5.39337 5.13334 5.13337C5.39334 4.87337 5.81334 4.87337 6.07334 5.13337L8 7.06004L9.92667 5.13337C10.1867 4.87337 10.6067 4.87337 10.8667 5.13337C11.1267 5.39337 11.1267 5.81337 10.8667 6.07337L8.94 8.00004L10.8667 9.92671C11.12 10.18 11.12 10.6067 10.8667 10.8667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: '77146cea9aafce3d350e540c40eaa5e0c120c69c' }, h("path", { key: '1a2f52f8e08d463ec17669499f3c8bc450e6c1ee', d: "M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM16.3 16.3C15.91 16.69 15.28 16.69 14.89 16.3L12 13.41L9.11 16.3C8.72 16.69 8.09 16.69 7.7 16.3C7.31 15.91 7.31 15.28 7.7 14.89L10.59 12L7.7 9.11C7.31 8.72 7.31 8.09 7.7 7.7C8.09 7.31 8.72 7.31 9.11 7.7L12 10.59L14.89 7.7C15.28 7.31 15.91 7.31 16.3 7.7C16.69 8.09 16.69 8.72 16.3 9.11L13.41 12L16.3 14.89C16.68 15.27 16.68 15.91 16.3 16.3Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: 'fc20b3bb4dc212c39e11710db816e177af17abd7' }, h("path", { key: '3758b43f3c206cdfc42ab2d1b7e39ce1fdcdf21d', d: "M14 2.33337C7.54834 2.33337 2.33334 7.54837 2.33334 14C2.33334 20.4517 7.54834 25.6667 14 25.6667C20.4517 25.6667 25.6667 20.4517 25.6667 14C25.6667 7.54837 20.4517 2.33337 14 2.33337ZM19.0167 19.0167C18.5617 19.4717 17.8267 19.4717 17.3717 19.0167L14 15.645L10.6283 19.0167C10.1733 19.4717 9.43834 19.4717 8.98334 19.0167C8.52834 18.5617 8.52834 17.8267 8.98334 17.3717L12.355 14L8.98334 10.6284C8.52834 10.1734 8.52834 9.43837 8.98334 8.98337C9.43834 8.52837 10.1733 8.52837 10.6283 8.98337L14 12.355L17.3717 8.98337C17.8267 8.52837 18.5617 8.52837 19.0167 8.98337C19.4717 9.43837 19.4717 10.1734 19.0167 10.6284L15.645 14L19.0167 17.3717C19.46 17.815 19.46 18.5617 19.0167 19.0167Z", fill: "currentColor" })))));
+    }
+    static get is() { return "swirl-icon-cancel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconColor",
+                    "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                    "references": {
+                        "SwirlIconColor": {
+                            "location": "import",
+                            "path": "../swirl-icon",
+                            "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconSize",
+                    "resolved": "16 | 20 | 24 | 28",
+                    "references": {
+                        "SwirlIconSize": {
+                            "location": "import",
+                            "path": "../swirl-icon.types",
+                            "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "24"
+            }
+        };
+    }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-chat-bubble.js

@@ -0,0 +1,83 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconChatBubble {
+    constructor() {
+        this.size = 24;
+    }
+    render() {
+        const viewBoxSize = this.size === 20 ? 24 : this.size;
+        const styles = {
+            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+        };
+        const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+        return (h("svg", { key: 'dad70826cbb5014b2814c7cae341c3e2170bf4df', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: 'f055cbeb64cd9700a9ce55ee45fe7b9a7510fa2d' }, h("path", { key: '5ef7f47d70021ec5337da688a10be53d7cdfcf92', d: "M5.33331 10.6667H2.66665L2.66665 3.33333H13.3333V10.6667H6.78103L5.33331 12.1144V10.6667ZM13.3333 2H2.66665C1.93027 2 1.33331 2.59695 1.33331 3.33333V10.6667C1.33331 11.403 1.93027 12 2.66665 12H3.99998V13.7239C3.99998 14.3178 4.71807 14.6152 5.13805 14.1953L7.33331 12H13.3333C14.0697 12 14.6666 11.403 14.6666 10.6667V3.33333C14.6666 2.59695 14.0697 2 13.3333 2Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: '9005d0062902fd379c9f1153915d0573469d606b' }, h("path", { key: 'b6e7832e13322843c08d080ec6abfbd4001b3de8', d: "M8 16H4L4 5H20V16H10.1716L8 18.1716V16ZM20 3H4C2.89543 3 2 3.89543 2 5V16C2 17.1046 2.89543 18 4 18H6V20.5858C6 21.4767 7.07714 21.9229 7.70711 21.2929L11 18H20C21.1046 18 22 17.1046 22 16V5C22 3.89543 21.1046 3 20 3Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: 'e19126cc0ab43e0ea85bd7149773b1c616ac5ad1' }, h("path", { key: '8ae3c1ea3610bf1d22461a75e7cec2de49a2f512', d: "M9.33331 18.6667H4.66665L4.66665 5.83333H23.3333V18.6667H11.8668L9.33331 21.2002V18.6667ZM23.3333 3.5H4.66665C3.37798 3.5 2.33331 4.54467 2.33331 5.83333V18.6667C2.33331 19.9553 3.37798 21 4.66665 21H6.99998V24.0168C6.99998 25.0561 8.25665 25.5767 8.9916 24.8417L12.8333 21H23.3333C24.622 21 25.6666 19.9553 25.6666 18.6667V5.83333C25.6666 4.54467 24.622 3.5 23.3333 3.5Z", fill: "currentColor" })))));
+    }
+    static get is() { return "swirl-icon-chat-bubble"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconColor",
+                    "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                    "references": {
+                        "SwirlIconColor": {
+                            "location": "import",
+                            "path": "../swirl-icon",
+                            "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconSize",
+                    "resolved": "16 | 20 | 24 | 28",
+                    "references": {
+                        "SwirlIconSize": {
+                            "location": "import",
+                            "path": "../swirl-icon.types",
+                            "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "24"
+            }
+        };
+    }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-chats-filled.js

@@ -0,0 +1,83 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconChatsFilled {
+    constructor() {
+        this.size = 24;
+    }
+    render() {
+        const viewBoxSize = this.size === 20 ? 24 : this.size;
+        const styles = {
+            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+        };
+        const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+        return (h("svg", { key: '15ec6adc0998975ec66efd442afd75baefa43f69', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: 'efcaa029d995a263565039d5b80d78f2a991c747' }, h("path", { key: '4ac44e101ad6477de82363f580039b520a2d70be', d: "M14.6667 7.99992C14.6667 11.6818 11.6819 14.6666 8.00004 14.6666C6.91822 14.6666 5.89658 14.4089 4.99315 13.9516L1.96048 14.8709C1.45073 15.0254 0.974565 14.5492 1.12909 14.0395L2.04838 11.0068C1.59105 10.1034 1.33337 9.08174 1.33337 7.99992C1.33337 4.31802 4.31814 1.33325 8.00004 1.33325C11.6819 1.33325 14.6667 4.31802 14.6667 7.99992ZM5.00004 8.99992C5.55233 8.99992 6.00004 8.55221 6.00004 7.99992C6.00004 7.44764 5.55233 6.99992 5.00004 6.99992C4.44776 6.99992 4.00004 7.44764 4.00004 7.99992C4.00004 8.55221 4.44776 8.99992 5.00004 8.99992ZM9.00004 7.99992C9.00004 7.44764 8.55233 6.99992 8.00004 6.99992C7.44776 6.99992 7.00004 7.44764 7.00004 7.99992C7.00004 8.55221 7.44776 8.99992 8.00004 8.99992C8.55233 8.99992 9.00004 8.55221 9.00004 7.99992ZM11 8.99992C11.5523 8.99992 12 8.55221 12 7.99992C12 7.44764 11.5523 6.99992 11 6.99992C10.4478 6.99992 10 7.44764 10 7.99992C10 8.55221 10.4478 8.99992 11 8.99992Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: '460f84d2ad453c1fdeab4e36689e5d980f4df392' }, h("path", { key: 'bedc5c6e6d4d2b2569d8a508d95bde1ee7d3f37a', d: "M22 12C22 17.5228 17.5228 22 12 22C10.3773 22 8.8448 21.6135 7.48966 20.9275L2.94066 22.3064C2.17603 22.5382 1.46179 21.824 1.69357 21.0593L3.07251 16.5103C2.38652 15.1552 2 13.6227 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM7.5 13.5C8.32843 13.5 9 12.8284 9 12C9 11.1716 8.32843 10.5 7.5 10.5C6.67157 10.5 6 11.1716 6 12C6 12.8284 6.67157 13.5 7.5 13.5ZM13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12C10.5 12.8284 11.1716 13.5 12 13.5C12.8284 13.5 13.5 12.8284 13.5 12ZM16.5 13.5C17.3284 13.5 18 12.8284 18 12C18 11.1716 17.3284 10.5 16.5 10.5C15.6716 10.5 15 11.1716 15 12C15 12.8284 15.6716 13.5 16.5 13.5Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: '7f4a5d15d8075f01f94dd25832ed7b537e0bd652' }, h("path", { key: 'e07f5778ec815eda0de0dc7b741e17685006665d', d: "M25.6667 13.9999C25.6667 20.4432 20.4434 25.6666 14 25.6666C12.1068 25.6666 10.319 25.2156 8.73798 24.4153L3.43082 26.0241C2.53875 26.2945 1.70546 25.4612 1.97587 24.5691L3.58464 19.262C2.78431 17.681 2.33337 15.8931 2.33337 13.9999C2.33337 7.5566 7.55672 2.33325 14 2.33325C20.4434 2.33325 25.6667 7.5566 25.6667 13.9999ZM8.75004 15.7499C9.71654 15.7499 10.5 14.9664 10.5 13.9999C10.5 13.0334 9.71654 12.2499 8.75004 12.2499C7.78354 12.2499 7.00004 13.0334 7.00004 13.9999C7.00004 14.9664 7.78354 15.7499 8.75004 15.7499ZM15.75 13.9999C15.75 13.0334 14.9665 12.2499 14 12.2499C13.0335 12.2499 12.25 13.0334 12.25 13.9999C12.25 14.9664 13.0335 15.7499 14 15.7499C14.9665 15.7499 15.75 14.9664 15.75 13.9999ZM19.25 15.7499C20.2165 15.7499 21 14.9664 21 13.9999C21 13.0334 20.2165 12.2499 19.25 12.2499C18.2835 12.2499 17.5 13.0334 17.5 13.9999C17.5 14.9664 18.2835 15.7499 19.25 15.7499Z", fill: "currentColor" })))));
+    }
+    static get is() { return "swirl-icon-chats-filled"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconColor",
+                    "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                    "references": {
+                        "SwirlIconColor": {
+                            "location": "import",
+                            "path": "../swirl-icon",
+                            "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconSize",
+                    "resolved": "16 | 20 | 24 | 28",
+                    "references": {
+                        "SwirlIconSize": {
+                            "location": "import",
+                            "path": "../swirl-icon.types",
+                            "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "24"
+            }
+        };
+    }
+}