@getflip/swirl-components 0.0.0-new-shell-20231128124118

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

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconNotifications {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M8.00083 14.5C8.73416 14.5 9.33416 13.9 9.33416 13.1667H6.66749C6.66749 13.9 7.26083 14.5 8.00083 14.5ZM12.0008 10.5V7.16667C12.0008 5.12 10.9075 3.40667 9.00083 2.95333V2.5C9.00083 1.94667 8.55416 1.5 8.00083 1.5C7.44749 1.5 7.00083 1.94667 7.00083 2.5V2.95333C5.08749 3.40667 4.00083 5.11333 4.00083 7.16667V10.5L3.14083 11.36C2.72083 11.78 3.01416 12.5 3.60749 12.5H12.3875C12.9808 12.5 13.2808 11.78 12.8608 11.36L12.0008 10.5Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12.0012 21.75C13.1012 21.75 14.0012 20.85 14.0012 19.75H10.0012C10.0012 20.85 10.8912 21.75 12.0012 21.75ZM18.0012 15.75V10.75C18.0012 7.68 16.3612 5.11 13.5012 4.43V3.75C13.5012 2.92 12.8312 2.25 12.0012 2.25C11.1712 2.25 10.5012 2.92 10.5012 3.75V4.43C7.63124 5.11 6.00124 7.67 6.00124 10.75V15.75L4.71124 17.04C4.08124 17.67 4.52124 18.75 5.41124 18.75H18.5812C19.4712 18.75 19.9212 17.67 19.2912 17.04L18.0012 15.75Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14.0014 25.375C15.2848 25.375 16.3348 24.325 16.3348 23.0417H11.6681C11.6681 24.325 12.7064 25.375 14.0014 25.375ZM21.0014 18.375V12.5417C21.0014 8.96 19.0881 5.96167 15.7514 5.16833V4.375C15.7514 3.40667 14.9698 2.625 14.0014 2.625C13.0331 2.625 12.2514 3.40667 12.2514 4.375V5.16833C8.9031 5.96167 7.00143 8.94833 7.00143 12.5417V18.375L5.49643 19.88C4.76143 20.615 5.27477 21.875 6.3131 21.875H21.6781C22.7164 21.875 23.2414 20.615 22.5064 19.88L21.0014 18.375Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-notifications"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-open-in-full.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconOpenInFull {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M14 2.66667C14 2.47778 13.9361 2.31944 13.8083 2.19167C13.6806 2.06389 13.5222 2 13.3333 2L9.33333 2C9.14445 2 8.98611 2.06389 8.85833 2.19167C8.73056 2.31944 8.66667 2.47778 8.66667 2.66667C8.66667 2.85556 8.73056 3.01389 8.85833 3.14167C8.98611 3.26944 9.14445 3.33333 9.33333 3.33333L11.7333 3.33333L3.33333 11.7333V9.33333C3.33333 9.14444 3.26944 8.98611 3.14167 8.85833C3.01389 8.73056 2.85556 8.66667 2.66667 8.66667C2.47778 8.66667 2.31944 8.73056 2.19167 8.85833C2.06389 8.98611 2 9.14444 2 9.33333L2 13.3333C2 13.5222 2.06389 13.6806 2.19167 13.8083C2.31944 13.9361 2.47778 14 2.66667 14H6.66667C6.85556 14 7.01389 13.9361 7.14167 13.8083C7.26944 13.6806 7.33333 13.5222 7.33333 13.3333C7.33333 13.1444 7.26944 12.9861 7.14167 12.8583C7.01389 12.7306 6.85556 12.6667 6.66667 12.6667H4.26667L12.6667 4.26667V6.66667C12.6667 6.85556 12.7306 7.01389 12.8583 7.14167C12.9861 7.26944 13.1444 7.33333 13.3333 7.33333C13.5222 7.33333 13.6806 7.26944 13.8083 7.14167C13.9361 7.01389 14 6.85556 14 6.66667V2.66667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M4 21C3.71667 21 3.47917 20.9042 3.2875 20.7125C3.09583 20.5208 3 20.2833 3 20V14C3 13.7167 3.09583 13.4792 3.2875 13.2875C3.47917 13.0958 3.71667 13 4 13C4.28333 13 4.52083 13.0958 4.7125 13.2875C4.90417 13.4792 5 13.7167 5 14V17.6L17.6 5H14C13.7167 5 13.4792 4.90417 13.2875 4.7125C13.0958 4.52083 13 4.28333 13 4C13 3.71667 13.0958 3.47917 13.2875 3.2875C13.4792 3.09583 13.7167 3 14 3H20C20.2833 3 20.5208 3.09583 20.7125 3.2875C20.9042 3.47917 21 3.71667 21 4V10C21 10.2833 20.9042 10.5208 20.7125 10.7125C20.5208 10.9042 20.2833 11 20 11C19.7167 11 19.4792 10.9042 19.2875 10.7125C19.0958 10.5208 19 10.2833 19 10V6.4L6.4 19H10C10.2833 19 10.5208 19.0958 10.7125 19.2875C10.9042 19.4792 11 19.7167 11 20C11 20.2833 10.9042 20.5208 10.7125 20.7125C10.5208 20.9042 10.2833 21 10 21H4Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M24.5 4.66667C24.5 4.33611 24.3882 4.05903 24.1646 3.83542C23.941 3.61181 23.6639 3.5 23.3333 3.5L16.3333 3.5C16.0028 3.5 15.7257 3.61181 15.5021 3.83542C15.2785 4.05903 15.1667 4.33611 15.1667 4.66667C15.1667 4.99722 15.2785 5.27431 15.5021 5.49792C15.7257 5.72153 16.0028 5.83333 16.3333 5.83333L20.5333 5.83333L5.83333 20.5333V16.3333C5.83333 16.0028 5.72153 15.7257 5.49792 15.5021C5.27431 15.2785 4.99722 15.1667 4.66667 15.1667C4.33611 15.1667 4.05903 15.2785 3.83542 15.5021C3.61181 15.7257 3.5 16.0028 3.5 16.3333L3.5 23.3333C3.5 23.6639 3.61181 23.941 3.83542 24.1646C4.05903 24.3882 4.33611 24.5 4.66667 24.5L11.6667 24.5C11.9972 24.5 12.2743 24.3882 12.4979 24.1646C12.7215 23.941 12.8333 23.6639 12.8333 23.3333C12.8333 23.0028 12.7215 22.7257 12.4979 22.5021C12.2743 22.2785 11.9972 22.1667 11.6667 22.1667H7.46667L22.1667 7.46667V11.6667C22.1667 11.9972 22.2785 12.2743 22.5021 12.4979C22.7257 12.7215 23.0028 12.8333 23.3333 12.8333C23.6639 12.8333 23.941 12.7215 24.1646 12.4979C24.3882 12.2743 24.5 11.9972 24.5 11.6667V4.66667Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-open-in-full"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-open-in-new.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconOpenInNew {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M3.38334 14.1334C2.96111 14.1334 2.60289 13.9863 2.30867 13.692C2.014 13.3974 1.86667 13.0389 1.86667 12.6167V3.38337C1.86667 2.96114 2.014 2.6027 2.30867 2.30803C2.60289 2.01381 2.96111 1.8667 3.38334 1.8667H7.23334C7.45556 1.8667 7.63889 1.93892 7.78334 2.08337C7.92778 2.22781 8 2.40559 8 2.6167C8 2.83892 7.92778 3.02225 7.78334 3.1667C7.63889 3.31114 7.45556 3.38337 7.23334 3.38337H3.38334V12.6167H12.6167V8.7667C12.6167 8.54448 12.6889 8.36114 12.8333 8.2167C12.9778 8.07225 13.1611 8.00003 13.3833 8.00003C13.5944 8.00003 13.7722 8.07225 13.9167 8.2167C14.0611 8.36114 14.1333 8.54448 14.1333 8.7667V12.6167C14.1333 13.0389 13.9862 13.3974 13.692 13.692C13.3973 13.9863 13.0389 14.1334 12.6167 14.1334H3.38334ZM6.06667 9.93337C5.92222 9.80003 5.85 9.62781 5.85 9.4167C5.85 9.20559 5.92222 9.02781 6.06667 8.88337L11.5667 3.38337H10.1C9.87778 3.38337 9.69445 3.31114 9.55 3.1667C9.40556 3.02225 9.33333 2.83892 9.33333 2.6167C9.33333 2.40559 9.40556 2.22781 9.55 2.08337C9.69445 1.93892 9.87778 1.8667 10.1 1.8667H13.3833C13.5944 1.8667 13.7722 1.93892 13.9167 2.08337C14.0611 2.22781 14.1333 2.40559 14.1333 2.6167V5.90003C14.1333 6.12225 14.0611 6.30559 13.9167 6.45003C13.7722 6.59448 13.5944 6.6667 13.3833 6.6667C13.1611 6.6667 12.9778 6.59448 12.8333 6.45003C12.6889 6.30559 12.6167 6.12225 12.6167 5.90003V4.43337L7.1 9.95003C6.96667 10.0945 6.79733 10.1667 6.592 10.1667C6.38622 10.1667 6.21111 10.0889 6.06667 9.93337Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M5.075 21.2001C4.44167 21.2001 3.90433 20.9794 3.463 20.538C3.021 20.096 2.8 19.5584 2.8 18.925V5.07505C2.8 4.44172 3.021 3.90405 3.463 3.46205C3.90433 3.02072 4.44167 2.80005 5.075 2.80005H10.85C11.1833 2.80005 11.4583 2.90838 11.675 3.12505C11.8917 3.34172 12 3.60838 12 3.92505C12 4.25838 11.8917 4.53338 11.675 4.75005C11.4583 4.96672 11.1833 5.07505 10.85 5.07505H5.075V18.925H18.925V13.15C18.925 12.8167 19.0333 12.5417 19.25 12.325C19.4667 12.1084 19.7417 12 20.075 12C20.3917 12 20.6583 12.1084 20.875 12.325C21.0917 12.5417 21.2 12.8167 21.2 13.15V18.925C21.2 19.5584 20.9793 20.096 20.538 20.538C20.096 20.9794 19.5583 21.2001 18.925 21.2001H5.075ZM9.1 14.9C8.88333 14.7 8.775 14.4417 8.775 14.125C8.775 13.8084 8.88333 13.5417 9.1 13.325L17.35 5.07505H15.15C14.8167 5.07505 14.5417 4.96672 14.325 4.75005C14.1083 4.53338 14 4.25838 14 3.92505C14 3.60838 14.1083 3.34172 14.325 3.12505C14.5417 2.90838 14.8167 2.80005 15.15 2.80005H20.075C20.3917 2.80005 20.6583 2.90838 20.875 3.12505C21.0917 3.34172 21.2 3.60838 21.2 3.92505V8.85005C21.2 9.18338 21.0917 9.45838 20.875 9.67505C20.6583 9.89172 20.3917 10 20.075 10C19.7417 10 19.4667 9.89172 19.25 9.67505C19.0333 9.45838 18.925 9.18338 18.925 8.85005V6.65005L10.65 14.925C10.45 15.1417 10.196 15.25 9.888 15.25C9.57933 15.25 9.31667 15.1334 9.1 14.9Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M5.92084 24.7334C5.18195 24.7334 4.55506 24.4759 4.04017 23.9611C3.5245 23.4454 3.26667 22.8181 3.26667 22.0792V5.92089C3.26667 5.182 3.5245 4.55472 4.04017 4.03906C4.55506 3.52417 5.18195 3.26672 5.92084 3.26672H12.6583C13.0472 3.26672 13.3681 3.39311 13.6208 3.64589C13.8736 3.89867 14 4.20978 14 4.57922C14 4.96811 13.8736 5.28895 13.6208 5.54172C13.3681 5.7945 13.0472 5.92089 12.6583 5.92089H5.92084V22.0792H22.0792V15.3417C22.0792 14.9528 22.2056 14.632 22.4583 14.3792C22.7111 14.1264 23.032 14.0001 23.4208 14.0001C23.7903 14.0001 24.1014 14.1264 24.3542 14.3792C24.607 14.632 24.7333 14.9528 24.7333 15.3417V22.0792C24.7333 22.8181 24.4759 23.4454 23.961 23.9611C23.4453 24.4759 22.8181 24.7334 22.0792 24.7334H5.92084ZM10.6167 17.3834C10.3639 17.1501 10.2375 16.8487 10.2375 16.4792C10.2375 16.1098 10.3639 15.7987 10.6167 15.5459L20.2417 5.92089H17.675C17.2861 5.92089 16.9653 5.7945 16.7125 5.54172C16.4597 5.28895 16.3333 4.96811 16.3333 4.57922C16.3333 4.20978 16.4597 3.89867 16.7125 3.64589C16.9653 3.39311 17.2861 3.26672 17.675 3.26672H23.4208C23.7903 3.26672 24.1014 3.39311 24.3542 3.64589C24.607 3.89867 24.7333 4.20978 24.7333 4.57922V10.3251C24.7333 10.7139 24.607 11.0348 24.3542 11.2876C24.1014 11.5403 23.7903 11.6667 23.4208 11.6667C23.032 11.6667 22.7111 11.5403 22.4583 11.2876C22.2056 11.0348 22.0792 10.7139 22.0792 10.3251V7.75839L12.425 17.4126C12.1917 17.6653 11.8953 17.7917 11.536 17.7917C11.1759 17.7917 10.8694 17.6556 10.6167 17.3834Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-open-in-new"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-pause-circle.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconPauseCircle {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M6.66665 10.6666C7.03331 10.6666 7.33331 10.3666 7.33331 9.99992V5.99992C7.33331 5.63325 7.03331 5.33325 6.66665 5.33325C6.29998 5.33325 5.99998 5.63325 5.99998 5.99992V9.99992C5.99998 10.3666 6.29998 10.6666 6.66665 10.6666ZM7.99998 1.33325C4.31998 1.33325 1.33331 4.31992 1.33331 7.99992C1.33331 11.6799 4.31998 14.6666 7.99998 14.6666C11.68 14.6666 14.6666 11.6799 14.6666 7.99992C14.6666 4.31992 11.68 1.33325 7.99998 1.33325ZM7.99998 13.3333C5.05998 13.3333 2.66665 10.9399 2.66665 7.99992C2.66665 5.05992 5.05998 2.66659 7.99998 2.66659C10.94 2.66659 13.3333 5.05992 13.3333 7.99992C13.3333 10.9399 10.94 13.3333 7.99998 13.3333ZM9.33331 10.6666C9.69998 10.6666 9.99998 10.3666 9.99998 9.99992V5.99992C9.99998 5.63325 9.69998 5.33325 9.33331 5.33325C8.96665 5.33325 8.66665 5.63325 8.66665 5.99992V9.99992C8.66665 10.3666 8.96665 10.6666 9.33331 10.6666Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M10 16C10.55 16 11 15.55 11 15V9C11 8.45 10.55 8 10 8C9.45 8 9 8.45 9 9V15C9 15.55 9.45 16 10 16ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM14 16C14.55 16 15 15.55 15 15V9C15 8.45 14.55 8 14 8C13.45 8 13 8.45 13 9V15C13 15.55 13.45 16 14 16Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M11.6666 18.6666C12.3083 18.6666 12.8333 18.1416 12.8333 17.4999V10.4999C12.8333 9.85825 12.3083 9.33325 11.6666 9.33325C11.025 9.33325 10.5 9.85825 10.5 10.4999V17.4999C10.5 18.1416 11.025 18.6666 11.6666 18.6666ZM14 2.33325C7.55998 2.33325 2.33331 7.55992 2.33331 13.9999C2.33331 20.4399 7.55998 25.6666 14 25.6666C20.44 25.6666 25.6666 20.4399 25.6666 13.9999C25.6666 7.55992 20.44 2.33325 14 2.33325ZM14 23.3333C8.85498 23.3333 4.66665 19.1449 4.66665 13.9999C4.66665 8.85492 8.85498 4.66659 14 4.66659C19.145 4.66659 23.3333 8.85492 23.3333 13.9999C23.3333 19.1449 19.145 23.3333 14 23.3333ZM16.3333 18.6666C16.975 18.6666 17.5 18.1416 17.5 17.4999V10.4999C17.5 9.85825 16.975 9.33325 16.3333 9.33325C15.6916 9.33325 15.1666 9.85825 15.1666 10.4999V17.4999C15.1666 18.1416 15.6916 18.6666 16.3333 18.6666Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-pause-circle"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconPause {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M5.33333 12.6666C6.06667 12.6666 6.66667 12.0666 6.66667 11.3333V4.66659C6.66667 3.93325 6.06667 3.33325 5.33333 3.33325C4.6 3.33325 4 3.93325 4 4.66659V11.3333C4 12.0666 4.6 12.6666 5.33333 12.6666ZM9.33333 4.66659V11.3333C9.33333 12.0666 9.93333 12.6666 10.6667 12.6666C11.4 12.6666 12 12.0666 12 11.3333V4.66659C12 3.93325 11.4 3.33325 10.6667 3.33325C9.93333 3.33325 9.33333 3.93325 9.33333 4.66659Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M8 19C9.1 19 10 18.1 10 17V7C10 5.9 9.1 5 8 5C6.9 5 6 5.9 6 7V17C6 18.1 6.9 19 8 19ZM14 7V17C14 18.1 14.9 19 16 19C17.1 19 18 18.1 18 17V7C18 5.9 17.1 5 16 5C14.9 5 14 5.9 14 7Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M9.33333 22.1666C10.6167 22.1666 11.6667 21.1166 11.6667 19.8333V8.16659C11.6667 6.88325 10.6167 5.83325 9.33333 5.83325C8.05 5.83325 7 6.88325 7 8.16659V19.8333C7 21.1166 8.05 22.1666 9.33333 22.1666ZM16.3333 8.16659V19.8333C16.3333 21.1166 17.3833 22.1666 18.6667 22.1666C19.95 22.1666 21 21.1166 21 19.8333V8.16659C21 6.88325 19.95 5.83325 18.6667 5.83325C17.3833 5.83325 16.3333 6.88325 16.3333 8.16659Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-pause"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-people-alt.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconPeopleAlt {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.1133 8.75329C12.0267 9.37329 12.6667 10.2133 12.6667 11.3333V13.3333H14.6667C15.0333 13.3333 15.3333 13.0333 15.3333 12.6666V11.3333C15.3333 9.87996 12.9533 9.01996 11.1133 8.75329Z", fill: "currentColor" }), h("path", { d: "M5.99999 7.99996C7.47275 7.99996 8.66666 6.80605 8.66666 5.33329C8.66666 3.86053 7.47275 2.66663 5.99999 2.66663C4.52723 2.66663 3.33332 3.86053 3.33332 5.33329C3.33332 6.80605 4.52723 7.99996 5.99999 7.99996Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.99999 7.99996C11.4733 7.99996 12.6667 6.80663 12.6667 5.33329C12.6667 3.85996 11.4733 2.66663 9.99999 2.66663C9.68666 2.66663 9.39332 2.73329 9.11332 2.82663C9.66666 3.51329 9.99999 4.38663 9.99999 5.33329C9.99999 6.27996 9.66666 7.15329 9.11332 7.83996C9.39332 7.93329 9.68666 7.99996 9.99999 7.99996Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.99999 8.66663C4.21999 8.66663 0.666656 9.55996 0.666656 11.3333V12.6666C0.666656 13.0333 0.966656 13.3333 1.33332 13.3333H10.6667C11.0333 13.3333 11.3333 13.0333 11.3333 12.6666V11.3333C11.3333 9.55996 7.77999 8.66663 5.99999 8.66663Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.67 13.13C18.04 14.06 19 15.32 19 17V20H22C22.55 20 23 19.55 23 19V17C23 14.82 19.43 13.53 16.67 13.13Z", fill: "currentColor" }), h("path", { d: "M9 12C11.2091 12 13 10.2091 13 8C13 5.79086 11.2091 4 9 4C6.79086 4 5 5.79086 5 8C5 10.2091 6.79086 12 9 12Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15 12C17.21 12 19 10.21 19 8C19 5.79 17.21 4 15 4C14.53 4 14.09 4.1 13.67 4.24C14.5 5.27 15 6.58 15 8C15 9.42 14.5 10.73 13.67 11.76C14.09 11.9 14.53 12 15 12Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9 13C6.33 13 1 14.34 1 17V19C1 19.55 1.45 20 2 20H16C16.55 20 17 19.55 17 19V17C17 14.34 11.67 13 9 13Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.4483 15.3183C21.0467 16.4033 22.1667 17.8733 22.1667 19.8333V23.3333H25.6667C26.3083 23.3333 26.8333 22.8083 26.8333 22.1666V19.8333C26.8333 17.29 22.6683 15.785 19.4483 15.3183Z", fill: "currentColor" }), h("path", { d: "M10.5 14C13.0773 14 15.1667 11.9106 15.1667 9.33329C15.1667 6.75596 13.0773 4.66663 10.5 4.66663C7.92266 4.66663 5.83332 6.75596 5.83332 9.33329C5.83332 11.9106 7.92266 14 10.5 14Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17.5 14C20.0783 14 22.1667 11.9116 22.1667 9.33329C22.1667 6.75496 20.0783 4.66663 17.5 4.66663C16.9517 4.66663 16.4383 4.78329 15.9483 4.94663C16.9167 6.14829 17.5 7.67663 17.5 9.33329C17.5 10.99 16.9167 12.5183 15.9483 13.72C16.4383 13.8833 16.9517 14 17.5 14Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.5 15.1666C7.38499 15.1666 1.16666 16.73 1.16666 19.8333V22.1666C1.16666 22.8083 1.69166 23.3333 2.33332 23.3333H18.6667C19.3083 23.3333 19.8333 22.8083 19.8333 22.1666V19.8333C19.8333 16.73 13.615 15.1666 10.5 15.1666Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-people-alt"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-person-off.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconPersonOff {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M6.23708 3.41005C6.71041 2.67672 7.53708 2.19672 8.47042 2.19672C9.94375 2.19672 11.1371 3.39005 11.1371 4.86338C11.1371 5.79672 10.6571 6.62338 9.92375 7.09672L6.23708 3.41005ZM13.8037 10.9767C13.7904 10.2434 13.3837 9.57005 12.7304 9.23005C12.3704 9.04338 11.9771 8.87005 11.5504 8.72338L13.8037 10.9767ZM14.1304 13.19L2.81042 1.87005C2.55042 1.61005 2.13042 1.61005 1.87042 1.87005C1.61042 2.13005 1.61042 2.55005 1.87042 2.81005L7.32375 8.26338C6.11042 8.41672 5.05042 8.79672 4.19042 9.23672C3.53708 9.58338 3.13708 10.27 3.13708 11.01V12.8634H11.9171L13.1837 14.13C13.4437 14.39 13.8637 14.39 14.1237 14.13C14.3904 13.87 14.3904 13.45 14.1304 13.19Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M9.35562 5.11495C10.0656 4.01495 11.3056 3.29495 12.7056 3.29495C14.9156 3.29495 16.7056 5.08495 16.7056 7.29495C16.7056 8.69495 15.9856 9.93495 14.8856 10.645L9.35562 5.11495ZM20.7056 16.465C20.6856 15.365 20.0756 14.355 19.0956 13.845C18.5556 13.565 17.9656 13.305 17.3256 13.085L20.7056 16.465ZM21.1956 19.785L4.21562 2.80495C3.82562 2.41495 3.19562 2.41495 2.80562 2.80495C2.41562 3.19495 2.41562 3.82495 2.80562 4.21495L10.9856 12.395C9.16562 12.625 7.57562 13.195 6.28562 13.855C5.30562 14.375 4.70562 15.405 4.70562 16.515V19.295H17.8756L19.7756 21.195C20.1656 21.5849 20.7956 21.5849 21.1856 21.195C21.5856 20.805 21.5856 20.1749 21.1956 19.785Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M10.9149 5.96752C11.7432 4.68419 13.1899 3.84419 14.8232 3.84419C17.4016 3.84419 19.4899 5.93252 19.4899 8.51086C19.4899 10.1442 18.6499 11.5909 17.3666 12.4192L10.9149 5.96752ZM24.1566 19.2092C24.1332 17.9259 23.4216 16.7475 22.2782 16.1525C21.6482 15.8259 20.9599 15.5225 20.2132 15.2659L24.1566 19.2092ZM24.7282 23.0825L4.91823 3.27252C4.46323 2.81752 3.72823 2.81752 3.27323 3.27252C2.81823 3.72752 2.81823 4.46252 3.27323 4.91752L12.8166 14.4609C10.6932 14.7292 8.83823 15.3942 7.33323 16.1642C6.18989 16.7709 5.48989 17.9725 5.48989 19.2675V22.5109H20.8549L23.0716 24.7275C23.5266 25.1825 24.2616 25.1825 24.7166 24.7275C25.1832 24.2725 25.1832 23.5375 24.7282 23.0825Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-person-off"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconPerson {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M7.99999 8.00002C9.47332 8.00002 10.6667 6.80669 10.6667 5.33335C10.6667 3.86002 9.47332 2.66669 7.99999 2.66669C6.52666 2.66669 5.33332 3.86002 5.33332 5.33335C5.33332 6.80669 6.52666 8.00002 7.99999 8.00002ZM7.99999 9.33335C6.21999 9.33335 2.66666 10.2267 2.66666 12V12.6667C2.66666 13.0334 2.96666 13.3334 3.33332 13.3334H12.6667C13.0333 13.3334 13.3333 13.0334 13.3333 12.6667V12C13.3333 10.2267 9.77999 9.33335 7.99999 9.33335Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V19C4 19.55 4.45 20 5 20H19C19.55 20 20 19.55 20 19V18C20 15.34 14.67 14 12 14Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 14C16.5783 14 18.6667 11.9117 18.6667 9.33335C18.6667 6.75502 16.5783 4.66669 14 4.66669C11.4217 4.66669 9.33332 6.75502 9.33332 9.33335C9.33332 11.9117 11.4217 14 14 14ZM14 16.3334C10.885 16.3334 4.66666 17.8967 4.66666 21V22.1667C4.66666 22.8084 5.19166 23.3334 5.83332 23.3334H22.1667C22.8083 23.3334 23.3333 22.8084 23.3333 22.1667V21C23.3333 17.8967 17.115 16.3334 14 16.3334Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-person"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconPhone {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M12.8145 10.1788L11.1212 9.98545C10.7145 9.93878 10.3145 10.0788 10.0279 10.3654L8.8012 11.5921C6.91453 10.6321 5.36787 9.09211 4.40787 7.19878L5.6412 5.96545C5.92787 5.67878 6.06787 5.27878 6.0212 4.87212L5.82787 3.19212C5.74787 2.51878 5.1812 2.01212 4.5012 2.01212H3.34787C2.59453 2.01212 1.96787 2.63878 2.01453 3.39212C2.36787 9.08545 6.9212 13.6321 12.6079 13.9854C13.3612 14.0321 13.9879 13.4054 13.9879 12.6521V11.4988C13.9945 10.8254 13.4879 10.2588 12.8145 10.1788Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M19.2218 15.2682L16.6818 14.9782C16.0718 14.9082 15.4718 15.1182 15.0418 15.5482L13.2018 17.3882C10.3718 15.9482 8.0518 13.6382 6.6118 10.7982L8.4618 8.94816C8.8918 8.51816 9.1018 7.91816 9.0318 7.30816L8.7418 4.78816C8.6218 3.77816 7.7718 3.01816 6.7518 3.01816H5.0218C3.8918 3.01816 2.9518 3.95816 3.0218 5.08816C3.5518 13.6282 10.3818 20.4482 18.9118 20.9782C20.0418 21.0482 20.9818 20.1082 20.9818 18.9782V17.2482C20.9918 16.2382 20.2318 15.3882 19.2218 15.2682Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M22.4254 17.8129L19.4621 17.4745C18.7504 17.3929 18.0504 17.6379 17.5488 18.1395L15.4021 20.2862C12.1004 18.6062 9.39377 15.9112 7.71377 12.5979L9.8721 10.4395C10.3738 9.93786 10.6188 9.23786 10.5371 8.52619L10.1988 5.58619C10.0588 4.40786 9.0671 3.52119 7.8771 3.52119H5.85877C4.54043 3.52119 3.44377 4.61786 3.52543 5.93619C4.14377 15.8995 12.1121 23.8562 22.0638 24.4745C23.3821 24.5562 24.4788 23.4595 24.4788 22.1412V20.1229C24.4904 18.9445 23.6038 17.9529 22.4254 17.8129Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-phone"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-play-arrow.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconPlayArrow {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M6.35004 12.0167C6.12782 12.1611 5.90282 12.1695 5.67504 12.0417C5.44726 11.9139 5.33337 11.7167 5.33337 11.45V4.55001C5.33337 4.28334 5.44726 4.08612 5.67504 3.95834C5.90282 3.83057 6.12782 3.8389 6.35004 3.98334L11.7834 7.43334C11.9834 7.56668 12.0834 7.75557 12.0834 8.00001C12.0834 8.24445 11.9834 8.43334 11.7834 8.56668L6.35004 12.0167Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M9.525 18.025C9.19167 18.2417 8.85417 18.2542 8.5125 18.0625C8.17083 17.8708 8 17.575 8 17.175V6.825C8 6.425 8.17083 6.12917 8.5125 5.9375C8.85417 5.74583 9.19167 5.75833 9.525 5.975L17.675 11.15C17.975 11.35 18.125 11.6333 18.125 12C18.125 12.3667 17.975 12.65 17.675 12.85L9.525 18.025Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M11.1125 21.0292C10.7237 21.282 10.3299 21.2965 9.93129 21.0729C9.53268 20.8493 9.33337 20.5042 9.33337 20.0375V7.96251C9.33337 7.49584 9.53268 7.1507 9.93129 6.92709C10.3299 6.70348 10.7237 6.71807 11.1125 6.97084L20.6209 13.0083C20.9709 13.2417 21.1459 13.5722 21.1459 14C21.1459 14.4278 20.9709 14.7583 20.6209 14.9917L11.1125 21.0292Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-play-arrow"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconPoll {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M10 8.66667H3.33333C2.98004 8.66772 2.64151 8.80854 2.39169 9.05836C2.14187 9.30818 2.00106 9.6467 2 10V12.6667C2.00106 13.02 2.14187 13.3585 2.39169 13.6083C2.64151 13.8581 2.98004 13.9989 3.33333 14H10C10.3533 13.9989 10.6918 13.8581 10.9416 13.6083C11.1915 13.3585 11.3323 13.02 11.3333 12.6667V10C11.3323 9.6467 11.1915 9.30818 10.9416 9.05836C10.6918 8.80854 10.3533 8.66772 10 8.66667ZM4.66667 12.6667C4.40296 12.6667 4.14517 12.5885 3.92591 12.442C3.70664 12.2955 3.53574 12.0872 3.43483 11.8436C3.33391 11.5999 3.30751 11.3319 3.35895 11.0732C3.4104 10.8146 3.53739 10.577 3.72386 10.3905C3.91033 10.2041 4.1479 10.0771 4.40655 10.0256C4.66519 9.97417 4.93328 10.0006 5.17691 10.1015C5.42055 10.2024 5.62878 10.3733 5.77529 10.5926C5.9218 10.8118 6 11.0696 6 11.3333C5.99894 11.6866 5.85813 12.0252 5.60831 12.275C5.35849 12.5248 5.01996 12.6656 4.66667 12.6667V12.6667ZM12.6667 2H3.33333C2.98004 2.00106 2.64151 2.14187 2.39169 2.39169C2.14187 2.64151 2.00106 2.98004 2 3.33333V6C2.00106 6.3533 2.14187 6.69182 2.39169 6.94164C2.64151 7.19146 2.98004 7.33228 3.33333 7.33333H12.6667C13.02 7.33228 13.3585 7.19146 13.6083 6.94164C13.8581 6.69182 13.9989 6.3533 14 6V3.33333C13.9989 2.98004 13.8581 2.64151 13.6083 2.39169C13.3585 2.14187 13.02 2.00106 12.6667 2V2ZM4.66667 6C4.40296 6 4.14517 5.9218 3.92591 5.77529C3.70664 5.62878 3.53574 5.42055 3.43483 5.17691C3.33391 4.93328 3.30751 4.66519 3.35895 4.40655C3.4104 4.1479 3.53739 3.91033 3.72386 3.72386C3.91033 3.53739 4.1479 3.4104 4.40655 3.35895C4.66519 3.30751 4.93328 3.33391 5.17691 3.43483C5.42055 3.53574 5.62878 3.70664 5.77529 3.92591C5.9218 4.14517 6 4.40296 6 4.66667C5.99894 5.01996 5.85813 5.35849 5.60831 5.60831C5.35849 5.85813 5.01996 5.99894 4.66667 6V6Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M15 13H5C4.47005 13.0016 3.96227 13.2128 3.58753 13.5875C3.2128 13.9623 3.00158 14.4701 3 15V19C3.00158 19.5299 3.2128 20.0377 3.58753 20.4125C3.96227 20.7872 4.47005 20.9984 5 21H15C15.5299 20.9984 16.0377 20.7872 16.4125 20.4125C16.7872 20.0377 16.9984 19.5299 17 19V15C16.9984 14.4701 16.7872 13.9623 16.4125 13.5875C16.0377 13.2128 15.5299 13.0016 15 13ZM7 19C6.60444 19 6.21776 18.8827 5.88886 18.6629C5.55996 18.4432 5.30362 18.1308 5.15224 17.7654C5.00087 17.3999 4.96126 16.9978 5.03843 16.6098C5.1156 16.2219 5.30608 15.8655 5.58579 15.5858C5.86549 15.3061 6.22186 15.1156 6.60982 15.0384C6.99778 14.9613 7.39991 15.0009 7.76537 15.1522C8.13082 15.3036 8.44318 15.56 8.66294 15.8889C8.8827 16.2178 9 16.6044 9 17C8.99842 17.5299 8.7872 18.0377 8.41247 18.4125C8.03773 18.7872 7.52995 18.9984 7 19ZM19 3H5C4.47005 3.00158 3.96227 3.2128 3.58753 3.58753C3.2128 3.96227 3.00158 4.47005 3 5V9C3.00158 9.52995 3.2128 10.0377 3.58753 10.4125C3.96227 10.7872 4.47005 10.9984 5 11H19C19.5299 10.9984 20.0377 10.7872 20.4125 10.4125C20.7872 10.0377 20.9984 9.52995 21 9V5C20.9984 4.47005 20.7872 3.96227 20.4125 3.58753C20.0377 3.2128 19.5299 3.00158 19 3ZM7 9C6.60444 9 6.21776 8.8827 5.88886 8.66294C5.55996 8.44318 5.30362 8.13082 5.15224 7.76537C5.00087 7.39991 4.96126 6.99778 5.03843 6.60982C5.1156 6.22186 5.30608 5.86549 5.58579 5.58579C5.86549 5.30608 6.22186 5.1156 6.60982 5.03843C6.99778 4.96126 7.39991 5.00087 7.76537 5.15224C8.13082 5.30362 8.44318 5.55996 8.66294 5.88886C8.8827 6.21776 9 6.60444 9 7C8.99842 7.52995 8.7872 8.03773 8.41247 8.41247C8.03773 8.7872 7.52995 8.99842 7 9Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M17.5 15.1667H5.83333C5.21506 15.1685 4.62264 15.4149 4.18546 15.8521C3.74827 16.2893 3.50185 16.8817 3.5 17.5V22.1667C3.50185 22.7849 3.74827 23.3774 4.18546 23.8145C4.62264 24.2517 5.21506 24.4982 5.83333 24.5H17.5C18.1183 24.4982 18.7107 24.2517 19.1479 23.8145C19.5851 23.3774 19.8315 22.7849 19.8333 22.1667V17.5C19.8315 16.8817 19.5851 16.2893 19.1479 15.8521C18.7107 15.4149 18.1183 15.1685 17.5 15.1667ZM8.16667 22.1667C7.70518 22.1667 7.25405 22.0298 6.87034 21.7734C6.48662 21.517 6.18755 21.1526 6.01095 20.7263C5.83434 20.2999 5.78814 19.8307 5.87817 19.3781C5.9682 18.9255 6.19043 18.5097 6.51675 18.1834C6.84307 17.8571 7.25883 17.6349 7.71146 17.5448C8.16408 17.4548 8.63323 17.501 9.05959 17.6776C9.48596 17.8542 9.85037 18.1533 10.1068 18.537C10.3632 18.9207 10.5 19.3718 10.5 19.8333C10.4982 20.4516 10.2517 21.044 9.81454 21.4812C9.37736 21.9184 8.78494 22.1648 8.16667 22.1667V22.1667ZM22.1667 3.5H5.83333C5.21506 3.50185 4.62264 3.74827 4.18546 4.18546C3.74827 4.62264 3.50185 5.21506 3.5 5.83333V10.5C3.50185 11.1183 3.74827 11.7107 4.18546 12.1479C4.62264 12.5851 5.21506 12.8315 5.83333 12.8333H22.1667C22.7849 12.8315 23.3774 12.5851 23.8145 12.1479C24.2517 11.7107 24.4982 11.1183 24.5 10.5V5.83333C24.4982 5.21506 24.2517 4.62264 23.8145 4.18546C23.3774 3.74827 22.7849 3.50185 22.1667 3.5V3.5ZM8.16667 10.5C7.70518 10.5 7.25405 10.3632 6.87034 10.1068C6.48662 9.85037 6.18755 9.48596 6.01095 9.05959C5.83434 8.63323 5.78814 8.16408 5.87817 7.71146C5.9682 7.25883 6.19043 6.84307 6.51675 6.51675C6.84307 6.19043 7.25883 5.9682 7.71146 5.87817C8.16408 5.78814 8.63323 5.83434 9.05959 6.01095C9.48596 6.18755 9.85037 6.48662 10.1068 6.87034C10.3632 7.25405 10.5 7.70518 10.5 8.16667C10.4982 8.78494 10.2517 9.37736 9.81454 9.81454C9.37736 10.2517 8.78494 10.4982 8.16667 10.5V10.5Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-poll"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}