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

package/dist/collection/components/swirl-form-group/swirl-form-group.stories.js

@@ -0,0 +1,32 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-form-group.mdx";
+export default {
+  component: "swirl-form-group",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlFormGroup",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-form-group", args);
+  element.innerHTML = `
+    <swirl-form-group orientation="horizontal">
+      <swirl-form-control label="First name">
+        <swirl-text-input type="text" value="John"></swirl-text-input>
+      </swirl-form-control>
+      <swirl-form-control label="Last name">
+        <swirl-text-input type="text" value="Doe"></swirl-text-input>
+      </swirl-form-control>
+    </swirl-form-group>
+
+    <swirl-form-control label="Email">
+      <swirl-text-input type="email"></swirl-text-input>
+    </swirl-form-control>
+  `;
+  return element;
+};
+export const SwirlFormGroup = Template.bind({});
+SwirlFormGroup.args = {};

package/dist/collection/components/swirl-heading/swirl-heading.css

@@ -0,0 +1,70 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.heading {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  text-align: start;
+}
+
+.heading--balanced {
+  text-wrap: balance;
+}
+
+.heading--align-start {
+  text-align: start;
+}
+
+.heading--align-center {
+  text-align: center;
+}
+
+.heading--align-end {
+  text-align: end;
+}
+
+.heading--level-1 {
+  font-size: var(--s-font-size-2xl);
+  font-weight: var(--s-font-weight-bold);
+  line-height: var(--s-line-height-2xl);
+  letter-spacing: var(--s-letter-spacing-tight);
+}
+
+.heading--level-2 {
+  font-size: var(--s-font-size-xl);
+  font-weight: var(--s-font-weight-bold);
+  line-height: var(--s-line-height-xl);
+}
+
+.heading--level-3 {
+  font-size: var(--s-font-size-lg);
+  font-weight: var(--s-font-weight-semibold);
+  line-height: var(--s-line-height-lg);
+}
+
+.heading--level-4 {
+  font-size: var(--s-font-size-base);
+  font-weight: var(--s-font-weight-semibold);
+  line-height: var(--s-line-height-base);
+}
+
+.heading--level-5,
+.heading--level-6 {
+  font-size: var(--s-font-size-sm);
+  font-weight: var(--s-font-weight-semibold);
+  line-height: var(--s-line-height-sm);
+}
+
+.heading--truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/dist/collection/components/swirl-heading/swirl-heading.js

@@ -0,0 +1,201 @@
+import { h, Host } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlHeading {
+  constructor() {
+    this.align = "start";
+    this.as = undefined;
+    this.balance = true;
+    this.headingId = undefined;
+    this.level = 1;
+    this.lines = undefined;
+    this.text = undefined;
+    this.truncate = undefined;
+  }
+  render() {
+    const Tag = this.as || `h${this.level}`;
+    const styles = Boolean(this.lines)
+      ? {
+        display: "-webkit-box",
+        overflow: "hidden",
+        "-webkit-line-clamp": String(this.lines),
+        "-webkit-box-orient": "vertical",
+        whiteSpace: "normal",
+      }
+      : undefined;
+    const className = classnames("heading", `heading--align-${this.align}`, `heading--level-${this.level}`, {
+      "heading--balanced": this.balance,
+      "heading--truncate": this.truncate,
+    });
+    return (h(Host, null, h(Tag, { class: className, id: this.headingId, style: styles }, this.text)));
+  }
+  static get is() { return "swirl-heading"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-heading.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-heading.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "align": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlHeadingAlign",
+          "resolved": "\"center\" | \"end\" | \"start\"",
+          "references": {
+            "SwirlHeadingAlign": {
+              "location": "local",
+              "path": "/Users/philip/Entwicklung/swirl/packages/swirl-components/src/components/swirl-heading/swirl-heading.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "align",
+        "reflect": false,
+        "defaultValue": "\"start\""
+      },
+      "as": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlHeadingTag",
+          "resolved": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\"",
+          "references": {
+            "SwirlHeadingTag": {
+              "location": "local",
+              "path": "/Users/philip/Entwicklung/swirl/packages/swirl-components/src/components/swirl-heading/swirl-heading.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "as",
+        "reflect": false
+      },
+      "balance": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "balance",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "headingId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading-id",
+        "reflect": false
+      },
+      "level": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlHeadingLevel",
+          "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+          "references": {
+            "SwirlHeadingLevel": {
+              "location": "local",
+              "path": "/Users/philip/Entwicklung/swirl/packages/swirl-components/src/components/swirl-heading/swirl-heading.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "level",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "lines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "lines",
+        "reflect": false
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text",
+        "reflect": false
+      },
+      "truncate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "truncate",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-heading/swirl-heading.spec.js

@@ -0,0 +1,28 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlHeading } from "./swirl-heading";
+describe("swirl-heading", () => {
+  it("renders its level and text", async () => {
+    const page = await newSpecPage({
+      components: [SwirlHeading],
+      html: `<swirl-heading heading-id="id" level="3">Heading</swirl-heading>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-heading heading-id="id" level="3">
+        Heading
+        <h3 class="heading heading--align-start heading--balanced heading--level-3" id="id"></h3>
+      </swirl-heading>
+    `);
+  });
+  it("allows to render deviating visual level", async () => {
+    const page = await newSpecPage({
+      components: [SwirlHeading],
+      html: `<swirl-heading as="h6" heading-id="id" level="3">Heading</swirl-heading>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-heading as="h6" heading-id="id" level="3">
+        Heading
+        <h6 class="heading heading--align-start heading--balanced heading--level-3" id="id"></h6>
+      </swirl-heading>
+    `);
+  });
+});

package/dist/collection/components/swirl-heading/swirl-heading.stories.js

@@ -0,0 +1,25 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-heading.mdx";
+export default {
+  argTypes: {
+    balance: {
+      description: "Balances the text across lines to prevent visually undesirable results like typographic widows.",
+    },
+  },
+  component: "swirl-heading",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlHeading",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-heading", args);
+  return element;
+};
+export const SwirlHeading = Template.bind({});
+SwirlHeading.args = {
+  text: "Headline: A line of words printed in large letters as the title of a story",
+};

package/dist/collection/components/swirl-icon/icons/swirl-icon-add-photo.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 SwirlIconAddPhoto {
+  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: "M1.99999 14.6666C1.63332 14.6666 1.31955 14.5362 1.05866 14.2753C0.797323 14.014 0.666656 13.7 0.666656 13.3333V5.33331C0.666656 4.96665 0.797323 4.65287 1.05866 4.39198C1.31955 4.13065 1.63332 3.99998 1.99999 3.99998H4.09999L4.93332 3.09998C5.05555 2.96665 5.20266 2.86109 5.37466 2.78331C5.5471 2.70554 5.72777 2.66665 5.91666 2.66665H8.66666C8.85555 2.66665 9.01399 2.73042 9.14199 2.85798C9.26955 2.98598 9.33332 3.14442 9.33332 3.33331V4.66665C9.33332 4.85553 9.39732 5.01398 9.52532 5.14198C9.65288 5.26953 9.8111 5.33331 9.99999 5.33331H11.3333V6.66665C11.3333 6.85553 11.3973 7.01376 11.5253 7.14131C11.6529 7.26931 11.8111 7.33331 12 7.33331H13.3333C13.5222 7.33331 13.6804 7.39709 13.808 7.52465C13.936 7.65265 14 7.81109 14 7.99998V13.3333C14 13.7 13.8695 14.014 13.6087 14.2753C13.3473 14.5362 13.0333 14.6666 12.6667 14.6666H1.99999ZM7.33332 12.3333C8.16666 12.3333 8.8751 12.0418 9.45866 11.4586C10.0418 10.8751 10.3333 10.1666 10.3333 9.33331C10.3333 8.49998 10.0418 7.79153 9.45866 7.20798C8.8751 6.62487 8.16666 6.33331 7.33332 6.33331C6.49999 6.33331 5.79155 6.62487 5.20799 7.20798C4.62488 7.79153 4.33332 8.49998 4.33332 9.33331C4.33332 10.1666 4.62488 10.8751 5.20799 11.4586C5.79155 12.0418 6.49999 12.3333 7.33332 12.3333ZM12.6667 3.99998H12C11.8111 3.99998 11.6529 3.9362 11.5253 3.80865C11.3973 3.68065 11.3333 3.5222 11.3333 3.33331C11.3333 3.14442 11.3973 2.98598 11.5253 2.85798C11.6529 2.73042 11.8111 2.66665 12 2.66665H12.6667V1.99998C12.6667 1.81109 12.7307 1.65265 12.8587 1.52465C12.9862 1.39709 13.1444 1.33331 13.3333 1.33331C13.5222 1.33331 13.6804 1.39709 13.808 1.52465C13.936 1.65265 14 1.81109 14 1.99998V2.66665H14.6667C14.8555 2.66665 15.0138 2.73042 15.1413 2.85798C15.2693 2.98598 15.3333 3.14442 15.3333 3.33331C15.3333 3.5222 15.2693 3.68065 15.1413 3.80865C15.0138 3.9362 14.8555 3.99998 14.6667 3.99998H14V4.66665C14 4.85553 13.936 5.01398 13.808 5.14198C13.6804 5.26953 13.5222 5.33331 13.3333 5.33331C13.1444 5.33331 12.9862 5.26953 12.8587 5.14198C12.7307 5.01398 12.6667 4.85553 12.6667 4.66665V3.99998Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M3 22C2.45 22 1.97933 21.8043 1.588 21.413C1.196 21.021 1 20.55 1 20V8C1 7.45 1.196 6.97933 1.588 6.588C1.97933 6.196 2.45 6 3 6H6.15L7.4 4.65C7.58333 4.45 7.804 4.29167 8.062 4.175C8.32067 4.05833 8.59167 4 8.875 4H13C13.2833 4 13.521 4.09567 13.713 4.287C13.9043 4.479 14 4.71667 14 5V7C14 7.28333 14.096 7.521 14.288 7.713C14.4793 7.90433 14.7167 8 15 8H17V10C17 10.2833 17.096 10.5207 17.288 10.712C17.4793 10.904 17.7167 11 18 11H20C20.2833 11 20.5207 11.0957 20.712 11.287C20.904 11.479 21 11.7167 21 12V20C21 20.55 20.8043 21.021 20.413 21.413C20.021 21.8043 19.55 22 19 22H3ZM11 18.5C12.25 18.5 13.3127 18.0627 14.188 17.188C15.0627 16.3127 15.5 15.25 15.5 14C15.5 12.75 15.0627 11.6873 14.188 10.812C13.3127 9.93733 12.25 9.5 11 9.5C9.75 9.5 8.68733 9.93733 7.812 10.812C6.93733 11.6873 6.5 12.75 6.5 14C6.5 15.25 6.93733 16.3127 7.812 17.188C8.68733 18.0627 9.75 18.5 11 18.5ZM19 6H18C17.7167 6 17.4793 5.90433 17.288 5.713C17.096 5.521 17 5.28333 17 5C17 4.71667 17.096 4.479 17.288 4.287C17.4793 4.09567 17.7167 4 18 4H19V3C19 2.71667 19.096 2.479 19.288 2.287C19.4793 2.09567 19.7167 2 20 2C20.2833 2 20.5207 2.09567 20.712 2.287C20.904 2.479 21 2.71667 21 3V4H22C22.2833 4 22.5207 4.09567 22.712 4.287C22.904 4.479 23 4.71667 23 5C23 5.28333 22.904 5.521 22.712 5.713C22.5207 5.90433 22.2833 6 22 6H21V7C21 7.28333 20.904 7.521 20.712 7.713C20.5207 7.90433 20.2833 8 20 8C19.7167 8 19.4793 7.90433 19.288 7.713C19.096 7.521 19 7.28333 19 7V6Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M3.49999 25.6666C2.85832 25.6666 2.30921 25.4384 1.85266 24.9818C1.39532 24.5245 1.16666 23.975 1.16666 23.3333V9.33331C1.16666 8.69165 1.39532 8.14254 1.85266 7.68598C2.30921 7.22865 2.85832 6.99998 3.49999 6.99998H7.17499L8.63332 5.42498C8.84721 5.19165 9.10466 5.00692 9.40566 4.87081C9.70743 4.7347 10.0236 4.66665 10.3542 4.66665H15.1667C15.4972 4.66665 15.7745 4.77826 15.9985 5.00148C16.2217 5.22548 16.3333 5.50276 16.3333 5.83331V8.16665C16.3333 8.4972 16.4453 8.77448 16.6693 8.99848C16.8925 9.2217 17.1694 9.33331 17.5 9.33331H19.8333V11.6666C19.8333 11.9972 19.9453 12.2741 20.1693 12.4973C20.3925 12.7213 20.6694 12.8333 21 12.8333H23.3333C23.6639 12.8333 23.9408 12.9449 24.164 13.1681C24.388 13.3921 24.5 13.6694 24.5 14V23.3333C24.5 23.975 24.2717 24.5245 23.8152 24.9818C23.3578 25.4384 22.8083 25.6666 22.1667 25.6666H3.49999ZM12.8333 21.5833C14.2917 21.5833 15.5314 21.0731 16.5527 20.0526C17.5731 19.0314 18.0833 17.7916 18.0833 16.3333C18.0833 14.875 17.5731 13.6352 16.5527 12.614C15.5314 11.5935 14.2917 11.0833 12.8333 11.0833C11.375 11.0833 10.1352 11.5935 9.11399 12.614C8.09354 13.6352 7.58332 14.875 7.58332 16.3333C7.58332 17.7916 8.09354 19.0314 9.11399 20.0526C10.1352 21.0731 11.375 21.5833 12.8333 21.5833ZM22.1667 6.99998H21C20.6694 6.99998 20.3925 6.88837 20.1693 6.66515C19.9453 6.44115 19.8333 6.16387 19.8333 5.83331C19.8333 5.50276 19.9453 5.22548 20.1693 5.00148C20.3925 4.77826 20.6694 4.66665 21 4.66665H22.1667V3.49998C22.1667 3.16942 22.2787 2.89215 22.5027 2.66815C22.7259 2.44492 23.0028 2.33331 23.3333 2.33331C23.6639 2.33331 23.9408 2.44492 24.164 2.66815C24.388 2.89215 24.5 3.16942 24.5 3.49998V4.66665H25.6667C25.9972 4.66665 26.2741 4.77826 26.4973 5.00148C26.7213 5.22548 26.8333 5.50276 26.8333 5.83331C26.8333 6.16387 26.7213 6.44115 26.4973 6.66515C26.2741 6.88837 25.9972 6.99998 25.6667 6.99998H24.5V8.16665C24.5 8.4972 24.388 8.77448 24.164 8.99848C23.9408 9.2217 23.6639 9.33331 23.3333 9.33331C23.0028 9.33331 22.7259 9.2217 22.5027 8.99848C22.2787 8.77448 22.1667 8.4972 22.1667 8.16665V6.99998Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-add-photo"; }
+  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-add-reaction.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 SwirlIconAddReaction {
+  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("g", { "clip-path": "url(#clip0_336_89)" }, h("path", { d: "M8.00004 14.6665C7.07782 14.6665 6.21115 14.4915 5.40004 14.1415C4.58893 13.7915 3.88337 13.3165 3.28337 12.7165C2.68337 12.1165 2.20837 11.4109 1.85837 10.5998C1.50837 9.78873 1.33337 8.92206 1.33337 7.99984C1.33337 7.07762 1.50837 6.21095 1.85837 5.39984C2.20837 4.58873 2.68337 3.88317 3.28337 3.28317C3.88337 2.68317 4.58893 2.20817 5.40004 1.85817C6.21115 1.50817 7.07782 1.33317 8.00004 1.33317C8.47782 1.33317 8.93893 1.38039 9.38337 1.47484C9.82782 1.56928 10.2556 1.70539 10.6667 1.88317V3.38317C10.2778 3.16095 9.85837 2.98595 9.40837 2.85817C8.95837 2.73039 8.48893 2.6665 8.00004 2.6665C6.52226 2.6665 5.26393 3.18595 4.22504 4.22484C3.18615 5.26373 2.66671 6.52206 2.66671 7.99984C2.66671 9.47762 3.18615 10.7359 4.22504 11.7748C5.26393 12.8137 6.52226 13.3332 8.00004 13.3332C9.47782 13.3332 10.7362 12.8137 11.775 11.7748C12.8139 10.7359 13.3334 9.47762 13.3334 7.99984C13.3334 7.64428 13.2973 7.29984 13.225 6.9665C13.1528 6.63317 13.0556 6.31095 12.9334 5.99984H14.3667C14.4667 6.32206 14.5417 6.64706 14.5917 6.97484C14.6417 7.30262 14.6667 7.64428 14.6667 7.99984C14.6667 8.92206 14.4917 9.78873 14.1417 10.5998C13.7917 11.4109 13.3167 12.1165 12.7167 12.7165C12.1167 13.3165 11.4112 13.7915 10.6 14.1415C9.78893 14.4915 8.92226 14.6665 8.00004 14.6665ZM13.3334 3.33317H12.6667C12.4778 3.33317 12.3195 3.26928 12.1917 3.1415C12.0639 3.01373 12 2.85539 12 2.6665C12 2.47762 12.0639 2.31928 12.1917 2.1915C12.3195 2.06373 12.4778 1.99984 12.6667 1.99984H13.3334V1.33317C13.3334 1.14428 13.3973 0.985948 13.525 0.858171C13.6528 0.730393 13.8112 0.666504 14 0.666504C14.1889 0.666504 14.3473 0.730393 14.475 0.858171C14.6028 0.985948 14.6667 1.14428 14.6667 1.33317V1.99984H15.3334C15.5223 1.99984 15.6806 2.06373 15.8084 2.1915C15.9362 2.31928 16 2.47762 16 2.6665C16 2.85539 15.9362 3.01373 15.8084 3.1415C15.6806 3.26928 15.5223 3.33317 15.3334 3.33317H14.6667V3.99984C14.6667 4.18873 14.6028 4.34706 14.475 4.47484C14.3473 4.60262 14.1889 4.6665 14 4.6665C13.8112 4.6665 13.6528 4.60262 13.525 4.47484C13.3973 4.34706 13.3334 4.18873 13.3334 3.99984V3.33317ZM10.3334 7.33317C10.6112 7.33317 10.8473 7.23595 11.0417 7.0415C11.2362 6.84706 11.3334 6.61095 11.3334 6.33317C11.3334 6.05539 11.2362 5.81928 11.0417 5.62484C10.8473 5.43039 10.6112 5.33317 10.3334 5.33317C10.0556 5.33317 9.81949 5.43039 9.62504 5.62484C9.4306 5.81928 9.33337 6.05539 9.33337 6.33317C9.33337 6.61095 9.4306 6.84706 9.62504 7.0415C9.81949 7.23595 10.0556 7.33317 10.3334 7.33317ZM5.66671 7.33317C5.94449 7.33317 6.1806 7.23595 6.37504 7.0415C6.56949 6.84706 6.66671 6.61095 6.66671 6.33317C6.66671 6.05539 6.56949 5.81928 6.37504 5.62484C6.1806 5.43039 5.94449 5.33317 5.66671 5.33317C5.38893 5.33317 5.15282 5.43039 4.95837 5.62484C4.76393 5.81928 4.66671 6.05539 4.66671 6.33317C4.66671 6.61095 4.76393 6.84706 4.95837 7.0415C5.15282 7.23595 5.38893 7.33317 5.66671 7.33317ZM8.00004 11.6665C8.64449 11.6665 9.23893 11.5109 9.78337 11.1998C10.3278 10.8887 10.7667 10.4665 11.1 9.93317C11.1667 9.79984 11.1612 9.6665 11.0834 9.53317C11.0056 9.39984 10.8889 9.33317 10.7334 9.33317H5.26671C5.11115 9.33317 4.99449 9.39984 4.91671 9.53317C4.83893 9.6665 4.83337 9.79984 4.90004 9.93317C5.23337 10.4665 5.67504 10.8887 6.22504 11.1998C6.77504 11.5109 7.36671 11.6665 8.00004 11.6665Z", fill: "currentColor" })), h("defs", null, h("clipPath", { id: "clip0_336_89" }, h("rect", { width: "16", height: "16", fill: "currentColor" }))))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C12.7167 2 13.4083 2.07083 14.075 2.2125C14.7417 2.35417 15.3833 2.55833 16 2.825V5.075C15.4167 4.74167 14.7875 4.47917 14.1125 4.2875C13.4375 4.09583 12.7333 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 14.2167 4.77917 16.1042 6.3375 17.6625C7.89583 19.2208 9.78333 20 12 20C14.2167 20 16.1042 19.2208 17.6625 17.6625C19.2208 16.1042 20 14.2167 20 12C20 11.4667 19.9458 10.95 19.8375 10.45C19.7292 9.95 19.5833 9.46667 19.4 9H21.55C21.7 9.48333 21.8125 9.97083 21.8875 10.4625C21.9625 10.9542 22 11.4667 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM20 5H19C18.7167 5 18.4792 4.90417 18.2875 4.7125C18.0958 4.52083 18 4.28333 18 4C18 3.71667 18.0958 3.47917 18.2875 3.2875C18.4792 3.09583 18.7167 3 19 3H20V2C20 1.71667 20.0958 1.47917 20.2875 1.2875C20.4792 1.09583 20.7167 1 21 1C21.2833 1 21.5208 1.09583 21.7125 1.2875C21.9042 1.47917 22 1.71667 22 2V3H23C23.2833 3 23.5208 3.09583 23.7125 3.2875C23.9042 3.47917 24 3.71667 24 4C24 4.28333 23.9042 4.52083 23.7125 4.7125C23.5208 4.90417 23.2833 5 23 5H22V6C22 6.28333 21.9042 6.52083 21.7125 6.7125C21.5208 6.90417 21.2833 7 21 7C20.7167 7 20.4792 6.90417 20.2875 6.7125C20.0958 6.52083 20 6.28333 20 6V5ZM15.5 11C15.9167 11 16.2708 10.8542 16.5625 10.5625C16.8542 10.2708 17 9.91667 17 9.5C17 9.08333 16.8542 8.72917 16.5625 8.4375C16.2708 8.14583 15.9167 8 15.5 8C15.0833 8 14.7292 8.14583 14.4375 8.4375C14.1458 8.72917 14 9.08333 14 9.5C14 9.91667 14.1458 10.2708 14.4375 10.5625C14.7292 10.8542 15.0833 11 15.5 11ZM8.5 11C8.91667 11 9.27083 10.8542 9.5625 10.5625C9.85417 10.2708 10 9.91667 10 9.5C10 9.08333 9.85417 8.72917 9.5625 8.4375C9.27083 8.14583 8.91667 8 8.5 8C8.08333 8 7.72917 8.14583 7.4375 8.4375C7.14583 8.72917 7 9.08333 7 9.5C7 9.91667 7.14583 10.2708 7.4375 10.5625C7.72917 10.8542 8.08333 11 8.5 11ZM12 17.5C12.9667 17.5 13.8583 17.2667 14.675 16.8C15.4917 16.3333 16.15 15.7 16.65 14.9C16.75 14.7 16.7417 14.5 16.625 14.3C16.5083 14.1 16.3333 14 16.1 14H7.9C7.66667 14 7.49167 14.1 7.375 14.3C7.25833 14.5 7.25 14.7 7.35 14.9C7.85 15.7 8.5125 16.3333 9.3375 16.8C10.1625 17.2667 11.05 17.5 12 17.5Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 25.6665C12.3862 25.6665 10.8695 25.3603 9.45004 24.7478C8.0306 24.1353 6.79587 23.304 5.74587 22.254C4.69587 21.204 3.86462 19.9693 3.25212 18.5498C2.63962 17.1304 2.33337 15.6137 2.33337 13.9998C2.33337 12.3859 2.63962 10.8693 3.25212 9.44984C3.86462 8.03039 4.69587 6.79567 5.74587 5.74567C6.79587 4.69567 8.0306 3.86442 9.45004 3.25192C10.8695 2.63942 12.3862 2.33317 14 2.33317C14.8362 2.33317 15.6431 2.41581 16.4209 2.58109C17.1987 2.74636 17.9473 2.98456 18.6667 3.29567V5.92067C17.9862 5.53178 17.2521 5.22553 16.4646 5.00192C15.6771 4.77831 14.8556 4.6665 14 4.6665C11.4139 4.6665 9.21185 5.57553 7.39379 7.39359C5.57574 9.21164 4.66671 11.4137 4.66671 13.9998C4.66671 16.5859 5.57574 18.788 7.39379 20.6061C9.21185 22.4241 11.4139 23.3332 14 23.3332C16.5862 23.3332 18.7882 22.4241 20.6063 20.6061C22.4243 18.788 23.3334 16.5859 23.3334 13.9998C23.3334 13.3776 23.2702 12.7748 23.1438 12.1915C23.0174 11.6082 22.8473 11.0443 22.6334 10.4998H25.1417C25.3167 11.0637 25.448 11.6325 25.5355 12.2061C25.623 12.7797 25.6667 13.3776 25.6667 13.9998C25.6667 15.6137 25.3605 17.1304 24.748 18.5498C24.1355 19.9693 23.3042 21.204 22.2542 22.254C21.2042 23.304 19.9695 24.1353 18.55 24.7478C17.1306 25.3603 15.6139 25.6665 14 25.6665ZM23.3334 5.83317H22.1667C21.8362 5.83317 21.5591 5.72136 21.3355 5.49775C21.1118 5.27414 21 4.99706 21 4.6665C21 4.33595 21.1118 4.05887 21.3355 3.83525C21.5591 3.61164 21.8362 3.49984 22.1667 3.49984H23.3334V2.33317C23.3334 2.00261 23.4452 1.72553 23.6688 1.50192C23.8924 1.27831 24.1695 1.1665 24.5 1.1665C24.8306 1.1665 25.1077 1.27831 25.3313 1.50192C25.5549 1.72553 25.6667 2.00261 25.6667 2.33317V3.49984H26.8334C27.1639 3.49984 27.441 3.61164 27.6646 3.83525C27.8882 4.05887 28 4.33595 28 4.6665C28 4.99706 27.8882 5.27414 27.6646 5.49775C27.441 5.72136 27.1639 5.83317 26.8334 5.83317H25.6667V6.99984C25.6667 7.33039 25.5549 7.60748 25.3313 7.83109C25.1077 8.0547 24.8306 8.1665 24.5 8.1665C24.1695 8.1665 23.8924 8.0547 23.6688 7.83109C23.4452 7.60748 23.3334 7.33039 23.3334 6.99984V5.83317ZM18.0834 12.8332C18.5695 12.8332 18.9827 12.663 19.323 12.3228C19.6632 11.9825 19.8334 11.5693 19.8334 11.0832C19.8334 10.5971 19.6632 10.1839 19.323 9.84359C18.9827 9.50331 18.5695 9.33317 18.0834 9.33317C17.5973 9.33317 17.1841 9.50331 16.8438 9.84359C16.5035 10.1839 16.3334 10.5971 16.3334 11.0832C16.3334 11.5693 16.5035 11.9825 16.8438 12.3228C17.1841 12.663 17.5973 12.8332 18.0834 12.8332ZM9.91671 12.8332C10.4028 12.8332 10.816 12.663 11.1563 12.3228C11.4966 11.9825 11.6667 11.5693 11.6667 11.0832C11.6667 10.5971 11.4966 10.1839 11.1563 9.84359C10.816 9.50331 10.4028 9.33317 9.91671 9.33317C9.4306 9.33317 9.0174 9.50331 8.67712 9.84359C8.33685 10.1839 8.16671 10.5971 8.16671 11.0832C8.16671 11.5693 8.33685 11.9825 8.67712 12.3228C9.0174 12.663 9.4306 12.8332 9.91671 12.8332ZM14 20.4165C15.1278 20.4165 16.1681 20.1443 17.1209 19.5998C18.0737 19.0554 18.8417 18.3165 19.425 17.3832C19.5417 17.1498 19.532 16.9165 19.3959 16.6832C19.2598 16.4498 19.0556 16.3332 18.7834 16.3332H9.21671C8.94449 16.3332 8.74032 16.4498 8.60421 16.6832C8.4681 16.9165 8.45837 17.1498 8.57504 17.3832C9.15837 18.3165 9.93129 19.0554 10.8938 19.5998C11.8563 20.1443 12.8917 20.4165 14 20.4165Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-add-reaction"; }
+  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-add.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 SwirlIconAdd {
+  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 12.7666C7.78889 12.7666 7.60845 12.6915 7.45867 12.5413C7.30845 12.3915 7.23334 12.2111 7.23334 11.9999V8.76661H4C3.78889 8.76661 3.60845 8.6915 3.45867 8.54128C3.30845 8.3915 3.23334 8.21105 3.23334 7.99994C3.23334 7.78883 3.30845 7.60839 3.45867 7.45861C3.60845 7.30839 3.78889 7.23328 4 7.23328H7.23334V3.99994C7.23334 3.78883 7.30845 3.60817 7.45867 3.45794C7.60845 3.30817 7.78889 3.23328 8 3.23328C8.21112 3.23328 8.39156 3.30817 8.54134 3.45794C8.69156 3.60817 8.76667 3.78883 8.76667 3.99994V7.23328H12C12.2111 7.23328 12.3916 7.30839 12.5413 7.45861C12.6916 7.60839 12.7667 7.78883 12.7667 7.99994C12.7667 8.21105 12.6916 8.3915 12.5413 8.54128C12.3916 8.6915 12.2111 8.76661 12 8.76661H8.76667V11.9999C8.76667 12.2111 8.69156 12.3915 8.54134 12.5413C8.39156 12.6915 8.21112 12.7666 8 12.7666V12.7666Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 19.15C11.6833 19.15 11.4127 19.0373 11.188 18.812C10.9627 18.5873 10.85 18.3166 10.85 18V13.15H6.00001C5.68334 13.15 5.41267 13.0373 5.18801 12.812C4.96267 12.5873 4.85001 12.3166 4.85001 12C4.85001 11.6833 4.96267 11.4126 5.18801 11.188C5.41267 10.9626 5.68334 10.85 6.00001 10.85H10.85V5.99998C10.85 5.68331 10.9627 5.41231 11.188 5.18698C11.4127 4.96231 11.6833 4.84998 12 4.84998C12.3167 4.84998 12.5873 4.96231 12.812 5.18698C13.0373 5.41231 13.15 5.68331 13.15 5.99998V10.85H18C18.3167 10.85 18.5873 10.9626 18.812 11.188C19.0373 11.4126 19.15 11.6833 19.15 12C19.15 12.3166 19.0373 12.5873 18.812 12.812C18.5873 13.0373 18.3167 13.15 18 13.15H13.15V18C13.15 18.3166 13.0373 18.5873 12.812 18.812C12.5873 19.0373 12.3167 19.15 12 19.15Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 22.3417C13.6305 22.3417 13.3148 22.2102 13.0527 21.9473C12.7898 21.6852 12.6583 21.3694 12.6583 21V15.3417H6.99999C6.63055 15.3417 6.31477 15.2102 6.05266 14.9473C5.78977 14.6852 5.65833 14.3694 5.65833 14C5.65833 13.6305 5.78977 13.3148 6.05266 13.0527C6.31477 12.7898 6.63055 12.6583 6.99999 12.6583H12.6583V6.99999C12.6583 6.63055 12.7898 6.31438 13.0527 6.05149C13.3148 5.78938 13.6305 5.65833 14 5.65833C14.3694 5.65833 14.6852 5.78938 14.9473 6.05149C15.2102 6.31438 15.3417 6.63055 15.3417 6.99999V12.6583H21C21.3694 12.6583 21.6852 12.7898 21.9473 13.0527C22.2102 13.3148 22.3417 13.6305 22.3417 14C22.3417 14.3694 22.2102 14.6852 21.9473 14.9473C21.6852 15.2102 21.3694 15.3417 21 15.3417H15.3417V21C15.3417 21.3694 15.2102 21.6852 14.9473 21.9473C14.6852 22.2102 14.3694 22.3417 14 22.3417V22.3417Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-add"; }
+  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-admin-panel-settings.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 SwirlIconAdminPanelSettings {
+  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: "M11.3333 7.27165C11.56 7.27165 11.78 7.29831 12 7.33165V4.99165C12 4.45831 11.6867 3.97831 11.2 3.77165L7.53333 2.17165C7.19333 2.02498 6.80667 2.02498 6.46667 2.17165L2.8 3.77165C2.31333 3.98498 2 4.46498 2 4.99165V7.39165C2 10.4183 4.13333 13.2516 7 13.9383C7.36667 13.8516 7.72 13.725 8.06667 13.5716C7.60667 12.9183 7.33333 12.125 7.33333 11.2716C7.33333 9.06498 9.12667 7.27165 11.3333 7.27165Z", fill: "currentColor" }), h("path", { d: "M11.3333 8.60498C9.86 8.60498 8.66667 9.79831 8.66667 11.2716C8.66667 12.745 9.86 13.9383 11.3333 13.9383C12.8067 13.9383 14 12.745 14 11.2716C14 9.79831 12.8067 8.60498 11.3333 8.60498ZM11.3333 9.52498C11.7467 9.52498 12.08 9.86498 12.08 10.2716C12.08 10.6783 11.74 11.0183 11.3333 11.0183C10.9267 11.0183 10.5867 10.6783 10.5867 10.2716C10.5867 9.86498 10.92 9.52498 11.3333 9.52498ZM11.3333 13.105C10.7133 13.105 10.1733 12.7983 9.84 12.325C9.87333 11.845 10.8467 11.605 11.3333 11.605C11.82 11.605 12.7933 11.845 12.8267 12.325C12.4933 12.7983 11.9533 13.105 11.3333 13.105Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M17 10.9075C17.34 10.9075 17.67 10.9475 18 10.9975V7.48753C18 6.68753 17.53 5.96753 16.8 5.65753L11.3 3.25753C10.79 3.03753 10.21 3.03753 9.7 3.25753L4.2 5.65753C3.47 5.97753 3 6.69753 3 7.48753V11.0875C3 15.6275 6.2 19.8775 10.5 20.9075C11.05 20.7775 11.58 20.5875 12.1 20.3575C11.41 19.3775 11 18.1875 11 16.9075C11 13.5975 13.69 10.9075 17 10.9075Z", fill: "currentColor" }), h("path", { d: "M17 12.9075C14.79 12.9075 13 14.6975 13 16.9075C13 19.1175 14.79 20.9075 17 20.9075C19.21 20.9075 21 19.1175 21 16.9075C21 14.6975 19.21 12.9075 17 12.9075ZM17 14.2875C17.62 14.2875 18.12 14.7975 18.12 15.4075C18.12 16.0175 17.61 16.5275 17 16.5275C16.39 16.5275 15.88 16.0175 15.88 15.4075C15.88 14.7975 16.38 14.2875 17 14.2875ZM17 19.6575C16.07 19.6575 15.26 19.1975 14.76 18.4875C14.81 17.7675 16.27 17.4075 17 17.4075C17.73 17.4075 19.19 17.7675 19.24 18.4875C18.74 19.1975 17.93 19.6575 17 19.6575Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M19.8333 12.7254C20.23 12.7254 20.615 12.7721 21 12.8304V8.73541C21 7.80208 20.4517 6.96208 19.6 6.60041L13.1833 3.80041C12.5883 3.54374 11.9117 3.54374 11.3167 3.80041L4.9 6.60041C4.04833 6.97374 3.5 7.81374 3.5 8.73541V12.9354C3.5 18.2321 7.23333 23.1904 12.25 24.3921C12.8917 24.2404 13.51 24.0187 14.1167 23.7504C13.3117 22.6071 12.8333 21.2187 12.8333 19.7254C12.8333 15.8637 15.9717 12.7254 19.8333 12.7254Z", fill: "currentColor" }), h("path", { d: "M19.8333 15.0587C17.255 15.0587 15.1667 17.1471 15.1667 19.7254C15.1667 22.3037 17.255 24.3921 19.8333 24.3921C22.4117 24.3921 24.5 22.3037 24.5 19.7254C24.5 17.1471 22.4117 15.0587 19.8333 15.0587ZM19.8333 16.6687C20.5567 16.6687 21.14 17.2637 21.14 17.9754C21.14 18.6871 20.545 19.2821 19.8333 19.2821C19.1217 19.2821 18.5267 18.6871 18.5267 17.9754C18.5267 17.2637 19.11 16.6687 19.8333 16.6687ZM19.8333 22.9337C18.7483 22.9337 17.8033 22.3971 17.22 21.5687C17.2783 20.7287 18.9817 20.3087 19.8333 20.3087C20.685 20.3087 22.3883 20.7287 22.4467 21.5687C21.8633 22.3971 20.9183 22.9337 19.8333 22.9337Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-admin-panel-settings"; }
+  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-ai.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 SwirlIconAi {
+  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.66665 9.45L7.33331 8L8.78331 7.33333L7.33331 6.66667L6.66665 5.21667L5.99998 6.66667L4.54998 7.33333L5.99998 8L6.66665 9.45ZM6.66665 12.6667L4.99998 9L1.33331 7.33333L4.99998 5.66667L6.66665 2L8.33331 5.66667L12 7.33333L8.33331 9L6.66665 12.6667ZM12 14L11.1666 12.1667L9.33331 11.3333L11.1666 10.5L12 8.66667L12.8333 10.5L14.6666 11.3333L12.8333 12.1667L12 14Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M10 14.175L11 12L13.175 11L11 10L10 7.825L9 10L6.825 11L9 12L10 14.175ZM10 19L7.5 13.5L2 11L7.5 8.5L10 3L12.5 8.5L18 11L12.5 13.5L10 19ZM18 21L16.75 18.25L14 17L16.75 15.75L18 13L19.25 15.75L22 17L19.25 18.25L18 21Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M11.6667 16.5375L12.8333 14L15.3708 12.8333L12.8333 11.6667L11.6667 9.12917L10.5 11.6667L7.96251 12.8333L10.5 14L11.6667 16.5375ZM11.6667 22.1667L8.75001 15.75L2.33334 12.8333L8.75001 9.91667L11.6667 3.5L14.5833 9.91667L21 12.8333L14.5833 15.75L11.6667 22.1667ZM21 24.5L19.5417 21.2917L16.3333 19.8333L19.5417 18.375L21 15.1667L22.4583 18.375L25.6667 19.8333L22.4583 21.2917L21 24.5Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-ai"; }
+  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"
+      }
+    };
+  }
+}