@zonos/elements 1.2.3 → 1.2.4-alpha.1

package/dist/collection/components/common/zonos-spinner/zonos-spinner.js

@@ -1,77 +1,77 @@
 import { h, Host } from "@stencil/core";
 import { classes } from "../../utils/classes";
 export class ZonosSpinner {
-  constructor() {
-    this.size = 32;
-    this.color = undefined;
-  }
-  render() {
-    if (!this.el.shadowRoot) {
-      return null;
+    constructor() {
+        this.size = 32;
+        this.color = undefined;
     }
-    return (h(Host, { class: classes(['zonos--elements', this.color]), style: {
-        '--size': `${this.size}px`,
-      } }, h("svg", { viewBox: "0 0 50 50" }, h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
-  }
-  static get is() { return "zonos-spinner"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-spinner.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-spinner.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "32"
-            }],
-          "text": "The size of the spinner"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "32"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "SpinnerColor",
-          "resolved": "\"black\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\" | undefined",
-          "references": {
-            "SpinnerColor": {
-              "location": "local",
-              "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-spinner/zonos-spinner.tsx",
-              "id": "src/components/common/zonos-spinner/zonos-spinner.tsx::SpinnerColor"
+    render() {
+        if (!this.el.shadowRoot) {
+            return null;
+        }
+        return (h(Host, { class: classes(['zonos--elements', this.color]), style: {
+                '--size': `${this.size}px`,
+            } }, h("svg", { viewBox: "0 0 50 50" }, h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
+    }
+    static get is() { return "zonos-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-spinner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-spinner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "32"
+                        }],
+                    "text": "The size of the spinner"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "32"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SpinnerColor",
+                    "resolved": "\"black\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\" | undefined",
+                    "references": {
+                        "SpinnerColor": {
+                            "location": "local",
+                            "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-spinner/zonos-spinner.tsx",
+                            "id": "src/components/common/zonos-spinner/zonos-spinner.tsx::SpinnerColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the spinner"
+                },
+                "attribute": "color",
+                "reflect": false
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Color of the spinner"
-        },
-        "attribute": "color",
-        "reflect": false
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
+        };
+    }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/common/zonos-text/zonos-text.css

@@ -1,7 +1,10 @@
 :host {
-  font-family: Inter;
+  font-family: var(--font-family, Inter), Inter;
   display: block;
 }
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
 :host img {
   max-width: 100%;
 }

package/dist/collection/components/common/zonos-text/zonos-text.js

@@ -1,198 +1,200 @@
 import { h, Host } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 import { textOptions, } from "../../../types/styles/Text";
 export class ZonosText {
-  constructor() {
-    this.class = '';
-    this.color = 'gray-1200';
-    this.size = undefined;
-    this.type = 'body';
-    this.weight = undefined;
-    this.content = undefined;
-    this.ready = false;
-  }
-  componentDidRender() {
-    setTimeout(() => {
-      this.ready = true;
-    }, 100);
-  }
-  render() {
-    const { size: defaultSize, tag: defaultTag, weight: defaultWeight, } = textOptions.body;
-    const { size, tag, weight } = textOptions[this.type];
-    const textSize = this.size || size || defaultSize;
-    const textWeight = this.weight || weight || defaultWeight;
-    const textTag = tag || defaultTag;
-    const renderText = () => {
-      switch (textTag) {
-        case 'h2':
-          return (h("h2", null, h("slot", null)));
-        case 'h3':
-          return (h("h3", null, h("slot", null)));
-        case 'h4':
-          return (h("h4", null, h("slot", null)));
-        case 'h5':
-          return (h("h5", null, h("slot", null)));
-        case 'span':
-        default:
-          return (h("span", null, h("slot", null)));
-      }
-    };
-    return (h(Host, { class: classes([
-        `zonos--text-size-${textSize}`,
-        `zonos--text-weight-${textWeight}`,
-        this.class,
-      ]), style: {
-        '--color': this.color ? `var(--amino-${this.color})` : '',
-      } }, renderText()));
-  }
-  static get is() { return "zonos-text"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-text.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-text.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "class": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "css class for the component"
-        },
-        "attribute": "class",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Color",
-          "resolved": "\"blue-100\" | \"blue-200\" | \"blue-300\" | \"blue-400\" | \"blue-500\" | \"blue-600\" | \"blue-700\" | \"blue-800\" | \"blue-900\" | \"blue-1000\" | \"cyan-100\" | \"cyan-200\" | \"cyan-300\" | \"cyan-400\" | \"cyan-500\" | \"cyan-600\" | \"cyan-700\" | \"cyan-800\" | \"cyan-900\" | \"cyan-1000\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-1000\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-1000\" | \"purple-100\" | \"purple-200\" | \"purple-300\" | \"purple-400\" | \"purple-500\" | \"purple-600\" | \"purple-700\" | \"purple-800\" | \"purple-900\" | \"purple-1000\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-1000\" | \"gray-100\" | \"gray-200\" | \"gray-300\" | \"gray-400\" | \"gray-500\" | \"gray-600\" | \"gray-700\" | \"gray-800\" | \"gray-900\" | \"gray-1000\" | \"glass-100\" | \"glass-200\" | \"glass-300\" | \"glass-400\" | \"glass-500\" | \"glass-600\" | \"glass-700\" | \"glass-800\" | \"glass-900\" | \"glass-1000\" | \"gray-0\" | \"gray-50\" | \"glass-0\" | \"glass-50\" | \"gray-1100\" | \"gray-1200\" | \"glass-1100\" | \"glass-1200\"",
-          "references": {
-            "Color": {
-              "location": "import",
-              "path": "src/types/styles/Color",
-              "id": "src/types/styles/Color.ts::Color"
+    constructor() {
+        this.class = '';
+        this.color = 'gray-1200';
+        this.size = undefined;
+        this.type = 'body';
+        this.weight = undefined;
+        this.content = undefined;
+        this.ready = false;
+    }
+    componentDidRender() {
+        setTimeout(() => {
+            this.ready = true;
+        }, 100);
+    }
+    render() {
+        const { size: defaultSize, tag: defaultTag, weight: defaultWeight, } = textOptions.body;
+        const { size, tag, weight } = textOptions[this.type];
+        const textSize = this.size || size || defaultSize;
+        const textWeight = this.weight || weight || defaultWeight;
+        const textTag = tag || defaultTag;
+        const renderText = () => {
+            switch (textTag) {
+                case 'h2':
+                    return (h("h2", null, h("slot", null)));
+                case 'h3':
+                    return (h("h3", null, h("slot", null)));
+                case 'h4':
+                    return (h("h4", null, h("slot", null)));
+                case 'h5':
+                    return (h("h5", null, h("slot", null)));
+                case 'span':
+                default:
+                    return (h("span", null, h("slot", null)));
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The icon element to display"
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'gray-1200'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Size",
-          "resolved": "\"2xl\" | \"3xl\" | \"base\" | \"l\" | \"s\" | \"xl\" | \"xs\" | undefined",
-          "references": {
-            "Size": {
-              "location": "import",
-              "path": "src/types/styles/Text",
-              "id": "src/types/styles/Text.ts::Size"
+        };
+        return (h(Host, { class: classes([
+                `zonos--text-size-${textSize}`,
+                `zonos--text-weight-${textWeight}`,
+                this.class,
+            ]), style: {
+                '--color': this.color ? `var(--amino-${this.color})` : '',
+                '--font-family': zonosStoreFontFamily(),
+            } }, renderText()));
+    }
+    static get is() { return "zonos-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "css class for the component"
+                },
+                "attribute": "class",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"blue-100\" | \"blue-200\" | \"blue-300\" | \"blue-400\" | \"blue-500\" | \"blue-600\" | \"blue-700\" | \"blue-800\" | \"blue-900\" | \"blue-1000\" | \"cyan-100\" | \"cyan-200\" | \"cyan-300\" | \"cyan-400\" | \"cyan-500\" | \"cyan-600\" | \"cyan-700\" | \"cyan-800\" | \"cyan-900\" | \"cyan-1000\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-1000\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-1000\" | \"purple-100\" | \"purple-200\" | \"purple-300\" | \"purple-400\" | \"purple-500\" | \"purple-600\" | \"purple-700\" | \"purple-800\" | \"purple-900\" | \"purple-1000\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-1000\" | \"gray-100\" | \"gray-200\" | \"gray-300\" | \"gray-400\" | \"gray-500\" | \"gray-600\" | \"gray-700\" | \"gray-800\" | \"gray-900\" | \"gray-1000\" | \"glass-100\" | \"glass-200\" | \"glass-300\" | \"glass-400\" | \"glass-500\" | \"glass-600\" | \"glass-700\" | \"glass-800\" | \"glass-900\" | \"glass-1000\" | \"gray-0\" | \"gray-50\" | \"glass-0\" | \"glass-50\" | \"gray-1100\" | \"gray-1200\" | \"glass-1100\" | \"glass-1200\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "src/types/styles/Color",
+                            "id": "src/types/styles/Color.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon element to display"
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'gray-1200'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Size",
+                    "resolved": "\"2xl\" | \"3xl\" | \"base\" | \"l\" | \"s\" | \"xl\" | \"xs\" | undefined",
+                    "references": {
+                        "Size": {
+                            "location": "import",
+                            "path": "src/types/styles/Text",
+                            "id": "src/types/styles/Text.ts::Size"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the text"
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Type",
+                    "resolved": "\"body\" | \"boldLabel\" | \"boldSubheader\" | \"caption\" | \"descriptionHeader\" | \"header\" | \"hintText\" | \"label\" | \"pageHeader\" | \"secondaryPageHeader\" | \"semiBoldLabel\" | \"semiBoldSubheader\" | \"smallHeader\" | \"subheader\" | \"title\"",
+                    "references": {
+                        "Type": {
+                            "location": "import",
+                            "path": "src/types/styles/Text",
+                            "id": "src/types/styles/Text.ts::Type"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of the text to display"
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'body'"
+            },
+            "weight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "FontWeight",
+                    "resolved": "400 | 500 | 600 | 700 | 800 | 900 | undefined",
+                    "references": {
+                        "FontWeight": {
+                            "location": "import",
+                            "path": "src/types/styles/Text",
+                            "id": "src/types/styles/Text.ts::FontWeight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The weight of the text"
+                },
+                "attribute": "weight",
+                "reflect": false
+            },
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The tag to use for the text"
+                },
+                "attribute": "content",
+                "reflect": false
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The size of the text"
-        },
-        "attribute": "size",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Type",
-          "resolved": "\"body\" | \"boldLabel\" | \"boldSubheader\" | \"caption\" | \"descriptionHeader\" | \"header\" | \"hintText\" | \"label\" | \"pageHeader\" | \"secondaryPageHeader\" | \"semiBoldLabel\" | \"semiBoldSubheader\" | \"smallHeader\" | \"subheader\" | \"title\"",
-          "references": {
-            "Type": {
-              "location": "import",
-              "path": "src/types/styles/Text",
-              "id": "src/types/styles/Text.ts::Type"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of the text to display"
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'body'"
-      },
-      "weight": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "FontWeight",
-          "resolved": "400 | 500 | 600 | 700 | 800 | 900 | undefined",
-          "references": {
-            "FontWeight": {
-              "location": "import",
-              "path": "src/types/styles/Text",
-              "id": "src/types/styles/Text.ts::FontWeight"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The weight of the text"
-        },
-        "attribute": "weight",
-        "reflect": false
-      },
-      "content": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The tag to use for the text"
-        },
-        "attribute": "content",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "ready": {}
-    };
-  }
+        };
+    }
+    static get states() {
+        return {
+            "ready": {}
+        };
+    }
 }

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

@@ -1,7 +1,10 @@
 :host {
-  font-family: Inter;
+  font-family: var(--font-family, Inter), Inter;
   display: block;
 }
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
 :host img {
   max-width: 100%;
 }