@getflip/swirl-components 0.197.1 → 0.199.0

package/dist/collection/components/swirl-icon/icons/swirl-icon-dock-left.js

@@ -2,77 +2,79 @@
 import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconDockLeft {
-  constructor() {
-    this.color = undefined;
-    this.size = 24;
-  }
-  render() {
-    const viewBoxSize = this.size === 20 ? 24 : this.size;
-    const styles = {
-      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
-    };
-    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, 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.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13056 2.96667 2 3.33333 2H12.6667C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333V12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14H3.33333ZM5.33333 12.6667V3.33333H3.33333V12.6667H5.33333ZM6.66667 12.6667H12.6667V3.33333H6.66667V12.6667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M5.83333 24.5C5.19167 24.5 4.64236 24.2715 4.18542 23.8146C3.72847 23.3576 3.5 22.8083 3.5 22.1667V5.83333C3.5 5.19167 3.72847 4.64236 4.18542 4.18542C4.64236 3.72847 5.19167 3.5 5.83333 3.5H22.1667C22.8083 3.5 23.3576 3.72847 23.8146 4.18542C24.2715 4.64236 24.5 5.19167 24.5 5.83333V22.1667C24.5 22.8083 24.2715 23.3576 23.8146 23.8146C23.3576 24.2715 22.8083 24.5 22.1667 24.5H5.83333ZM9.33333 22.1667V5.83333H5.83333V22.1667H9.33333ZM11.6667 22.1667H22.1667V5.83333H11.6667V22.1667Z", fill: "currentColor" })))));
-  }
-  static get is() { return "swirl-icon-dock-left"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../swirl-icon.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../swirl-icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "SwirlIconColor",
-          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
-          "references": {
-            "SwirlIconColor": {
-              "location": "import",
-              "path": "../swirl-icon"
+    constructor() {
+        this.color = undefined;
+        this.size = 24;
+    }
+    render() {
+        const viewBoxSize = this.size === 20 ? 24 : this.size;
+        const styles = {
+            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+        };
+        const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+        return (h("svg", { key: '1c56a358ed7c75df6ce4a5dc18c6be1646ee6e20', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: 'f1deafebebc30c9d448d4cc1947164fa269180f5' }, h("path", { key: '443ceb8bbd13fed7c4d17082f2487cc903574dba', d: "M3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13056 2.96667 2 3.33333 2H12.6667C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333V12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14H3.33333ZM5.33333 12.6667V3.33333H3.33333V12.6667H5.33333ZM6.66667 12.6667H12.6667V3.33333H6.66667V12.6667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'ca089bc595b2d79f03efc02af2f076330453954c' }, h("path", { key: 'cbecd0e04c60d213af1e3f4638b3e76cee952a67', d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: '837339a32515d9bd0a20b5b09ae803e7bc856ba7' }, h("path", { key: 'e183bb5dbff4e4f7ca8e7d2841cc7f3c235a5198', d: "M5.83333 24.5C5.19167 24.5 4.64236 24.2715 4.18542 23.8146C3.72847 23.3576 3.5 22.8083 3.5 22.1667V5.83333C3.5 5.19167 3.72847 4.64236 4.18542 4.18542C4.64236 3.72847 5.19167 3.5 5.83333 3.5H22.1667C22.8083 3.5 23.3576 3.72847 23.8146 4.18542C24.2715 4.64236 24.5 5.19167 24.5 5.83333V22.1667C24.5 22.8083 24.2715 23.3576 23.8146 23.8146C23.3576 24.2715 22.8083 24.5 22.1667 24.5H5.83333ZM9.33333 22.1667V5.83333H5.83333V22.1667H9.33333ZM11.6667 22.1667H22.1667V5.83333H11.6667V22.1667Z", fill: "currentColor" })))));
+    }
+    static get is() { return "swirl-icon-dock-left"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconColor",
+                    "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                    "references": {
+                        "SwirlIconColor": {
+                            "location": "import",
+                            "path": "../swirl-icon",
+                            "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconSize",
+                    "resolved": "16 | 20 | 24 | 28",
+                    "references": {
+                        "SwirlIconSize": {
+                            "location": "import",
+                            "path": "../swirl-icon.types",
+                            "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "24"
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "color",
-        "reflect": false
-      },
-      "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-dot.js

@@ -2,77 +2,79 @@
 import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconDot {
-  constructor() {
-    this.color = undefined;
-    this.size = 24;
-  }
-  render() {
-    const viewBoxSize = this.size === 20 ? 24 : this.size;
-    const styles = {
-      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
-    };
-    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, 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 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M17.5 14C17.5 15.933 15.933 17.5 14 17.5C12.067 17.5 10.5 15.933 10.5 14C10.5 12.067 12.067 10.5 14 10.5C15.933 10.5 17.5 12.067 17.5 14Z", fill: "currentColor" })))));
-  }
-  static get is() { return "swirl-icon-dot"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../swirl-icon.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../swirl-icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "SwirlIconColor",
-          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
-          "references": {
-            "SwirlIconColor": {
-              "location": "import",
-              "path": "../swirl-icon"
+    constructor() {
+        this.color = undefined;
+        this.size = 24;
+    }
+    render() {
+        const viewBoxSize = this.size === 20 ? 24 : this.size;
+        const styles = {
+            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+        };
+        const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+        return (h("svg", { key: '4612adf86209efa0db7407bb6bdc51307882c83e', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: '66f6aa1f2c6da8c66d97d761d5fd8b8c205b6137' }, h("path", { key: '83261e0d5f9f37af633070b891a49726d5ae3a1b', d: "M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'd9c5ea48d10624029bc09eb337a7a479021dc910' }, h("path", { key: '445ba2961269d2bdefb3104e3539005b8de14d63', d: "M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: 'fc1bceae6081dfea277e22721aaccb23186b26ee' }, h("path", { key: '82b9414c289ed9011a557e00d9d7877ee91eb93b', d: "M17.5 14C17.5 15.933 15.933 17.5 14 17.5C12.067 17.5 10.5 15.933 10.5 14C10.5 12.067 12.067 10.5 14 10.5C15.933 10.5 17.5 12.067 17.5 14Z", fill: "currentColor" })))));
+    }
+    static get is() { return "swirl-icon-dot"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconColor",
+                    "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                    "references": {
+                        "SwirlIconColor": {
+                            "location": "import",
+                            "path": "../swirl-icon",
+                            "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconSize",
+                    "resolved": "16 | 20 | 24 | 28",
+                    "references": {
+                        "SwirlIconSize": {
+                            "location": "import",
+                            "path": "../swirl-icon.types",
+                            "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "24"
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "color",
-        "reflect": false
-      },
-      "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-left.js

@@ -2,77 +2,79 @@
 import { Fragment, h } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlIconDoubleArrowLeft {
-  constructor() {
-    this.color = undefined;
-    this.size = 24;
-  }
-  render() {
-    const viewBoxSize = this.size === 20 ? 24 : this.size;
-    const styles = {
-      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
-    };
-    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (h("svg", { "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, 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 {
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "SwirlIconColor",
-          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
-          "references": {
-            "SwirlIconColor": {
-              "location": "import",
-              "path": "../swirl-icon"
+    constructor() {
+        this.color = undefined;
+        this.size = 24;
+    }
+    render() {
+        const viewBoxSize = this.size === 20 ? 24 : this.size;
+        const styles = {
+            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+        };
+        const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+        return (h("svg", { key: 'f660dfc33535e3971a021151c71e16931963c266', "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, { key: 'b1f7d379ca466e7020ddd0d106788cfb0687feee' }, h("path", { key: '18aeb2ca02f14d643d7284776a0db306eaa20dcb', 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, { key: '44635a8d69728055c95e1e099b7f00b91085ea2c' }, h("path", { key: '5929497a8f62d1a6cd9ac51ba9073119f7ed2df8', 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, { key: 'e66795ebe9e23e7747bbc380272f2637d978d68e' }, h("path", { key: 'b619332bb57c19b0bfc982aacb41338e1f6d7916', 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 {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconColor",
+                    "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                    "references": {
+                        "SwirlIconColor": {
+                            "location": "import",
+                            "path": "../swirl-icon",
+                            "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconSize",
+                    "resolved": "16 | 20 | 24 | 28",
+                    "references": {
+                        "SwirlIconSize": {
+                            "location": "import",
+                            "path": "../swirl-icon.types",
+                            "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "24"
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "color",
-        "reflect": false
-      },
-      "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"
-      }
-    };
-  }
+        };
+    }
 }