@zonos/elements 1.0.16

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.css

@@ -0,0 +1,35 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host .vstack {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-row-gap: var(--spacing, 24px);
+  grid-auto-flow: row;
+}

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js

@@ -0,0 +1,74 @@
+import { h } from "@stencil/core";
+import { Host } from "@stencil/core/internal";
+import { classes } from "../../utils/classes";
+export class VStack {
+  constructor() {
+    this.spacing = 24;
+    this.class = '';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", null))));
+  }
+  static get is() { return "zonos-v-stack"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-v-stack.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-v-stack.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "spacing": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "GridSpacing",
+          "resolved": "0 | 12 | 16 | 20 | 24 | 32 | 4 | 40 | 8",
+          "references": {
+            "GridSpacing": {
+              "location": "import",
+              "path": "src/types/styles/GridSpacing",
+              "id": "src/types/styles/GridSpacing.ts::GridSpacing"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "24"
+            }],
+          "text": "The spacing between elements in the stack"
+        },
+        "attribute": "spacing",
+        "reflect": false,
+        "defaultValue": "24"
+      },
+      "class": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The CSS class to apply to the stack element"
+        },
+        "attribute": "class",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+}
+//# sourceMappingURL=zonos-v-stack.js.map

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-v-stack.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-v-stack/zonos-v-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAQvD,MAAM,OAAO,MAAM;;mBAKc,EAAE;iBAKT,EAAE;;EAE1B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EACtC,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE;QAE9C,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { Host } from '@stencil/core/internal';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { GridSpacing } from 'src/types/styles/GridSpacing';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-v-stack.scss',\n  tag: 'zonos-v-stack',\n})\nexport class VStack {\n  /**\n   * The spacing between elements in the stack\n   * @default 24\n   */\n  @Prop() spacing: GridSpacing = 24;\n\n  /**\n   * The CSS class to apply to the stack element\n   */\n  @Prop() class: string = '';\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={classes(['vstack', this.class])}\n          style={{ 'grid-row-gap': `${this.spacing}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/component-template/zonos-component/zonos-component.css

@@ -0,0 +1,33 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+div {
+  color: red;
+  font-size: large;
+}

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -0,0 +1,86 @@
+import { h } from "@stencil/core";
+import { format } from "../../../utils/format";
+export class ZonosComponent {
+  constructor() {
+    this.first = '';
+    this.middle = '';
+    this.last = '';
+  }
+  getText() {
+    return format(this.first, this.middle, this.last);
+  }
+  render() {
+    return h("div", null, "Hello, World! I'm ", this.getText());
+  }
+  static get is() { return "zonos-component"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "first": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The first name"
+        },
+        "attribute": "first",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "middle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The middle name"
+        },
+        "attribute": "middle",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "last": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The last name"
+        },
+        "attribute": "last",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+}
+//# sourceMappingURL=zonos-component.js.map

package/dist/collection/components/component-template/zonos-component/zonos-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-component.js","sourceRoot":"","sources":["../../../../src/components/component-template/zonos-component/zonos-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAO1C,MAAM,OAAO,cAAc;;iBAID,EAAE;kBAKD,EAAE;gBAKJ,EAAE;;EAEjB,OAAO;IACb,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;EACpD,CAAC;EAED,MAAM;IACJ,OAAO;;MAAwB,IAAI,CAAC,OAAO,EAAE,CAAO,CAAC;EACvD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nimport { format } from 'src/utils/format';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-component.scss',\n  tag: 'zonos-component',\n})\nexport class ZonosComponent {\n  /**\n   * The first name\n   */\n  @Prop() first: string = '';\n\n  /**\n   * The middle name\n   */\n  @Prop() middle: string = '';\n\n  /**\n   * The last name\n   */\n  @Prop() last: string = '';\n\n  private getText(): string {\n    return format(this.first, this.middle, this.last);\n  }\n\n  render() {\n    return <div>Hello, World! I'm {this.getText()}</div>;\n  }\n}\n"]}

package/dist/collection/components/hello/zonos-hello/zonos-hello.css

@@ -0,0 +1,262 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: inline-block;
+}
+:host .zonos--hello-wrapper {
+  position: relative;
+}
+:host .zonos--hello-wrapper .zonos--hello-dialog-wrapper-mobile-override {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  z-index: 1001;
+  height: 0;
+}
+@media (max-width: 768px) {
+  :host .zonos--hello-wrapper {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    z-index: 1001;
+    height: 0;
+  }
+}
+:host .zonos--hello-widget {
+  transition: all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);
+  padding: 6px;
+  border-radius: 30px;
+  background: var(--amino-page-background);
+  font-size: var(--amino-font-size-s);
+  border: var(--amino-border);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: fit-content;
+  width: fit-content;
+  position: relative;
+  z-index: 1000;
+}
+:host .zonos--hello-widget > .zonos--hello-message {
+  order: 0;
+  width: 100%;
+  max-width: 0;
+  height: 100%;
+  white-space: nowrap;
+  transition: border 0.3s ease-in, all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);
+  overflow: hidden;
+  color: var(--amino-text-color);
+  position: absolute;
+  background: var(--amino-page-background);
+  display: flex;
+  align-items: center;
+  border-top-left-radius: 30px;
+  border-bottom-left-radius: 30px;
+  left: 0;
+  transform: translateX(calc(-100% + var(--amino-space-16)));
+  width: fit-content;
+  border-top: var(--amino-border);
+  border-bottom: var(--amino-border);
+}
+:host .zonos--hello-widget.zonos--hello-show-peek-message {
+  max-width: 100vw;
+  width: 100%;
+}
+:host .zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
+  max-width: 100vw;
+  padding: 0 6px;
+  padding-right: var(--amino-space-16);
+  border: var(--amino-border);
+}
+:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left) > .zonos--hello-message {
+  border-right: none;
+}
+:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
+  border-left: 0;
+}
+:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
+  padding-left: var(--amino-space-16);
+  padding-right: 6px;
+  border-left: none;
+}
+:host .zonos--hello-widget.zonos--hello-widget-animate-from-left > .zonos--hello-message {
+  order: 1;
+  transform: translateX(calc(100% - var(--amino-space-16)));
+  right: 0;
+  left: auto;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
+}
+:host .zonos--hello-widget .zonos--hello-country-flag-wrapper {
+  display: flex;
+  justify-content: center;
+}
+:host .zonos--hello-widget .zonos--hello-country-flag-wrapper .zonos--hello-country-flag {
+  height: 18px;
+  width: 18px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 30px;
+  box-shadow: var(--amino-v3-shadow-medium);
+  z-index: 10;
+  justify-self: center;
+}
+@media (max-width: 768px) {
+  :host .zonos--hello-widget .zonos--hello-country-flag-wrapper .zonos--hello-country-flag {
+    border-radius: var(--amino-radius-4);
+    width: 24px;
+  }
+}
+@media (max-width: 768px) {
+  :host .zonos--hello-widget {
+    position: fixed;
+    bottom: var(--amino-space-32);
+    right: var(--amino-space-32);
+    border-radius: var(--amino-radius-4);
+    padding: var(--amino-space-4);
+    border: 1px solid transparent;
+  }
+  :host .zonos--hello-widget.zonos--hello-widget-left {
+    left: var(--amino-space-32);
+    right: auto;
+  }
+  :host .zonos--hello-widget.zonos--hello-widget-top {
+    bottom: auto;
+    top: var(--amino-space-32);
+  }
+  :host .zonos--hello-widget > .zonos--hello-message {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-radius: 30px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(0);
+    width: fit-content;
+    border: none;
+  }
+  :host .zonos--hello-widget.zonos--hello-widget-animate-from-left > .zonos--hello-message {
+    transform: translateX(0);
+  }
+  :host .zonos--hello-widget.zonos--hello-show-peek-message {
+    width: fit-content;
+  }
+  :host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left) {
+    border-top-left-radius: var(--amino-radius-4);
+    border-bottom-left-radius: var(--amino-radius-4);
+  }
+  :host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left {
+    border-top-right-radius: var(--amino-radius-4);
+    border-bottom-right-radius: var(--amino-radius-4);
+  }
+  :host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
+    padding-left: var(--amino-space-8);
+    padding-right: var(--amino-space-4);
+  }
+  :host .zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
+    padding: 0 var(--amino-radius-4);
+    padding-right: 6px;
+    border: none;
+  }
+  :host .zonos--hello-widget .zonos--hello-country-flag-wrapper {
+    border-radius: var(--amino-radius-4);
+  }
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget {
+  position: fixed;
+  bottom: var(--amino-space-32);
+  right: var(--amino-space-32);
+  border-radius: var(--amino-radius-4);
+  padding: var(--amino-space-4);
+  border: 1px solid transparent;
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-left {
+  left: var(--amino-space-32);
+  right: auto;
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-top {
+  bottom: auto;
+  top: var(--amino-space-32);
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget > .zonos--hello-message {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 30px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(0);
+  width: fit-content;
+  border: none;
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-animate-from-left > .zonos--hello-message {
+  transform: translateX(0);
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message {
+  width: fit-content;
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left) {
+  border-top-left-radius: var(--amino-radius-4);
+  border-bottom-left-radius: var(--amino-radius-4);
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left {
+  border-top-right-radius: var(--amino-radius-4);
+  border-bottom-right-radius: var(--amino-radius-4);
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
+  padding-left: var(--amino-space-8);
+  padding-right: var(--amino-space-4);
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
+  padding: 0 var(--amino-radius-4);
+  padding-right: 6px;
+  border: none;
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget .zonos--hello-country-flag-wrapper {
+  border-radius: var(--amino-radius-4);
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget .zonos--hello-country-flag {
+  border-radius: var(--amino-radius-4);
+  width: 24px;
+}