@getflip/swirl-components 0.1.0 → 0.3.0

package/dist/collection/components/flip-form-control/flip-form-control.js

@@ -0,0 +1,205 @@
+import { Component, Element, h, Host, Listen, Prop, State, Watch, } from "@stencil/core";
+import classnames from "classnames";
+/**
+ * @slot slot - The input element, e.g. `<flip-text-input></flip-text-input>`
+ */
+export class FlipFormControl {
+  constructor() {
+    this.descriptionId = `form-control-description-${Math.round(Math.random() * 100000)}`;
+    this.listenToInputValueChanges = () => {
+      this.inputEl.addEventListener("valueChange", this.checkInputValue);
+    };
+    this.checkInputValue = () => {
+      var _a;
+      this.inputValue = (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.value;
+    };
+    this.onFocusIn = () => {
+      this.hasFocus = true;
+    };
+    this.onFocusOut = (event) => {
+      if (Boolean(event.relatedTarget)) {
+        this.hasFocus = false;
+      }
+    };
+  }
+  componentWillLoad() {
+    this.inputEl = this.el.children[0];
+    this.associateDescriptionWithInputElement();
+    this.setInputElementDisabledState();
+    this.setInputElementInvalidState();
+    this.checkInputValue();
+    this.listenToInputValueChanges();
+  }
+  associateDescriptionWithInputElement() {
+    if (!Boolean(this.description) || !Boolean(this.inputEl)) {
+      return;
+    }
+    this.inputEl.setAttribute("flip-aria-describedby", this.descriptionId);
+  }
+  setInputElementDisabledState() {
+    if (!Boolean(this.inputEl)) {
+      return;
+    }
+    if (this.disabled) {
+      this.inputEl.setAttribute("disabled", "true");
+    }
+    else {
+      this.inputEl.removeAttribute("disabled");
+    }
+  }
+  setInputElementInvalidState() {
+    if (!Boolean(this.inputEl)) {
+      return;
+    }
+    if (this.invalid) {
+      this.inputEl.setAttribute("invalid", "true");
+    }
+    else {
+      this.inputEl.removeAttribute("invalid");
+    }
+  }
+  onWindowClick(event) {
+    const target = event.target;
+    if (this.el.contains(target)) {
+      return;
+    }
+    this.hasFocus = false;
+  }
+  render() {
+    const showErrorMessage = Boolean(this.errorMessage);
+    const showDescription = Boolean(this.description) && !showErrorMessage;
+    const className = classnames("form-control", {
+      "form-control--disabled": this.disabled,
+      "form-control--has-focus": this.hasFocus,
+      "form-control--has-value": Boolean(this.inputValue),
+      "form-control--invalid": this.invalid,
+    });
+    return (h(Host, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut },
+      h("div", { class: className, role: "group" },
+        h("label", { class: "form-control__label" },
+          h("span", { class: "form-control__label-text" }, this.label),
+          h("span", { class: "form-control__input" },
+            h("slot", null))),
+        showDescription && (h("span", { class: "form-control__description", id: this.descriptionId }, this.description)),
+        showErrorMessage && (h("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId },
+          h("flip-inline-error", { message: this.errorMessage, size: "s" }))))));
+  }
+  static get is() { return "flip-form-control"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-form-control.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-form-control.css"]
+  }; }
+  static get properties() { return {
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "invalid",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "hasFocus": {},
+    "inputValue": {}
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "description",
+      "methodName": "associateDescriptionWithInputElement"
+    }, {
+      "propName": "disabled",
+      "methodName": "setInputElementDisabledState"
+    }, {
+      "propName": "invalid",
+      "methodName": "setInputElementInvalidState"
+    }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "onWindowClick",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}
+//# sourceMappingURL=flip-form-control.js.map

package/dist/collection/components/flip-form-control/flip-form-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-form-control.js","sourceRoot":"","sources":["../../../../src/components/flip-form-control/flip-form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n/**\n * @slot slot - The input element, e.g. `<flip-text-input></flip-text-input>`\n */\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-form-control.css\",\n  tag: \"flip-form-control\",\n})\nexport class FlipFormControl {\n  @Element() el: HTMLElement;\n\n  @Prop() description?: string;\n  @Prop() disabled?: boolean;\n  @Prop() errorMessage?: string;\n  @Prop() invalid?: boolean;\n  @Prop() label!: string;\n\n  @State() hasFocus: boolean;\n  @State() inputValue: string;\n\n  private descriptionId = `form-control-description-${Math.round(\n    Math.random() * 100000\n  )}`;\n\n  private inputEl: HTMLElement;\n\n  componentWillLoad() {\n    this.inputEl = this.el.children[0] as HTMLElement;\n\n    this.associateDescriptionWithInputElement();\n    this.setInputElementDisabledState();\n    this.setInputElementInvalidState();\n    this.checkInputValue();\n    this.listenToInputValueChanges();\n  }\n\n  @Watch(\"description\")\n  associateDescriptionWithInputElement() {\n    if (!Boolean(this.description) || !Boolean(this.inputEl)) {\n      return;\n    }\n\n    this.inputEl.setAttribute(\"flip-aria-describedby\", this.descriptionId);\n  }\n\n  @Watch(\"disabled\")\n  setInputElementDisabledState() {\n    if (!Boolean(this.inputEl)) {\n      return;\n    }\n\n    if (this.disabled) {\n      this.inputEl.setAttribute(\"disabled\", \"true\");\n    } else {\n      this.inputEl.removeAttribute(\"disabled\");\n    }\n  }\n\n  @Watch(\"invalid\")\n  setInputElementInvalidState() {\n    if (!Boolean(this.inputEl)) {\n      return;\n    }\n\n    if (this.invalid) {\n      this.inputEl.setAttribute(\"invalid\", \"true\");\n    } else {\n      this.inputEl.removeAttribute(\"invalid\");\n    }\n  }\n\n  @Listen(\"click\", { target: \"window\" })\n  onWindowClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.el.contains(target)) {\n      return;\n    }\n\n    this.hasFocus = false;\n  }\n\n  private listenToInputValueChanges = () => {\n    this.inputEl.addEventListener(\"valueChange\", this.checkInputValue);\n  };\n\n  private checkInputValue = () => {\n    this.inputValue = (this.inputEl as HTMLInputElement)?.value;\n  };\n\n  private onFocusIn = () => {\n    this.hasFocus = true;\n  };\n\n  private onFocusOut = (event: FocusEvent) => {\n    if (Boolean(event.relatedTarget)) {\n      this.hasFocus = false;\n    }\n  };\n\n  render() {\n    const showErrorMessage = Boolean(this.errorMessage);\n    const showDescription = Boolean(this.description) && !showErrorMessage;\n\n    const className = classnames(\"form-control\", {\n      \"form-control--disabled\": this.disabled,\n      \"form-control--has-focus\": this.hasFocus,\n      \"form-control--has-value\": Boolean(this.inputValue),\n      \"form-control--invalid\": this.invalid,\n    });\n\n    return (\n      <Host onFocusin={this.onFocusIn} onFocusout={this.onFocusOut}>\n        <div class={className} role=\"group\">\n          <label class=\"form-control__label\">\n            <span class=\"form-control__label-text\">{this.label}</span>\n            <span class=\"form-control__input\">\n              <slot></slot>\n            </span>\n          </label>\n          {showDescription && (\n            <span class=\"form-control__description\" id={this.descriptionId}>\n              {this.description}\n            </span>\n          )}\n          {showErrorMessage && (\n            <span\n              aria-live=\"polite\"\n              class=\"form-control__error-message\"\n              id={this.descriptionId}\n            >\n              <flip-inline-error\n                message={this.errorMessage}\n                size=\"s\"\n              ></flip-inline-error>\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-form-control/flip-form-control.stories.js

@@ -0,0 +1,43 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-form-control.mdx";
+export default {
+  component: "flip-form-control",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipFormControl",
+};
+const Template = (args) => {
+  const container = document.createElement("flip-stack");
+  container.spacing = "24";
+  const textInput = generateStoryElement("flip-form-control", args);
+  textInput.innerHTML = `
+    <flip-text-input clearable="true" type="text"></flip-text-input>
+  `;
+  const numberInput = generateStoryElement("flip-form-control", Object.assign(Object.assign({}, args), { label: "Number Control" }));
+  numberInput.innerHTML = `
+    <flip-text-input suffix-label="€" type="number"></flip-text-input>
+  `;
+  const dateInput = generateStoryElement("flip-form-control", Object.assign(Object.assign({}, args), { label: "Date Control" }));
+  dateInput.innerHTML = `
+    <flip-date-input></flip-date-input>
+  `;
+  const passwordInput = generateStoryElement("flip-form-control", Object.assign(Object.assign({}, args), { label: "Password Control" }));
+  passwordInput.innerHTML = `
+    <flip-text-input type="password"></flip-text-input>
+  `;
+  const multilineInput = generateStoryElement("flip-form-control", Object.assign(Object.assign({}, args), { label: "Multiline Control" }));
+  multilineInput.innerHTML = `
+    <flip-text-input max-length="200" show-character-counter="true" rows="5" type="text"></flip-text-input>
+  `;
+  container.append("\n  ", textInput, "\n  ", numberInput, "\n  ", dateInput, "\n  ", passwordInput, "\n  ", multilineInput, "\n");
+  return container;
+};
+export const FlipFormControl = Template.bind({});
+FlipFormControl.args = {
+  description: "Optional description of the control.",
+  label: "Form Control Label",
+};
+//# sourceMappingURL=flip-form-control.stories.js.map

package/dist/collection/components/flip-form-control/flip-form-control.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-form-control.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-form-control/flip-form-control.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,yBAAyB,CAAC;AAE3C,eAAe;EACb,SAAS,EAAE,mBAAmB;EAC9B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,4BAA4B;CACpC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;EAEvD,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;EAEzB,MAAM,SAAS,GAAG,oBAAoB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;EAElE,SAAS,CAAC,SAAS,GAAG;;GAErB,CAAC;EAEF,MAAM,WAAW,GAAG,oBAAoB,CAAC,mBAAmB,kCACvD,IAAI,KACP,KAAK,EAAE,gBAAgB,IACvB,CAAC;EAEH,WAAW,CAAC,SAAS,GAAG;;GAEvB,CAAC;EAEF,MAAM,SAAS,GAAG,oBAAoB,CAAC,mBAAmB,kCACrD,IAAI,KACP,KAAK,EAAE,cAAc,IACrB,CAAC;EAEH,SAAS,CAAC,SAAS,GAAG;;GAErB,CAAC;EAEF,MAAM,aAAa,GAAG,oBAAoB,CAAC,mBAAmB,kCACzD,IAAI,KACP,KAAK,EAAE,kBAAkB,IACzB,CAAC;EAEH,aAAa,CAAC,SAAS,GAAG;;GAEzB,CAAC;EAEF,MAAM,cAAc,GAAG,oBAAoB,CAAC,mBAAmB,kCAC1D,IAAI,KACP,KAAK,EAAE,mBAAmB,IAC1B,CAAC;EAEH,cAAc,CAAC,SAAS,GAAG;;GAE1B,CAAC;EAEF,SAAS,CAAC,MAAM,CACd,MAAM,EACN,SAAS,EACT,MAAM,EACN,WAAW,EACX,MAAM,EACN,SAAS,EACT,MAAM,EACN,aAAa,EACb,MAAM,EACN,cAAc,EACd,IAAI,CACL,CAAC;EAEF,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjD,eAAe,CAAC,IAAI,GAAG;EACrB,WAAW,EAAE,sCAAsC;EACnD,KAAK,EAAE,oBAAoB;CAC5B,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-form-control.mdx\";\n\nexport default {\n  component: \"flip-form-control\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipFormControl\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"flip-stack\");\n\n  container.spacing = \"24\";\n\n  const textInput = generateStoryElement(\"flip-form-control\", args);\n\n  textInput.innerHTML = `\n    <flip-text-input clearable=\"true\" type=\"text\"></flip-text-input>\n  `;\n\n  const numberInput = generateStoryElement(\"flip-form-control\", {\n    ...args,\n    label: \"Number Control\",\n  });\n\n  numberInput.innerHTML = `\n    <flip-text-input suffix-label=\"€\" type=\"number\"></flip-text-input>\n  `;\n\n  const dateInput = generateStoryElement(\"flip-form-control\", {\n    ...args,\n    label: \"Date Control\",\n  });\n\n  dateInput.innerHTML = `\n    <flip-date-input></flip-date-input>\n  `;\n\n  const passwordInput = generateStoryElement(\"flip-form-control\", {\n    ...args,\n    label: \"Password Control\",\n  });\n\n  passwordInput.innerHTML = `\n    <flip-text-input type=\"password\"></flip-text-input>\n  `;\n\n  const multilineInput = generateStoryElement(\"flip-form-control\", {\n    ...args,\n    label: \"Multiline Control\",\n  });\n\n  multilineInput.innerHTML = `\n    <flip-text-input max-length=\"200\" show-character-counter=\"true\" rows=\"5\" type=\"text\"></flip-text-input>\n  `;\n\n  container.append(\n    \"\\n  \",\n    textInput,\n    \"\\n  \",\n    numberInput,\n    \"\\n  \",\n    dateInput,\n    \"\\n  \",\n    passwordInput,\n    \"\\n  \",\n    multilineInput,\n    \"\\n\"\n  );\n\n  return container;\n};\n\nexport const FlipFormControl = Template.bind({});\n\nFlipFormControl.args = {\n  description: \"Optional description of the control.\",\n  label: \"Form Control Label\",\n};\n"]}

package/dist/collection/components/flip-form-group/flip-form-group.css

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-space-24);
+}
+
+@media (min-width: 768px) {
+
+.form-group {
+    gap: var(--s-space-32)
+}
+  }
+
+@media (min-width: 768px) {
+
+.form-group--orientation-horizontal {
+    flex-direction: row
+}
+  }

package/dist/collection/components/flip-form-group/flip-form-group.js

@@ -0,0 +1,46 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipFormGroup {
+  constructor() {
+    this.orientation = "vertical";
+  }
+  render() {
+    const className = classnames("form-group", `form-group--orientation-${this.orientation}`);
+    return (h(Host, null,
+      h("div", { class: className },
+        h("slot", null))));
+  }
+  static get is() { return "flip-form-group"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-form-group.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-form-group.css"]
+  }; }
+  static get properties() { return {
+    "orientation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipFormGroupOrientation",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "FlipFormGroupOrientation": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "orientation",
+      "reflect": false,
+      "defaultValue": "\"vertical\""
+    }
+  }; }
+}
+//# sourceMappingURL=flip-form-group.js.map

package/dist/collection/components/flip-form-group/flip-form-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-form-group.js","sourceRoot":"","sources":["../../../../src/components/flip-form-group/flip-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAgBpC,MAAM,OAAO,aAAa;EAZ1B;IAaU,gBAAW,GAA6B,UAAU,CAAC;GAgB5D;EAdC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAC1B,YAAY,EACZ,2BAA2B,IAAI,CAAC,WAAW,EAAE,CAC9C,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,SAAS;QACnB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipFormGroupOrientation = \"horizontal\" | \"vertical\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-form-group.css\",\n  tag: \"flip-form-group\",\n})\nexport class FlipFormGroup {\n  @Prop() orientation: FlipFormGroupOrientation = \"vertical\";\n\n  render() {\n    const className = classnames(\n      \"form-group\",\n      `form-group--orientation-${this.orientation}`\n    );\n\n    return (\n      <Host>\n        <div class={className}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

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

package/dist/collection/components/flip-form-group/flip-form-group.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-form-group.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-form-group/flip-form-group.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,uBAAuB,CAAC;AAEzC,eAAe;EACb,SAAS,EAAE,iBAAiB;EAC5B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,0BAA0B;CAClC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;EAE9D,OAAO,CAAC,SAAS,GAAG;;;;;;;;;;;;;GAanB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,aAAa,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-form-group.mdx\";\n\nexport default {\n  component: \"flip-form-group\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipFormGroup\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-form-group\", args);\n\n  element.innerHTML = `\n    <flip-form-group orientation=\"horizontal\">\n      <flip-form-control label=\"First name\">\n        <flip-text-input type=\"text\" value=\"John\"></flip-text-input>\n      </flip-form-control>\n      <flip-form-control label=\"Last name\">\n        <flip-text-input type=\"text\" value=\"Doe\"></flip-text-input>\n      </flip-form-control>\n    </flip-form-group>\n\n    <flip-form-control label=\"Email\">\n      <flip-text-input type=\"email\"></flip-text-input>\n    </flip-form-control>\n  `;\n\n  return element;\n};\n\nexport const FlipFormGroup = Template.bind({});\n\nFlipFormGroup.args = {};\n"]}

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

@@ -0,0 +1,55 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.heading {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  text-align: start;
+}
+
+.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,
+.heading--level-5,
+.heading--level-6 {
+  font-size: var(--s-font-size-base);
+  font-weight: var(--s-font-weight-semibold);
+  line-height: var(--s-line-height-base);
+}

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

@@ -0,0 +1,124 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipHeading {
+  constructor() {
+    this.align = "start";
+    this.level = 1;
+  }
+  render() {
+    const Tag = this.as || `h${this.level}`;
+    const className = classnames("heading", `heading--align-${this.align}`, `heading--level-${this.level}`);
+    return (h(Host, null,
+      h(Tag, { class: className, id: this.headingId, part: "heading" }, this.text)));
+  }
+  static get is() { return "flip-heading"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-heading.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-heading.css"]
+  }; }
+  static get properties() { return {
+    "align": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipHeadingAlign",
+        "resolved": "\"center\" | \"end\" | \"start\"",
+        "references": {
+          "FlipHeadingAlign": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "align",
+      "reflect": false,
+      "defaultValue": "\"start\""
+    },
+    "as": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipHeadingTag",
+        "resolved": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\"",
+        "references": {
+          "FlipHeadingTag": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "as",
+      "reflect": false
+    },
+    "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": "FlipHeadingLevel",
+        "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+        "references": {
+          "FlipHeadingLevel": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "level",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false
+    }
+  }; }
+}
+//# sourceMappingURL=flip-heading.js.map

package/dist/collection/components/flip-heading/flip-heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-heading.js","sourceRoot":"","sources":["../../../../src/components/flip-heading/flip-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAsBpC,MAAM,OAAO,WAAW;EALxB;IAMU,UAAK,GAAsB,OAAO,CAAC;IAGnC,UAAK,GAAsB,CAAC,CAAC;GAoBtC;EAjBC,MAAM;IACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;IAExC,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,EACT,kBAAkB,IAAI,CAAC,KAAK,EAAE,EAC9B,kBAAkB,IAAI,CAAC,KAAK,EAAE,CAC/B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,EAAC,GAAG,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,SAAS,IACtD,IAAI,CAAC,IAAI,CACN,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipHeadingAlign = \"start\" | \"center\" | \"end\";\n\nexport type FlipHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type FlipHeadingTag =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"p\"\n  | \"span\"\n  | \"div\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-heading.css\",\n  tag: \"flip-heading\",\n})\nexport class FlipHeading {\n  @Prop() align?: FlipHeadingAlign = \"start\";\n  @Prop() as?: FlipHeadingTag;\n  @Prop() headingId?: string;\n  @Prop() level?: FlipHeadingLevel = 1;\n  @Prop() text!: string;\n\n  render() {\n    const Tag = this.as || `h${this.level}`;\n\n    const className = classnames(\n      \"heading\",\n      `heading--align-${this.align}`,\n      `heading--level-${this.level}`\n    );\n\n    return (\n      <Host>\n        <Tag class={className} id={this.headingId} part=\"heading\">\n          {this.text}\n        </Tag>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-heading.mdx";
+export default {
+  component: "flip-heading",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipHeading",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-heading", args);
+  return element;
+};
+export const FlipHeading = Template.bind({});
+FlipHeading.args = {
+  text: "Heading",
+};
+//# sourceMappingURL=flip-heading.stories.js.map

package/dist/collection/components/flip-heading/flip-heading.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-heading.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-heading/flip-heading.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,eAAe;EACb,SAAS,EAAE,cAAc;EACzB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,wBAAwB;CAChC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;EAE3D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE7C,WAAW,CAAC,IAAI,GAAG;EACjB,IAAI,EAAE,SAAS;CAChB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-heading.mdx\";\n\nexport default {\n  component: \"flip-heading\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipHeading\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-heading\", args);\n\n  return element;\n};\n\nexport const FlipHeading = Template.bind({});\n\nFlipHeading.args = {\n  text: \"Heading\",\n};\n"]}

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

@@ -40,3 +40,4 @@ export const FlipIcon = Template.bind({});
 FlipIcon.args = {
   size: "24",
 };
+//# sourceMappingURL=flip-icon.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-icon.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-icon/flip-icon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,iBAAiB,CAAC;AAEnC,eAAe;EACb,SAAS,EAAE,iBAAiB;EAC5B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;MACV,MAAM,EAAE;QACN,IAAI,EAAE,yDAAyD;OAChE;KACF;GACF;EACD,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;EAE/C,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;EAC9B,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;EAC7B,SAAS,CAAC,KAAK,CAAC,YAAY,GAAG,SAAS,CAAC;EACzC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;EAE9B,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAE;IAC1D,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,WAAW,GAAG,oBAAoB,CAAC,aAAa,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;IACzE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAE7C,KAAK,CAAC,SAAS,GAAG,aAAa,IAAI,CAAC,IAAI,EAAE,CAAC;IAE3C,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAC3B,GAAG,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;IAChC,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC;IACzB,GAAG,CAAC,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC;IAClC,GAAG,CAAC,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC;IAElC,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACxB,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAElB,OAAO,GAAG,CAAC;EACb,CAAC,CAAC,CAAC;EAEH,SAAS,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC;EAE9B,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1C,QAAQ,CAAC,IAAI,GAAG;EACd,IAAI,EAAE,IAAI;CACX,CAAC","sourcesContent":["import IconsJSON from \"../../../icons.json\";\nimport { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-icon.mdx\";\n\nexport default {\n  component: \"flip-icon-close\",\n  parameters: {\n    docs: {\n      page: Docs,\n      source: {\n        code: \"<flip-icon-emoji-satisfied></flip-icon-emoji-satisfied>\",\n      },\n    },\n  },\n  title: \"Components/FlipIcon\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"ul\");\n\n  container.style.columns = \"2\";\n  container.style.margin = \"0\";\n  container.style.marginBottom = \"-0.5rem\";\n  container.style.padding = \"0\";\n\n  const elements = Object.values(IconsJSON).map((icon: any) => {\n    const row = document.createElement(\"li\");\n    const iconElement = generateStoryElement(`flip-icon-${icon.name}`, args);\n    const label = document.createElement(\"span\");\n\n    label.innerHTML = `flip-icon-${icon.name}`;\n\n    row.style.display = \"flex\";\n    row.style.alignItems = \"center\";\n    row.style.gap = \"0.5rem\";\n    row.style.marginBottom = \"0.5rem\";\n    row.style.paddingRight = \"0.5rem\";\n\n    row.append(iconElement);\n    row.append(label);\n\n    return row;\n  });\n\n  container.append(...elements);\n\n  return container;\n};\n\nexport const FlipIcon = Template.bind({});\n\nFlipIcon.args = {\n  size: \"24\",\n};\n"]}

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

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=flip-icon.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-icon.types.js","sourceRoot":"","sources":["../../../../src/components/flip-icon/flip-icon.types.ts"],"names":[],"mappings":"","sourcesContent":["export type FlipIconSize = 16 | 24 | 28;\n"]}

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

@@ -47,3 +47,4 @@ export class FlipIconAddPhoto {
     }
   }; }
 }
+//# sourceMappingURL=flip-icon-add-photo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-icon-add-photo.js","sourceRoot":"","sources":["../../../../../src/components/flip-icon/icons/flip-icon-add-photo.tsx"],"names":[],"mappings":"AAAA,6DAA6D;AAE7D,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQ7D,MAAM,OAAO,gBAAgB;EAL7B;IAMU,SAAI,GAAiB,EAAE,CAAC;GAwCjC;EAtCC,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,EACxC,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,KAAK,EAAC,4BAA4B;MAEjC,IAAI,CAAC,IAAI,KAAK,EAAE,IAAI,CACnB,EAAC,QAAQ;QACP,YACE,CAAC,EAAC,0gEAA0gE,EAC5gE,IAAI,EAAC,cAAc,GACnB,CACO,CACZ;MACA,IAAI,CAAC,IAAI,KAAK,EAAE,IAAI,CACnB,EAAC,QAAQ;QACP,YACE,CAAC,EAAC,k7CAAk7C,EACp7C,IAAI,EAAC,cAAc,GACnB,CACO,CACZ;MACA,IAAI,CAAC,IAAI,KAAK,EAAE,IAAI,CACnB,EAAC,QAAQ;QACP,YACE,CAAC,EAAC,4gEAA4gE,EAC9gE,IAAI,EAAC,cAAc,GACnB,CACO,CACZ,CACG,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// DO NOT EDIT. THIS FILE GETS GENERATED VIA \"yarn generate\".\n\nimport { Component, Fragment, h, Prop } from \"@stencil/core\";\nimport { FlipIconSize } from \"../flip-icon.types\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"../flip-icon.css\",\n  tag: \"flip-icon-add-photo\",\n})\nexport class FlipIconAddPhoto {\n  @Prop() size: FlipIconSize = 24;\n\n  render() {\n    return (\n      <svg\n        class=\"flip-icon\"\n        fill=\"none\"\n        height={this.size}\n        part=\"icon\"\n        viewBox={`0 0 ${this.size} ${this.size}`}\n        width={this.size}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {this.size === 16 && (\n          <Fragment>\n            <path\n              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\"\n              fill=\"currentColor\"\n            />\n          </Fragment>\n        )}\n        {this.size === 24 && (\n          <Fragment>\n            <path\n              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\"\n              fill=\"currentColor\"\n            />\n          </Fragment>\n        )}\n        {this.size === 28 && (\n          <Fragment>\n            <path\n              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\"\n              fill=\"currentColor\"\n            />\n          </Fragment>\n        )}\n      </svg>\n    );\n  }\n}\n"]}