@zonos/elements 1.3.18-alpha.2 → 1.3.18-alpha.3

package/dist/components/zonos-spinner2.js

@@ -1,43 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classes } from './classes.js';
-
-const zonosSpinnerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}: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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:relative;overflow:hidden;width:var(--size);height:var(--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--size);height:var(--size);stroke:var(--zonos-elements-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--zonos-elements-gray-200)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}:host(.black) circle{stroke:var(--zonos-elements-spinner-stroke-black)}:host(.black) circle.track{stroke:var(--zonos-elements-spinner-track-black)}:host(.white) circle{stroke:var(--zonos-elements-spinner-stroke-white)}:host(.white) circle.track{stroke:var(--zonos-elements-spinner-track-white)}:host(.info) circle{stroke:var(--zonos-elements-blue-600)}:host(.info) circle.track{stroke:var(--zonos-elements-blue-100)}:host(.success) circle{stroke:var(--zonos-elements-green-600)}:host(.success) circle.track{stroke:var(--zonos-elements-green-100)}:host(.danger) circle{stroke:var(--zonos-elements-red-600)}:host(.danger) circle.track{stroke:var(--zonos-elements-red-100)}:host(.warning) circle{stroke:var(--zonos-elements-orange-600)}:host(.warning) circle.track{stroke:var(--zonos-elements-orange-100)}";
-const ZonosSpinnerStyle0 = zonosSpinnerCss;
-
-const ZonosSpinner = /*@__PURE__*/ proxyCustomElement(class ZonosSpinner extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.size = 32;
-        this.spinnerColor = undefined;
-    }
-    render() {
-        if (!this.el.shadowRoot) {
-            return null;
-        }
-        return (h(Host, { class: classes(['zonos--elements', this.spinnerColor]), 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" }))));
-    }
-    get el() { return this; }
-    static get style() { return ZonosSpinnerStyle0; }
-}, [1, "zonos-spinner", {
-        "size": [2],
-        "spinnerColor": [1, "spinner-color"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-spinner":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosSpinner);
-            }
-            break;
-    } });
-}
-
-export { ZonosSpinner as Z, defineCustomElement as d };

package/dist/components/zonos-text.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZonosText extends Components.ZonosText, HTMLElement {}
-export const ZonosText: {
-    prototype: ZonosText;
-    new (): ZonosText;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/zonos-text.js

@@ -1,6 +0,0 @@
-import { Z as ZonosText$1, d as defineCustomElement$1 } from './zonos-text2.js';
-
-const ZonosText = ZonosText$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZonosText, defineCustomElement };

package/dist/components/zonos-text2.js

@@ -1,182 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as zonosStoreFontFamily } from './zonosStore.js';
-import { c as classes } from './classes.js';
-import { i as isColorVariable } from './isColorVariable.js';
-
-const textOptions = {
-    pageHeader: {
-        label: 'Page Header (3XL) · 34px (2.125rem)',
-        size: '3xl',
-        tag: 'h2',
-        weight: 900,
-    },
-    secondaryPageHeader: {
-        label: 'Secondary Page Header (3XL) • 34px, 500 "Medium"',
-        size: '3xl',
-        tag: 'h2',
-        weight: 500,
-    },
-    // eslint-disable-next-line sort-keys/sort-keys-fix
-    header: {
-        label: 'Header (2XL) · 28px (1.75rem)',
-        size: '2xl',
-        tag: 'h3',
-        weight: 700,
-    },
-    // eslint-disable-next-line sort-keys/sort-keys-fix
-    descriptionHeader: {
-        label: 'Description Header (2XL) · 28px (1.75rem)',
-        size: '2xl',
-        tag: 'h3',
-        weight: 700,
-    },
-    title: {
-        label: 'Title (XL) • 22px (1.375rem)',
-        size: 'xl',
-        tag: 'h4',
-        weight: 600,
-    },
-    // eslint-disable-next-line sort-keys/sort-keys-fix
-    boldSubheader: {
-        label: 'Bold Subheader (L) • 18px (1.125rem)',
-        size: 'l',
-        tag: 'h5',
-        weight: 700,
-    },
-    semiBoldSubheader: {
-        label: 'Semi Bold Subheader (L / H4) • 18px (1.125rem)',
-        size: 'l',
-        tag: 'h5',
-        weight: 600,
-    },
-    subheader: {
-        label: 'Subheader (L) • 18px (1.125rem)',
-        size: 'l',
-        tag: 'h5',
-        weight: 500,
-    },
-    // eslint-disable-next-line sort-keys/sort-keys-fix
-    boldLabel: {
-        label: 'Bold Label (Base) • 14px (.875rem)',
-        size: 'base',
-        tag: 'span',
-        weight: 700,
-    },
-    semiBoldLabel: {
-        label: 'Semi Bold Label (Base) • 14px (.875rem)',
-        size: 'base',
-        tag: 'span',
-        weight: 600,
-    },
-    // eslint-disable-next-line sort-keys/sort-keys-fix
-    label: {
-        label: 'Label (Base) • 14px (.875rem)',
-        size: 'base',
-        tag: 'span',
-        weight: 500,
-    },
-    // eslint-disable-next-line sort-keys/sort-keys-fix
-    body: {
-        label: 'Body (Base) • 14px (.875rem)',
-        size: 'base',
-        tag: 'span',
-        weight: 400,
-    },
-    smallHeader: {
-        label: 'Small header (S) • 12px (.75rem)',
-        size: 's',
-        tag: 'span',
-        weight: 600,
-    },
-    // eslint-disable-next-line sort-keys/sort-keys-fix
-    caption: {
-        label: 'Caption (S) • 12px (.75rem)',
-        size: 's',
-        tag: 'span',
-        weight: 400,
-    },
-    hintText: {
-        label: 'Hint text (XS) • 10px (.625rem)',
-        size: 'xs',
-        tag: 'span',
-        weight: 400,
-    },
-};
-
-const zonosTextCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}: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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{color:var(--color)}:host(.zonos--text-size-3xl)>*,:host(.zonos--text-size-3xl){font-size:var(--zonos-elements-font-size-3xl)}:host(.zonos--text-size-2xl)>*,:host(.zonos--text-size-2xl){font-size:var(--zonos-elements-font-size-2xl)}:host(.zonos--text-size-xl)>*,:host(.zonos--text-size-xl){font-size:var(--zonos-elements-font-size-xl)}:host(.zonos--text-size-l)>*,:host(.zonos--text-size-l){font-size:var(--zonos-elements-font-size-l)}:host(.zonos--text-size-base)>*,:host(.zonos--text-size-base){font-size:var(--zonos-elements-font-size-base)}:host(.zonos--text-size-s)>*,:host(.zonos--text-size-s){font-size:var(--zonos-elements-font-size-s)}:host(.zonos--text-size-xs)>*,:host(.zonos--text-size-xs){font-size:var(--zonos-elements-font-size-xs)}:host(.zonos--text-weight-900)>*,:host(.zonos--text-weight-900){font-weight:900}:host(.zonos--text-weight-700)>*,:host(.zonos--text-weight-700){font-weight:700}:host(.zonos--text-weight-600)>*,:host(.zonos--text-weight-600){font-weight:600}:host(.zonos--text-weight-500)>*,:host(.zonos--text-weight-500){font-weight:500}:host(.zonos--text-weight-400)>*,:host(.zonos--text-weight-400){font-weight:400}";
-const ZonosTextStyle0 = zonosTextCss;
-
-const ZonosText = /*@__PURE__*/ proxyCustomElement(class ZonosText extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.textColor = '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 actualTextColor = isColorVariable(this.textColor)
-            ? `var(--zonos-elements-${this.textColor})`
-            : this.textColor;
-        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--elements',
-                `zonos--text-size-${textSize}`,
-                `zonos--text-weight-${textWeight}`,
-            ]), style: {
-                '--color': actualTextColor,
-                '--font-family': zonosStoreFontFamily(),
-            } }, renderText()));
-    }
-    static get style() { return ZonosTextStyle0; }
-}, [1, "zonos-text", {
-        "textColor": [1, "text-color"],
-        "size": [1],
-        "type": [1],
-        "weight": [2],
-        "content": [1],
-        "ready": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosText);
-            }
-            break;
-    } });
-}
-
-export { ZonosText as Z, defineCustomElement as d };

package/dist/components/zonos-tooltip.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZonosTooltip extends Components.ZonosTooltip, HTMLElement {}
-export const ZonosTooltip: {
-    prototype: ZonosTooltip;
-    new (): ZonosTooltip;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/zonos-tooltip.js

@@ -1,6 +0,0 @@
-import { Z as ZonosTooltip$1, d as defineCustomElement$1 } from './zonos-tooltip2.js';
-
-const ZonosTooltip = ZonosTooltip$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZonosTooltip, defineCustomElement };

package/dist/components/zonos-tooltip2.js

@@ -1,48 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classes } from './classes.js';
-import { d as defineCustomElement$1 } from './zonos-text2.js';
-
-const zonosTooltipCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}: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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--tooltip{position:relative}:host .zonos--tooltip .zonos--tooltip-content{position:absolute;bottom:100%;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:12px;background-color:var(--zonos-elements-gray-1200);opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:var(--zonos-elements-radius-4);z-index:100;-webkit-box-shadow:var(--zonos-elements-v3-shadow-large);box-shadow:var(--zonos-elements-v3-shadow-large)}:host .zonos--tooltip .zonos--tooltip-content.zonos--show-tooltip{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
-const ZonosTooltipStyle0 = zonosTooltipCss;
-
-const ZonosTooltip = /*@__PURE__*/ proxyCustomElement(class ZonosTooltip extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.label = '';
-        this.subtitle = '';
-        this.showTooltip = false;
-    }
-    render() {
-        return (h(Host, { key: 'dd98e35a2295dd72209775ce1e63d6f653913466', class: "zonos--elements" }, h("div", { key: '4bee5ca82e3a493826b723f620baa6d7cf7af63a', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '1320496e6caed5f16d940f0e5119d5f19186f565' }), h("div", { key: '2a9b891c672d03cdbe8babf59312942e101704a7', class: classes([
-                this.showTooltip && 'zonos--show-tooltip',
-                'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '0146fad3f70fa07e9eb644b26d6dd65963a70c3d', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '36e76d4624927255679107ee47022b7314479441', size: "xs", textColor: "gray-0" }, this.subtitle)))));
-    }
-    static get style() { return ZonosTooltipStyle0; }
-}, [1, "zonos-tooltip", {
-        "label": [1],
-        "subtitle": [1],
-        "showTooltip": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-tooltip", "zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-tooltip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosTooltip);
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZonosTooltip as Z, defineCustomElement as d };

package/dist/components/zonos-v-stack.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZonosVStack extends Components.ZonosVStack, HTMLElement {}
-export const ZonosVStack: {
-    prototype: ZonosVStack;
-    new (): ZonosVStack;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

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

@@ -1,6 +0,0 @@
-import { V as VStack, d as defineCustomElement$1 } from './zonos-v-stack2.js';
-
-const ZonosVStack = VStack;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZonosVStack, defineCustomElement };

package/dist/components/zonos-v-stack2.js

@@ -1,38 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as zonosStoreFontFamily } from './zonosStore.js';
-import { c as classes } from './classes.js';
-
-const zonosVStackCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}: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}: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}";
-const ZonosVStackStyle0 = zonosVStackCss;
-
-const VStack = /*@__PURE__*/ proxyCustomElement(class VStack extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.spacing = 24;
-    }
-    render() {
-        return (h(Host, { key: '3d0753111d525b29e1f36684c89b7216ee0b323f', style: {
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '95b732681743abc1b08b1b8bc722855c3c8e967a', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'b93347c5fb986a70f9f1d67ce2216bba84db7ba4' }))));
-    }
-    static get style() { return ZonosVStackStyle0; }
-}, [1, "zonos-v-stack", {
-        "spacing": [2]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-v-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-v-stack":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, VStack);
-            }
-            break;
-    } });
-}
-
-export { VStack as V, defineCustomElement as d };