npm - @zonos/elements - Versions diffs - 1.2.2 → 1.2.4-alpha.1 - Mend

@zonos/elements 1.2.2 → 1.2.4-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (546) hide show

package/dist/cjs/zonos-button_2.cjs.entry.js CHANGED Viewed

@@ -2,124 +2,125 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-9542d2e7.js');
-const zonosStore = require('./zonosStore-a430ec5b.js');
+const index = require('./index-20cb112f.js');
+const zonosStore = require('./zonosStore-a0fa5b77.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-fdd605c6.js');
-const isColorVariable = require('./isColorVariable-c1ed7303.js');
-const isDarkColor = require('./isDarkColor-f3446afd.js');
+const getBorderRadius = require('./getBorderRadius-a97a5f75.js');
+const isColorVariable = require('./isColorVariable-41cacd82.js');
+const isDarkColor = require('./isDarkColor-261fcf3d.js');
 /**
  * Get theme for button text based on background color
  */
 const getButtonTheme = (overrideBackground) => {
-  // use override background if it exists, otherwise use color from setting
-  const background = overrideBackground || zonosStore.zonosStore.appearance.colorSecondary;
-  const backgroundColor = background && isColorVariable.isColorVariable(background)
-    ? `var(--amino-${background})`
-    : background;
-  // determine theme based on background color (to change button text color if needed)
-  const buttonTheme = backgroundColor && isDarkColor.isDarkColor(backgroundColor) ? 'DARK' : 'LIGHT';
-  return buttonTheme;
+    // use override background if it exists, otherwise use color from setting
+    const background = overrideBackground || zonosStore.zonosStore.appearance.colorSecondary;
+    const backgroundColor = background && isColorVariable.isColorVariable(background)
+        ? `var(--amino-${background})`
+        : background;
+    // determine theme based on background color (to change button text color if needed)
+    const buttonTheme = backgroundColor && isDarkColor.isDarkColor(backgroundColor) ? 'DARK' : 'LIGHT';
+    return buttonTheme;
 };
-const zonosButtonCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{display:-ms-inline-flexbox;display:inline-flex;width:100%;position:relative;outline:none;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 var(--amino-space-16);background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--amino-font-sans);letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--amino-gray-200)}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-200)}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";
+const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--amino-gray-200)}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-200)}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";
 const ZonosButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Detect if the button has an content
+         */
+        this.handleSlotChange = () => {
+            this.hasContent = true;
+        };
+        this.class = '';
+        this.color = undefined;
+        this.backgroundColor = undefined;
+        this.borderStyle = undefined;
+        this.isDisabled = false;
+        this.icon = null;
+        this.iconRight = false;
+        this.size = 'sm';
+        this.variant = 'standard';
+        this.noBackground = false;
+        this.noPaddingLeft = false;
+        this.noPaddingRight = false;
+        this.loading = false;
+        this.theme = undefined;
+        this.hasIcon = !!this.icon;
+        this.hasContent = false;
+    }
     /**
-     * Detect if the button has an content
+     * Detect if the icon changes and update the state accordingly
      */
-    this.handleSlotChange = () => {
-      this.hasContent = true;
-    };
-    this.class = '';
-    this.color = undefined;
-    this.backgroundColor = undefined;
-    this.borderStyle = undefined;
-    this.isDisabled = false;
-    this.icon = null;
-    this.iconRight = false;
-    this.size = 'sm';
-    this.variant = 'standard';
-    this.noBackground = false;
-    this.noPaddingLeft = false;
-    this.noPaddingRight = false;
-    this.loading = false;
-    this.theme = undefined;
-    this.hasIcon = !!this.icon;
-    this.hasContent = false;
-  }
-  /**
-   * Detect if the icon changes and update the state accordingly
-   */
-  iconChangeHandler() {
-    this.hasIcon = !!this.icon;
-  }
-  clickHandler(event) {
-    if (this.loading || this.isDisabled) {
-      event.preventDefault();
-      event.stopPropagation();
+    iconChangeHandler() {
+        this.hasIcon = !!this.icon;
     }
-  }
-  componentWillLoad() {
-    this.iconChangeHandler();
-  }
-  render() {
-    const disabled = this.loading || this.isDisabled;
-    const color = this.color && isColorVariable.isColorVariable(this.color)
-      ? `var(--amino-${this.color})`
-      : this.color;
-    // use override background if it exists, otherwise use color from setting
-    const overrideBackground = this.backgroundColor || zonosStore.zonosStore.appearance.colorSecondary;
-    // only set theme for button to change text color if variant is standard and override background is set
-    const buttonTheme = this.variant === 'standard'
-      ? getButtonTheme(overrideBackground)
-      : undefined;
-    const borderStyle = getBorderRadius.getBorderRadius(this.borderStyle);
-    return (index.h(index.Host, { class: classes.classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
-        '--background-color': overrideBackground,
-        '--border-radius': borderStyle,
-        '--color': color,
-      } }, index.h("button", { class: classes.classes([
-        this.hasIcon && 'has-icon',
-        this.hasContent && 'has-content',
-        this.noBackground && 'no-background',
-        this.noPaddingLeft && 'no-padding-left',
-        this.noPaddingRight && 'no-padding-right',
-        this.iconRight && 'icon-right',
-        this.variant,
-        this.size,
-        // only override background if variant is set to standard
-        this.backgroundColor &&
-          this.variant === 'standard' &&
-          'override-background',
-      ]), disabled: disabled }, this.loading && (index.h("div", { class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
-  }
-  static get watchers() { return {
-    "icon": ["iconChangeHandler"]
-  }; }
+    clickHandler(event) {
+        if (this.loading || this.isDisabled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    componentWillLoad() {
+        this.iconChangeHandler();
+    }
+    render() {
+        const disabled = this.loading || this.isDisabled;
+        const color = this.color && isColorVariable.isColorVariable(this.color)
+            ? `var(--amino-${this.color})`
+            : this.color;
+        // use override background if it exists, otherwise use color from setting
+        const overrideBackground = this.backgroundColor || zonosStore.zonosStore.appearance.colorSecondary;
+        // only set theme for button to change text color if variant is standard and override background is set
+        const buttonTheme = this.variant === 'standard'
+            ? getButtonTheme(overrideBackground)
+            : undefined;
+        const borderStyle = getBorderRadius.getBorderRadius(this.borderStyle);
+        return (index.h(index.Host, { class: classes.classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+                '--background-color': overrideBackground,
+                '--border-radius': borderStyle,
+                '--color': color,
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("button", { class: classes.classes([
+                this.hasIcon && 'has-icon',
+                this.hasContent && 'has-content',
+                this.noBackground && 'no-background',
+                this.noPaddingLeft && 'no-padding-left',
+                this.noPaddingRight && 'no-padding-right',
+                this.iconRight && 'icon-right',
+                this.variant,
+                this.size,
+                // only override background if variant is set to standard
+                this.backgroundColor &&
+                    this.variant === 'standard' &&
+                    'override-background',
+            ]), disabled: disabled }, this.loading && (index.h("div", { class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+    }
+    static get watchers() { return {
+        "icon": ["iconChangeHandler"]
+    }; }
 };
 ZonosButton.style = zonosButtonCss;
-const zonosSpinnerCss = ":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}: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(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}:host.black{stroke:var(--amino-spinner-stroke-black)}:host.black circle.track{stroke:var(--amino-spinner-track-black)}:host.white{stroke:var(--amino-spinner-stroke-white)}:host.white circle.track{stroke:var(--amino-spinner-track-white)}:host.info{stroke:var(--amino-blue-600)}:host.info circle.track{stroke:var(--amino-blue-100)}:host.success{stroke:var(--amino-green-600)}:host.success circle.track{stroke:var(--amino-green-100)}:host.danger{stroke:var(--amino-red-600)}:host.danger circle.track{stroke:var(--amino-red-100)}:host.warning{stroke:var(--amino-orange-600)}:host.warning circle.track{stroke:var(--amino-orange-100)}@-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}";
+const zonosSpinnerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}:host.black{stroke:var(--amino-spinner-stroke-black)}:host.black circle.track{stroke:var(--amino-spinner-track-black)}:host.white{stroke:var(--amino-spinner-stroke-white)}:host.white circle.track{stroke:var(--amino-spinner-track-white)}:host.info{stroke:var(--amino-blue-600)}:host.info circle.track{stroke:var(--amino-blue-100)}:host.success{stroke:var(--amino-green-600)}:host.success circle.track{stroke:var(--amino-green-100)}:host.danger{stroke:var(--amino-red-600)}:host.danger circle.track{stroke:var(--amino-red-100)}:host.warning{stroke:var(--amino-orange-600)}:host.warning circle.track{stroke:var(--amino-orange-100)}@-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}";
 const ZonosSpinner = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.size = 32;
-    this.color = undefined;
-  }
-  render() {
-    if (!this.el.shadowRoot) {
-      return null;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.size = 32;
+        this.color = undefined;
+    }
+    render() {
+        if (!this.el.shadowRoot) {
+            return null;
+        }
+        return (index.h(index.Host, { class: classes.classes(['zonos--elements', this.color]), style: {
+                '--size': `${this.size}px`,
+            } }, index.h("svg", { viewBox: "0 0 50 50" }, index.h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), index.h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
     }
-    return (index.h(index.Host, { class: classes.classes(['zonos--elements', this.color]), style: {
-        '--size': `${this.size}px`,
-      } }, index.h("svg", { viewBox: "0 0 50 50" }, index.h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), index.h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
-  }
-  get el() { return index.getElement(this); }
+    get el() { return index.getElement(this); }
 };
 ZonosSpinner.style = zonosSpinnerCss;

package/dist/cjs/zonos-card_2.cjs.entry.js CHANGED Viewed

@@ -2,42 +2,47 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-9542d2e7.js');
+const index = require('./index-20cb112f.js');
+const zonosStore = require('./zonosStore-a0fa5b77.js');
 const classes = require('./classes-b7918f56.js');
-const zonosCardCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .styled-card{border:var(--amino-border);border-radius:var(--amino-radius-6);padding:var(--spacing, var(--amino-space-24));text-align:left}:host .styled-card hr{margin-left:calc(var(--spacing, var(--amino-space-24)) * -1);margin-right:calc(var(--spacing, var(--amino-space-24)) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, var(--amino-space-24));border-bottom:var(--amino-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));border-top:var(--amino-border);background:var(--amino-surface-color-secondary);margin-top:var(--spacing, var(--amino-space-24));border-bottom-left-radius:var(--amino-radius-8);border-bottom-right-radius:var(--amino-radius-8);height:var(--footerHeight)}";
+const zonosCardCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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 .styled-card{border:var(--amino-border);border-radius:var(--amino-radius-6);padding:var(--spacing, var(--amino-space-24));text-align:left}:host .styled-card hr{margin-left:calc(var(--spacing, var(--amino-space-24)) * -1);margin-right:calc(var(--spacing, var(--amino-space-24)) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, var(--amino-space-24));border-bottom:var(--amino-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));border-top:var(--amino-border);background:var(--amino-surface-color-secondary);margin-top:var(--spacing, var(--amino-space-24));border-bottom-left-radius:var(--amino-radius-8);border-bottom-right-radius:var(--amino-radius-8);height:var(--footerHeight)}";
 const ZonosCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.actions = undefined;
-    this.class = undefined;
-    this.footerActions = undefined;
-    this.footerContent = undefined;
-    this.footerHeight = undefined;
-    this.label = undefined;
-    this.spacing = '24px';
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: classes.classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (index.h("header", { class: "card-header", style: { padding: this.spacing } }, index.h("text-component", { type: "subheader" }, this.label), index.h("h-stack", { spacing: 8 }, this.actions))), index.h("slot", null), (this.footerActions || this.footerContent) && (index.h("footer", { class: "card-footer", style: {
-        height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
-        padding: this.spacing,
-      } }, index.h("div", null, this.footerContent), index.h("h-stack", { spacing: 8 }, this.footerActions))))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.actions = undefined;
+        this.class = undefined;
+        this.footerActions = undefined;
+        this.footerContent = undefined;
+        this.footerHeight = undefined;
+        this.label = undefined;
+        this.spacing = '24px';
+    }
+    render() {
+        return (index.h(index.Host, { style: {
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("div", { class: classes.classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (index.h("header", { class: "card-header", style: { padding: this.spacing } }, index.h("zonos-text", { type: "subheader" }, this.label), index.h("h-stack", { spacing: 8 }, this.actions))), index.h("slot", null), (this.footerActions || this.footerContent) && (index.h("footer", { class: "card-footer", style: {
+                height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
+                padding: this.spacing,
+            } }, index.h("div", null, this.footerContent), index.h("h-stack", { spacing: 8 }, this.footerActions))))));
+    }
 };
 ZonosCard.style = zonosCardCss;
-const zonosVStackCss = ":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}: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 zonosVStackCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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 VStack = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.spacing = 24;
-    this.class = '';
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: classes.classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", null))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.spacing = 24;
+        this.class = '';
+    }
+    render() {
+        return (index.h(index.Host, { style: {
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("div", { class: classes.classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", null))));
+    }
 };
 VStack.style = zonosVStackCss;