@getflip/swirl-components 0.10.0 → 0.12.0

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

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconHelp {
+  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.96665 11.9987C8.19998 11.9987 8.39731 11.918 8.55865 11.7567C8.71953 11.5958 8.79998 11.3987 8.79998 11.1654C8.79998 10.932 8.71953 10.7349 8.55865 10.574C8.39731 10.4127 8.19998 10.332 7.96665 10.332C7.73331 10.332 7.53598 10.4127 7.37465 10.574C7.21376 10.7349 7.13331 10.932 7.13331 11.1654C7.13331 11.3987 7.21376 11.5958 7.37465 11.7567C7.53598 11.918 7.73331 11.9987 7.96665 11.9987ZM8.06665 5.13203C8.37776 5.13203 8.62776 5.21803 8.81665 5.39003C9.00554 5.56248 9.09998 5.78759 9.09998 6.06536C9.09998 6.25425 9.0362 6.44581 8.90865 6.64003C8.78065 6.8347 8.59998 7.03759 8.36665 7.2487C8.03331 7.53759 7.78887 7.81536 7.63331 8.08203C7.47776 8.3487 7.39998 8.61536 7.39998 8.88203C7.39998 9.03759 7.45842 9.16803 7.57531 9.27336C7.69176 9.37914 7.82776 9.43203 7.98331 9.43203C8.13887 9.43203 8.27776 9.37648 8.39998 9.26536C8.5222 9.15425 8.59998 9.01536 8.63331 8.8487C8.66665 8.65981 8.74176 8.48492 8.85865 8.32403C8.97509 8.1627 9.16665 7.95425 9.43331 7.6987C9.77776 7.37648 10.0195 7.08203 10.1586 6.81536C10.2973 6.5487 10.3666 6.25425 10.3666 5.93203C10.3666 5.36536 10.1529 4.90136 9.72531 4.54003C9.29731 4.17914 8.74442 3.9987 8.06665 3.9987C7.59998 3.9987 7.1862 4.08759 6.82531 4.26536C6.46398 4.44314 6.18331 4.71536 5.98331 5.08203C5.90554 5.22648 5.87776 5.36803 5.89998 5.5067C5.9222 5.64581 5.99998 5.75981 6.13331 5.8487C6.27776 5.93759 6.4362 5.96536 6.60865 5.93203C6.78065 5.8987 6.9222 5.80425 7.03331 5.6487C7.15554 5.48203 7.30287 5.35425 7.47531 5.26536C7.64731 5.17648 7.84442 5.13203 8.06665 5.13203ZM7.99998 14.6654C7.08887 14.6654 6.22776 14.4903 5.41665 14.14C4.60554 13.7903 3.89731 13.3154 3.29198 12.7154C2.6862 12.1154 2.20842 11.4098 1.85865 10.5987C1.50842 9.78759 1.33331 8.92092 1.33331 7.9987C1.33331 7.07648 1.50842 6.20981 1.85865 5.3987C2.20842 4.58759 2.6862 3.88203 3.29198 3.28203C3.89731 2.68203 4.60554 2.20692 5.41665 1.8567C6.22776 1.50692 7.08887 1.33203 7.99998 1.33203C8.93331 1.33203 9.80553 1.50692 10.6166 1.8567C11.4278 2.20692 12.1333 2.68203 12.7333 3.28203C13.3333 3.88203 13.8055 4.58759 14.15 5.3987C14.4944 6.20981 14.6666 7.07648 14.6666 7.9987C14.6666 8.92092 14.4944 9.78759 14.15 10.5987C13.8055 11.4098 13.3333 12.1154 12.7333 12.7154C12.1333 13.3154 11.4278 13.7903 10.6166 14.14C9.80553 14.4903 8.93331 14.6654 7.99998 14.6654ZM7.99998 13.332C9.48887 13.332 10.75 12.8127 11.7833 11.774C12.8166 10.7349 13.3333 9.47647 13.3333 7.9987C13.3333 6.52092 12.8166 5.26248 11.7833 4.22336C10.75 3.1847 9.48887 2.66536 7.99998 2.66536C6.54442 2.66536 5.29153 3.1847 4.24131 4.22336C3.19154 5.26248 2.66665 6.52092 2.66665 7.9987C2.66665 9.47647 3.19154 10.7349 4.24131 11.774C5.29153 12.8127 6.54442 13.332 7.99998 13.332Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M11.95 18C12.3 18 12.596 17.879 12.838 17.637C13.0793 17.3957 13.2 17.1 13.2 16.75C13.2 16.4 13.0793 16.1043 12.838 15.863C12.596 15.621 12.3 15.5 11.95 15.5C11.6 15.5 11.304 15.621 11.062 15.863C10.8207 16.1043 10.7 16.4 10.7 16.75C10.7 17.1 10.8207 17.3957 11.062 17.637C11.304 17.879 11.6 18 11.95 18ZM12.1 7.7C12.5667 7.7 12.9417 7.829 13.225 8.087C13.5083 8.34567 13.65 8.68333 13.65 9.1C13.65 9.38333 13.5543 9.67067 13.363 9.962C13.171 10.254 12.9 10.5583 12.55 10.875C12.05 11.3083 11.6833 11.725 11.45 12.125C11.2167 12.525 11.1 12.925 11.1 13.325C11.1 13.5583 11.1877 13.754 11.363 13.912C11.5377 14.0707 11.7417 14.15 11.975 14.15C12.2083 14.15 12.4167 14.0667 12.6 13.9C12.7833 13.7333 12.9 13.525 12.95 13.275C13 12.9917 13.1127 12.7293 13.288 12.488C13.4627 12.246 13.75 11.9333 14.15 11.55C14.6667 11.0667 15.0293 10.625 15.238 10.225C15.446 9.825 15.55 9.38333 15.55 8.9C15.55 8.05 15.2293 7.354 14.588 6.812C13.946 6.27067 13.1167 6 12.1 6C11.4 6 10.7793 6.13333 10.238 6.4C9.696 6.66667 9.275 7.075 8.975 7.625C8.85833 7.84167 8.81667 8.054 8.85 8.262C8.88333 8.47067 9 8.64167 9.2 8.775C9.41667 8.90833 9.65433 8.95 9.913 8.9C10.171 8.85 10.3833 8.70833 10.55 8.475C10.7333 8.225 10.9543 8.03333 11.213 7.9C11.471 7.76667 11.7667 7.7 12.1 7.7ZM12 22C10.6333 22 9.34167 21.7373 8.125 21.212C6.90833 20.6873 5.846 19.975 4.938 19.075C4.02933 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.02933 5.825 4.938 4.925C5.846 4.025 6.90833 3.31233 8.125 2.787C9.34167 2.26233 10.6333 2 12 2C13.4 2 14.7083 2.26233 15.925 2.787C17.1417 3.31233 18.2 4.025 19.1 4.925C20 5.825 20.7083 6.88333 21.225 8.1C21.7417 9.31667 22 10.6167 22 12C22 13.3833 21.7417 14.6833 21.225 15.9C20.7083 17.1167 20 18.175 19.1 19.075C18.2 19.975 17.1417 20.6873 15.925 21.212C14.7083 21.7373 13.4 22 12 22ZM12 20C14.2333 20 16.125 19.221 17.675 17.663C19.225 16.1043 20 14.2167 20 12C20 9.78333 19.225 7.89567 17.675 6.337C16.125 4.779 14.2333 4 12 4C9.81667 4 7.93733 4.779 6.362 6.337C4.78733 7.89567 4 9.78333 4 12C4 14.2167 4.78733 16.1043 6.362 17.663C7.93733 19.221 9.81667 20 12 20Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M13.9417 20.9999C14.35 20.9999 14.6953 20.8588 14.9777 20.5764C15.2592 20.2949 15.4 19.9499 15.4 19.5416C15.4 19.1333 15.2592 18.7883 14.9777 18.5068C14.6953 18.2244 14.35 18.0833 13.9417 18.0833C13.5333 18.0833 13.188 18.2244 12.9057 18.5068C12.6241 18.7883 12.4833 19.1333 12.4833 19.5416C12.4833 19.9499 12.6241 20.2949 12.9057 20.5764C13.188 20.8588 13.5333 20.9999 13.9417 20.9999ZM14.1167 8.98325C14.6611 8.98325 15.0986 9.13375 15.4292 9.43475C15.7597 9.73653 15.925 10.1305 15.925 10.6166C15.925 10.9471 15.8134 11.2824 15.5902 11.6223C15.3662 11.9629 15.05 12.318 14.6417 12.6874C14.0583 13.193 13.6306 13.6791 13.3583 14.1458C13.0861 14.6124 12.95 15.0791 12.95 15.5458C12.95 15.818 13.0523 16.0463 13.2568 16.2306C13.4606 16.4157 13.6986 16.5083 13.9708 16.5083C14.2431 16.5083 14.4861 16.411 14.7 16.2166C14.9139 16.0221 15.05 15.7791 15.1083 15.4874C15.1667 15.1569 15.2981 14.8508 15.5027 14.5693C15.7064 14.2869 16.0417 13.9221 16.5083 13.4749C17.1111 12.911 17.5342 12.3958 17.7777 11.9291C18.0203 11.4624 18.1417 10.9471 18.1417 10.3833C18.1417 9.39159 17.7676 8.57959 17.0193 7.94725C16.2703 7.3157 15.3028 6.99992 14.1167 6.99992C13.3 6.99992 12.5759 7.15547 11.9443 7.46659C11.312 7.7777 10.8208 8.25409 10.4708 8.89575C10.3347 9.14853 10.2861 9.39625 10.325 9.63892C10.3639 9.88236 10.5 10.0819 10.7333 10.2374C10.9861 10.393 11.2634 10.4416 11.5652 10.3833C11.8662 10.3249 12.1139 10.1596 12.3083 9.88742C12.5222 9.59575 12.7801 9.37214 13.0818 9.21659C13.3828 9.06103 13.7278 8.98325 14.1167 8.98325ZM14 25.6666C12.4056 25.6666 10.8986 25.3601 9.47917 24.7473C8.05973 24.1351 6.82034 23.3041 5.761 22.2541C4.70089 21.2041 3.86478 19.9694 3.25267 18.5499C2.63978 17.1305 2.33334 15.6138 2.33334 13.9999C2.33334 12.386 2.63978 10.8694 3.25267 9.44992C3.86478 8.03048 4.70089 6.79575 5.761 5.74575C6.82034 4.69575 8.05973 3.86431 9.47917 3.25142C10.8986 2.63931 12.4056 2.33325 14 2.33325C15.6333 2.33325 17.1597 2.63931 18.5792 3.25142C19.9986 3.86431 21.2333 4.69575 22.2833 5.74575C23.3333 6.79575 24.1597 8.03048 24.7625 9.44992C25.3653 10.8694 25.6667 12.386 25.6667 13.9999C25.6667 15.6138 25.3653 17.1305 24.7625 18.5499C24.1597 19.9694 23.3333 21.2041 22.2833 22.2541C21.2333 23.3041 19.9986 24.1351 18.5792 24.7473C17.1597 25.3601 15.6333 25.6666 14 25.6666ZM14 23.3333C16.6056 23.3333 18.8125 22.4244 20.6208 20.6068C22.4292 18.7883 23.3333 16.586 23.3333 13.9999C23.3333 11.4138 22.4292 9.21153 20.6208 7.39309C18.8125 5.57542 16.6056 4.66659 14 4.66659C11.4528 4.66659 9.26023 5.57542 7.42234 7.39309C5.58523 9.21153 4.66667 11.4138 4.66667 13.9999C4.66667 16.586 5.58523 18.7883 7.42234 20.6068C9.26023 22.4244 11.4528 23.3333 14 23.3333Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-help"; }
+  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-image.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconImage {
+  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: "M4.66667 11.3333H11.3333C11.4667 11.3333 11.5667 11.2722 11.6333 11.15C11.7 11.0278 11.6889 10.9111 11.6 10.8L9.76667 8.35C9.7 8.26111 9.61111 8.21667 9.5 8.21667C9.38889 8.21667 9.3 8.26111 9.23333 8.35L7.5 10.6667L6.26667 9.01667C6.2 8.92778 6.11111 8.88333 6 8.88333C5.88889 8.88333 5.8 8.92778 5.73333 9.01667L4.4 10.8C4.31111 10.9111 4.3 11.0278 4.36667 11.15C4.43333 11.2722 4.53333 11.3333 4.66667 11.3333ZM3.33333 14C2.96667 14 2.65267 13.8696 2.39133 13.6087C2.13044 13.3473 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13044 2.65267 2.39133 2.39133C2.65267 2.13044 2.96667 2 3.33333 2H12.6667C13.0333 2 13.3473 2.13044 13.6087 2.39133C13.8696 2.65267 14 2.96667 14 3.33333V12.6667C14 13.0333 13.8696 13.3473 13.6087 13.6087C13.3473 13.8696 13.0333 14 12.6667 14H3.33333Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M7 17H17C17.2 17 17.35 16.9083 17.45 16.725C17.55 16.5417 17.5333 16.3667 17.4 16.2L14.65 12.525C14.55 12.3917 14.4167 12.325 14.25 12.325C14.0833 12.325 13.95 12.3917 13.85 12.525L11.25 16L9.4 13.525C9.3 13.3917 9.16667 13.325 9 13.325C8.83333 13.325 8.7 13.3917 8.6 13.525L6.6 16.2C6.46667 16.3667 6.45 16.5417 6.55 16.725C6.65 16.9083 6.8 17 7 17ZM5 21C4.45 21 3.979 20.8043 3.587 20.413C3.19567 20.021 3 19.55 3 19V5C3 4.45 3.19567 3.979 3.587 3.587C3.979 3.19567 4.45 3 5 3H19C19.55 3 20.021 3.19567 20.413 3.587C20.8043 3.979 21 4.45 21 5V19C21 19.55 20.8043 20.021 20.413 20.413C20.021 20.8043 19.55 21 19 21H5Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M8.16667 19.8333H19.8333C20.0667 19.8333 20.2417 19.7264 20.3583 19.5125C20.475 19.2986 20.4556 19.0944 20.3 18.9L17.0917 14.6125C16.975 14.4569 16.8194 14.3792 16.625 14.3792C16.4306 14.3792 16.275 14.4569 16.1583 14.6125L13.125 18.6667L10.9667 15.7792C10.85 15.6236 10.6944 15.5458 10.5 15.5458C10.3056 15.5458 10.15 15.6236 10.0333 15.7792L7.7 18.9C7.54444 19.0944 7.525 19.2986 7.64167 19.5125C7.75833 19.7264 7.93333 19.8333 8.16667 19.8333ZM5.83333 24.5C5.19167 24.5 4.64217 24.2717 4.18483 23.8152C3.72828 23.3578 3.5 22.8083 3.5 22.1667V5.83333C3.5 5.19167 3.72828 4.64217 4.18483 4.18483C4.64217 3.72828 5.19167 3.5 5.83333 3.5H22.1667C22.8083 3.5 23.3578 3.72828 23.8152 4.18483C24.2717 4.64217 24.5 5.19167 24.5 5.83333V22.1667C24.5 22.8083 24.2717 23.3578 23.8152 23.8152C23.3578 24.2717 22.8083 24.5 22.1667 24.5H5.83333Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-image"; }
+  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-info.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconInfo {
+  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.00001 1.33333C4.32001 1.33333 1.33334 4.32 1.33334 8C1.33334 11.68 4.32001 14.6667 8.00001 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8C14.6667 4.32 11.68 1.33333 8.00001 1.33333ZM8.00001 11.3333C7.63334 11.3333 7.33334 11.0333 7.33334 10.6667V8C7.33334 7.63333 7.63334 7.33333 8.00001 7.33333C8.36668 7.33333 8.66668 7.63333 8.66668 8V10.6667C8.66668 11.0333 8.36668 11.3333 8.00001 11.3333ZM8.66668 5.33333C8.66668 5.70152 8.3682 6 8.00001 6C7.63182 6 7.33334 5.70152 7.33334 5.33333C7.33334 4.96514 7.63182 4.66667 8.00001 4.66667C8.3682 4.66667 8.66668 4.96514 8.66668 5.33333Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M12 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 17C11.45 17 11 16.55 11 16V12C11 11.45 11.45 11 12 11C12.55 11 13 11.45 13 12V16C13 16.55 12.55 17 12 17ZM13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M14 2.33333C7.56001 2.33333 2.33334 7.56 2.33334 14C2.33334 20.44 7.56001 25.6667 14 25.6667C20.44 25.6667 25.6667 20.44 25.6667 14C25.6667 7.56 20.44 2.33333 14 2.33333ZM14 19.8333C13.3583 19.8333 12.8333 19.3083 12.8333 18.6667V14C12.8333 13.3583 13.3583 12.8333 14 12.8333C14.6417 12.8333 15.1667 13.3583 15.1667 14V18.6667C15.1667 19.3083 14.6417 19.8333 14 19.8333ZM15.1667 9.33333C15.1667 9.97767 14.6443 10.5 14 10.5C13.3557 10.5 12.8333 9.97767 12.8333 9.33333C12.8333 8.689 13.3557 8.16667 14 8.16667C14.6443 8.16667 15.1667 8.689 15.1667 9.33333Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-info"; }
+  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-inventory.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconInventory {
+  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: "M13.3333 1.33334H2.66668C2.00001 1.33334 1.33334 1.93334 1.33334 2.66668V4.67334C1.33334 5.15334 1.62001 5.56668 2.00001 5.80001V13.3333C2.00001 14.0667 2.73334 14.6667 3.33334 14.6667H12.6667C13.2667 14.6667 14 14.0667 14 13.3333V5.80001C14.38 5.56668 14.6667 5.15334 14.6667 4.67334V2.66668C14.6667 1.93334 14 1.33334 13.3333 1.33334ZM9.33334 9.33334H6.66668C6.30001 9.33334 6.00001 9.03334 6.00001 8.66668C6.00001 8.30001 6.30001 8.00001 6.66668 8.00001H9.33334C9.70001 8.00001 10 8.30001 10 8.66668C10 9.03334 9.70001 9.33334 9.33334 9.33334ZM13.3333 4.66668H2.66668V2.66668H13.3333V4.66668Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M20 2H4C3 2 2 2.9 2 4V7.01C2 7.73 2.43 8.35 3 8.7V20C3 21.1 4.1 22 5 22H19C19.9 22 21 21.1 21 20V8.7C21.57 8.35 22 7.73 22 7.01V4C22 2.9 21 2 20 2ZM14 14H10C9.45 14 9 13.55 9 13C9 12.45 9.45 12 10 12H14C14.55 12 15 12.45 15 13C15 13.55 14.55 14 14 14ZM20 7H4V4H20V7Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M23.3333 2.33334H4.66668C3.50001 2.33334 2.33334 3.38334 2.33334 4.66668V8.17834C2.33334 9.01834 2.83501 9.74168 3.50001 10.15V23.3333C3.50001 24.6167 4.78334 25.6667 5.83334 25.6667H22.1667C23.2167 25.6667 24.5 24.6167 24.5 23.3333V10.15C25.165 9.74168 25.6667 9.01834 25.6667 8.17834V4.66668C25.6667 3.38334 24.5 2.33334 23.3333 2.33334ZM16.3333 16.3333H11.6667C11.025 16.3333 10.5 15.8083 10.5 15.1667C10.5 14.525 11.025 14 11.6667 14H16.3333C16.975 14 17.5 14.525 17.5 15.1667C17.5 15.8083 16.975 16.3333 16.3333 16.3333ZM23.3333 8.16668H4.66668V4.66668H23.3333V8.16668Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-inventory"; }
+  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-like.js

@@ -0,0 +1,55 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconLike {
+  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.72387 4.94293L9.27694 1.38986C10.0419 0.62488 11.3284 1.35327 11.066 2.40281L10.4369 4.91927C10.3843 5.12966 10.5434 5.33345 10.7603 5.33345H14C14.7364 5.33345 15.3333 5.93041 15.3333 6.66679V6.86831C15.3333 7.61454 15.1767 8.35247 14.8737 9.03438L13.0186 13.2083C12.8046 13.6898 12.3271 14.0001 11.8002 14.0001H6.66668C5.9303 14.0001 5.33334 13.4032 5.33334 12.6668V5.88574C5.33334 5.53212 5.47382 5.19298 5.72387 4.94293Z", fill: "currentColor" }),
+        h("path", { d: "M4.00001 12.6668V6.66679C4.00001 5.93041 3.40306 5.33345 2.66668 5.33345C1.9303 5.33345 1.33334 5.93041 1.33334 6.66679V12.6668C1.33334 13.4032 1.9303 14.0001 2.66668 14.0001C3.40306 14.0001 4.00001 13.4032 4.00001 12.6668Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M8.58579 7.41427L13.9154 2.08466C15.0629 0.937198 16.9926 2.02979 16.599 3.60409L15.6553 7.37879C15.5764 7.69436 15.8151 8.00006 16.1404 8.00006H21C22.1046 8.00006 23 8.89549 23 10.0001V10.3023C23 11.4217 22.7651 12.5286 22.3105 13.5514L19.5279 19.8123C19.2069 20.5346 18.4906 21.0001 17.7003 21.0001H10C8.89543 21.0001 8 20.1046 8 19.0001V8.82848C8 8.29805 8.21071 7.78934 8.58579 7.41427Z", fill: "currentColor" }),
+        h("path", { d: "M6 19.0001V10.0001C6 8.89549 5.10457 8.00006 4 8.00006C2.89543 8.00006 2 8.89549 2 10.0001V19.0001C2 20.1046 2.89543 21.0001 4 21.0001C5.10457 21.0001 6 20.1046 6 19.0001Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M10.0168 8.64994L16.2346 2.43206C17.5733 1.09336 19.8247 2.36804 19.3655 4.20473L18.2645 8.60855C18.1725 8.97672 18.451 9.33336 18.8305 9.33336H24.5C25.7887 9.33336 26.8333 10.378 26.8333 11.6667V12.0194C26.8333 13.3253 26.5593 14.6166 26.0289 15.81L22.7825 23.1143C22.408 23.957 21.5724 24.5 20.6503 24.5H11.6667C10.378 24.5 9.33334 23.4554 9.33334 22.1667V10.2999C9.33334 9.68102 9.57918 9.08753 10.0168 8.64994Z", fill: "currentColor" }),
+        h("path", { d: "M7.00001 22.1667V11.6667C7.00001 10.378 5.95534 9.33336 4.66668 9.33336C3.37801 9.33336 2.33334 10.378 2.33334 11.6667V22.1667C2.33334 23.4554 3.37801 24.5 4.66668 24.5C5.95534 24.5 7.00001 23.4554 7.00001 22.1667Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-like"; }
+  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-link.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconLink {
+  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.09414 12.8082C7.41846 13.4838 6.60136 13.8217 5.64283 13.8217C4.68431 13.8217 3.86721 13.4838 3.19153 12.8082C2.51585 12.1325 2.17801 11.3154 2.17801 10.3568C2.17801 9.39832 2.51585 8.58122 3.19153 7.90554L4.49968 6.5974C4.64895 6.44812 4.82573 6.37348 5.03001 6.37348C5.23428 6.37348 5.41106 6.44812 5.56034 6.5974C5.71747 6.75453 5.79604 6.93524 5.79604 7.13951C5.79604 7.34379 5.7214 7.52056 5.57212 7.66984L4.26397 8.97799C3.87899 9.36297 3.6865 9.82259 3.6865 10.3568C3.6865 10.8911 3.87899 11.3507 4.26397 11.7357C4.64895 12.1207 5.10857 12.3132 5.64283 12.3132C6.17709 12.3132 6.63671 12.1207 7.02169 11.7357L8.32984 10.4276C8.47912 10.2783 8.65589 10.2036 8.86017 10.2036C9.06444 10.2036 9.24515 10.2822 9.40228 10.4393C9.55156 10.5886 9.6262 10.7654 9.6262 10.9697C9.6262 11.1739 9.55156 11.3507 9.40228 11.5L8.09414 12.8082ZM7.03348 9.95615C6.89991 10.0897 6.7368 10.1585 6.54416 10.1626C6.35182 10.1664 6.18495 10.0976 6.04353 9.95615C5.9021 9.81473 5.83328 9.64786 5.83705 9.45552C5.84114 9.26287 5.90996 9.09977 6.04353 8.9662L8.96623 6.0435C9.0998 5.90993 9.2629 5.84111 9.45555 5.83702C9.64789 5.83325 9.81476 5.90207 9.95618 6.0435C10.0976 6.18492 10.1664 6.35179 10.1627 6.54413C10.1586 6.73677 10.0897 6.89988 9.95618 7.03345L7.03348 9.95615ZM11.5 9.40225C11.3508 9.55153 11.174 9.62617 10.9697 9.62617C10.7654 9.62617 10.5887 9.55153 10.4394 9.40225C10.2822 9.24512 10.2037 9.06441 10.2037 8.86014C10.2037 8.65586 10.2783 8.47909 10.4276 8.32981L11.7357 7.02166C12.1207 6.63668 12.3132 6.17706 12.3132 5.6428C12.3132 5.10854 12.1207 4.64892 11.7357 4.26394C11.3508 3.87896 10.8911 3.68647 10.3569 3.68647C9.82262 3.68647 9.363 3.87896 8.97802 4.26394L7.66987 5.57209C7.52059 5.72137 7.34382 5.79601 7.13954 5.79601C6.93527 5.79601 6.75456 5.71744 6.59743 5.56031C6.44815 5.41103 6.37351 5.23425 6.37351 5.02998C6.37351 4.8257 6.44815 4.64892 6.59743 4.49965L7.90557 3.1915C8.58125 2.51582 9.39835 2.17798 10.3569 2.17798C11.3154 2.17798 12.1325 2.51582 12.8082 3.1915C13.4839 3.86718 13.8217 4.68428 13.8217 5.6428C13.8217 6.60132 13.4839 7.41843 12.8082 8.09411L11.5 9.40225Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M12.1412 19.2123C11.1277 20.2259 9.90205 20.7326 8.46426 20.7326C7.02648 20.7326 5.80083 20.2259 4.78731 19.2123C3.77379 18.1988 3.26703 16.9732 3.26703 15.5354C3.26703 14.0976 3.77379 12.872 4.78731 11.8584L6.74953 9.89622C6.97345 9.6723 7.23861 9.56034 7.54502 9.56034C7.85144 9.56034 8.1166 9.6723 8.34052 9.89622C8.57622 10.1319 8.69407 10.403 8.69407 10.7094C8.69407 11.0158 8.58211 11.281 8.3582 11.5049L6.39598 13.4671C5.81851 14.0446 5.52977 14.734 5.52977 15.5354C5.52977 16.3368 5.81851 17.0262 6.39598 17.6037C6.97345 18.1812 7.66288 18.4699 8.46426 18.4699C9.26565 18.4699 9.95508 18.1812 10.5326 17.6037L12.4948 15.6415C12.7187 15.4175 12.9839 15.3056 13.2903 15.3056C13.5967 15.3056 13.8677 15.4234 14.1034 15.6591C14.3274 15.8831 14.4393 16.1482 14.4393 16.4546C14.4393 16.761 14.3274 17.0262 14.1034 17.2501L12.1412 19.2123ZM10.5502 14.9344C10.3499 15.1347 10.1052 15.2379 9.81625 15.2441C9.52775 15.2497 9.27744 15.1465 9.0653 14.9344C8.85317 14.7222 8.74993 14.4719 8.75559 14.1834C8.76172 13.8944 8.86496 13.6498 9.0653 13.4494L13.4494 9.06537C13.6497 8.86502 13.8944 8.76178 14.1833 8.75565C14.4718 8.75 14.7222 8.85323 14.9343 9.06537C15.1464 9.2775 15.2497 9.52781 15.244 9.81631C15.2379 10.1053 15.1346 10.3499 14.9343 10.5503L10.5502 14.9344ZM17.2501 14.1035C17.0261 14.3274 16.761 14.4394 16.4546 14.4394C16.1482 14.4394 15.883 14.3274 15.6591 14.1035C15.4234 13.8678 15.3055 13.5967 15.3055 13.2903C15.3055 12.9839 15.4175 12.7188 15.6414 12.4948L17.6036 10.5326C18.1811 9.95514 18.4698 9.26571 18.4698 8.46432C18.4698 7.66294 18.1811 6.97351 17.6036 6.39604C17.0261 5.81857 16.3367 5.52983 15.5353 5.52983C14.7339 5.52983 14.0445 5.81857 13.467 6.39604L11.5048 8.35826C11.2809 8.58218 11.0157 8.69413 10.7093 8.69413C10.4029 8.69413 10.1319 8.57628 9.89615 8.34058C9.67224 8.11666 9.56028 7.8515 9.56028 7.54509C9.56028 7.23867 9.67224 6.97351 9.89615 6.74959L11.8584 4.78737C12.8719 3.77385 14.0975 3.26709 15.5353 3.26709C16.9731 3.26709 18.1988 3.77385 19.2123 4.78737C20.2258 5.80089 20.7326 7.02654 20.7326 8.46432C20.7326 9.90211 20.2258 11.1278 19.2123 12.1413L17.2501 14.1035Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M14.1648 22.4143C12.9823 23.5968 11.5524 24.188 9.87499 24.188C8.19758 24.188 6.76765 23.5968 5.58521 22.4143C4.40277 21.2319 3.81155 19.802 3.81155 18.1245C3.81155 16.4471 4.40277 15.0172 5.58521 13.8348L7.87447 11.5455C8.13571 11.2843 8.44507 11.1536 8.80255 11.1536C9.16003 11.1536 9.46939 11.2843 9.73063 11.5455C10.0056 11.8205 10.1431 12.1367 10.1431 12.4942C10.1431 12.8517 10.0125 13.161 9.75125 13.4223L7.46199 15.7115C6.78828 16.3853 6.45142 17.1896 6.45142 18.1245C6.45142 19.0595 6.78828 19.8638 7.46199 20.5375C8.13571 21.2113 8.94004 21.5481 9.87499 21.5481C10.8099 21.5481 11.6143 21.2113 12.288 20.5375L14.5773 18.2483C14.8385 17.987 15.1478 17.8564 15.5053 17.8564C15.8628 17.8564 16.179 17.9939 16.454 18.2689C16.7153 18.5301 16.8459 18.8395 16.8459 19.197C16.8459 19.5545 16.7153 19.8638 16.454 20.1251L14.1648 22.4143ZM12.3086 17.4233C12.0749 17.6571 11.7894 17.7775 11.4523 17.7847C11.1157 17.7913 10.8237 17.6708 10.5762 17.4233C10.3287 17.1758 10.2083 16.8838 10.2149 16.5472C10.222 16.2101 10.3425 15.9247 10.5762 15.6909L15.6909 10.5762C15.9247 10.3424 16.2101 10.222 16.5473 10.2148C16.8838 10.2082 17.1759 10.3287 17.4234 10.5762C17.6708 10.8237 17.7913 11.1157 17.7847 11.4523C17.7775 11.7894 17.6571 12.0749 17.4234 12.3086L12.3086 17.4233ZM20.1251 16.454C19.8639 16.7152 19.5545 16.8459 19.197 16.8459C18.8395 16.8459 18.5302 16.7152 18.2689 16.454C17.994 16.179 17.8565 15.8628 17.8565 15.5053C17.8565 15.1478 17.9871 14.8385 18.2483 14.5772L20.5376 12.288C21.2113 11.6143 21.5481 10.8099 21.5481 9.87496C21.5481 8.94001 21.2113 8.13568 20.5376 7.46196C19.8639 6.78825 19.0595 6.45139 18.1246 6.45139C17.1896 6.45139 16.3853 6.78825 15.7116 7.46196L13.4223 9.75122C13.1611 10.0125 12.8517 10.1431 12.4942 10.1431C12.1368 10.1431 11.8205 10.0056 11.5455 9.7306C11.2843 9.46936 11.1537 9.16 11.1537 8.80252C11.1537 8.44504 11.2843 8.13568 11.5455 7.87444L13.8348 5.58518C15.0172 4.40274 16.4472 3.81152 18.1246 3.81152C19.802 3.81152 21.2319 4.40274 22.4144 5.58518C23.5968 6.76762 24.188 8.19755 24.188 9.87496C24.188 11.5524 23.5968 12.9823 22.4144 14.1647L20.1251 16.454Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-link"; }
+  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-lock.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconLock {
+  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 5.66667H11.3333V4.33333C11.3333 2.49333 9.83999 1 7.99999 1C6.15999 1 4.66666 2.49333 4.66666 4.33333V5.66667H3.99999C3.26666 5.66667 2.66666 6.26667 2.66666 7V13.6667C2.66666 14.4 3.26666 15 3.99999 15H12C12.7333 15 13.3333 14.4 13.3333 13.6667V7C13.3333 6.26667 12.7333 5.66667 12 5.66667ZM7.99999 11.6667C7.26666 11.6667 6.66666 11.0667 6.66666 10.3333C6.66666 9.6 7.26666 9 7.99999 9C8.73332 9 9.33332 9.6 9.33332 10.3333C9.33332 11.0667 8.73332 11.6667 7.99999 11.6667ZM5.99999 5.66667V4.33333C5.99999 3.22667 6.89332 2.33333 7.99999 2.33333C9.10666 2.33333 9.99999 3.22667 9.99999 4.33333V5.66667H5.99999Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M18 8.5H17V6.5C17 3.74 14.76 1.5 12 1.5C9.24 1.5 7 3.74 7 6.5V8.5H6C4.9 8.5 4 9.4 4 10.5V20.5C4 21.6 4.9 22.5 6 22.5H18C19.1 22.5 20 21.6 20 20.5V10.5C20 9.4 19.1 8.5 18 8.5ZM12 17.5C10.9 17.5 10 16.6 10 15.5C10 14.4 10.9 13.5 12 13.5C13.1 13.5 14 14.4 14 15.5C14 16.6 13.1 17.5 12 17.5ZM9 8.5V6.5C9 4.84 10.34 3.5 12 3.5C13.66 3.5 15 4.84 15 6.5V8.5H9Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M21 9.91667H19.8333V7.58333C19.8333 4.36333 17.22 1.75 14 1.75C10.78 1.75 8.16666 4.36333 8.16666 7.58333V9.91667H6.99999C5.71666 9.91667 4.66666 10.9667 4.66666 12.25V23.9167C4.66666 25.2 5.71666 26.25 6.99999 26.25H21C22.2833 26.25 23.3333 25.2 23.3333 23.9167V12.25C23.3333 10.9667 22.2833 9.91667 21 9.91667ZM14 20.4167C12.7167 20.4167 11.6667 19.3667 11.6667 18.0833C11.6667 16.8 12.7167 15.75 14 15.75C15.2833 15.75 16.3333 16.8 16.3333 18.0833C16.3333 19.3667 15.2833 20.4167 14 20.4167ZM10.5 9.91667V7.58333C10.5 5.64667 12.0633 4.08333 14 4.08333C15.9367 4.08333 17.5 5.64667 17.5 7.58333V9.91667H10.5Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-lock"; }
+  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-logout.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconLogout {
+  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.15 10.9833C10.0056 10.8167 9.93335 10.6304 9.93335 10.4247C9.93335 10.2193 10.0056 10.0444 10.15 9.9L11.3 8.76667H6.68335C6.47224 8.76667 6.29446 8.69156 6.15001 8.54134C6.00557 8.39156 5.93335 8.21111 5.93335 8C5.93335 7.78889 6.00557 7.60845 6.15001 7.45867C6.29446 7.30845 6.47224 7.23334 6.68335 7.23334H11.3L10.15 6.1C9.99446 5.94445 9.91935 5.76378 9.92468 5.558C9.93046 5.35267 10.0056 5.17222 10.15 5.01667C10.2945 4.87222 10.4696 4.8 10.6753 4.8C10.8807 4.8 11.0556 4.87222 11.2 5.01667L13.6667 7.46667C13.7333 7.54445 13.7833 7.62778 13.8167 7.71667C13.85 7.80556 13.8667 7.9 13.8667 8C13.8667 8.1 13.85 8.19445 13.8167 8.28333C13.7833 8.37222 13.7333 8.45556 13.6667 8.53333L11.2 11C11.0333 11.1556 10.8529 11.2249 10.6587 11.208C10.464 11.1916 10.2945 11.1167 10.15 10.9833V10.9833ZM3.33335 14.1333C2.91113 14.1333 2.5529 13.9862 2.25868 13.692C1.96401 13.3973 1.81668 13.0389 1.81668 12.6167V3.38334C1.81668 2.96111 1.96401 2.60267 2.25868 2.308C2.5529 2.01378 2.91113 1.86667 3.33335 1.86667H7.26668C7.4889 1.86667 7.67224 1.93889 7.81668 2.08334C7.96113 2.22778 8.03335 2.40556 8.03335 2.61667C8.03335 2.83889 7.96113 3.02222 7.81668 3.16667C7.67224 3.31111 7.4889 3.38334 7.26668 3.38334H3.33335V12.6167H7.26668C7.4889 12.6167 7.67224 12.6889 7.81668 12.8333C7.96113 12.9778 8.03335 13.1611 8.03335 13.3833C8.03335 13.5944 7.96113 13.7722 7.81668 13.9167C7.67224 14.0611 7.4889 14.1333 7.26668 14.1333H3.33335Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M15.225 16.475C15.0083 16.225 14.9 15.9457 14.9 15.637C14.9 15.329 15.0083 15.0667 15.225 14.85L16.95 13.15H10.025C9.70834 13.15 9.44167 13.0373 9.22501 12.812C9.00834 12.5873 8.90001 12.3167 8.90001 12C8.90001 11.6833 9.00834 11.4127 9.22501 11.188C9.44167 10.9627 9.70834 10.85 10.025 10.85H16.95L15.225 9.14999C14.9917 8.91665 14.879 8.64565 14.887 8.33699C14.8957 8.02899 15.0083 7.75832 15.225 7.52499C15.4417 7.30832 15.7043 7.19999 16.013 7.19999C16.321 7.19999 16.5833 7.30832 16.8 7.52499L20.5 11.2C20.6 11.3167 20.675 11.4417 20.725 11.575C20.775 11.7083 20.8 11.85 20.8 12C20.8 12.15 20.775 12.2917 20.725 12.425C20.675 12.5583 20.6 12.6833 20.5 12.8L16.8 16.5C16.55 16.7333 16.2793 16.8373 15.988 16.812C15.696 16.7873 15.4417 16.675 15.225 16.475ZM5.00001 21.2C4.36667 21.2 3.82934 20.9793 3.38801 20.538C2.94601 20.096 2.72501 19.5583 2.72501 18.925V5.07499C2.72501 4.44165 2.94601 3.90399 3.38801 3.46199C3.82934 3.02065 4.36667 2.79999 5.00001 2.79999H10.9C11.2333 2.79999 11.5083 2.90832 11.725 3.12499C11.9417 3.34165 12.05 3.60832 12.05 3.92499C12.05 4.25832 11.9417 4.53332 11.725 4.74999C11.5083 4.96665 11.2333 5.07499 10.9 5.07499H5.00001V18.925H10.9C11.2333 18.925 11.5083 19.0333 11.725 19.25C11.9417 19.4667 12.05 19.7417 12.05 20.075C12.05 20.3917 11.9417 20.6583 11.725 20.875C11.5083 21.0917 11.2333 21.2 10.9 21.2H5.00001Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M17.7625 19.2208C17.5097 18.9292 17.3833 18.6033 17.3833 18.2432C17.3833 17.8838 17.5097 17.5778 17.7625 17.325L19.775 15.3417H11.6958C11.3264 15.3417 11.0153 15.2102 10.7625 14.9473C10.5097 14.6852 10.3833 14.3694 10.3833 14C10.3833 13.6306 10.5097 13.3148 10.7625 13.0527C11.0153 12.7898 11.3264 12.6583 11.6958 12.6583H19.775L17.7625 10.675C17.4903 10.4028 17.3588 10.0866 17.3682 9.7265C17.3783 9.36716 17.5097 9.05139 17.7625 8.77916C18.0153 8.52639 18.3217 8.4 18.6818 8.4C19.0412 8.4 19.3472 8.52639 19.6 8.77916L23.9167 13.0667C24.0333 13.2028 24.1208 13.3486 24.1792 13.5042C24.2375 13.6597 24.2667 13.825 24.2667 14C24.2667 14.175 24.2375 14.3403 24.1792 14.4958C24.1208 14.6514 24.0333 14.7972 23.9167 14.9333L19.6 19.25C19.3083 19.5222 18.9926 19.6436 18.6527 19.614C18.312 19.5852 18.0153 19.4542 17.7625 19.2208V19.2208ZM5.83334 24.7333C5.09445 24.7333 4.46756 24.4759 3.95267 23.961C3.437 23.4453 3.17917 22.8181 3.17917 22.0792V5.92083C3.17917 5.18194 3.437 4.55466 3.95267 4.039C4.46756 3.52411 5.09445 3.26666 5.83334 3.26666H12.7167C13.1056 3.26666 13.4264 3.39305 13.6792 3.64583C13.9319 3.89861 14.0583 4.20972 14.0583 4.57916C14.0583 4.96805 13.9319 5.28889 13.6792 5.54166C13.4264 5.79444 13.1056 5.92083 12.7167 5.92083H5.83334V22.0792H12.7167C13.1056 22.0792 13.4264 22.2056 13.6792 22.4583C13.9319 22.7111 14.0583 23.0319 14.0583 23.4208C14.0583 23.7903 13.9319 24.1014 13.6792 24.3542C13.4264 24.6069 13.1056 24.7333 12.7167 24.7333H5.83334Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-logout"; }
+  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-mail.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconMail {
+  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: "M13.3333 2.66669H2.66668C1.93334 2.66669 1.33334 3.26669 1.33334 4.00002V12C1.33334 12.7334 1.93334 13.3334 2.66668 13.3334H13.3333C14.0667 13.3334 14.6667 12.7334 14.6667 12V4.00002C14.6667 3.26669 14.0667 2.66669 13.3333 2.66669ZM13.0667 5.50002L8.70668 8.22669C8.27334 8.50002 7.72668 8.50002 7.29334 8.22669L2.93334 5.50002C2.76668 5.39335 2.66668 5.21335 2.66668 5.02002C2.66668 4.57335 3.15334 4.30669 3.53334 4.54002L8.00001 7.33335L12.4667 4.54002C12.8467 4.30669 13.3333 4.57335 13.3333 5.02002C13.3333 5.21335 13.2333 5.39335 13.0667 5.50002Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM19.6 8.25L13.06 12.34C12.41 12.75 11.59 12.75 10.94 12.34L4.4 8.25C4.15 8.09 4 7.82 4 7.53C4 6.86 4.73 6.46 5.3 6.81L12 11L18.7 6.81C19.27 6.46 20 6.86 20 7.53C20 7.82 19.85 8.09 19.6 8.25Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M23.3333 4.66669H4.66668C3.38334 4.66669 2.33334 5.71669 2.33334 7.00002V21C2.33334 22.2834 3.38334 23.3334 4.66668 23.3334H23.3333C24.6167 23.3334 25.6667 22.2834 25.6667 21V7.00002C25.6667 5.71669 24.6167 4.66669 23.3333 4.66669ZM22.8667 9.62502L15.2367 14.3967C14.4783 14.875 13.5217 14.875 12.7633 14.3967L5.13334 9.62502C4.84168 9.43835 4.66668 9.12335 4.66668 8.78502C4.66668 8.00335 5.51834 7.53669 6.18334 7.94502L14 12.8334L21.8167 7.94502C22.4817 7.53669 23.3333 8.00335 23.3333 8.78502C23.3333 9.12335 23.1583 9.43835 22.8667 9.62502Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-mail"; }
+  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-manage-accounts.js

@@ -0,0 +1,58 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconManageAccounts {
+  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.21381 8.35C7.06714 8.34334 6.92047 8.33667 6.76714 8.33667C5.15381 8.33667 3.64714 8.78334 2.36047 9.55C1.77381 9.89667 1.43381 10.55 1.43381 11.2367V12.3367C1.43381 12.7033 1.73381 13.0033 2.10047 13.0033H7.60714C7.08047 12.25 6.76714 11.33 6.76714 10.3367C6.76714 9.62334 6.93381 8.95667 7.21381 8.35Z", fill: "currentColor" }),
+        h("path", { d: "M6.76714 7.67C8.2399 7.67 9.43381 6.4761 9.43381 5.00334C9.43381 3.53058 8.2399 2.33667 6.76714 2.33667C5.29438 2.33667 4.10047 3.53058 4.10047 5.00334C4.10047 6.4761 5.29438 7.67 6.76714 7.67Z", fill: "currentColor" }),
+        h("path", { d: "M13.9338 10.3367C13.9338 10.19 13.9138 10.0567 13.8938 9.91667L14.4538 9.43C14.5738 9.32334 14.6005 9.15 14.5205 9.01L14.1271 8.33C14.0471 8.19 13.8805 8.13 13.7338 8.18334L13.0271 8.42334C12.8138 8.24334 12.5738 8.10334 12.3071 8.00334L12.1605 7.27667C12.1271 7.12334 11.9938 7.01 11.8338 7.01H11.0471C10.8871 7.01 10.7538 7.12334 10.7205 7.27667L10.5738 8.00334C10.3071 8.10334 10.0671 8.24334 9.85381 8.42334L9.14714 8.18334C8.99381 8.13 8.83381 8.19667 8.75381 8.33L8.36047 9.01C8.28047 9.15 8.30714 9.32334 8.42714 9.43L8.98714 9.91667C8.96714 10.0567 8.94714 10.19 8.94714 10.3367C8.94714 10.4833 8.96714 10.6167 8.98714 10.7567L8.42714 11.2433C8.30714 11.35 8.28047 11.5233 8.36047 11.6633L8.75381 12.3433C8.83381 12.4833 9.00047 12.5433 9.14714 12.49L9.85381 12.25C10.0671 12.43 10.3071 12.57 10.5738 12.67L10.7205 13.3967C10.7538 13.55 10.8871 13.6633 11.0471 13.6633H11.8338C11.9938 13.6633 12.1271 13.55 12.1605 13.3967L12.3071 12.67C12.5738 12.57 12.8138 12.43 13.0271 12.25L13.7338 12.49C13.8871 12.5433 14.0471 12.4767 14.1271 12.3433L14.5205 11.6633C14.6005 11.5233 14.5738 11.35 14.4538 11.2433L13.8938 10.7567C13.9138 10.6167 13.9338 10.4833 13.9338 10.3367ZM11.4338 11.67C10.7005 11.67 10.1005 11.07 10.1005 10.3367C10.1005 9.60334 10.7005 9.00334 11.4338 9.00334C12.1671 9.00334 12.7671 9.60334 12.7671 10.3367C12.7671 11.07 12.1671 11.67 11.4338 11.67Z", fill: "currentColor" }))),
+      (this.size === 20 || this.size === 24) && (h(Fragment, null,
+        h("path", { d: "M10.8207 12.525C10.6007 12.515 10.3807 12.505 10.1507 12.505C7.7307 12.505 5.4707 13.175 3.5407 14.325C2.6607 14.845 2.1507 15.825 2.1507 16.855V18.505C2.1507 19.055 2.6007 19.505 3.1507 19.505H11.4107C10.6207 18.375 10.1507 16.995 10.1507 15.505C10.1507 14.435 10.4007 13.435 10.8207 12.525Z", fill: "currentColor" }),
+        h("path", { d: "M10.1507 11.505C12.3598 11.505 14.1507 9.71414 14.1507 7.505C14.1507 5.29587 12.3598 3.505 10.1507 3.505C7.94156 3.505 6.1507 5.29587 6.1507 7.505C6.1507 9.71414 7.94156 11.505 10.1507 11.505Z", fill: "currentColor" }),
+        h("path", { d: "M20.9007 15.505C20.9007 15.285 20.8707 15.085 20.8407 14.875L21.6807 14.145C21.8607 13.985 21.9007 13.725 21.7807 13.515L21.1907 12.495C21.0707 12.285 20.8207 12.195 20.6007 12.275L19.5407 12.635C19.2207 12.365 18.8607 12.155 18.4607 12.005L18.2407 10.915C18.1907 10.685 17.9907 10.515 17.7507 10.515H16.5707C16.3307 10.515 16.1307 10.685 16.0807 10.915L15.8607 12.005C15.4607 12.155 15.1007 12.365 14.7807 12.635L13.7207 12.275C13.4907 12.195 13.2507 12.295 13.1307 12.495L12.5407 13.515C12.4207 13.725 12.4607 13.985 12.6407 14.145L13.4807 14.875C13.4507 15.085 13.4207 15.285 13.4207 15.505C13.4207 15.725 13.4507 15.925 13.4807 16.135L12.6407 16.865C12.4607 17.025 12.4207 17.285 12.5407 17.495L13.1307 18.515C13.2507 18.725 13.5007 18.815 13.7207 18.735L14.7807 18.375C15.1007 18.645 15.4607 18.855 15.8607 19.005L16.0807 20.095C16.1307 20.325 16.3307 20.495 16.5707 20.495H17.7507C17.9907 20.495 18.1907 20.325 18.2407 20.095L18.4607 19.005C18.8607 18.855 19.2207 18.645 19.5407 18.375L20.6007 18.735C20.8307 18.815 21.0707 18.715 21.1907 18.515L21.7807 17.495C21.9007 17.285 21.8607 17.025 21.6807 16.865L20.8407 16.135C20.8707 15.925 20.9007 15.725 20.9007 15.505ZM17.1507 17.505C16.0507 17.505 15.1507 16.605 15.1507 15.505C15.1507 14.405 16.0507 13.505 17.1507 13.505C18.2507 13.505 19.1507 14.405 19.1507 15.505C19.1507 16.605 18.2507 17.505 17.1507 17.505Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M12.6242 14.6125C12.3675 14.6008 12.1108 14.5892 11.8425 14.5892C9.01915 14.5892 6.38249 15.3708 4.13082 16.7125C3.10416 17.3192 2.50916 18.4625 2.50916 19.6642V21.5892C2.50916 22.2308 3.03416 22.7558 3.67582 22.7558H13.3125C12.3908 21.4375 11.8425 19.8275 11.8425 18.0892C11.8425 16.8408 12.1342 15.6742 12.6242 14.6125Z", fill: "currentColor" }),
+        h("path", { d: "M11.8425 13.4225C14.4198 13.4225 16.5092 11.3332 16.5092 8.75584C16.5092 6.17851 14.4198 4.08917 11.8425 4.08917C9.26516 4.08917 7.17582 6.17851 7.17582 8.75584C7.17582 11.3332 9.26516 13.4225 11.8425 13.4225Z", fill: "currentColor" }),
+        h("path", { d: "M24.3842 18.0892C24.3842 17.8325 24.3492 17.5992 24.3142 17.3542L25.2942 16.5025C25.5042 16.3158 25.5508 16.0125 25.4108 15.7675L24.7225 14.5775C24.5825 14.3325 24.2908 14.2275 24.0342 14.3208L22.7975 14.7408C22.4242 14.4258 22.0042 14.1808 21.5375 14.0058L21.2808 12.7342C21.2225 12.4658 20.9892 12.2675 20.7092 12.2675H19.3325C19.0525 12.2675 18.8192 12.4658 18.7608 12.7342L18.5042 14.0058C18.0375 14.1808 17.6175 14.4258 17.2442 14.7408L16.0075 14.3208C15.7392 14.2275 15.4592 14.3442 15.3192 14.5775L14.6308 15.7675C14.4908 16.0125 14.5375 16.3158 14.7475 16.5025L15.7275 17.3542C15.6925 17.5992 15.6575 17.8325 15.6575 18.0892C15.6575 18.3458 15.6925 18.5792 15.7275 18.8242L14.7475 19.6758C14.5375 19.8625 14.4908 20.1658 14.6308 20.4108L15.3192 21.6008C15.4592 21.8458 15.7508 21.9508 16.0075 21.8575L17.2442 21.4375C17.6175 21.7525 18.0375 21.9975 18.5042 22.1725L18.7608 23.4442C18.8192 23.7125 19.0525 23.9108 19.3325 23.9108H20.7092C20.9892 23.9108 21.2225 23.7125 21.2808 23.4442L21.5375 22.1725C22.0042 21.9975 22.4242 21.7525 22.7975 21.4375L24.0342 21.8575C24.3025 21.9508 24.5825 21.8342 24.7225 21.6008L25.4108 20.4108C25.5508 20.1658 25.5042 19.8625 25.2942 19.6758L24.3142 18.8242C24.3492 18.5792 24.3842 18.3458 24.3842 18.0892ZM20.0092 20.4225C18.7258 20.4225 17.6758 19.3725 17.6758 18.0892C17.6758 16.8058 18.7258 15.7558 20.0092 15.7558C21.2925 15.7558 22.3425 16.8058 22.3425 18.0892C22.3425 19.3725 21.2925 20.4225 20.0092 20.4225Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-manage-accounts"; }
+  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"
+    }
+  }; }
+}