@getflip/swirl-components 0.1.0

package/dist/collection/components/flip-description-list-item/flip-description-list-item.stories.js

@@ -0,0 +1,20 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-description-list-item.mdx";
+export default {
+  component: "flip-description-list-item",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipDescriptionListItem",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-description-list-item", args);
+  element.innerHTML = `A short description`;
+  return element;
+};
+export const FlipDescriptionListItem = Template.bind({});
+FlipDescriptionListItem.args = {
+  term: "Term or label",
+};

package/dist/collection/components/flip-dialog/flip-dialog.css

@@ -0,0 +1,158 @@
+:host {
+  --flip-ghost-button-background-default: var(--s-surface-overlay-default);
+  --flip-ghost-button-background-hovered: var(--s-surface-overlay-hovered);
+  --flip-ghost-button-background-pressed: var(--s-surface-overlay-pressed);
+
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.dialog {
+  position: fixed;
+  z-index: var(--s-z-40);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  inset: 0;
+}
+
+.dialog[aria-hidden="true"] {
+    display: none;
+  }
+
+.dialog:not(.dialog--closing) .dialog__backdrop {
+    -webkit-animation: 0.15s dialog-backdrop-fade-in;
+            animation: 0.15s dialog-backdrop-fade-in;
+  }
+
+@media (prefers-reduced-motion) {
+
+.dialog:not(.dialog--closing) .dialog__backdrop {
+      -webkit-animation: none;
+              animation: none
+  }
+    }
+
+.dialog:not(.dialog--closing) .dialog__body {
+    -webkit-animation: 0.15s dialog-scale-in;
+            animation: 0.15s dialog-scale-in;
+  }
+
+@media (prefers-reduced-motion) {
+
+.dialog:not(.dialog--closing) .dialog__body {
+      -webkit-animation: none;
+              animation: none
+  }
+    }
+
+.dialog--closing {
+  -webkit-animation: 0.15s dialog-fade-out;
+          animation: 0.15s dialog-fade-out;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+@media (prefers-reduced-motion) {
+
+.dialog--closing {
+    -webkit-animation: none;
+            animation: none
+}
+  }
+
+.dialog__backdrop {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.2);
+  inset: 0;
+}
+
+.dialog__body {
+  z-index: var(--s-z-40);
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 18.5rem;
+  max-height: 90vh;
+  padding-top: var(--s-space-24);
+  padding-right: var(--s-space-8);
+  padding-bottom: var(--s-space-8);
+  padding-left: var(--s-space-8);
+  border-radius: var(--s-border-radius-xl);
+  background-color: var(--s-surface-overlay-default);
+  text-align: center;
+  box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14);
+}
+
+.dialog__heading {
+  margin: 0;
+  margin-bottom: var(--s-space-8);
+  font-size: var(--s-font-size-lg);
+  font-weight: var(--s-font-weight-semibold);
+  line-height: var(--s-line-height-lg);
+}
+
+.dialog__content {
+  margin-bottom: var(--s-space-24);
+  line-height: var(--s-line-height-base);
+}
+
+.dialog__content ::slotted(*) {
+    margin: 0;
+  }
+
+@-webkit-keyframes dialog-scale-in {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-scale-in {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@-webkit-keyframes dialog-backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes dialog-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes dialog-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/dist/collection/components/flip-dialog/flip-dialog.js

@@ -0,0 +1,248 @@
+import { Component, Event, h, Host, Method, Prop, State, } from "@stencil/core";
+import A11yDialog from "a11y-dialog";
+import classnames from "classnames";
+/**
+ * @slot slot - The dialog content
+ */
+export class FlipDialog {
+  constructor() {
+    this.intent = "primary";
+    this.closing = false;
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        this.close();
+      }
+    };
+    this.onBackdropClick = () => {
+      this.close();
+    };
+    this.onPrimaryAction = (event) => {
+      this.primaryAction.emit(event);
+      this.close();
+    };
+    this.onSecondaryAction = (event) => {
+      this.secondaryAction.emit(event);
+      this.close();
+    };
+  }
+  componentDidLoad() {
+    this.dialog = new A11yDialog(this.dialogEl);
+    this.dialog.on("show", () => {
+      var _a;
+      (_a = this.controlsContainerEl
+        .querySelector("flip-button button")) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  /**
+   * Open the dialog.
+   */
+  async open() {
+    this.dialog.show();
+  }
+  /**
+   * Close the dialog.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    setTimeout(() => {
+      this.dialog.hide();
+      this.closing = false;
+    }, 150);
+  }
+  render() {
+    const className = classnames("dialog", { "dialog--closing": this.closing });
+    return (h(Host, null,
+      h("div", { "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" },
+        h("div", { class: "dialog__backdrop", onClick: this.onBackdropClick }),
+        h("div", { class: "dialog__body", role: "document" },
+          !this.hideLabel && (h("h2", { class: "dialog__heading", id: "label" }, this.label)),
+          h("div", { class: "dialog__content", id: "content" },
+            h("slot", null)),
+          h("flip-button-group", { class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el), stretch: true, wrap: true },
+            this.secondaryActionLabel && (h("flip-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })),
+            this.primaryActionLabel && (h("flip-button", { intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: this.intent === "critical" ? "ghost" : "flat" })))))));
+  }
+  static get is() { return "flip-dialog"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-dialog.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-dialog.css"]
+  }; }
+  static get properties() { return {
+    "hideLabel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-label",
+      "reflect": false
+    },
+    "intent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipDialogIntent",
+        "resolved": "\"critical\" | \"primary\"",
+        "references": {
+          "FlipDialogIntent": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "intent",
+      "reflect": false,
+      "defaultValue": "\"primary\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "primaryActionLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "primary-action-label",
+      "reflect": false
+    },
+    "secondaryActionLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "secondary-action-label",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "closing": {}
+  }; }
+  static get events() { return [{
+      "method": "primaryAction",
+      "name": "primaryAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "secondaryAction",
+      "name": "secondaryAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Open the dialog.",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Close the dialog.",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/flip-dialog/flip-dialog.stories.js

@@ -0,0 +1,40 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-dialog.mdx";
+export default {
+  component: "flip-dialog",
+  parameters: {
+    docs: {
+      page: Docs,
+      source: {
+        code: `<flip-dialog id="my-dialog" label="Dialog" primary-action-label="Leave" secondary-action-label="Cancel">
+  <p>Do you really want to leave this group chat?</p>
+</flip-dialog>
+
+<script>
+  const dialog = document.body.querySelector('#my-dialog');
+  dialog.open();
+</script>`,
+      },
+    },
+  },
+  title: "Components/FlipDialog",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  const trigger = document.createElement("flip-button");
+  const element = generateStoryElement("flip-dialog", args);
+  trigger.label = "Open dialog";
+  trigger.addEventListener("click", () => element.open());
+  element.innerHTML = `
+    <p>Do you really want to leave this group chat?</p>
+  `;
+  container.append(trigger, element);
+  return container;
+};
+export const FlipDialog = Template.bind({});
+FlipDialog.args = {
+  intent: "critical",
+  label: "Dialog",
+  primaryActionLabel: "Leave",
+  secondaryActionLabel: "Cancel",
+};

package/dist/collection/components/flip-icon/flip-icon.css

@@ -0,0 +1,3 @@
+:host {
+  display: inline-flex;
+}

package/dist/collection/components/flip-icon/flip-icon.stories.js

@@ -0,0 +1,42 @@
+import IconsJSON from "../../../icons.json";
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-icon.mdx";
+export default {
+  component: "flip-icon-close",
+  parameters: {
+    docs: {
+      page: Docs,
+      source: {
+        code: "<flip-icon-emoji-satisfied></flip-icon-emoji-satisfied>",
+      },
+    },
+  },
+  title: "Components/FlipIcon",
+};
+const Template = (args) => {
+  const container = document.createElement("ul");
+  container.style.columns = "2";
+  container.style.margin = "0";
+  container.style.marginBottom = "-0.5rem";
+  container.style.padding = "0";
+  const elements = Object.values(IconsJSON).map((icon) => {
+    const row = document.createElement("li");
+    const iconElement = generateStoryElement(`flip-icon-${icon.name}`, args);
+    const label = document.createElement("span");
+    label.innerHTML = `flip-icon-${icon.name}`;
+    row.style.display = "flex";
+    row.style.alignItems = "center";
+    row.style.gap = "0.5rem";
+    row.style.marginBottom = "0.5rem";
+    row.style.paddingRight = "0.5rem";
+    row.append(iconElement);
+    row.append(label);
+    return row;
+  });
+  container.append(...elements);
+  return container;
+};
+export const FlipIcon = Template.bind({});
+FlipIcon.args = {
+  size: "24",
+};

package/dist/collection/components/flip-icon/flip-icon.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/flip-icon/icons/flip-icon-add-photo.js

@@ -0,0 +1,49 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+export class FlipIconAddPhoto {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    return (h("svg", { class: "flip-icon", fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${this.size} ${this.size}`, 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 === 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 "flip-icon-add-photo"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["../flip-icon.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["../flip-icon.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipIconSize",
+        "resolved": "16 | 24 | 28",
+        "references": {
+          "FlipIconSize": {
+            "location": "import",
+            "path": "../flip-icon.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "24"
+    }
+  }; }
+}

package/dist/collection/components/flip-icon/icons/flip-icon-add.js

@@ -0,0 +1,49 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+export class FlipIconAdd {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    return (h("svg", { class: "flip-icon", fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${this.size} ${this.size}`, 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 === 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 "flip-icon-add"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["../flip-icon.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["../flip-icon.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipIconSize",
+        "resolved": "16 | 24 | 28",
+        "references": {
+          "FlipIconSize": {
+            "location": "import",
+            "path": "../flip-icon.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "24"
+    }
+  }; }
+}

package/dist/collection/components/flip-icon/icons/flip-icon-admin-panel-settings.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+export class FlipIconAdminPanelSettings {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    return (h("svg", { class: "flip-icon", fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${this.size} ${this.size}`, 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 === 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 "flip-icon-admin-panel-settings"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["../flip-icon.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["../flip-icon.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipIconSize",
+        "resolved": "16 | 24 | 28",
+        "references": {
+          "FlipIconSize": {
+            "location": "import",
+            "path": "../flip-icon.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "24"
+    }
+  }; }
+}