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

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-email.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 SwirlSymbolEmail {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, null, h("path", { d: "M20 4H4C3.4713 4.00264 2.96516 4.21452 2.59225 4.58931C2.21933 4.9641 2.00999 5.4713 2.01 6L2 18C2.00158 18.5299 2.2128 19.0377 2.58753 19.4125C2.96227 19.7872 3.47005 19.9984 4 20H20C20.5299 19.9984 21.0377 19.7872 21.4125 19.4125C21.7872 19.0377 21.9984 18.5299 22 18V6C21.9984 5.47005 21.7872 4.96227 21.4125 4.58753C21.0377 4.2128 20.5299 4.00158 20 4ZM19.6 8.25L12.53 12.67C12.3706 12.7681 12.1872 12.8201 12 12.8201C11.8128 12.8201 11.6294 12.7681 11.47 12.67L4.4 8.25C4.30545 8.19091 4.22346 8.11377 4.15872 8.02299C4.09398 7.93221 4.04776 7.82956 4.02269 7.72092C3.99761 7.61227 3.99419 7.49976 4.0126 7.38979C4.03101 7.27982 4.07091 7.17455 4.13 7.08C4.18909 6.98545 4.26623 6.90346 4.35701 6.83872C4.44779 6.77398 4.55044 6.72776 4.65908 6.70268C4.76773 6.67761 4.88024 6.67419 4.99021 6.6926C5.10018 6.71101 5.20545 6.75091 5.3 6.81L12 11L18.7 6.81C18.7946 6.75091 18.8998 6.71101 19.0098 6.6926C19.1198 6.67419 19.2323 6.67761 19.3409 6.70268C19.4496 6.72776 19.5522 6.77398 19.643 6.83872C19.7338 6.90346 19.8109 6.98545 19.87 7.08C19.9291 7.17455 19.969 7.27982 19.9874 7.38979C20.0058 7.49976 20.0024 7.61227 19.9773 7.72092C19.9522 7.82956 19.906 7.93221 19.8413 8.02299C19.7765 8.11377 19.6946 8.19091 19.6 8.25Z", fill: "currentColor" }))));
+  }
+  static get is() { return "swirl-symbol-email"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "../swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-emoji-food-beverage.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 SwirlSymbolEmojiFoodBeverage {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, null, h("path", { d: "M19 19H3C2.73478 19 2.48043 19.1054 2.29289 19.2929C2.10536 19.4804 2 19.7348 2 20C2 20.2652 2.10536 20.5196 2.29289 20.7071C2.48043 20.8946 2.73478 21 3 21H19C19.2652 21 19.5196 20.8946 19.7071 20.7071C19.8946 20.5196 20 20.2652 20 20C20 19.7348 19.8946 19.4804 19.7071 19.2929C19.5196 19.1054 19.2652 19 19 19Z", fill: "currentColor" }), h("path", { d: "M20 3H9V5.4L10.81 6.85C10.8693 6.89621 10.9173 6.95538 10.9502 7.02298C10.9831 7.09057 11.0002 7.16481 11 7.24V11.5C11 11.6326 10.9473 11.7598 10.8536 11.8536C10.7598 11.9473 10.6326 12 10.5 12H6.5C6.36739 12 6.24021 11.9473 6.14645 11.8536C6.05268 11.7598 6 11.6326 6 11.5V7.24C5.99983 7.16481 6.01686 7.09057 6.0498 7.02298C6.08273 6.95538 6.13069 6.89621 6.19 6.85L8 5.4V3H6C5.47005 3.00158 4.96227 3.2128 4.58753 3.58753C4.2128 3.96227 4.00158 4.47005 4 5V13C4 14.0609 4.42143 15.0783 5.17157 15.8284C5.92172 16.5786 6.93913 17 8 17H14C15.0609 17 16.0783 16.5786 16.8284 15.8284C17.5786 15.0783 18 14.0609 18 13V10H20C20.5299 9.99842 21.0377 9.7872 21.4125 9.41247C21.7872 9.03773 21.9984 8.52995 22 8V5C21.9984 4.47005 21.7872 3.96227 21.4125 3.58753C21.0377 3.2128 20.5299 3.00158 20 3ZM20 8H18V5H20V8Z", fill: "currentColor" }))));
+  }
+  static get is() { return "swirl-symbol-emoji-food-beverage"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "../swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-event-menu.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 SwirlSymbolEventMenu {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, null, h("path", { d: "M16 13H13C12.7348 13 12.4804 13.1054 12.2929 13.2929C12.1054 13.4804 12 13.7348 12 14V17C12 17.2652 12.1054 17.5196 12.2929 17.7071C12.4804 17.8946 12.7348 18 13 18H16C16.2652 18 16.5196 17.8946 16.7071 17.7071C16.8946 17.5196 17 17.2652 17 17V14C17 13.7348 16.8946 13.4804 16.7071 13.2929C16.5196 13.1054 16.2652 13 16 13ZM16 3V4H8V3C8 2.73478 7.89464 2.48043 7.70711 2.29289C7.51957 2.10536 7.26522 2 7 2C6.73478 2 6.48043 2.10536 6.29289 2.29289C6.10536 2.48043 6 2.73478 6 3V4H5C4.73786 4.00013 4.47833 4.05202 4.2363 4.1527C3.99427 4.25338 3.7745 4.40086 3.58961 4.58668C3.40471 4.77251 3.25833 4.99301 3.15887 5.23554C3.05941 5.47808 3.00882 5.73787 3.01 6L3 20C3 20.5304 3.21071 21.0391 3.58579 21.4142C3.96086 21.7893 4.46957 22 5 22H19C19.5299 21.9984 20.0377 21.7872 20.4125 21.4125C20.7872 21.0377 20.9984 20.5299 21 20V6C20.9984 5.47005 20.7872 4.96227 20.4125 4.58753C20.0377 4.2128 19.5299 4.00158 19 4H18V3C18 2.73478 17.8946 2.48043 17.7071 2.29289C17.5196 2.10536 17.2652 2 17 2C16.7348 2 16.4804 2.10536 16.2929 2.29289C16.1054 2.48043 16 2.73478 16 3ZM18 20H6C5.73478 20 5.48043 19.8946 5.29289 19.7071C5.10536 19.5196 5 19.2652 5 19V9H19V19C19 19.2652 18.8946 19.5196 18.7071 19.7071C18.5196 19.8946 18.2652 20 18 20Z", fill: "currentColor" }))));
+  }
+  static get is() { return "swirl-symbol-event-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "../swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-facebook.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 SwirlSymbolFacebook {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, null, h("path", { d: "M22 11.934C21.9999 10.023 21.4521 8.15198 20.4217 6.54256C19.3912 4.93315 17.9211 3.65271 16.1856 2.85283C14.45 2.05295 12.5215 1.76714 10.6285 2.02924C8.73555 2.29133 6.95731 3.09035 5.50433 4.3317C4.05136 5.57305 2.98451 7.20474 2.43009 9.03358C1.87566 10.8624 1.85689 12.8119 2.37598 14.651C2.89508 16.4902 3.9303 18.1422 5.3591 19.4113C6.78789 20.6804 8.55042 21.5135 10.438 21.812V14.825H7.9V11.933H10.438V9.731C10.3838 9.21658 10.4433 8.69654 10.6123 8.20766C10.7812 7.71878 11.0556 7.27301 11.4159 6.9019C11.7763 6.53078 12.2138 6.2434 12.6975 6.06007C13.1811 5.87674 13.6992 5.80195 14.215 5.841C14.9649 5.8529 15.7129 5.91975 16.453 6.041V8.497H15.192C14.9769 8.46831 14.7581 8.48844 14.5518 8.5559C14.3456 8.62336 14.1571 8.73641 14.0005 8.88666C13.844 9.03691 13.7232 9.2205 13.6473 9.4238C13.5714 9.6271 13.5422 9.84489 13.562 10.061V11.936H16.335L15.892 14.828H13.562V21.816C15.915 21.4439 18.0579 20.244 19.6048 18.4323C21.1518 16.6207 22.0011 14.3163 22 11.934Z", fill: "currentColor" }))));
+  }
+  static get is() { return "swirl-symbol-facebook"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "../swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-favorite.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 SwirlSymbolFavorite {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, null, h("path", { d: "M13.35 20.13C12.9807 20.4631 12.5004 20.6467 12.0031 20.6448C11.5057 20.643 11.0269 20.4559 10.66 20.12L10.55 20.02C5.3 15.27 1.87 12.16 2 8.28001C2.02993 7.43229 2.25699 6.60322 2.66317 5.85855C3.06935 5.11389 3.64348 4.47412 4.34 3.99001C5.52831 3.19831 6.96689 2.87278 8.38027 3.07574C9.79366 3.27871 11.0825 3.99591 12 5.09001C12.9154 3.99287 14.2046 3.27341 15.6189 3.0703C17.0333 2.86719 18.4728 3.19481 19.66 3.99001C20.3565 4.47412 20.9306 5.11389 21.3368 5.85855C21.743 6.60322 21.9701 7.43229 22 8.28001C22.14 12.16 18.7 15.27 13.45 20.04L13.35 20.13Z", fill: "currentColor" }))));
+  }
+  static get is() { return "swirl-symbol-favorite"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "../swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-fitness-center.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 SwirlSymbolFitnessCenter {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, null, h("path", { d: "M20.57 14.86L21.29 14.14C21.4762 13.9526 21.5808 13.6992 21.5808 13.435C21.5808 13.1708 21.4762 12.9174 21.29 12.73L21.27 12.71C21.0826 12.5238 20.8292 12.4192 20.565 12.4192C20.3008 12.4192 20.0474 12.5238 19.86 12.71L17 15.57L8.43 7L11.29 4.14C11.4762 3.95264 11.5808 3.69919 11.5808 3.435C11.5808 3.17082 11.4762 2.91736 11.29 2.73L11.27 2.71C11.0826 2.52375 10.8292 2.41921 10.565 2.41921C10.3008 2.41921 10.0474 2.52375 9.86 2.71L9.14 3.43L8.42 2.71C8.23119 2.52265 7.97598 2.41752 7.71 2.41752C7.44401 2.41752 7.1888 2.52265 7 2.71L5.57 4.14L4.85 3.42C4.66037 3.23037 4.40317 3.12384 4.135 3.12384C3.86682 3.12384 3.60963 3.23037 3.42 3.42C3.23037 3.60963 3.12383 3.86683 3.12383 4.135C3.12383 4.40318 3.23037 4.66037 3.42 4.85L4.14 5.57L2.71 7C2.52375 7.18736 2.4192 7.44082 2.4192 7.705C2.4192 7.96919 2.52375 8.22264 2.71 8.41L3.43 9.13L2.71 9.86C2.52375 10.0474 2.4192 10.3008 2.4192 10.565C2.4192 10.8292 2.52375 11.0826 2.71 11.27L2.73 11.29C2.91736 11.4763 3.17081 11.5808 3.435 11.5808C3.69918 11.5808 3.95263 11.4763 4.14 11.29L7 8.43L15.57 17L12.71 19.86C12.5237 20.0474 12.4192 20.3008 12.4192 20.565C12.4192 20.8292 12.5237 21.0826 12.71 21.27L12.73 21.29C12.9174 21.4763 13.1708 21.5808 13.435 21.5808C13.6992 21.5808 13.9526 21.4763 14.14 21.29L14.86 20.57L15.58 21.29C15.7674 21.4763 16.0208 21.5808 16.285 21.5808C16.5492 21.5808 16.8026 21.4763 16.99 21.29L18.42 19.86L19.14 20.58C19.3296 20.7696 19.5868 20.8762 19.855 20.8762C20.1232 20.8762 20.3804 20.7696 20.57 20.58C20.7596 20.3904 20.8662 20.1332 20.8662 19.865C20.8662 19.5968 20.7596 19.3396 20.57 19.15L19.85 18.43L21.29 17C21.4762 16.8126 21.5808 16.5592 21.5808 16.295C21.5808 16.0308 21.4762 15.7774 21.29 15.59L20.57 14.86Z", fill: "currentColor" }))));
+  }
+  static get is() { return "swirl-symbol-fitness-center"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "../swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-flag.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 SwirlSymbolFlag {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, null, h("path", { d: "M14.4 6L14.16 4.8C14.1139 4.57413 13.9912 4.37112 13.8126 4.22534C13.634 4.07956 13.4105 3.99995 13.18 4H6C5.73478 4 5.48043 4.10536 5.29289 4.29289C5.10536 4.48043 5 4.73478 5 5V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21C6.26522 21 6.51957 20.8946 6.70711 20.7071C6.89464 20.5196 7 20.2652 7 20V14H12.6L12.84 15.2C12.884 15.4269 13.0061 15.6312 13.1852 15.7774C13.3642 15.9236 13.5889 16.0023 13.82 16H19C19.2652 16 19.5196 15.8946 19.7071 15.7071C19.8946 15.5196 20 15.2652 20 15V7C20 6.73478 19.8946 6.48043 19.7071 6.29289C19.5196 6.10536 19.2652 6 19 6H14.4Z", fill: "currentColor" }))));
+  }
+  static get is() { return "swirl-symbol-flag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "../swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-folder.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 SwirlSymbolFolder {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, null, h("path", { d: "M10.59 4.59C10.4037 4.4031 10.1824 4.25478 9.93878 4.15354C9.69511 4.05229 9.43386 4.00012 9.17 4H4C3.4713 4.00264 2.96516 4.21452 2.59225 4.58931C2.21933 4.9641 2.00999 5.4713 2.01 6L2 18C2.00158 18.5299 2.2128 19.0377 2.58753 19.4125C2.96227 19.7872 3.47005 19.9984 4 20H20C20.5299 19.9984 21.0377 19.7872 21.4125 19.4125C21.7872 19.0377 21.9984 18.5299 22 18V8C21.9984 7.47005 21.7872 6.96227 21.4125 6.58753C21.0377 6.2128 20.5299 6.00158 20 6H12L10.59 4.59Z", fill: "currentColor" }))));
+  }
+  static get is() { return "swirl-symbol-folder"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "../swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-globe.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 SwirlSymbolGlobe {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, null, h("path", { d: "M12 2C10.0222 2 8.08879 2.58649 6.44429 3.6853C4.7998 4.78412 3.51808 6.3459 2.7612 8.17317C2.00433 10.0004 1.80629 12.0111 2.19214 13.9509C2.578 15.8907 3.5304 17.6725 4.92893 19.0711C6.32745 20.4696 8.10928 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9996 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM11 19.93C9.06694 19.6891 7.28855 18.75 5.99939 17.2896C4.71024 15.8292 3.99918 13.948 4 12C4.00334 11.3974 4.07378 10.797 4.21 10.21L9 15V16C9.00158 16.5299 9.2128 17.0377 9.58753 17.4125C9.96226 17.7872 10.4701 17.9984 11 18V19.93ZM17.9 17.39C17.7732 16.9858 17.5203 16.6329 17.1784 16.3827C16.8366 16.1326 16.4236 15.9985 16 16H15V13C15 12.7348 14.8946 12.4804 14.7071 12.2929C14.5196 12.1054 14.2652 12 14 12H8V10H10C10.2652 10 10.5196 9.89464 10.7071 9.70711C10.8946 9.51957 11 9.26522 11 9V7H13C13.5299 6.99842 14.0377 6.7872 14.4125 6.41247C14.7872 6.03773 14.9984 5.52995 15 5V4.59C16.1968 5.07199 17.2589 5.83692 18.0954 6.81926C18.9319 7.80159 19.5177 8.97205 19.8028 10.2304C20.0879 11.4887 20.0637 12.7974 19.7323 14.0443C19.4009 15.2912 18.7722 16.4392 17.9 17.39Z", fill: "currentColor" }))));
+  }
+  static get is() { return "swirl-symbol-globe"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "../swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-groups.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 SwirlSymbolGroups {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, null, h("g", { "clip-path": "url(#clip0_1_88)" }, h("path", { d: "M12 12.75C13.4602 12.7551 14.9036 13.0615 16.24 13.65C16.7657 13.8864 17.2117 14.2701 17.524 14.7545C17.8363 15.239 18.0017 15.8036 18 16.38V17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H7C6.73478 18 6.48043 17.8946 6.29289 17.7071C6.10536 17.5196 6 17.2652 6 17V16.39C5.99568 15.813 6.15993 15.2473 6.47258 14.7623C6.78523 14.2774 7.23268 13.8943 7.76 13.66C9.09406 13.0632 10.5386 12.7532 12 12.75ZM4 13C4.39556 13 4.78224 12.8827 5.11114 12.6629C5.44004 12.4432 5.69638 12.1308 5.84776 11.7654C5.99913 11.3999 6.03874 10.9978 5.96157 10.6098C5.8844 10.2219 5.69392 9.86549 5.41421 9.58579C5.13451 9.30608 4.77814 9.1156 4.39018 9.03843C4.00222 8.96126 3.60009 9.00087 3.23463 9.15224C2.86918 9.30362 2.55682 9.55996 2.33706 9.88886C2.1173 10.2178 2 10.6044 2 11C2.00158 11.5299 2.2128 12.0377 2.58754 12.4125C2.96227 12.7872 3.47005 12.9984 4 13ZM5.13 14.1C4.75667 14.0361 4.37876 14.0026 4 14C3.04329 13.9999 2.09687 14.1974 1.22 14.58C0.85779 14.735 0.549073 14.9929 0.332183 15.3218C0.115294 15.6507 -0.000214706 16.036 2.9961e-07 16.43V17C2.9961e-07 17.2652 0.105357 17.5196 0.292894 17.7071C0.48043 17.8946 0.734784 18 1 18H4.5V16.39C4.50113 15.584 4.71871 14.7931 5.13 14.1ZM20 13C20.3956 13 20.7822 12.8827 21.1111 12.6629C21.44 12.4432 21.6964 12.1308 21.8478 11.7654C21.9991 11.3999 22.0387 10.9978 21.9616 10.6098C21.8844 10.2219 21.6939 9.86549 21.4142 9.58579C21.1345 9.30608 20.7781 9.1156 20.3902 9.03843C20.0022 8.96126 19.6001 9.00087 19.2346 9.15224C18.8692 9.30362 18.5568 9.55996 18.3371 9.88886C18.1173 10.2178 18 10.6044 18 11C18.0016 11.5299 18.2128 12.0377 18.5875 12.4125C18.9623 12.7872 19.4701 12.9984 20 13ZM24 16.43C24.0002 16.036 23.8847 15.6507 23.6678 15.3218C23.4509 14.9929 23.1422 14.735 22.78 14.58C21.5526 14.0377 20.1921 13.8707 18.87 14.1C19.2813 14.7931 19.4989 15.584 19.5 16.39V18H23C23.2652 18 23.5196 17.8946 23.7071 17.7071C23.8946 17.5196 24 17.2652 24 17V16.43ZM12 6C12.5933 6 13.1734 6.17595 13.6667 6.50559C14.1601 6.83524 14.5446 7.30377 14.7716 7.85195C14.9987 8.40013 15.0581 9.00333 14.9424 9.58527C14.8266 10.1672 14.5409 10.7018 14.1213 11.1213C13.7018 11.5409 13.1672 11.8266 12.5853 11.9424C12.0033 12.0581 11.4001 11.9987 10.8519 11.7716C10.3038 11.5446 9.83524 11.1601 9.50559 10.6667C9.17595 10.1734 9 9.59334 9 9C9 8.20435 9.31607 7.44129 9.87868 6.87868C10.4413 6.31607 11.2044 6 12 6Z", fill: "currentColor" })), h("defs", null, h("clipPath", { id: "clip0_1_88" }, h("rect", { width: "24", height: "24", fill: "currentColor" }))))));
+  }
+  static get is() { return "swirl-symbol-groups"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "../swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-help.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 SwirlSymbolHelp {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, null, h("path", { d: "M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM13 19H11V17H13V19ZM15.07 11.25L14.17 12.17C13.6676 12.6212 13.3064 13.2081 13.13 13.86C13.0391 14.2331 12.9955 14.6161 13 15H11V14.5C11.0007 14.0542 11.075 13.6116 11.22 13.19C11.4176 12.618 11.7424 12.0983 12.17 11.67L13.41 10.41C13.6451 10.1801 13.8187 9.89473 13.9148 9.58022C14.0109 9.2657 14.0264 8.93209 13.96 8.61C13.8906 8.25217 13.7242 7.92027 13.4791 7.65048C13.234 7.38068 12.9196 7.18335 12.57 7.08C12.074 6.9347 11.5411 6.98547 11.0814 7.22181C10.6218 7.45816 10.2704 7.86203 10.1 8.35C10.0505 8.5316 9.94417 8.69261 9.79666 8.80955C9.64914 8.92648 9.46812 8.99321 9.28 9H8.98C8.84522 8.99877 8.71258 8.96609 8.59264 8.90457C8.47271 8.84305 8.36879 8.75438 8.28916 8.64562C8.20954 8.53686 8.1564 8.41101 8.13397 8.27809C8.11155 8.14518 8.12046 8.00886 8.16 7.88C8.37448 7.15047 8.79207 6.49701 9.364 5.9959C9.93593 5.4948 10.6386 5.16673 11.39 5.05C12.1385 4.96211 12.8967 5.08387 13.58 5.4017C14.2634 5.71953 14.845 6.22094 15.26 6.85C15.7742 7.47875 16.039 8.27475 16.004 9.08623C15.969 9.89771 15.6365 10.6679 15.07 11.25Z", fill: "currentColor" }))));
+  }
+  static get is() { return "swirl-symbol-help"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "../swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-image.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 SwirlSymbolImage {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, null, h("path", { d: "M21 19V5C20.9984 4.47005 20.7872 3.96227 20.4125 3.58753C20.0377 3.2128 19.5299 3.00158 19 3H5C4.47005 3.00158 3.96227 3.2128 3.58753 3.58753C3.2128 3.96227 3.00158 4.47005 3 5V19C3.00158 19.5299 3.2128 20.0377 3.58753 20.4125C3.96227 20.7872 4.47005 20.9984 5 21H19C19.5299 20.9984 20.0377 20.7872 20.4125 20.4125C20.7872 20.0377 20.9984 19.5299 21 19ZM8.9 13.98L11 16.51L14.1 12.52C14.1473 12.4585 14.2084 12.4088 14.2782 12.375C14.3481 12.3411 14.4249 12.324 14.5025 12.325C14.5801 12.3259 14.6565 12.345 14.7255 12.3806C14.7944 12.4161 14.8542 12.4673 14.9 12.53L18.41 17.21C18.4657 17.2843 18.4996 17.3726 18.508 17.4651C18.5163 17.5576 18.4987 17.6506 18.4572 17.7336C18.4157 17.8167 18.3519 17.8865 18.2729 17.9353C18.1939 17.9841 18.1029 18.01 18.01 18.01H6.02C5.92627 18.0096 5.83454 17.9828 5.75529 17.9327C5.67604 17.8827 5.61246 17.8114 5.5718 17.7269C5.53113 17.6425 5.51503 17.5483 5.52532 17.4551C5.53561 17.3619 5.57188 17.2735 5.63 17.2L8.12 14C8.16452 13.9392 8.22238 13.8894 8.28914 13.8545C8.35589 13.8196 8.42977 13.8004 8.50509 13.7985C8.58041 13.7965 8.65517 13.8119 8.72363 13.8434C8.79209 13.8748 8.85242 13.9216 8.9 13.98Z", fill: "currentColor" }))));
+  }
+  static get is() { return "swirl-symbol-image"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "../swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}