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

package/dist/collection/components/swirl-icon/icons/swirl-icon-expand-more.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 SwirlIconExpandMore {
+  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 10.05C7.89999 10.05 7.80554 10.0334 7.71665 10C7.62777 9.9667 7.54443 9.9167 7.46665 9.85003L4.38332 6.7667C4.23888 6.62225 4.16954 6.44714 4.17532 6.24137C4.18065 6.03603 4.25554 5.86114 4.39999 5.7167C4.54443 5.57225 4.72221 5.50003 4.93332 5.50003C5.14443 5.50003 5.32221 5.57225 5.46665 5.7167L7.99999 8.25003L10.55 5.70003C10.6944 5.55559 10.8695 5.48625 11.0753 5.49203C11.2807 5.49737 11.4555 5.57225 11.6 5.7167C11.7444 5.86114 11.8167 6.03892 11.8167 6.25003C11.8167 6.46114 11.7444 6.63892 11.6 6.78337L8.53332 9.85003C8.45554 9.9167 8.37221 9.9667 8.28332 10C8.19443 10.0334 8.09999 10.05 7.99999 10.05V10.05Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 15.075C11.85 15.075 11.7083 15.05 11.575 15C11.4417 14.95 11.3167 14.875 11.2 14.775L6.57501 10.15C6.35835 9.93338 6.25435 9.67072 6.26301 9.36205C6.27101 9.05405 6.38335 8.79172 6.60001 8.57505C6.81668 8.35838 7.08335 8.25005 7.40001 8.25005C7.71668 8.25005 7.98335 8.35838 8.20001 8.57505L12 12.375L15.825 8.55005C16.0417 8.33338 16.3043 8.22938 16.613 8.23805C16.921 8.24605 17.1833 8.35838 17.4 8.57505C17.6167 8.79172 17.725 9.05838 17.725 9.37505C17.725 9.69172 17.6167 9.95838 17.4 10.175L12.8 14.775C12.6833 14.875 12.5583 14.95 12.425 15C12.2917 15.05 12.15 15.075 12 15.075Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 17.5876C13.825 17.5876 13.6597 17.5584 13.5042 17.5001C13.3486 17.4417 13.2028 17.3542 13.0667 17.2376L7.67083 11.8417C7.41805 11.5889 7.29672 11.2825 7.30683 10.9224C7.31616 10.5631 7.44722 10.257 7.69999 10.0042C7.95277 9.75145 8.26388 9.62506 8.63333 9.62506C9.00277 9.62506 9.31388 9.75145 9.56666 10.0042L14 14.4376L18.4625 9.97506C18.7153 9.72228 19.0217 9.60095 19.3818 9.61106C19.7412 9.62039 20.0472 9.75145 20.3 10.0042C20.5528 10.257 20.6792 10.5681 20.6792 10.9376C20.6792 11.307 20.5528 11.6181 20.3 11.8709L14.9333 17.2376C14.7972 17.3542 14.6514 17.4417 14.4958 17.5001C14.3403 17.5584 14.175 17.5876 14 17.5876V17.5876Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-expand-more"; }
+  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-file-copy.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 SwirlIconFileCopy {
+  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.6667 12.6667H5.33334C4.96667 12.6667 4.65278 12.5362 4.39167 12.2751C4.13056 12.014 4 11.7001 4 11.3334V2.00008C4 1.63341 4.13056 1.31953 4.39167 1.05841C4.65278 0.797304 4.96667 0.666748 5.33334 0.666748H9.45C9.62778 0.666748 9.79723 0.700081 9.95834 0.766748C10.1194 0.833415 10.2611 0.927859 10.3833 1.05008L13.6167 4.28341C13.7389 4.40564 13.8333 4.5473 13.9 4.70841C13.9667 4.86953 14 5.03897 14 5.21675V11.3334C14 11.7001 13.8694 12.014 13.6083 12.2751C13.3472 12.5362 13.0333 12.6667 12.6667 12.6667ZM9.33334 2.00008H5.33334V11.3334H12.6667V5.33341H10C9.81111 5.33341 9.65278 5.26953 9.525 5.14175C9.39723 5.01397 9.33334 4.85564 9.33334 4.66675V2.00008ZM2.66667 15.3334C2.3 15.3334 1.98611 15.2029 1.725 14.9417C1.46389 14.6806 1.33334 14.3667 1.33334 14.0001V5.33341C1.33334 5.14453 1.39722 4.98619 1.525 4.85841C1.65278 4.73064 1.81111 4.66675 2 4.66675C2.18889 4.66675 2.34722 4.73064 2.475 4.85841C2.60278 4.98619 2.66667 5.14453 2.66667 5.33341V14.0001H9.33334C9.52223 14.0001 9.68056 14.064 9.80834 14.1917C9.93611 14.3195 10 14.4779 10 14.6667C10 14.8556 9.93611 15.014 9.80834 15.1417C9.68056 15.2695 9.52223 15.3334 9.33334 15.3334H2.66667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M19 19H8C7.45 19 6.97917 18.8042 6.5875 18.4125C6.19583 18.0208 6 17.55 6 17V3C6 2.45 6.19583 1.97917 6.5875 1.5875C6.97917 1.19583 7.45 1 8 1H14.175C14.4417 1 14.6958 1.05 14.9375 1.15C15.1792 1.25 15.3917 1.39167 15.575 1.575L20.425 6.425C20.6083 6.60833 20.75 6.82083 20.85 7.0625C20.95 7.30417 21 7.55833 21 7.825V17C21 17.55 20.8042 18.0208 20.4125 18.4125C20.0208 18.8042 19.55 19 19 19ZM14 3H8V17H19V8H15C14.7167 8 14.4792 7.90417 14.2875 7.7125C14.0958 7.52083 14 7.28333 14 7V3ZM4 23C3.45 23 2.97917 22.8042 2.5875 22.4125C2.19583 22.0208 2 21.55 2 21V8C2 7.71667 2.09583 7.47917 2.2875 7.2875C2.47917 7.09583 2.71667 7 3 7C3.28333 7 3.52083 7.09583 3.7125 7.2875C3.90417 7.47917 4 7.71667 4 8V21H14C14.2833 21 14.5208 21.0958 14.7125 21.2875C14.9042 21.4792 15 21.7167 15 22C15 22.2833 14.9042 22.5208 14.7125 22.7125C14.5208 22.9042 14.2833 23 14 23H4Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M22.1667 22.1667H9.33334C8.69167 22.1667 8.14236 21.9383 7.68542 21.4813C7.22847 21.0244 7 20.4751 7 19.8334V3.50008C7 2.85841 7.22847 2.30911 7.68542 1.85216C8.14236 1.39522 8.69167 1.16675 9.33334 1.16675H16.5375C16.8486 1.16675 17.1451 1.22508 17.4271 1.34175C17.709 1.45841 17.9569 1.62369 18.1708 1.83758L23.8292 7.49591C24.0431 7.7098 24.2083 7.95772 24.325 8.23966C24.4417 8.52161 24.5 8.81814 24.5 9.12925V19.8334C24.5 20.4751 24.2715 21.0244 23.8146 21.4813C23.3576 21.9383 22.8083 22.1667 22.1667 22.1667ZM16.3333 3.50008H9.33334V19.8334H22.1667V9.33341H17.5C17.1694 9.33341 16.8924 9.22161 16.6688 8.998C16.4451 8.77439 16.3333 8.4973 16.3333 8.16675V3.50008ZM4.66667 26.8334C4.025 26.8334 3.4757 26.6049 3.01875 26.148C2.56181 25.6911 2.33334 25.1417 2.33334 24.5001V9.33341C2.33334 9.00286 2.44514 8.72578 2.66875 8.50216C2.89236 8.27855 3.16945 8.16675 3.5 8.16675C3.83056 8.16675 4.10764 8.27855 4.33125 8.50216C4.55486 8.72578 4.66667 9.00286 4.66667 9.33341V24.5001H16.3333C16.6639 24.5001 16.941 24.6119 17.1646 24.8355C17.3882 25.0591 17.5 25.3362 17.5 25.6667C17.5 25.9973 17.3882 26.2744 17.1646 26.498C16.941 26.7216 16.6639 26.8334 16.3333 26.8334H4.66667Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-file-copy"; }
+  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-file.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 SwirlIconFile {
+  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.99999 1.33334C3.26666 1.33334 2.67332 1.93334 2.67332 2.66668L2.66666 13.3333C2.66666 14.0667 3.25999 14.6667 3.99332 14.6667H12C12.7333 14.6667 13.3333 14.0667 13.3333 13.3333V5.88668C13.3333 5.53334 13.1933 5.19334 12.94 4.94668L9.71999 1.72668C9.47332 1.47334 9.13332 1.33334 8.77999 1.33334H3.99999ZM8.66666 5.33334V2.33334L12.3333 6.00001H9.33332C8.96666 6.00001 8.66666 5.70001 8.66666 5.33334Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M6 2C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8.83C20 8.3 19.79 7.79 19.41 7.42L14.58 2.59C14.21 2.21 13.7 2 13.17 2H6ZM13 8V3.5L18.5 9H14C13.45 9 13 8.55 13 8Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M6.99999 2.33334C5.71666 2.33334 4.67832 3.38334 4.67832 4.66668L4.66666 23.3333C4.66666 24.6167 5.70499 25.6667 6.98832 25.6667H21C22.2833 25.6667 23.3333 24.6167 23.3333 23.3333V10.3017C23.3333 9.68334 23.0883 9.08834 22.645 8.65668L17.01 3.02168C16.5783 2.57834 15.9833 2.33334 15.365 2.33334H6.99999ZM15.1667 9.33334V4.08334L21.5833 10.5H16.3333C15.6917 10.5 15.1667 9.97501 15.1667 9.33334Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-file"; }
+  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-filter.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 SwirlIconFilter {
+  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.33333 12C7.14444 12 6.98622 11.936 6.85867 11.808C6.73067 11.6804 6.66667 11.5222 6.66667 11.3333C6.66667 11.1444 6.73067 10.9862 6.85867 10.8587C6.98622 10.7307 7.14444 10.6667 7.33333 10.6667H8.66667C8.85556 10.6667 9.014 10.7307 9.142 10.8587C9.26956 10.9862 9.33333 11.1444 9.33333 11.3333C9.33333 11.5222 9.26956 11.6804 9.142 11.808C9.014 11.936 8.85556 12 8.66667 12H7.33333ZM2.66667 5.33333C2.47778 5.33333 2.31956 5.26956 2.192 5.142C2.064 5.014 2 4.85556 2 4.66667C2 4.47778 2.064 4.31933 2.192 4.19133C2.31956 4.06378 2.47778 4 2.66667 4H13.3333C13.5222 4 13.6804 4.06378 13.808 4.19133C13.936 4.31933 14 4.47778 14 4.66667C14 4.85556 13.936 5.014 13.808 5.142C13.6804 5.26956 13.5222 5.33333 13.3333 5.33333H2.66667ZM4.66667 8.66667C4.47778 8.66667 4.31933 8.60267 4.19133 8.47467C4.06378 8.34711 4 8.18889 4 8C4 7.81111 4.06378 7.65267 4.19133 7.52467C4.31933 7.39711 4.47778 7.33333 4.66667 7.33333H11.3333C11.5222 7.33333 11.6804 7.39711 11.808 7.52467C11.936 7.65267 12 7.81111 12 8C12 8.18889 11.936 8.34711 11.808 8.47467C11.6804 8.60267 11.5222 8.66667 11.3333 8.66667H4.66667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M11 18C10.7167 18 10.4793 17.904 10.288 17.712C10.096 17.5207 10 17.2833 10 17C10 16.7167 10.096 16.4793 10.288 16.288C10.4793 16.096 10.7167 16 11 16H13C13.2833 16 13.521 16.096 13.713 16.288C13.9043 16.4793 14 16.7167 14 17C14 17.2833 13.9043 17.5207 13.713 17.712C13.521 17.904 13.2833 18 13 18H11ZM4 8C3.71667 8 3.47933 7.90433 3.288 7.713C3.096 7.521 3 7.28333 3 7C3 6.71667 3.096 6.479 3.288 6.287C3.47933 6.09567 3.71667 6 4 6H20C20.2833 6 20.5207 6.09567 20.712 6.287C20.904 6.479 21 6.71667 21 7C21 7.28333 20.904 7.521 20.712 7.713C20.5207 7.90433 20.2833 8 20 8H4ZM7 13C6.71667 13 6.479 12.904 6.287 12.712C6.09567 12.5207 6 12.2833 6 12C6 11.7167 6.09567 11.479 6.287 11.287C6.479 11.0957 6.71667 11 7 11H17C17.2833 11 17.5207 11.0957 17.712 11.287C17.904 11.479 18 11.7167 18 12C18 12.2833 17.904 12.5207 17.712 12.712C17.5207 12.904 17.2833 13 17 13H7Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M12.8333 21C12.5028 21 12.2259 20.888 12.0027 20.664C11.7787 20.4408 11.6667 20.1639 11.6667 19.8333C11.6667 19.5028 11.7787 19.2259 12.0027 19.0027C12.2259 18.7787 12.5028 18.6667 12.8333 18.6667H15.1667C15.4972 18.6667 15.7745 18.7787 15.9985 19.0027C16.2217 19.2259 16.3333 19.5028 16.3333 19.8333C16.3333 20.1639 16.2217 20.4408 15.9985 20.664C15.7745 20.888 15.4972 21 15.1667 21H12.8333ZM4.66667 9.33333C4.33611 9.33333 4.05922 9.22172 3.836 8.9985C3.612 8.7745 3.5 8.49722 3.5 8.16667C3.5 7.83611 3.612 7.55883 3.836 7.33483C4.05922 7.11161 4.33611 7 4.66667 7H23.3333C23.6639 7 23.9408 7.11161 24.164 7.33483C24.388 7.55883 24.5 7.83611 24.5 8.16667C24.5 8.49722 24.388 8.7745 24.164 8.9985C23.9408 9.22172 23.6639 9.33333 23.3333 9.33333H4.66667ZM8.16667 15.1667C7.83611 15.1667 7.55883 15.0547 7.33483 14.8307C7.11161 14.6074 7 14.3306 7 14C7 13.6694 7.11161 13.3922 7.33483 13.1682C7.55883 12.9449 7.83611 12.8333 8.16667 12.8333H19.8333C20.1639 12.8333 20.4408 12.9449 20.664 13.1682C20.888 13.3922 21 13.6694 21 14C21 14.3306 20.888 14.6074 20.664 14.8307C20.4408 15.0547 20.1639 15.1667 19.8333 15.1667H8.16667Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-filter"; }
+  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-folder-shared.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 SwirlIconFolderShared {
+  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 3.99996H8.00001L7.06001 3.05996C6.80668 2.80663 6.46668 2.66663 6.11334 2.66663H2.66668C1.93334 2.66663 1.34001 3.26663 1.34001 3.99996L1.33334 12C1.33334 12.7333 1.93334 13.3333 2.66668 13.3333H13.3333C14.0667 13.3333 14.6667 12.7333 14.6667 12V5.33329C14.6667 4.59996 14.0667 3.99996 13.3333 3.99996ZM10 5.99996C10.7333 5.99996 11.3333 6.59996 11.3333 7.33329C11.3333 8.06663 10.7333 8.66663 10 8.66663C9.26668 8.66663 8.66668 8.06663 8.66668 7.33329C8.66668 6.59996 9.26668 5.99996 10 5.99996ZM12.6667 11.3333H7.33334V10.6666C7.33334 9.77996 9.11334 9.33329 10 9.33329C10.8867 9.33329 12.6667 9.77996 12.6667 10.6666V11.3333Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M20 6H12L10.59 4.59C10.21 4.21 9.7 4 9.17 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6ZM15 9C16.1 9 17 9.9 17 11C17 12.1 16.1 13 15 13C13.9 13 13 12.1 13 11C13 9.9 13.9 9 15 9ZM19 17H11V16C11 14.67 13.67 14 15 14C16.33 14 19 14.67 19 16V17Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M23.3333 6.99996H14L12.355 5.35496C11.9117 4.91163 11.3167 4.66663 10.6983 4.66663H4.66668C3.38334 4.66663 2.34501 5.71663 2.34501 6.99996L2.33334 21C2.33334 22.2833 3.38334 23.3333 4.66668 23.3333H23.3333C24.6167 23.3333 25.6667 22.2833 25.6667 21V9.33329C25.6667 8.04996 24.6167 6.99996 23.3333 6.99996ZM17.5 10.5C18.7833 10.5 19.8333 11.55 19.8333 12.8333C19.8333 14.1166 18.7833 15.1666 17.5 15.1666C16.2167 15.1666 15.1667 14.1166 15.1667 12.8333C15.1667 11.55 16.2167 10.5 17.5 10.5ZM22.1667 19.8333H12.8333V18.6666C12.8333 17.115 15.9483 16.3333 17.5 16.3333C19.0517 16.3333 22.1667 17.115 22.1667 18.6666V19.8333Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-folder-shared"; }
+  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-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 SwirlIconFolder {
+  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: "M2.66668 14.1482C2.30001 14.1482 1.98623 14.0177 1.72534 13.7568C1.46401 13.4955 1.33334 13.1815 1.33334 12.8148V4.81484C1.33334 4.44817 1.46401 4.1344 1.72534 3.87351C1.98623 3.61217 2.30001 3.48151 2.66668 3.48151H6.11668C6.29445 3.48151 6.46401 3.51484 6.62534 3.58151C6.78623 3.64817 6.92779 3.74262 7.05001 3.86484L8.00001 4.81484H13.3333C13.7 4.81484 14.014 4.94551 14.2753 5.20684C14.5362 5.46773 14.6667 5.78151 14.6667 6.14817V12.8148C14.6667 13.1815 14.5362 13.4955 14.2753 13.7568C14.014 14.0177 13.7 14.1482 13.3333 14.1482H2.66668Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M4 20C3.45 20 2.97933 19.8043 2.588 19.413C2.196 19.021 2 18.55 2 18V6C2 5.45 2.196 4.97933 2.588 4.588C2.97933 4.196 3.45 4 4 4H9.175C9.44167 4 9.696 4.05 9.938 4.15C10.1793 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.021 6.196 21.413 6.588C21.8043 6.97933 22 7.45 22 8V18C22 18.55 21.8043 19.021 21.413 19.413C21.021 19.8043 20.55 20 20 20H4Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M4.66668 23.3334C4.02501 23.3334 3.4759 23.1051 3.01934 22.6485C2.56201 22.1912 2.33334 21.6417 2.33334 21V7.00002C2.33334 6.35835 2.56201 5.80924 3.01934 5.35269C3.4759 4.89535 4.02501 4.66669 4.66668 4.66669H10.7042C11.0153 4.66669 11.312 4.72502 11.5943 4.84169C11.8759 4.95835 12.1236 5.12363 12.3375 5.33752L14 7.00002H23.3333C23.975 7.00002 24.5245 7.22869 24.9818 7.68602C25.4384 8.14258 25.6667 8.69169 25.6667 9.33335V21C25.6667 21.6417 25.4384 22.1912 24.9818 22.6485C24.5245 23.1051 23.975 23.3334 23.3333 23.3334H4.66668Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-folder"; }
+  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-format-h-one.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 SwirlIconFormatHOne {
+  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.00004 11.3334C3.81115 11.3334 3.65271 11.2694 3.52471 11.1414C3.39715 11.0138 3.33337 10.8556 3.33337 10.6667V5.33335C3.33337 5.14446 3.39715 4.98602 3.52471 4.85802C3.65271 4.73046 3.81115 4.66669 4.00004 4.66669C4.18893 4.66669 4.34737 4.73046 4.47537 4.85802C4.60293 4.98602 4.66671 5.14446 4.66671 5.33335V7.33335H7.33337V5.33335C7.33337 5.14446 7.39737 4.98602 7.52537 4.85802C7.65293 4.73046 7.81115 4.66669 8.00004 4.66669C8.18893 4.66669 8.34737 4.73046 8.47537 4.85802C8.60293 4.98602 8.66671 5.14446 8.66671 5.33335V10.6667C8.66671 10.8556 8.60293 11.0138 8.47537 11.1414C8.34737 11.2694 8.18893 11.3334 8.00004 11.3334C7.81115 11.3334 7.65293 11.2694 7.52537 11.1414C7.39737 11.0138 7.33337 10.8556 7.33337 10.6667V8.66669H4.66671V10.6667C4.66671 10.8556 4.60293 11.0138 4.47537 11.1414C4.34737 11.2694 4.18893 11.3334 4.00004 11.3334ZM12 11.3334C11.8112 11.3334 11.6529 11.2694 11.5254 11.1414C11.3974 11.0138 11.3334 10.8556 11.3334 10.6667V6.00002H10.6667C10.4778 6.00002 10.3196 5.93602 10.192 5.80802C10.064 5.68046 10 5.52224 10 5.33335C10 5.14446 10.064 4.98602 10.192 4.85802C10.3196 4.73046 10.4778 4.66669 10.6667 4.66669H12C12.1889 4.66669 12.3472 4.73046 12.4747 4.85802C12.6027 4.98602 12.6667 5.14446 12.6667 5.33335V10.6667C12.6667 10.8556 12.6027 11.0138 12.4747 11.1414C12.3472 11.2694 12.1889 11.3334 12 11.3334Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M6 17C5.71667 17 5.479 16.904 5.287 16.712C5.09567 16.5207 5 16.2833 5 16V8C5 7.71667 5.09567 7.479 5.287 7.287C5.479 7.09567 5.71667 7 6 7C6.28333 7 6.521 7.09567 6.713 7.287C6.90433 7.479 7 7.71667 7 8V11H11V8C11 7.71667 11.096 7.479 11.288 7.287C11.4793 7.09567 11.7167 7 12 7C12.2833 7 12.521 7.09567 12.713 7.287C12.9043 7.479 13 7.71667 13 8V16C13 16.2833 12.9043 16.5207 12.713 16.712C12.521 16.904 12.2833 17 12 17C11.7167 17 11.4793 16.904 11.288 16.712C11.096 16.5207 11 16.2833 11 16V13H7V16C7 16.2833 6.90433 16.5207 6.713 16.712C6.521 16.904 6.28333 17 6 17ZM18 17C17.7167 17 17.4793 16.904 17.288 16.712C17.096 16.5207 17 16.2833 17 16V9H16C15.7167 9 15.4793 8.904 15.288 8.712C15.096 8.52067 15 8.28333 15 8C15 7.71667 15.096 7.479 15.288 7.287C15.4793 7.09567 15.7167 7 16 7H18C18.2833 7 18.5207 7.09567 18.712 7.287C18.904 7.479 19 7.71667 19 8V16C19 16.2833 18.904 16.5207 18.712 16.712C18.5207 16.904 18.2833 17 18 17Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M7.00004 19.8334C6.66949 19.8334 6.39221 19.7214 6.16821 19.4974C5.94499 19.2741 5.83337 18.9972 5.83337 18.6667V9.33335C5.83337 9.0028 5.94499 8.72552 6.16821 8.50152C6.39221 8.2783 6.66949 8.16669 7.00004 8.16669C7.3306 8.16669 7.60787 8.2783 7.83187 8.50152C8.0551 8.72552 8.16671 9.0028 8.16671 9.33335V12.8334H12.8334V9.33335C12.8334 9.0028 12.9454 8.72552 13.1694 8.50152C13.3926 8.2783 13.6695 8.16669 14 8.16669C14.3306 8.16669 14.6079 8.2783 14.8319 8.50152C15.0551 8.72552 15.1667 9.0028 15.1667 9.33335V18.6667C15.1667 18.9972 15.0551 19.2741 14.8319 19.4974C14.6079 19.7214 14.3306 19.8334 14 19.8334C13.6695 19.8334 13.3926 19.7214 13.1694 19.4974C12.9454 19.2741 12.8334 18.9972 12.8334 18.6667V15.1667H8.16671V18.6667C8.16671 18.9972 8.0551 19.2741 7.83187 19.4974C7.60787 19.7214 7.3306 19.8334 7.00004 19.8334ZM21 19.8334C20.6695 19.8334 20.3926 19.7214 20.1694 19.4974C19.9454 19.2741 19.8334 18.9972 19.8334 18.6667V10.5H18.6667C18.3362 10.5 18.0593 10.388 17.836 10.164C17.612 9.9408 17.5 9.66391 17.5 9.33335C17.5 9.0028 17.612 8.72552 17.836 8.50152C18.0593 8.2783 18.3362 8.16669 18.6667 8.16669H21C21.3306 8.16669 21.6075 8.2783 21.8307 8.50152C22.0547 8.72552 22.1667 9.0028 22.1667 9.33335V18.6667C22.1667 18.9972 22.0547 19.2741 21.8307 19.4974C21.6075 19.7214 21.3306 19.8334 21 19.8334Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-format-h-one"; }
+  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-fullscreen-exit.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 SwirlIconFullscreenExit {
+  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 12.8167C5.78889 12.8167 5.60845 12.7445 5.45867 12.6C5.30845 12.4556 5.23333 12.2778 5.23333 12.0667V10.7667H3.93333C3.72222 10.7667 3.54445 10.6916 3.4 10.5414C3.25556 10.3916 3.18333 10.2111 3.18333 10C3.18333 9.78891 3.25556 9.60846 3.4 9.45868C3.54445 9.30846 3.72222 9.23335 3.93333 9.23335H6C6.21111 9.23335 6.39156 9.30846 6.54133 9.45868C6.69156 9.60846 6.76667 9.78891 6.76667 10V12.0667C6.76667 12.2778 6.69156 12.4556 6.54133 12.6C6.39156 12.7445 6.21111 12.8167 6 12.8167V12.8167ZM3.93333 6.76668C3.72222 6.76668 3.54445 6.69157 3.4 6.54135C3.25556 6.39157 3.18333 6.21113 3.18333 6.00002C3.18333 5.78891 3.25556 5.60824 3.4 5.45802C3.54445 5.30824 3.72222 5.23335 3.93333 5.23335H5.23333V3.93335C5.23333 3.72224 5.30845 3.54446 5.45867 3.40002C5.60845 3.25557 5.78889 3.18335 6 3.18335C6.21111 3.18335 6.39156 3.25557 6.54133 3.40002C6.69156 3.54446 6.76667 3.72224 6.76667 3.93335V6.00002C6.76667 6.21113 6.69156 6.39157 6.54133 6.54135C6.39156 6.69157 6.21111 6.76668 6 6.76668H3.93333ZM10 12.8167C9.78889 12.8167 9.60845 12.7445 9.45867 12.6C9.30845 12.4556 9.23334 12.2778 9.23334 12.0667V10C9.23334 9.78891 9.30845 9.60846 9.45867 9.45868C9.60845 9.30846 9.78889 9.23335 10 9.23335H12.0667C12.2778 9.23335 12.4556 9.30846 12.6 9.45868C12.7444 9.60846 12.8167 9.78891 12.8167 10C12.8167 10.2111 12.7444 10.3916 12.6 10.5414C12.4556 10.6916 12.2778 10.7667 12.0667 10.7667H10.7667V12.0667C10.7667 12.2778 10.6918 12.4556 10.542 12.6C10.3918 12.7445 10.2111 12.8167 10 12.8167V12.8167ZM10 6.76668C9.78889 6.76668 9.60845 6.69157 9.45867 6.54135C9.30845 6.39157 9.23334 6.21113 9.23334 6.00002V3.93335C9.23334 3.72224 9.30845 3.54446 9.45867 3.40002C9.60845 3.25557 9.78889 3.18335 10 3.18335C10.2111 3.18335 10.3918 3.25557 10.542 3.40002C10.6918 3.54446 10.7667 3.72224 10.7667 3.93335V5.23335H12.0667C12.2778 5.23335 12.4556 5.30824 12.6 5.45802C12.7444 5.60824 12.8167 5.78891 12.8167 6.00002C12.8167 6.21113 12.7444 6.39157 12.6 6.54135C12.4556 6.69157 12.2778 6.76668 12.0667 6.76668H10Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M9 19.225C8.68333 19.225 8.41267 19.1167 8.188 18.9C7.96267 18.6834 7.85 18.4167 7.85 18.1V16.15H5.9C5.58333 16.15 5.31667 16.0374 5.1 15.812C4.88333 15.5874 4.775 15.3167 4.775 15C4.775 14.6834 4.88333 14.4127 5.1 14.188C5.31667 13.9627 5.58333 13.85 5.9 13.85H9C9.31667 13.85 9.58733 13.9627 9.812 14.188C10.0373 14.4127 10.15 14.6834 10.15 15V18.1C10.15 18.4167 10.0373 18.6834 9.812 18.9C9.58733 19.1167 9.31667 19.225 9 19.225V19.225ZM5.9 10.15C5.58333 10.15 5.31667 10.0374 5.1 9.81202C4.88333 9.58736 4.775 9.31669 4.775 9.00002C4.775 8.68336 4.88333 8.41236 5.1 8.18702C5.31667 7.96236 5.58333 7.85002 5.9 7.85002H7.85V5.90002C7.85 5.58336 7.96267 5.31669 8.188 5.10002C8.41267 4.88336 8.68333 4.77502 9 4.77502C9.31667 4.77502 9.58733 4.88336 9.812 5.10002C10.0373 5.31669 10.15 5.58336 10.15 5.90002V9.00002C10.15 9.31669 10.0373 9.58736 9.812 9.81202C9.58733 10.0374 9.31667 10.15 9 10.15H5.9ZM15 19.225C14.6833 19.225 14.4127 19.1167 14.188 18.9C13.9627 18.6834 13.85 18.4167 13.85 18.1V15C13.85 14.6834 13.9627 14.4127 14.188 14.188C14.4127 13.9627 14.6833 13.85 15 13.85H18.1C18.4167 13.85 18.6833 13.9627 18.9 14.188C19.1167 14.4127 19.225 14.6834 19.225 15C19.225 15.3167 19.1167 15.5874 18.9 15.812C18.6833 16.0374 18.4167 16.15 18.1 16.15H16.15V18.1C16.15 18.4167 16.0377 18.6834 15.813 18.9C15.5877 19.1167 15.3167 19.225 15 19.225V19.225ZM15 10.15C14.6833 10.15 14.4127 10.0374 14.188 9.81202C13.9627 9.58736 13.85 9.31669 13.85 9.00002V5.90002C13.85 5.58336 13.9627 5.31669 14.188 5.10002C14.4127 4.88336 14.6833 4.77502 15 4.77502C15.3167 4.77502 15.5877 4.88336 15.813 5.10002C16.0377 5.31669 16.15 5.58336 16.15 5.90002V7.85002H18.1C18.4167 7.85002 18.6833 7.96236 18.9 8.18702C19.1167 8.41236 19.225 8.68336 19.225 9.00002C19.225 9.31669 19.1167 9.58736 18.9 9.81202C18.6833 10.0374 18.4167 10.15 18.1 10.15H15Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M10.5 22.4291C10.1306 22.4291 9.81478 22.3027 9.55266 22.05C9.28978 21.7972 9.15833 21.4861 9.15833 21.1166V18.8416H6.88333C6.51389 18.8416 6.20278 18.7102 5.95 18.4473C5.69722 18.1852 5.57083 17.8694 5.57083 17.5C5.57083 17.1305 5.69722 16.8147 5.95 16.5526C6.20278 16.2897 6.51389 16.1583 6.88333 16.1583H10.5C10.8694 16.1583 11.1852 16.2897 11.4473 16.5526C11.7102 16.8147 11.8417 17.1305 11.8417 17.5V21.1166C11.8417 21.4861 11.7102 21.7972 11.4473 22.05C11.1852 22.3027 10.8694 22.4291 10.5 22.4291V22.4291ZM6.88333 11.8416C6.51389 11.8416 6.20278 11.7102 5.95 11.4473C5.69722 11.1852 5.57083 10.8694 5.57083 10.5C5.57083 10.1305 5.69722 9.81436 5.95 9.55147C6.20278 9.28936 6.51389 9.1583 6.88333 9.1583H9.15833V6.8833C9.15833 6.51386 9.28978 6.20274 9.55266 5.94997C9.81478 5.69719 10.1306 5.5708 10.5 5.5708C10.8694 5.5708 11.1852 5.69719 11.4473 5.94997C11.7102 6.20274 11.8417 6.51386 11.8417 6.8833V10.5C11.8417 10.8694 11.7102 11.1852 11.4473 11.4473C11.1852 11.7102 10.8694 11.8416 10.5 11.8416H6.88333ZM17.5 22.4291C17.1306 22.4291 16.8148 22.3027 16.5527 22.05C16.2898 21.7972 16.1583 21.4861 16.1583 21.1166V17.5C16.1583 17.1305 16.2898 16.8147 16.5527 16.5526C16.8148 16.2897 17.1306 16.1583 17.5 16.1583H21.1167C21.4861 16.1583 21.7972 16.2897 22.05 16.5526C22.3028 16.8147 22.4292 17.1305 22.4292 17.5C22.4292 17.8694 22.3028 18.1852 22.05 18.4473C21.7972 18.7102 21.4861 18.8416 21.1167 18.8416H18.8417V21.1166C18.8417 21.4861 18.7106 21.7972 18.4485 22.05C18.1856 22.3027 17.8694 22.4291 17.5 22.4291V22.4291ZM17.5 11.8416C17.1306 11.8416 16.8148 11.7102 16.5527 11.4473C16.2898 11.1852 16.1583 10.8694 16.1583 10.5V6.8833C16.1583 6.51386 16.2898 6.20274 16.5527 5.94997C16.8148 5.69719 17.1306 5.5708 17.5 5.5708C17.8694 5.5708 18.1856 5.69719 18.4485 5.94997C18.7106 6.20274 18.8417 6.51386 18.8417 6.8833V9.1583H21.1167C21.4861 9.1583 21.7972 9.28936 22.05 9.55147C22.3028 9.81436 22.4292 10.1305 22.4292 10.5C22.4292 10.8694 22.3028 11.1852 22.05 11.4473C21.7972 11.7102 21.4861 11.8416 21.1167 11.8416H17.5Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-fullscreen-exit"; }
+  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-fullscreen.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 SwirlIconFullscreen {
+  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.93333 12.8167C3.72222 12.8167 3.54445 12.7445 3.4 12.6C3.25556 12.4556 3.18333 12.2778 3.18333 12.0667V10C3.18333 9.78891 3.25556 9.60846 3.4 9.45868C3.54445 9.30846 3.72222 9.23335 3.93333 9.23335C4.15556 9.23335 4.33889 9.30846 4.48333 9.45868C4.62778 9.60846 4.7 9.78891 4.7 10V11.3H6C6.21111 11.3 6.39156 11.3722 6.54133 11.5167C6.69156 11.6611 6.76667 11.8445 6.76667 12.0667C6.76667 12.2778 6.69156 12.4556 6.54133 12.6C6.39156 12.7445 6.21111 12.8167 6 12.8167H3.93333ZM3.93333 6.76668C3.72222 6.76668 3.54445 6.69157 3.4 6.54135C3.25556 6.39157 3.18333 6.21113 3.18333 6.00002V3.93335C3.18333 3.72224 3.25556 3.54446 3.4 3.40002C3.54445 3.25557 3.72222 3.18335 3.93333 3.18335H6C6.21111 3.18335 6.39156 3.25557 6.54133 3.40002C6.69156 3.54446 6.76667 3.72224 6.76667 3.93335C6.76667 4.15557 6.69156 4.33891 6.54133 4.48335C6.39156 4.62779 6.21111 4.70002 6 4.70002H4.7V6.00002C4.7 6.21113 4.62778 6.39157 4.48333 6.54135C4.33889 6.69157 4.15556 6.76668 3.93333 6.76668V6.76668ZM10 12.8167C9.78889 12.8167 9.60845 12.7445 9.45867 12.6C9.30845 12.4556 9.23334 12.2778 9.23334 12.0667C9.23334 11.8445 9.30845 11.6611 9.45867 11.5167C9.60845 11.3722 9.78889 11.3 10 11.3H11.3V10C11.3 9.78891 11.3722 9.60846 11.5167 9.45868C11.6611 9.30846 11.8444 9.23335 12.0667 9.23335C12.2778 9.23335 12.4556 9.30846 12.6 9.45868C12.7444 9.60846 12.8167 9.78891 12.8167 10V12.0667C12.8167 12.2778 12.7444 12.4556 12.6 12.6C12.4556 12.7445 12.2778 12.8167 12.0667 12.8167H10ZM12.0667 6.76668C11.8444 6.76668 11.6611 6.69157 11.5167 6.54135C11.3722 6.39157 11.3 6.21113 11.3 6.00002V4.70002H10C9.78889 4.70002 9.60845 4.62779 9.45867 4.48335C9.30845 4.33891 9.23334 4.15557 9.23334 3.93335C9.23334 3.72224 9.30845 3.54446 9.45867 3.40002C9.60845 3.25557 9.78889 3.18335 10 3.18335H12.0667C12.2778 3.18335 12.4556 3.25557 12.6 3.40002C12.7444 3.54446 12.8167 3.72224 12.8167 3.93335V6.00002C12.8167 6.21113 12.7444 6.39157 12.6 6.54135C12.4556 6.69157 12.2778 6.76668 12.0667 6.76668V6.76668Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M5.9 19.225C5.58333 19.225 5.31667 19.1167 5.1 18.9C4.88333 18.6834 4.775 18.4167 4.775 18.1V15C4.775 14.6834 4.88333 14.4127 5.1 14.188C5.31667 13.9627 5.58333 13.85 5.9 13.85C6.23333 13.85 6.50833 13.9627 6.725 14.188C6.94167 14.4127 7.05 14.6834 7.05 15V16.95H9C9.31667 16.95 9.58733 17.0584 9.812 17.275C10.0373 17.4917 10.15 17.7667 10.15 18.1C10.15 18.4167 10.0373 18.6834 9.812 18.9C9.58733 19.1167 9.31667 19.225 9 19.225H5.9ZM5.9 10.15C5.58333 10.15 5.31667 10.0374 5.1 9.81202C4.88333 9.58736 4.775 9.31669 4.775 9.00002V5.90002C4.775 5.58336 4.88333 5.31669 5.1 5.10002C5.31667 4.88336 5.58333 4.77502 5.9 4.77502H9C9.31667 4.77502 9.58733 4.88336 9.812 5.10002C10.0373 5.31669 10.15 5.58336 10.15 5.90002C10.15 6.23336 10.0373 6.50836 9.812 6.72502C9.58733 6.94169 9.31667 7.05002 9 7.05002H7.05V9.00002C7.05 9.31669 6.94167 9.58736 6.725 9.81202C6.50833 10.0374 6.23333 10.15 5.9 10.15V10.15ZM15 19.225C14.6833 19.225 14.4127 19.1167 14.188 18.9C13.9627 18.6834 13.85 18.4167 13.85 18.1C13.85 17.7667 13.9627 17.4917 14.188 17.275C14.4127 17.0584 14.6833 16.95 15 16.95H16.95V15C16.95 14.6834 17.0583 14.4127 17.275 14.188C17.4917 13.9627 17.7667 13.85 18.1 13.85C18.4167 13.85 18.6833 13.9627 18.9 14.188C19.1167 14.4127 19.225 14.6834 19.225 15V18.1C19.225 18.4167 19.1167 18.6834 18.9 18.9C18.6833 19.1167 18.4167 19.225 18.1 19.225H15ZM18.1 10.15C17.7667 10.15 17.4917 10.0374 17.275 9.81202C17.0583 9.58736 16.95 9.31669 16.95 9.00002V7.05002H15C14.6833 7.05002 14.4127 6.94169 14.188 6.72502C13.9627 6.50836 13.85 6.23336 13.85 5.90002C13.85 5.58336 13.9627 5.31669 14.188 5.10002C14.4127 4.88336 14.6833 4.77502 15 4.77502H18.1C18.4167 4.77502 18.6833 4.88336 18.9 5.10002C19.1167 5.31669 19.225 5.58336 19.225 5.90002V9.00002C19.225 9.31669 19.1167 9.58736 18.9 9.81202C18.6833 10.0374 18.4167 10.15 18.1 10.15V10.15Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M6.88333 22.4291C6.51389 22.4291 6.20278 22.3027 5.95 22.05C5.69722 21.7972 5.57083 21.4861 5.57083 21.1166V17.5C5.57083 17.1305 5.69722 16.8147 5.95 16.5526C6.20278 16.2897 6.51389 16.1583 6.88333 16.1583C7.27222 16.1583 7.59305 16.2897 7.84583 16.5526C8.09861 16.8147 8.225 17.1305 8.225 17.5V19.775H10.5C10.8694 19.775 11.1852 19.9014 11.4473 20.1541C11.7102 20.4069 11.8417 20.7277 11.8417 21.1166C11.8417 21.4861 11.7102 21.7972 11.4473 22.05C11.1852 22.3027 10.8694 22.4291 10.5 22.4291H6.88333ZM6.88333 11.8416C6.51389 11.8416 6.20278 11.7102 5.95 11.4473C5.69722 11.1852 5.57083 10.8694 5.57083 10.5V6.8833C5.57083 6.51386 5.69722 6.20274 5.95 5.94997C6.20278 5.69719 6.51389 5.5708 6.88333 5.5708H10.5C10.8694 5.5708 11.1852 5.69719 11.4473 5.94997C11.7102 6.20274 11.8417 6.51386 11.8417 6.8833C11.8417 7.27219 11.7102 7.59302 11.4473 7.8458C11.1852 8.09858 10.8694 8.22497 10.5 8.22497H8.225V10.5C8.225 10.8694 8.09861 11.1852 7.84583 11.4473C7.59305 11.7102 7.27222 11.8416 6.88333 11.8416V11.8416ZM17.5 22.4291C17.1306 22.4291 16.8148 22.3027 16.5527 22.05C16.2898 21.7972 16.1583 21.4861 16.1583 21.1166C16.1583 20.7277 16.2898 20.4069 16.5527 20.1541C16.8148 19.9014 17.1306 19.775 17.5 19.775H19.775V17.5C19.775 17.1305 19.9014 16.8147 20.1542 16.5526C20.4069 16.2897 20.7278 16.1583 21.1167 16.1583C21.4861 16.1583 21.7972 16.2897 22.05 16.5526C22.3028 16.8147 22.4292 17.1305 22.4292 17.5V21.1166C22.4292 21.4861 22.3028 21.7972 22.05 22.05C21.7972 22.3027 21.4861 22.4291 21.1167 22.4291H17.5ZM21.1167 11.8416C20.7278 11.8416 20.4069 11.7102 20.1542 11.4473C19.9014 11.1852 19.775 10.8694 19.775 10.5V8.22497H17.5C17.1306 8.22497 16.8148 8.09858 16.5527 7.8458C16.2898 7.59302 16.1583 7.27219 16.1583 6.8833C16.1583 6.51386 16.2898 6.20274 16.5527 5.94997C16.8148 5.69719 17.1306 5.5708 17.5 5.5708H21.1167C21.4861 5.5708 21.7972 5.69719 22.05 5.94997C22.3028 6.20274 22.4292 6.51386 22.4292 6.8833V10.5C22.4292 10.8694 22.3028 11.1852 22.05 11.4473C21.7972 11.7102 21.4861 11.8416 21.1167 11.8416V11.8416Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-fullscreen"; }
+  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-gif.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 SwirlIconGif {
+  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.16671 10C8.02226 10 7.90282 9.95278 7.80837 9.85833C7.71393 9.76389 7.66671 9.64444 7.66671 9.5V6.5C7.66671 6.35556 7.71393 6.23611 7.80837 6.14167C7.90282 6.04722 8.02226 6 8.16671 6C8.31115 6 8.4306 6.04722 8.52504 6.14167C8.61948 6.23611 8.66671 6.35556 8.66671 6.5V9.5C8.66671 9.64444 8.61948 9.76389 8.52504 9.85833C8.4306 9.95278 8.31115 10 8.16671 10ZM4.00004 10C3.80004 10 3.63893 9.93056 3.51671 9.79167C3.39449 9.65278 3.33337 9.5 3.33337 9.33333V6.66667C3.33337 6.5 3.39449 6.34722 3.51671 6.20833C3.63893 6.06944 3.80004 6 4.00004 6H6.16671C6.31115 6 6.4306 6.04722 6.52504 6.14167C6.61948 6.23611 6.66671 6.35556 6.66671 6.5C6.66671 6.64444 6.61948 6.76389 6.52504 6.85833C6.4306 6.95278 6.31115 7 6.16671 7H4.33337V9H5.66671V8.5C5.66671 8.35556 5.71393 8.23611 5.80837 8.14167C5.90282 8.04722 6.02226 8 6.16671 8C6.31115 8 6.4306 8.04722 6.52504 8.14167C6.61948 8.23611 6.66671 8.35556 6.66671 8.5V9.33333C6.66671 9.5 6.6056 9.65278 6.48337 9.79167C6.36115 9.93056 6.20004 10 6.00004 10H4.00004ZM10.1667 10C10.0223 10 9.90282 9.95278 9.80837 9.85833C9.71393 9.76389 9.66671 9.64444 9.66671 9.5V6.66667C9.66671 6.47778 9.7306 6.31944 9.85837 6.19167C9.98615 6.06389 10.1445 6 10.3334 6H12.1667C12.3112 6 12.4306 6.04722 12.525 6.14167C12.6195 6.23611 12.6667 6.35556 12.6667 6.5C12.6667 6.64444 12.6195 6.76389 12.525 6.85833C12.4306 6.95278 12.3112 7 12.1667 7H10.6667V7.66667H11.5C11.6445 7.66667 11.7639 7.71389 11.8584 7.80833C11.9528 7.90278 12 8.02222 12 8.16667C12 8.31111 11.9528 8.43056 11.8584 8.525C11.7639 8.61944 11.6445 8.66667 11.5 8.66667H10.6667V9.5C10.6667 9.64444 10.6195 9.76389 10.525 9.85833C10.4306 9.95278 10.3112 10 10.1667 10Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12.25 15C12.0333 15 11.8542 14.9292 11.7125 14.7875C11.5708 14.6458 11.5 14.4667 11.5 14.25V9.75C11.5 9.53333 11.5708 9.35417 11.7125 9.2125C11.8542 9.07083 12.0333 9 12.25 9C12.4667 9 12.6458 9.07083 12.7875 9.2125C12.9292 9.35417 13 9.53333 13 9.75V14.25C13 14.4667 12.9292 14.6458 12.7875 14.7875C12.6458 14.9292 12.4667 15 12.25 15ZM6 15C5.7 15 5.45833 14.8958 5.275 14.6875C5.09167 14.4792 5 14.25 5 14V10C5 9.75 5.09167 9.52083 5.275 9.3125C5.45833 9.10417 5.7 9 6 9H9.25C9.46667 9 9.64583 9.07083 9.7875 9.2125C9.92917 9.35417 10 9.53333 10 9.75C10 9.96667 9.92917 10.1458 9.7875 10.2875C9.64583 10.4292 9.46667 10.5 9.25 10.5H6.5V13.5H8.5V12.75C8.5 12.5333 8.57083 12.3542 8.7125 12.2125C8.85417 12.0708 9.03333 12 9.25 12C9.46667 12 9.64583 12.0708 9.7875 12.2125C9.92917 12.3542 10 12.5333 10 12.75V14C10 14.25 9.90833 14.4792 9.725 14.6875C9.54167 14.8958 9.3 15 9 15H6ZM15.25 15C15.0333 15 14.8542 14.9292 14.7125 14.7875C14.5708 14.6458 14.5 14.4667 14.5 14.25V10C14.5 9.71667 14.5958 9.47917 14.7875 9.2875C14.9792 9.09583 15.2167 9 15.5 9H18.25C18.4667 9 18.6458 9.07083 18.7875 9.2125C18.9292 9.35417 19 9.53333 19 9.75C19 9.96667 18.9292 10.1458 18.7875 10.2875C18.6458 10.4292 18.4667 10.5 18.25 10.5H16V11.5H17.25C17.4667 11.5 17.6458 11.5708 17.7875 11.7125C17.9292 11.8542 18 12.0333 18 12.25C18 12.4667 17.9292 12.6458 17.7875 12.7875C17.6458 12.9292 17.4667 13 17.25 13H16V14.25C16 14.4667 15.9292 14.6458 15.7875 14.7875C15.6458 14.9292 15.4667 15 15.25 15Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14.2917 17.5C14.0389 17.5 13.8299 17.4174 13.6646 17.2521C13.4993 17.0868 13.4167 16.8778 13.4167 16.625V11.375C13.4167 11.1222 13.4993 10.9132 13.6646 10.7479C13.8299 10.5826 14.0389 10.5 14.2917 10.5C14.5445 10.5 14.7535 10.5826 14.9188 10.7479C15.0841 10.9132 15.1667 11.1222 15.1667 11.375V16.625C15.1667 16.8778 15.0841 17.0868 14.9188 17.2521C14.7535 17.4174 14.5445 17.5 14.2917 17.5ZM7.00004 17.5C6.65004 17.5 6.3681 17.3785 6.15421 17.1354C5.94032 16.8924 5.83337 16.625 5.83337 16.3333V11.6667C5.83337 11.375 5.94032 11.1076 6.15421 10.8646C6.3681 10.6215 6.65004 10.5 7.00004 10.5H10.7917C11.0445 10.5 11.2535 10.5826 11.4188 10.7479C11.5841 10.9132 11.6667 11.1222 11.6667 11.375C11.6667 11.6278 11.5841 11.8368 11.4188 12.0021C11.2535 12.1674 11.0445 12.25 10.7917 12.25H7.58337V15.75H9.91671V14.875C9.91671 14.6222 9.99935 14.4132 10.1646 14.2479C10.3299 14.0826 10.5389 14 10.7917 14C11.0445 14 11.2535 14.0826 11.4188 14.2479C11.5841 14.4132 11.6667 14.6222 11.6667 14.875V16.3333C11.6667 16.625 11.5598 16.8924 11.3459 17.1354C11.132 17.3785 10.85 17.5 10.5 17.5H7.00004ZM17.7917 17.5C17.5389 17.5 17.3299 17.4174 17.1646 17.2521C16.9993 17.0868 16.9167 16.8778 16.9167 16.625V11.6667C16.9167 11.3361 17.0285 11.059 17.2521 10.8354C17.4757 10.6118 17.7528 10.5 18.0834 10.5H21.2917C21.5445 10.5 21.7535 10.5826 21.9188 10.7479C22.0841 10.9132 22.1667 11.1222 22.1667 11.375C22.1667 11.6278 22.0841 11.8368 21.9188 12.0021C21.7535 12.1674 21.5445 12.25 21.2917 12.25H18.6667V13.4167H20.125C20.3778 13.4167 20.5868 13.4993 20.7521 13.6646C20.9174 13.8299 21 14.0389 21 14.2917C21 14.5444 20.9174 14.7535 20.7521 14.9187C20.5868 15.084 20.3778 15.1667 20.125 15.1667H18.6667V16.625C18.6667 16.8778 18.5841 17.0868 18.4188 17.2521C18.2535 17.4174 18.0445 17.5 17.7917 17.5Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-gif"; }
+  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"
+      }
+    };
+  }
+}