@getflip/swirl-components 0.15.0 → 0.17.0

package/dist/collection/components/swirl-file-viewer/swirl-file-viewer.js

@@ -5,13 +5,18 @@ export class SwirlFileViewer {
     this.onActivate = (event) => {
       this.activate.emit(event.detail);
     };
+    this.onVisiblePagesChange = (event) => {
+      this.visiblePagesChange.emit(event.detail);
+    };
     this.active = true;
     this.autoplay = undefined;
     this.description = undefined;
     this.errorMessage = "File could not be loaded.";
     this.file = undefined;
+    this.thumbnailUrl = undefined;
     this.type = undefined;
     this.typeUnsupportedMessage = "File type is not supported.";
+    this.viewMode = "single";
     this.zoom = 1;
   }
   /**
@@ -38,7 +43,7 @@ export class SwirlFileViewer {
         this.type !== "text/plain" &&
         this.type !== "text/csv" &&
         this.type !== "application/pdf");
-    return (h(Host, null, h("div", { class: "file-viewer" }, this.type && this.active && (h("div", { class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, ref: (el) => (this.viewer = el), zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), unsupportedType && (h("swirl-inline-error", { message: this.typeUnsupportedMessage })))))));
+    return (h(Host, null, h("div", { class: "file-viewer" }, this.type && this.active && (h("div", { class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), viewMode: this.viewMode, zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), unsupportedType && (h("swirl-inline-error", { message: this.typeUnsupportedMessage })))))));
   }
   static get is() { return "swirl-file-viewer"; }
   static get encapsulation() { return "shadow"; }
@@ -141,6 +146,23 @@ export class SwirlFileViewer {
         "attribute": "file",
         "reflect": false
       },
+      "thumbnailUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "thumbnail-url",
+        "reflect": false
+      },
       "type": {
         "type": "string",
         "mutable": false,
@@ -176,6 +198,29 @@ export class SwirlFileViewer {
         "reflect": false,
         "defaultValue": "\"File type is not supported.\""
       },
+      "viewMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlFileViewerPdfViewMode",
+          "resolved": "\"side-by-side\" | \"single\"",
+          "references": {
+            "SwirlFileViewerPdfViewMode": {
+              "location": "import",
+              "path": "./viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "view-mode",
+        "reflect": false,
+        "defaultValue": "\"single\""
+      },
       "zoom": {
         "type": "any",
         "mutable": false,
@@ -221,6 +266,21 @@ export class SwirlFileViewer {
             }
           }
         }
+      }, {
+        "method": "visiblePagesChange",
+        "name": "visiblePagesChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number[]",
+          "resolved": "number[]",
+          "references": {}
+        }
       }];
   }
   static get methods() {

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.css

@@ -5,6 +5,26 @@
   height: 100%;
 }
 
+  :host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__pages {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-row-gap: var(--s-space-8);
+      grid-column-gap: var(--s-space-8);
+      grid-auto-rows: auto;
+    }
+
+  :host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__page {
+      margin: 0;
+    }
+
+  :host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__page:nth-child(odd) {
+        justify-self: end;
+      }
+
+  :host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__page:nth-child(even) {
+        justify-self: start;
+      }
+
   :host * {
     box-sizing: border-box;
   }
@@ -164,7 +184,7 @@
 
 .file-viewer-pdf__pagination {
   position: absolute;
-  bottom: 2.5rem;
+  bottom: var(--s-space-16);
   left: 50%;
   padding: var(--s-space-4) var(--s-space-12);
   border-radius: var(--s-border-radius-base);

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.js

@@ -1,4 +1,5 @@
 import { h, Host, } from "@stencil/core";
+import classnames from "classnames";
 import pdf, { getDocument, renderTextLayer, } from "pdfjs-dist/legacy/build/pdf.js";
 import { debounce, getVisibleHeight, isMobileViewport, } from "../../../../utils";
 pdf.GlobalWorkerOptions.workerSrc = "/pdfjs/pdf.worker.min.js";
@@ -33,6 +34,7 @@ export class SwirlFileViewerPdf {
     this.errorMessage = "File could not be loaded.";
     this.file = undefined;
     this.singlePageMode = undefined;
+    this.viewMode = "single";
     this.zoom = 1;
     this.doc = undefined;
     this.error = undefined;
@@ -65,6 +67,14 @@ export class SwirlFileViewerPdf {
     await this.updateVisiblePages();
     this.determineScrollStatus();
   }
+  async watchViewMode() {
+    queueMicrotask(async () => {
+      this.visiblePages = [];
+      this.renderedPages = [];
+      await this.updateVisiblePages();
+      this.determineScrollStatus();
+    });
+  }
   watchZoom() {
     queueMicrotask(async () => {
       this.restoreScrollPosition();
@@ -74,6 +84,26 @@ export class SwirlFileViewerPdf {
       this.determineScrollStatus();
     });
   }
+  /**
+   * Get thumbnails of all pages.
+   */
+  async getThumbnails() {
+    return await Promise.all(this.pages.filter(Boolean).map((page) => {
+      const vp = page.getViewport({ scale: 1 });
+      const canvas = document.createElement("canvas");
+      canvas.width = vp.width;
+      canvas.height = vp.height;
+      const scale = Math.min(canvas.width / vp.width, canvas.height / vp.height);
+      return page
+        .render({
+        canvasContext: canvas.getContext("2d"),
+        viewport: page.getViewport({ scale: scale }),
+      })
+        .promise.then(function () {
+        return canvas;
+      });
+    }));
+  }
   /**
    * Print the file.
    */
@@ -197,6 +227,7 @@ export class SwirlFileViewerPdf {
     }
     this.visiblePages = visiblePages;
     await this.renderVisiblePages(forPrint);
+    this.visiblePagesChange.emit(this.visiblePages);
   }
   async renderTextLayer(page, container) {
     renderTextLayer({
@@ -273,7 +304,8 @@ export class SwirlFileViewerPdf {
       ? this.pages.length - 1
       : this.visiblePages[0];
     const showSpinner = this.loading;
-    return (h(Host, { class: "file-viewer-pdf", exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
+    const className = classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
+    return (h(Host, { class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
       const viewport = page.getViewport({
         scale: this.getScale(page),
       });
@@ -355,6 +387,29 @@ export class SwirlFileViewerPdf {
         "attribute": "single-page-mode",
         "reflect": false
       },
+      "viewMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlFileViewerPdfViewMode",
+          "resolved": "\"side-by-side\" | \"single\"",
+          "references": {
+            "SwirlFileViewerPdfViewMode": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "view-mode",
+        "reflect": false,
+        "defaultValue": "\"single\""
+      },
       "zoom": {
         "type": "any",
         "mutable": false,
@@ -411,10 +466,44 @@ export class SwirlFileViewerPdf {
             }
           }
         }
+      }, {
+        "method": "visiblePagesChange",
+        "name": "visiblePagesChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number[]",
+          "resolved": "number[]",
+          "references": {}
+        }
       }];
   }
   static get methods() {
     return {
+      "getThumbnails": {
+        "complexType": {
+          "signature": "() => Promise<HTMLCanvasElement[]>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLCanvasElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<HTMLCanvasElement[]>"
+        },
+        "docs": {
+          "text": "Get thumbnails of all pages.",
+          "tags": []
+        }
+      },
       "print": {
         "complexType": {
           "signature": "() => Promise<void>",
@@ -489,6 +578,9 @@ export class SwirlFileViewerPdf {
     return [{
         "propName": "file",
         "methodName": "watchProps"
+      }, {
+        "propName": "viewMode",
+        "methodName": "watchViewMode"
       }, {
         "propName": "zoom",
         "methodName": "watchZoom"

package/dist/collection/components/swirl-icon/icons/swirl-icon-double-arrow-left.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 SwirlIconDoubleArrowLeft {
+  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.9833 11.5378L7.91667 8.47112C7.85 8.40445 7.80289 8.33223 7.77534 8.25445C7.74734 8.17667 7.73334 8.09334 7.73334 8.00445C7.73334 7.91556 7.74734 7.83223 7.77534 7.75445C7.80289 7.67667 7.85 7.60445 7.91667 7.53778L10.9833 4.47112C11.1056 4.34889 11.2582 4.28489 11.4413 4.27912C11.6249 4.27378 11.7833 4.33778 11.9167 4.47112C12.0389 4.59334 12.1 4.74889 12.1 4.93778C12.1 5.12667 12.0389 5.28223 11.9167 5.40445L9.33334 8.00445L11.9167 10.6044C12.0389 10.7267 12.1027 10.8793 12.108 11.0624C12.1138 11.246 12.05 11.4044 11.9167 11.5378C11.7944 11.66 11.6389 11.7211 11.45 11.7211C11.2611 11.7211 11.1056 11.66 10.9833 11.5378ZM6.58334 11.5378L3.51667 8.47112C3.45 8.40445 3.40289 8.33223 3.37534 8.25445C3.34734 8.17667 3.33334 8.09334 3.33334 8.00445C3.33334 7.91556 3.34734 7.83223 3.37534 7.75445C3.40289 7.67667 3.45 7.60445 3.51667 7.53778L6.58334 4.47112C6.70556 4.34889 6.85845 4.28489 7.042 4.27912C7.22511 4.27378 7.38334 4.33778 7.51667 4.47112C7.63889 4.59334 7.7 4.74889 7.7 4.93778C7.7 5.12667 7.63889 5.28223 7.51667 5.40445L4.93334 8.00445L7.51667 10.6044C7.63889 10.7267 7.70289 10.8793 7.70867 11.0624C7.714 11.246 7.65 11.4044 7.51667 11.5378C7.39445 11.66 7.23889 11.7211 7.05 11.7211C6.86111 11.7211 6.70556 11.66 6.58334 11.5378Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M16.475 17.3067L11.875 12.7067C11.775 12.6067 11.7043 12.4983 11.663 12.3817C11.621 12.265 11.6 12.14 11.6 12.0067C11.6 11.8733 11.621 11.7483 11.663 11.6317C11.7043 11.515 11.775 11.4067 11.875 11.3067L16.475 6.70667C16.6583 6.52334 16.8873 6.42734 17.162 6.41867C17.4373 6.41067 17.675 6.50667 17.875 6.70667C18.0583 6.89001 18.15 7.12334 18.15 7.40667C18.15 7.69001 18.0583 7.92334 17.875 8.10667L14 12.0067L17.875 15.9067C18.0583 16.09 18.154 16.319 18.162 16.5937C18.1707 16.869 18.075 17.1067 17.875 17.3067C17.6917 17.49 17.4583 17.5817 17.175 17.5817C16.8917 17.5817 16.6583 17.49 16.475 17.3067ZM9.875 17.3067L5.275 12.7067C5.175 12.6067 5.10433 12.4983 5.063 12.3817C5.021 12.265 5 12.14 5 12.0067C5 11.8733 5.021 11.7483 5.063 11.6317C5.10433 11.515 5.175 11.4067 5.275 11.3067L9.875 6.70667C10.0583 6.52334 10.2877 6.42734 10.563 6.41867C10.8377 6.41067 11.075 6.50667 11.275 6.70667C11.4583 6.89001 11.55 7.12334 11.55 7.40667C11.55 7.69001 11.4583 7.92334 11.275 8.10667L7.4 12.0067L11.275 15.9067C11.4583 16.09 11.5543 16.319 11.563 16.5937C11.571 16.869 11.475 17.1067 11.275 17.3067C11.0917 17.49 10.8583 17.5817 10.575 17.5817C10.2917 17.5817 10.0583 17.49 9.875 17.3067Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M19.2208 20.191L13.8542 14.8243C13.7375 14.7077 13.6551 14.5813 13.6068 14.4452C13.5578 14.3091 13.5333 14.1632 13.5333 14.0077C13.5333 13.8521 13.5578 13.7063 13.6068 13.5702C13.6551 13.4341 13.7375 13.3077 13.8542 13.191L19.2208 7.82433C19.4347 7.61044 19.7019 7.49844 20.0223 7.48833C20.3436 7.479 20.6208 7.591 20.8542 7.82433C21.0681 8.03822 21.175 8.31044 21.175 8.641C21.175 8.97155 21.0681 9.24378 20.8542 9.45766L16.3333 14.0077L20.8542 18.5577C21.0681 18.7716 21.1797 19.0387 21.189 19.3592C21.1991 19.6804 21.0875 19.9577 20.8542 20.191C20.6403 20.4049 20.3681 20.5118 20.0375 20.5118C19.7069 20.5118 19.4347 20.4049 19.2208 20.191ZM11.5208 20.191L6.15417 14.8243C6.0375 14.7077 5.95506 14.5813 5.90684 14.4452C5.85784 14.3091 5.83334 14.1632 5.83334 14.0077C5.83334 13.8521 5.85784 13.7063 5.90684 13.5702C5.95506 13.4341 6.0375 13.3077 6.15417 13.191L11.5208 7.82433C11.7347 7.61044 12.0023 7.49844 12.3235 7.48833C12.6439 7.479 12.9208 7.591 13.1542 7.82433C13.3681 8.03822 13.475 8.31044 13.475 8.641C13.475 8.97155 13.3681 9.24378 13.1542 9.45766L8.63334 14.0077L13.1542 18.5577C13.3681 18.7716 13.4801 19.0387 13.4902 19.3592C13.4995 19.6804 13.3875 19.9577 13.1542 20.191C12.9403 20.4049 12.6681 20.5118 12.3375 20.5118C12.0069 20.5118 11.7347 20.4049 11.5208 20.191Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-double-arrow-left"; }
+  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-double-arrow-right.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 SwirlIconDoubleArrowRight {
+  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.08503 11.5291C3.9628 11.4068 3.90169 11.2513 3.90169 11.0624C3.90169 10.8735 3.9628 10.7179 4.08503 10.5957L6.66836 7.99572L4.08503 5.39572C3.9628 5.2735 3.89903 5.12061 3.89369 4.93705C3.88792 4.75394 3.95169 4.59572 4.08503 4.46239C4.20725 4.34016 4.3628 4.27905 4.55169 4.27905C4.74058 4.27905 4.89614 4.34016 5.01836 4.46239L8.08503 7.52905C8.15169 7.59572 8.19903 7.66794 8.22703 7.74572C8.25458 7.8235 8.26836 7.90683 8.26836 7.99572C8.26836 8.08461 8.25458 8.16794 8.22703 8.24572C8.19903 8.3235 8.15169 8.39572 8.08503 8.46239L5.01836 11.5291C4.89614 11.6513 4.74325 11.7151 4.55969 11.7204C4.37658 11.7262 4.21836 11.6624 4.08503 11.5291ZM8.48503 11.5291C8.3628 11.4068 8.30169 11.2513 8.30169 11.0624C8.30169 10.8735 8.3628 10.7179 8.48503 10.5957L11.0684 7.99572L8.48503 5.39572C8.3628 5.2735 8.2988 5.12061 8.29303 4.93705C8.28769 4.75394 8.35169 4.59572 8.48503 4.46239C8.60725 4.34016 8.7628 4.27905 8.95169 4.27905C9.14058 4.27905 9.29614 4.34016 9.41836 4.46239L12.485 7.52905C12.5517 7.59572 12.5988 7.66794 12.6264 7.74572C12.6544 7.8235 12.6684 7.90683 12.6684 7.99572C12.6684 8.08461 12.6544 8.16794 12.6264 8.24572C12.5988 8.3235 12.5517 8.39572 12.485 8.46239L9.41836 11.5291C9.29614 11.6513 9.14347 11.7151 8.96036 11.7204C8.7768 11.7262 8.61836 11.6624 8.48503 11.5291Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M6.12754 17.2937C5.94421 17.1104 5.85254 16.877 5.85254 16.5937C5.85254 16.3104 5.94421 16.077 6.12754 15.8937L10.0025 11.9937L6.12754 8.0937C5.94421 7.91037 5.84854 7.68103 5.84054 7.4057C5.83187 7.13103 5.92754 6.8937 6.12754 6.6937C6.31087 6.51037 6.54421 6.4187 6.82754 6.4187C7.11087 6.4187 7.34421 6.51037 7.52754 6.6937L12.1275 11.2937C12.2275 11.3937 12.2985 11.502 12.3405 11.6187C12.3819 11.7354 12.4025 11.8604 12.4025 11.9937C12.4025 12.127 12.3819 12.252 12.3405 12.3687C12.2985 12.4854 12.2275 12.5937 12.1275 12.6937L7.52754 17.2937C7.34421 17.477 7.11487 17.5727 6.83954 17.5807C6.56487 17.5894 6.32754 17.4937 6.12754 17.2937ZM12.7275 17.2937C12.5442 17.1104 12.4525 16.877 12.4525 16.5937C12.4525 16.3104 12.5442 16.077 12.7275 15.8937L16.6025 11.9937L12.7275 8.0937C12.5442 7.91037 12.4482 7.68103 12.4395 7.4057C12.4315 7.13103 12.5275 6.8937 12.7275 6.6937C12.9109 6.51037 13.1442 6.4187 13.4275 6.4187C13.7109 6.4187 13.9442 6.51037 14.1275 6.6937L18.7275 11.2937C18.8275 11.3937 18.8982 11.502 18.9395 11.6187C18.9815 11.7354 19.0025 11.8604 19.0025 11.9937C19.0025 12.127 18.9815 12.252 18.9395 12.3687C18.8982 12.4854 18.8275 12.5937 18.7275 12.6937L14.1275 17.2937C13.9442 17.477 13.7152 17.5727 13.4405 17.5807C13.1652 17.5894 12.9275 17.4937 12.7275 17.2937Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M7.14879 20.176C6.93491 19.9621 6.82796 19.6899 6.82796 19.3594C6.82796 19.0288 6.93491 18.7566 7.14879 18.5427L11.6696 13.9927L7.14879 9.44269C6.93491 9.2288 6.82329 8.96125 6.81396 8.64003C6.80385 8.31958 6.91546 8.04269 7.14879 7.80936C7.36268 7.59547 7.63491 7.48853 7.96546 7.48853C8.29602 7.48853 8.56824 7.59547 8.78213 7.80936L14.1488 13.176C14.2655 13.2927 14.3483 13.4191 14.3973 13.5552C14.4455 13.6913 14.4696 13.8371 14.4696 13.9927C14.4696 14.1482 14.4455 14.2941 14.3973 14.4302C14.3483 14.5663 14.2655 14.6927 14.1488 14.8094L8.78213 20.176C8.56824 20.3899 8.30068 20.5015 7.97946 20.5109C7.65902 20.521 7.38213 20.4094 7.14879 20.176ZM14.8488 20.176C14.6349 19.9621 14.528 19.6899 14.528 19.3594C14.528 19.0288 14.6349 18.7566 14.8488 18.5427L19.3696 13.9927L14.8488 9.44269C14.6349 9.2288 14.5229 8.96125 14.5128 8.64003C14.5035 8.31958 14.6155 8.04269 14.8488 7.80936C15.0627 7.59547 15.3349 7.48853 15.6655 7.48853C15.996 7.48853 16.2682 7.59547 16.4821 7.80936L21.8488 13.176C21.9655 13.2927 22.0479 13.4191 22.0961 13.5552C22.1451 13.6913 22.1696 13.8371 22.1696 13.9927C22.1696 14.1482 22.1451 14.2941 22.0961 14.4302C22.0479 14.5663 21.9655 14.6927 21.8488 14.8094L16.4821 20.176C16.2682 20.3899 16.0011 20.5015 15.6806 20.5109C15.3594 20.521 15.0821 20.4094 14.8488 20.176Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-double-arrow-right"; }
+  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-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-menu-book.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 SwirlIconMenuBook {
+  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: "M9.33333 5.85008C9.33333 5.75008 9.36945 5.6473 9.44167 5.54175C9.51389 5.43619 9.59445 5.36675 9.68333 5.33341C10.0056 5.2223 10.3278 5.13897 10.65 5.08341C10.9722 5.02786 11.3111 5.00008 11.6667 5.00008C11.8889 5.00008 12.1083 5.01397 12.325 5.04175C12.5417 5.06953 12.7556 5.10564 12.9667 5.15008C13.0667 5.1723 13.1528 5.22786 13.225 5.31675C13.2972 5.40564 13.3333 5.50564 13.3333 5.61675C13.3333 5.80564 13.2722 5.94453 13.15 6.03341C13.0278 6.1223 12.8722 6.14453 12.6833 6.10008C12.5278 6.06675 12.3639 6.04175 12.1917 6.02508C12.0194 6.00841 11.8444 6.00008 11.6667 6.00008C11.3778 6.00008 11.0944 6.02786 10.8167 6.08341C10.5389 6.13897 10.2722 6.21119 10.0167 6.30008C9.81667 6.37786 9.65278 6.3723 9.525 6.28341C9.39722 6.19453 9.33333 6.05008 9.33333 5.85008ZM9.33333 9.51675C9.33333 9.41675 9.36945 9.31397 9.44167 9.20841C9.51389 9.10286 9.59445 9.03341 9.68333 9.00008C10.0056 8.88897 10.3278 8.80564 10.65 8.75008C10.9722 8.69453 11.3111 8.66675 11.6667 8.66675C11.8889 8.66675 12.1083 8.68064 12.325 8.70841C12.5417 8.73619 12.7556 8.7723 12.9667 8.81675C13.0667 8.83897 13.1528 8.89453 13.225 8.98341C13.2972 9.0723 13.3333 9.1723 13.3333 9.28341C13.3333 9.4723 13.2722 9.61119 13.15 9.70008C13.0278 9.78897 12.8722 9.81119 12.6833 9.76675C12.5278 9.73341 12.3639 9.70841 12.1917 9.69175C12.0194 9.67508 11.8444 9.66675 11.6667 9.66675C11.3778 9.66675 11.0944 9.69175 10.8167 9.74175C10.5389 9.79175 10.2722 9.86119 10.0167 9.95008C9.81667 10.0279 9.65278 10.0251 9.525 9.94175C9.39722 9.85841 9.33333 9.71675 9.33333 9.51675ZM9.33333 7.68341C9.33333 7.58341 9.36945 7.48064 9.44167 7.37508C9.51389 7.26953 9.59445 7.20008 9.68333 7.16675C10.0056 7.05564 10.3278 6.9723 10.65 6.91675C10.9722 6.86119 11.3111 6.83341 11.6667 6.83341C11.8889 6.83341 12.1083 6.8473 12.325 6.87508C12.5417 6.90286 12.7556 6.93897 12.9667 6.98341C13.0667 7.00564 13.1528 7.06119 13.225 7.15008C13.2972 7.23897 13.3333 7.33897 13.3333 7.45008C13.3333 7.63897 13.2722 7.77786 13.15 7.86675C13.0278 7.95564 12.8722 7.97786 12.6833 7.93341C12.5278 7.90008 12.3639 7.87508 12.1917 7.85841C12.0194 7.84175 11.8444 7.83341 11.6667 7.83341C11.3778 7.83341 11.0944 7.86119 10.8167 7.91675C10.5389 7.9723 10.2722 8.04453 10.0167 8.13341C9.81667 8.21119 9.65278 8.20564 9.525 8.11675C9.39722 8.02786 9.33333 7.88341 9.33333 7.68341ZM4.33333 10.6667C4.85556 10.6667 5.36389 10.7251 5.85833 10.8417C6.35278 10.9584 6.84445 11.1334 7.33333 11.3667V4.80008C6.87778 4.53341 6.39445 4.33341 5.88333 4.20008C5.37222 4.06675 4.85556 4.00008 4.33333 4.00008C3.93333 4.00008 3.53611 4.03897 3.14167 4.11675C2.74722 4.19453 2.36667 4.31119 2 4.46675V11.0667C2.38889 10.9334 2.775 10.8334 3.15833 10.7667C3.54167 10.7001 3.93333 10.6667 4.33333 10.6667ZM8.66667 11.3667C9.15556 11.1334 9.64722 10.9584 10.1417 10.8417C10.6361 10.7251 11.1444 10.6667 11.6667 10.6667C12.0667 10.6667 12.4583 10.7001 12.8417 10.7667C13.225 10.8334 13.6111 10.9334 14 11.0667V4.46675C13.6333 4.31119 13.2528 4.19453 12.8583 4.11675C12.4639 4.03897 12.0667 4.00008 11.6667 4.00008C11.1444 4.00008 10.6278 4.06675 10.1167 4.20008C9.60556 4.33341 9.12222 4.53341 8.66667 4.80008V11.3667ZM8 12.9834C7.84445 12.9834 7.69722 12.964 7.55833 12.9251C7.41945 12.8862 7.28889 12.8334 7.16667 12.7667C6.73333 12.5112 6.27778 12.3195 5.8 12.1917C5.32222 12.064 4.83333 12.0001 4.33333 12.0001C3.86667 12.0001 3.40833 12.0612 2.95833 12.1834C2.50833 12.3056 2.07778 12.4779 1.66667 12.7001C1.43333 12.8223 1.20833 12.8167 0.991668 12.6834C0.775001 12.5501 0.666668 12.3556 0.666668 12.1001V4.06675C0.666668 3.94453 0.697223 3.82786 0.758335 3.71675C0.819446 3.60564 0.911112 3.5223 1.03333 3.46675C1.54445 3.20008 2.07778 3.00008 2.63333 2.86675C3.18889 2.73341 3.75556 2.66675 4.33333 2.66675C4.97778 2.66675 5.60833 2.75008 6.225 2.91675C6.84167 3.08341 7.43333 3.33341 8 3.66675C8.56667 3.33341 9.15833 3.08341 9.775 2.91675C10.3917 2.75008 11.0222 2.66675 11.6667 2.66675C12.2444 2.66675 12.8111 2.73341 13.3667 2.86675C13.9222 3.00008 14.4556 3.20008 14.9667 3.46675C15.0889 3.5223 15.1806 3.60564 15.2417 3.71675C15.3028 3.82786 15.3333 3.94453 15.3333 4.06675V12.1001C15.3333 12.3556 15.225 12.5501 15.0083 12.6834C14.7917 12.8167 14.5667 12.8223 14.3333 12.7001C13.9222 12.4779 13.4917 12.3056 13.0417 12.1834C12.5917 12.0612 12.1333 12.0001 11.6667 12.0001C11.1667 12.0001 10.6778 12.064 10.2 12.1917C9.72222 12.3195 9.26667 12.5112 8.83333 12.7667C8.71111 12.8334 8.58056 12.8862 8.44167 12.9251C8.30278 12.964 8.15556 12.9834 8 12.9834Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M14 8.775C14 8.625 14.0542 8.47083 14.1625 8.3125C14.2708 8.15417 14.3917 8.05 14.525 8C15.0083 7.83333 15.4917 7.70833 15.975 7.625C16.4583 7.54167 16.9667 7.5 17.5 7.5C17.8333 7.5 18.1625 7.52083 18.4875 7.5625C18.8125 7.60417 19.1333 7.65833 19.45 7.725C19.6 7.75833 19.7292 7.84167 19.8375 7.975C19.9458 8.10833 20 8.25833 20 8.425C20 8.70833 19.9083 8.91667 19.725 9.05C19.5417 9.18333 19.3083 9.21667 19.025 9.15C18.7917 9.1 18.5458 9.0625 18.2875 9.0375C18.0292 9.0125 17.7667 9 17.5 9C17.0667 9 16.6417 9.04167 16.225 9.125C15.8083 9.20833 15.4083 9.31667 15.025 9.45C14.725 9.56667 14.4792 9.55833 14.2875 9.425C14.0958 9.29167 14 9.075 14 8.775ZM14 14.275C14 14.125 14.0542 13.9708 14.1625 13.8125C14.2708 13.6542 14.3917 13.55 14.525 13.5C15.0083 13.3333 15.4917 13.2083 15.975 13.125C16.4583 13.0417 16.9667 13 17.5 13C17.8333 13 18.1625 13.0208 18.4875 13.0625C18.8125 13.1042 19.1333 13.1583 19.45 13.225C19.6 13.2583 19.7292 13.3417 19.8375 13.475C19.9458 13.6083 20 13.7583 20 13.925C20 14.2083 19.9083 14.4167 19.725 14.55C19.5417 14.6833 19.3083 14.7167 19.025 14.65C18.7917 14.6 18.5458 14.5625 18.2875 14.5375C18.0292 14.5125 17.7667 14.5 17.5 14.5C17.0667 14.5 16.6417 14.5375 16.225 14.6125C15.8083 14.6875 15.4083 14.7917 15.025 14.925C14.725 15.0417 14.4792 15.0375 14.2875 14.9125C14.0958 14.7875 14 14.575 14 14.275ZM14 11.525C14 11.375 14.0542 11.2208 14.1625 11.0625C14.2708 10.9042 14.3917 10.8 14.525 10.75C15.0083 10.5833 15.4917 10.4583 15.975 10.375C16.4583 10.2917 16.9667 10.25 17.5 10.25C17.8333 10.25 18.1625 10.2708 18.4875 10.3125C18.8125 10.3542 19.1333 10.4083 19.45 10.475C19.6 10.5083 19.7292 10.5917 19.8375 10.725C19.9458 10.8583 20 11.0083 20 11.175C20 11.4583 19.9083 11.6667 19.725 11.8C19.5417 11.9333 19.3083 11.9667 19.025 11.9C18.7917 11.85 18.5458 11.8125 18.2875 11.7875C18.0292 11.7625 17.7667 11.75 17.5 11.75C17.0667 11.75 16.6417 11.7917 16.225 11.875C15.8083 11.9583 15.4083 12.0667 15.025 12.2C14.725 12.3167 14.4792 12.3083 14.2875 12.175C14.0958 12.0417 14 11.825 14 11.525ZM6.5 16C7.28333 16 8.04583 16.0875 8.7875 16.2625C9.52917 16.4375 10.2667 16.7 11 17.05V7.2C10.3167 6.8 9.59167 6.5 8.825 6.3C8.05833 6.1 7.28333 6 6.5 6C5.9 6 5.30417 6.05833 4.7125 6.175C4.12083 6.29167 3.55 6.46667 3 6.7V16.6C3.58333 16.4 4.1625 16.25 4.7375 16.15C5.3125 16.05 5.9 16 6.5 16ZM13 17.05C13.7333 16.7 14.4708 16.4375 15.2125 16.2625C15.9542 16.0875 16.7167 16 17.5 16C18.1 16 18.6875 16.05 19.2625 16.15C19.8375 16.25 20.4167 16.4 21 16.6V6.7C20.45 6.46667 19.8792 6.29167 19.2875 6.175C18.6958 6.05833 18.1 6 17.5 6C16.7167 6 15.9417 6.1 15.175 6.3C14.4083 6.5 13.6833 6.8 13 7.2V17.05ZM12 19.475C11.7667 19.475 11.5458 19.4458 11.3375 19.3875C11.1292 19.3292 10.9333 19.25 10.75 19.15C10.1 18.7667 9.41667 18.4792 8.7 18.2875C7.98333 18.0958 7.25 18 6.5 18C5.8 18 5.1125 18.0917 4.4375 18.275C3.7625 18.4583 3.11667 18.7167 2.5 19.05C2.15 19.2333 1.8125 19.225 1.4875 19.025C1.1625 18.825 1 18.5333 1 18.15V6.1C1 5.91667 1.04583 5.74167 1.1375 5.575C1.22917 5.40833 1.36667 5.28333 1.55 5.2C2.31667 4.8 3.11667 4.5 3.95 4.3C4.78333 4.1 5.63333 4 6.5 4C7.46667 4 8.4125 4.125 9.3375 4.375C10.2625 4.625 11.15 5 12 5.5C12.85 5 13.7375 4.625 14.6625 4.375C15.5875 4.125 16.5333 4 17.5 4C18.3667 4 19.2167 4.1 20.05 4.3C20.8833 4.5 21.6833 4.8 22.45 5.2C22.6333 5.28333 22.7708 5.40833 22.8625 5.575C22.9542 5.74167 23 5.91667 23 6.1V18.15C23 18.5333 22.8375 18.825 22.5125 19.025C22.1875 19.225 21.85 19.2333 21.5 19.05C20.8833 18.7167 20.2375 18.4583 19.5625 18.275C18.8875 18.0917 18.2 18 17.5 18C16.75 18 16.0167 18.0958 15.3 18.2875C14.5833 18.4792 13.9 18.7667 13.25 19.15C13.0667 19.25 12.8708 19.3292 12.6625 19.3875C12.4542 19.4458 12.2333 19.475 12 19.475Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M16.3333 10.2376C16.3333 10.0626 16.3965 9.88272 16.5229 9.698C16.6493 9.51328 16.7903 9.39175 16.9458 9.33341C17.5097 9.13897 18.0736 8.99314 18.6375 8.89591C19.2014 8.79869 19.7944 8.75008 20.4167 8.75008C20.8056 8.75008 21.1896 8.77439 21.5687 8.823C21.9479 8.87161 22.3222 8.9348 22.6917 9.01258C22.8667 9.05147 23.0174 9.14869 23.1437 9.30425C23.2701 9.4598 23.3333 9.6348 23.3333 9.82925C23.3333 10.1598 23.2264 10.4029 23.0125 10.5584C22.7986 10.714 22.5264 10.7529 22.1958 10.6751C21.9236 10.6167 21.6368 10.573 21.3354 10.5438C21.034 10.5147 20.7278 10.5001 20.4167 10.5001C19.9111 10.5001 19.4153 10.5487 18.9292 10.6459C18.4431 10.7431 17.9764 10.8695 17.5292 11.0251C17.1792 11.1612 16.8924 11.1515 16.6687 10.9959C16.4451 10.8404 16.3333 10.5876 16.3333 10.2376ZM16.3333 16.6542C16.3333 16.4792 16.3965 16.2994 16.5229 16.1147C16.6493 15.9299 16.7903 15.8084 16.9458 15.7501C17.5097 15.5556 18.0736 15.4098 18.6375 15.3126C19.2014 15.2154 19.7944 15.1667 20.4167 15.1667C20.8056 15.1667 21.1896 15.1911 21.5687 15.2397C21.9479 15.2883 22.3222 15.3515 22.6917 15.4292C22.8667 15.4681 23.0174 15.5654 23.1437 15.7209C23.2701 15.8765 23.3333 16.0515 23.3333 16.2459C23.3333 16.5765 23.2264 16.8195 23.0125 16.9751C22.7986 17.1306 22.5264 17.1695 22.1958 17.0917C21.9236 17.0334 21.6368 16.9897 21.3354 16.9605C21.034 16.9313 20.7278 16.9167 20.4167 16.9167C19.9111 16.9167 19.4153 16.9605 18.9292 17.048C18.4431 17.1355 17.9764 17.257 17.5292 17.4126C17.1792 17.5487 16.8924 17.5438 16.6687 17.398C16.4451 17.2522 16.3333 17.0042 16.3333 16.6542ZM16.3333 13.4459C16.3333 13.2709 16.3965 13.0911 16.5229 12.9063C16.6493 12.7216 16.7903 12.6001 16.9458 12.5417C17.5097 12.3473 18.0736 12.2015 18.6375 12.1042C19.2014 12.007 19.7944 11.9584 20.4167 11.9584C20.8056 11.9584 21.1896 11.9827 21.5687 12.0313C21.9479 12.0799 22.3222 12.1431 22.6917 12.2209C22.8667 12.2598 23.0174 12.357 23.1437 12.5126C23.2701 12.6681 23.3333 12.8431 23.3333 13.0376C23.3333 13.3681 23.2264 13.6112 23.0125 13.7667C22.7986 13.9223 22.5264 13.9612 22.1958 13.8834C21.9236 13.8251 21.6368 13.7813 21.3354 13.7522C21.034 13.723 20.7278 13.7084 20.4167 13.7084C19.9111 13.7084 19.4153 13.757 18.9292 13.8542C18.4431 13.9515 17.9764 14.0779 17.5292 14.2334C17.1792 14.3695 16.8924 14.3598 16.6687 14.2042C16.4451 14.0487 16.3333 13.7959 16.3333 13.4459ZM7.58333 18.6667C8.49722 18.6667 9.3868 18.7688 10.2521 18.973C11.1174 19.1772 11.9778 19.4834 12.8333 19.8917V8.40008C12.0361 7.93341 11.1903 7.58341 10.2958 7.35008C9.40139 7.11675 8.49722 7.00008 7.58333 7.00008C6.88333 7.00008 6.18819 7.06814 5.49791 7.20425C4.80764 7.34036 4.14166 7.54453 3.5 7.81675V19.3667C4.18055 19.1334 4.85625 18.9584 5.52708 18.8417C6.19791 18.7251 6.88333 18.6667 7.58333 18.6667ZM15.1667 19.8917C16.0222 19.4834 16.8826 19.1772 17.7479 18.973C18.6132 18.7688 19.5028 18.6667 20.4167 18.6667C21.1167 18.6667 21.8021 18.7251 22.4729 18.8417C23.1437 18.9584 23.8194 19.1334 24.5 19.3667V7.81675C23.8583 7.54453 23.1924 7.34036 22.5021 7.20425C21.8118 7.06814 21.1167 7.00008 20.4167 7.00008C19.5028 7.00008 18.5986 7.11675 17.7042 7.35008C16.8097 7.58341 15.9639 7.93341 15.1667 8.40008V19.8917ZM14 22.7209C13.7278 22.7209 13.4701 22.6869 13.2271 22.6188C12.984 22.5508 12.7556 22.4584 12.5417 22.3417C11.7833 21.8945 10.9861 21.5591 10.15 21.3355C9.31389 21.1119 8.45833 21.0001 7.58333 21.0001C6.76666 21.0001 5.96458 21.107 5.17708 21.3209C4.38958 21.5348 3.63611 21.8362 2.91666 22.2251C2.50833 22.439 2.11458 22.4292 1.73541 22.1959C1.35625 21.9626 1.16666 21.6223 1.16666 21.1751V7.11675C1.16666 6.90286 1.22014 6.69869 1.32708 6.50425C1.43403 6.3098 1.59444 6.16397 1.80833 6.06675C2.70278 5.60008 3.63611 5.25008 4.60833 5.01675C5.58055 4.78341 6.57222 4.66675 7.58333 4.66675C8.71111 4.66675 9.81458 4.81258 10.8937 5.10425C11.9729 5.39591 13.0083 5.83341 14 6.41675C14.9917 5.83341 16.0271 5.39591 17.1062 5.10425C18.1854 4.81258 19.2889 4.66675 20.4167 4.66675C21.4278 4.66675 22.4194 4.78341 23.3917 5.01675C24.3639 5.25008 25.2972 5.60008 26.1917 6.06675C26.4056 6.16397 26.566 6.3098 26.6729 6.50425C26.7799 6.69869 26.8333 6.90286 26.8333 7.11675V21.1751C26.8333 21.6223 26.6437 21.9626 26.2646 22.1959C25.8854 22.4292 25.4917 22.439 25.0833 22.2251C24.3639 21.8362 23.6104 21.5348 22.8229 21.3209C22.0354 21.107 21.2333 21.0001 20.4167 21.0001C19.5417 21.0001 18.6861 21.1119 17.85 21.3355C17.0139 21.5591 16.2167 21.8945 15.4583 22.3417C15.2444 22.4584 15.016 22.5508 14.7729 22.6188C14.5299 22.6869 14.2722 22.7209 14 22.7209Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-menu-book"; }
+  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-lightbox/swirl-lightbox.css

@@ -93,7 +93,7 @@
   }
 
 .lightbox__close-button,
-.lightbox__download-button,
+.lightbox__menu-button,
 .lightbox__previous-slide-button,
 .lightbox__next-slide-button {
   display: inline-flex;
@@ -110,7 +110,7 @@
   pointer-events: auto;
 }
 
-.lightbox__close-button:disabled, .lightbox__download-button:disabled, .lightbox__previous-slide-button:disabled, .lightbox__next-slide-button:disabled {
+.lightbox__close-button:disabled, .lightbox__menu-button:disabled, .lightbox__previous-slide-button:disabled, .lightbox__next-slide-button:disabled {
     pointer-events: none;
     opacity: 0;
   }
@@ -171,6 +171,35 @@
 }
   }
 
+.lightbox__meta {
+  display: flex;
+  padding-top: var(--s-space-4);
+  padding-right: var(--s-space-16);
+  padding-bottom: var(--s-space-4);
+  padding-left: var(--s-space-16);
+  align-items: center;
+  gap: var(--s-space-12);
+}
+
+@media (min-width: 768px) {
+
+.lightbox__meta {
+    max-width: 18rem
+}
+  }
+
+.lightbox__thumbnail {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.lightbox__file-info {
+  display: flex;
+  min-width: 0;
+  flex-grow: 1;
+  flex-direction: column;
+}
+
 @-webkit-keyframes lightbox-fade-in {
   from {
     opacity: 0;