@zonos/elements 1.0.16

package/dist/cjs/zonos-address_2.cjs.entry.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9542d2e7.js');
+const cart = require('./cart-e27fd17c.js');
+const localization = require('./localization-f6a1b679.js');
+require('./zonosStore-960e5542.js');
+require('./isDarkColor-a86b8a05.js');
+require('./getBorderRadius-2904800c.js');
+
+const zonosAddressCss = ".sc-zonos-address-h{font-family:Inter;display:block}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}";
+
+const ZonosAddress = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.type = undefined;
+    this.titleText = undefined;
+    this.defaultAddress = null;
+    this.stripe = window.Zonos.stripe;
+  }
+  async watchInitStripe() {
+    var _a, _b;
+    this.stripe = window.Zonos.stripe;
+    if (!this.stripe || !cart.stripeStore.stripeElements) {
+      localization.logError("Stripe is not initialized. Couldn't load stripe element.");
+      return;
+    }
+    const phone = (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.phone;
+    if (!phone) {
+      // remove phone from default address if it's not provided, stripe
+      // will throw error if key phone exist and its value is empty or 'undefined'.
+      (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
+    }
+    const shippableCountries = localization.localizationStore.shippingZoneCountries;
+    const addressElement = cart.stripeStore.stripeAddressElement ||
+      cart.stripeStore.stripeElements.create('address', {
+        allowedCountries: shippableCountries
+          ? Object.values(shippableCountries).map(country => country.code)
+          : [],
+        contacts: this.defaultAddress ? [this.defaultAddress] : undefined,
+        display: {
+          name: 'split',
+        },
+        fields: {
+          phone: 'always',
+        },
+        mode: this.type,
+        validation: {
+          phone: {
+            required: 'always',
+          },
+        },
+      });
+    addressElement.mount(this.el.querySelector('.zonos--address-component'));
+    addressElement.on('change', event => {
+      const eventValue = event.value;
+      cart.stripeStore.stripeAddressEventData = Object.assign(Object.assign({}, event), { elementMode: 'shipping', elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) });
+      // run prefetch landed cost when address is changed
+      void cart.stripeStorePrefetchLandedCost();
+    });
+    cart.stripeStore.stripeAddressElement = addressElement;
+  }
+  componentDidLoad() {
+    // @Watch doesn't get trigger on initial load
+    void this.watchInitStripe();
+  }
+  render() {
+    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+    return (index.h(index.Host, { class: "zonos--address zonos--elements" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { class: "zonos--address-component" })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "stripe": ["watchInitStripe"]
+  }; }
+};
+ZonosAddress.style = zonosAddressCss;
+
+const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:Inter;display:block}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";
+
+const ZonosLinkAuthentication = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.titleText = undefined;
+    this.stripe = cart.stripeStore.stripe;
+  }
+  watchInitStripe() {
+    if (!this.stripe || !cart.stripeStore.stripeElements) {
+      return;
+    }
+    // Create and mount the Authentication Element in ${type} mode
+    const linkAuthenticationElement = cart.stripeStore.stripeLinkElement ||
+      cart.stripeStore.stripeElements.create('linkAuthentication');
+    const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
+    if (!linkAuthenticationElementContainer) {
+      // eslint-disable-next-line no-console
+      console.error('Cannot find container element for linkAuthenticationElement');
+      return;
+    }
+    linkAuthenticationElement.mount(linkAuthenticationElementContainer);
+    linkAuthenticationElement.on('change', event => {
+      cart.stripeStore.stripeLinkEventData = event;
+      // run prefetch landed cost when address is changed
+      void cart.stripeStorePrefetchLandedCost();
+    });
+    cart.stripeStore.stripeLinkElement = linkAuthenticationElement;
+  }
+  componentDidLoad() {
+    // @Watch doesn't get trigger on initial load
+    this.watchInitStripe();
+  }
+  render() {
+    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+    return (index.h(index.Host, { class: "zonos--link-authentication zonos--elements" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { class: "zonos--link-authentication-component" })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "stripe": ["watchInitStripe"]
+  }; }
+};
+ZonosLinkAuthentication.style = zonosLinkAuthenticationCss;
+
+exports.zonos_address = ZonosAddress;
+exports.zonos_link_authentication = ZonosLinkAuthentication;
+
+//# sourceMappingURL=zonos-address_2.cjs.entry.js.map

package/dist/cjs/zonos-address_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"zonos-address.zonos-link-authentication.entry.cjs.js","mappings":"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","names":["stripeStore","logError","localizationStore","stripeStorePrefetchLandedCost","h","Host"],"sources":["src/components/stripe/zonos-address/zonos-address.scss?tag=zonos-address&encapsulation=scoped","src/components/stripe/zonos-address/zonos-address.tsx","src/components/stripe/zonos-link-authentication/zonos-link-authentication.scss?tag=zonos-link-authentication&encapsulation=scoped","src/components/stripe/zonos-link-authentication/zonos-link-authentication.tsx"],"sourcesContent":[":host {\n  .zonos--title {\n    margin-bottom: $amino-space-16;\n  }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { ContactOption, Stripe } from '@stripe/stripe-js';\n\nimport {\n  stripeStore,\n  stripeStorePrefetchLandedCost,\n} from 'src/components/store/checkout/stripe';\nimport { localizationStore } from 'src/components/store/hello/localization';\nimport { logError } from 'src/components/utils/logging/logError';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is using stripe elements and stripe\n   * need to be able to inject iframe into this component\n   * **NOTE**: Prefer `shadow` when creating new component\n   * */\n  scoped: true,\n  styleUrl: 'zonos-address.scss',\n  tag: 'zonos-address',\n})\n/**\n * This component is a wrapper for the stripe address element that would render default style object\n */\nexport class ZonosAddress {\n  /**\n   * The type of address element to render\n   */\n  @Prop() type!: 'billing' | 'shipping';\n\n  /**\n   * The title text for the address element\n   */\n  @Prop() titleText!: string;\n\n  /**\n   * Default address for stripe\n   */\n  @Prop() defaultAddress: ContactOption | null = null;\n\n  @State() stripe: Stripe | null = window.Zonos.stripe;\n\n  @Element() el!: HTMLZonosAddressElement;\n\n  @Watch('stripe')\n  async watchInitStripe() {\n    this.stripe = window.Zonos.stripe;\n    if (!this.stripe || !stripeStore.stripeElements) {\n      logError(\"Stripe is not initialized. Couldn't load stripe element.\");\n      return;\n    }\n\n    const phone = this.defaultAddress?.phone;\n    if (!phone) {\n      // remove phone from default address if it's not provided, stripe\n      // will throw error if key phone exist and its value is empty or 'undefined'.\n      delete this.defaultAddress?.phone;\n    }\n\n    const shippableCountries = localizationStore.shippingZoneCountries;\n    const addressElement =\n      stripeStore.stripeAddressElement ||\n      stripeStore.stripeElements.create('address', {\n        allowedCountries: shippableCountries\n          ? Object.values(shippableCountries).map(country => country.code)\n          : [],\n        contacts: this.defaultAddress ? [this.defaultAddress] : undefined,\n        display: {\n          name: 'split',\n        },\n        fields: {\n          phone: 'always',\n        },\n        mode: this.type,\n        validation: {\n          phone: {\n            required: 'always',\n          },\n        },\n      });\n\n    addressElement.mount(\n      this.el.querySelector('.zonos--address-component') as HTMLElement,\n    );\n    addressElement.on('change', event => {\n      const eventValue = event.value;\n      stripeStore.stripeAddressEventData = {\n        ...event,\n        elementMode: 'shipping',\n        elementType: 'address',\n        empty: false,\n        value: {\n          ...eventValue,\n          firstName: eventValue.firstName || eventValue.name.split(' ')[0],\n          lastName: eventValue.lastName || eventValue.name.split(' ').pop(),\n        },\n      };\n      // run prefetch landed cost when address is changed\n      void stripeStorePrefetchLandedCost();\n    });\n    stripeStore.stripeAddressElement = addressElement;\n  }\n\n  componentDidLoad() {\n    // @Watch doesn't get trigger on initial load\n    void this.watchInitStripe();\n  }\n\n  render() {\n    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here\n    return (\n      <Host class=\"zonos--address zonos--elements\">\n        <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n          {this.titleText}\n        </zonos-text>\n        <div class=\"zonos--address-component\"></div>\n      </Host>\n    );\n  }\n}\n",":host {\n  .zonos--title {\n    margin-bottom: $amino-space-16;\n  }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { Stripe } from '@stripe/stripe-js';\n\nimport {\n  stripeStore,\n  stripeStorePrefetchLandedCost,\n} from 'src/components/store/checkout/stripe';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is using stripe elements and stripe\n   * need to be able to inject iframe into this component\n   * **NOTE**: Prefer `shadow` when creating new component\n   * */\n  scoped: true,\n  styleUrl: 'zonos-link-authentication.scss',\n  tag: 'zonos-link-authentication',\n})\n/**\n * This component is a wrapper for the stripe authentication element that would render default style object\n */\nexport class ZonosLinkAuthentication {\n  /**\n   * The title text for the authentication element\n   */\n  @Prop() titleText!: string;\n\n  @State() stripe: Stripe | null = stripeStore.stripe;\n\n  @Element() el!: HTMLZonosLinkAuthenticationElement;\n\n  @Watch('stripe')\n  watchInitStripe() {\n    if (!this.stripe || !stripeStore.stripeElements) {\n      return;\n    }\n\n    // Create and mount the Authentication Element in ${type} mode\n    const linkAuthenticationElement =\n      stripeStore.stripeLinkElement ||\n      stripeStore.stripeElements.create('linkAuthentication');\n\n    const linkAuthenticationElementContainer =\n      this.el.querySelector<HTMLElement>(\n        '.zonos--link-authentication-component',\n      );\n\n    if (!linkAuthenticationElementContainer) {\n      // eslint-disable-next-line no-console\n      console.error(\n        'Cannot find container element for linkAuthenticationElement',\n      );\n      return;\n    }\n\n    linkAuthenticationElement.mount(linkAuthenticationElementContainer);\n    linkAuthenticationElement.on('change', event => {\n      stripeStore.stripeLinkEventData = event;\n      // run prefetch landed cost when address is changed\n      void stripeStorePrefetchLandedCost();\n    });\n    stripeStore.stripeLinkElement = linkAuthenticationElement;\n  }\n\n  componentDidLoad() {\n    // @Watch doesn't get trigger on initial load\n    this.watchInitStripe();\n  }\n\n  render() {\n    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here\n    return (\n      <Host class=\"zonos--link-authentication zonos--elements\">\n        <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n          {this.titleText}\n        </zonos-text>\n        <div class=\"zonos--link-authentication-component\"></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/zonos-badge.cjs.entry.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9542d2e7.js');
+const classes = require('./classes-b7918f56.js');
+
+const zonosBadgeCss = ":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--badge-content{display:-ms-flexbox;display:flex;gap:var(--amino-space-8);font-size:var(--amino-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--amino-radius-6);background-color:var(--amino-gray-100);color:var(--amino-gray-800);-ms-flex-align:center;align-items:center}:host p{font-weight:600;line-height:16px}:host .icon-right svg{-ms-flex-order:2;order:2}:host .small{padding:2px 8px}:host .rounded{border-radius:20px}:host .bold{background-color:var(--amino-gray-600);color:var(--amino-gray-100)}:host .blue{background-color:var(--amino-blue-100);color:var(--amino-blue-800)}:host .blue.bold{background-color:var(--amino-blue-600);color:var(--amino-blue-100)}:host .green{background-color:var(--amino-green-100);color:var(--amino-green-800)}:host .green.bold{background-color:var(--amino-green-600);color:var(--amino-green-100)}:host .red{background-color:var(--amino-red-100);color:var(--amino-red-800)}:host .red.bold{background-color:var(--amino-red-600);color:var(--amino-red-100)}:host .orange{background-color:var(--amino-orange-100);color:var(--amino-orange-800)}:host .orange.bold{background-color:var(--amino-orange-600);color:var(--amino-orange-100)}:host .purple{background-color:var(--amino-purple-100);color:var(--amino-purple-800)}:host .purple.bold{background-color:var(--amino-purple-600);color:var(--amino-purple-100)}:host .cyan{background-color:var(--amino-cyan-100);color:var(--amino-cyan-800)}:host .cyan.bold{background-color:var(--amino-cyan-600);color:var(--amino-cyan-100)}";
+
+const ZonosBadge = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bold = false;
+    this.color = 'gray';
+    this.icon = undefined;
+    this.iconRight = false;
+    this.size = 'default';
+    this.rounded = false;
+    this.class = '';
+  }
+  render() {
+    return (index.h(index.Host, { class: classes.classes(['zonos--elements zonos--badge', this.class]) }, index.h("div", { class: classes.classes([
+        'zonos--badge-content',
+        this.color,
+        this.rounded && 'rounded',
+        this.iconRight && 'icon-right',
+        this.size,
+        this.bold && 'bold',
+      ]) }, this.icon, index.h("p", null, index.h("slot", null)))));
+  }
+};
+ZonosBadge.style = zonosBadgeCss;
+
+exports.zonos_badge = ZonosBadge;
+
+//# sourceMappingURL=zonos-badge.cjs.entry.js.map

package/dist/cjs/zonos-badge.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"zonos-badge.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,qzDAAqzD;;MCU9zD,UAAU;;;gBAKG,KAAK;iBAMA,MAAM;;qBAYN,KAAK;gBAME,SAAS;mBAMlB,KAAK;iBAKR,EAAE;;EAE1B,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAEC,eAAO,CAAC,CAAC,8BAA8B,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAChEF,iBACE,KAAK,EAAEE,eAAO,CAAC;QACb,sBAAsB;QACtB,IAAI,CAAC,KAAK;QACV,IAAI,CAAC,OAAO,IAAI,SAAS;QACzB,IAAI,CAAC,SAAS,IAAI,YAAY;QAC9B,IAAI,CAAC,IAAI;QACT,IAAI,CAAC,IAAI,IAAI,MAAM;OACpB,CAAC,IAED,IAAI,CAAC,IAAI,EACVF,mBACEA,qBAAQ,CACN,CACA,CACD,EACP;GACH;;;;;;","names":["h","Host","classes"],"sources":["src/components/common/zonos-badge/zonos-badge.scss?tag=zonos-badge&encapsulation=shadow","src/components/common/zonos-badge/zonos-badge.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  .zonos--badge-content {\n    display: flex;\n    gap: $amino-space-8;\n    font-size: $amino-font-size-s;\n    padding: 4px 8px;\n    text-align: center;\n    border-radius: $amino-radius-6;\n    background-color: $amino-gray-100;\n    color: $amino-gray-800;\n    align-items: center;\n  }\n  p {\n    font-weight: 600;\n    line-height: 16px;\n  }\n  .icon-right {\n    svg {\n      order: 2;\n    }\n  }\n\n  // size\n  .small {\n    padding: 2px 8px;\n  }\n  .rounded {\n    border-radius: 20px;\n  }\n\n  .bold {\n    // bold config default (gray)\n    background-color: $amino-gray-600;\n    color: $amino-gray-100;\n  }\n\n  .blue {\n    // color config\n    background-color: $amino-blue-100;\n    color: $amino-blue-800;\n    &.bold {\n      // bold config\n      background-color: $amino-blue-600;\n      color: $amino-blue-100;\n    }\n  }\n  .green {\n    // color config\n    background-color: $amino-green-100;\n    color: $amino-green-800;\n    &.bold {\n      // bold config\n      background-color: $amino-green-600;\n      color: $amino-green-100;\n    }\n  }\n  .red {\n    // color config\n    background-color: $amino-red-100;\n    color: $amino-red-800;\n    &.bold {\n      // bold config\n      background-color: $amino-red-600;\n      color: $amino-red-100;\n    }\n  }\n  .orange {\n    // color config\n    background-color: $amino-orange-100;\n    color: $amino-orange-800;\n    &.bold {\n      // bold config\n      background-color: $amino-orange-600;\n      color: $amino-orange-100;\n    }\n  }\n  .purple {\n    // color config\n    background-color: $amino-purple-100;\n    color: $amino-purple-800;\n    &.bold {\n      // bold config\n      background-color: $amino-purple-600;\n      color: $amino-purple-100;\n    }\n  }\n\n  .cyan {\n    // color config\n    background-color: $amino-cyan-100;\n    color: $amino-cyan-800;\n    &.bold {\n      // bold config\n      background-color: $amino-cyan-600;\n      color: $amino-cyan-100;\n    }\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { ColorPrefix } from 'src/types/styles/Color';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-badge.scss',\n  tag: 'zonos-badge',\n})\nexport class ZonosBadge {\n  /**\n   * Whether or not the badge is bold\n   * @default false\n   */\n  @Prop() bold: boolean = false;\n\n  /**\n   * The size of the badge\n   * @default 24\n   */\n  @Prop() color: ColorPrefix = 'gray';\n\n  /**\n   * The icon element to display\n   * @default null\n   */\n  @Prop() icon?: HTMLZonosIconElement;\n\n  /**\n   * Position the icon to the right when icon is specified\n   * @default false\n   */\n  @Prop() iconRight: boolean = false;\n\n  /**\n   * The size of the badge\n   * @default 'default'\n   */\n  @Prop() size: 'small' | 'default' = 'default';\n\n  /**\n   * Whether or not the badge is rounded\n   * @default false\n   */\n  @Prop() rounded: boolean = false;\n\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n\n  render() {\n    return (\n      <Host class={classes(['zonos--elements zonos--badge', this.class])}>\n        <div\n          class={classes([\n            'zonos--badge-content',\n            this.color,\n            this.rounded && 'rounded',\n            this.iconRight && 'icon-right',\n            this.size,\n            this.bold && 'bold',\n          ])}\n        >\n          {this.icon}\n          <p>\n            <slot />\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/zonos-banner_2.cjs.entry.js

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9542d2e7.js');
+const classes = require('./classes-b7918f56.js');
+const cart = require('./cart-e27fd17c.js');
+require('./zonosStore-960e5542.js');
+require('./localization-f6a1b679.js');
+require('./isDarkColor-a86b8a05.js');
+require('./getBorderRadius-2904800c.js');
+
+const zonosBannerCss = ":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{border-radius:var(--amino-radius-10);padding:var(--amino-space-16);background:var(--amino-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:8px}:host(.info){background-color:var(--amino-blue-100)}:host(.success){background-color:var(--amino-green-100)}:host(.error){background-color:var(--amino-red-100)}:host(.warning){background-color:var(--amino-orange-100)}";
+
+const ZonosBanner = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Detect if the button has an content
+     */
+    this.handleSlotChange = () => {
+      this.hasContent = true;
+    };
+    this.bannerTitle = undefined;
+    this.intent = undefined;
+    this.class = '';
+    this.hasContent = false;
+  }
+  render() {
+    const renderContent = ({ color }) => {
+      const primaryColor = `var(--amino-${color}-800)`;
+      const secondaryColor = `var(--amino-${color}-300)`;
+      const [header, content] = [
+        this.bannerTitle,
+        index.h("slot", { onSlotchange: this.handleSlotChange }),
+      ].filter(Boolean);
+      const textColor = color === 'gray' ? 'gray-1200' : `${color}-800`;
+      return (index.h("div", { class: classes.classes(['zonos--container']) }, index.h("div", { class: "zonos--icon-wrapper" }, index.h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), index.h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), index.h("div", { class: "zonos--header-wrapper" }, index.h("zonos-text", { color: textColor, type: "label", weight: 600 }, header)), content && (index.h("div", { class: "zonos--content-wrapper" }, index.h("zonos-text", { color: textColor }, content)))));
+    };
+    const baseClass = classes.classes([
+      'zonos--elements zonos--banner',
+      this.class,
+      this.intent,
+    ]);
+    switch (this.intent) {
+      case 'error':
+        return (index.h(index.Host, { class: baseClass }, renderContent({
+          color: 'red',
+        })));
+      case 'info':
+        return (index.h(index.Host, { class: baseClass }, renderContent({
+          color: 'blue',
+        })));
+      case 'success':
+        return (index.h(index.Host, { class: baseClass }, renderContent({
+          color: 'green',
+        })));
+      case 'warning':
+        return (index.h(index.Host, { class: baseClass }, renderContent({
+          color: 'orange',
+        })));
+      default:
+        return (index.h(index.Host, { class: baseClass }, renderContent({
+          color: 'gray',
+        })));
+    }
+  }
+};
+ZonosBanner.style = zonosBannerCss;
+
+const zonosPaymentCss = ".sc-zonos-payment-h{font-family:Inter;display:block}.sc-zonos-payment-h img.sc-zonos-payment{max-width:100%}.sc-zonos-payment-h dl.sc-zonos-payment,.sc-zonos-payment-h dd.sc-zonos-payment,.sc-zonos-payment-h h1.sc-zonos-payment,.sc-zonos-payment-h h2.sc-zonos-payment,.sc-zonos-payment-h h3.sc-zonos-payment,.sc-zonos-payment-h h4.sc-zonos-payment,.sc-zonos-payment-h h5.sc-zonos-payment,.sc-zonos-payment-h h6.sc-zonos-payment,.sc-zonos-payment-h hr.sc-zonos-payment,.sc-zonos-payment-h figure.sc-zonos-payment,.sc-zonos-payment-h p.sc-zonos-payment,.sc-zonos-payment-h pre.sc-zonos-payment{margin:0}.sc-zonos-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-payment-h .zonos--title.sc-zonos-payment{margin-bottom:var(--amino-space-16)}";
+
+const ZonosPayment = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.titleText = undefined;
+    this.stripe = cart.stripeStore.stripe;
+    this.stripeElements = cart.stripeStore.stripeElements;
+  }
+  watchInitStripe() {
+    if (!this.stripeElements) {
+      return;
+    }
+    // Create and mount the Authentication Element in ${type} mode
+    const paymentElement = cart.stripeStore.stripePaymentElement ||
+      this.stripeElements.create('payment', {
+        layout: 'tabs',
+      });
+    const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
+    if (!paymentElementContainer) {
+      // eslint-disable-next-line no-console
+      console.error('Cannot find container element for paymentElement');
+      return;
+    }
+    paymentElement.mount(paymentElementContainer);
+    paymentElement.on('change', event => {
+      cart.stripeStore.stripePaymentEventData = event;
+    });
+    cart.stripeStore.stripePaymentElement = paymentElement;
+  }
+  componentDidLoad() {
+    // @Watch doesn't get trigger on initial load
+    this.watchInitStripe();
+  }
+  render() {
+    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+    return (index.h(index.Host, { class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { class: "zonos--payment-component" })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "stripeElements": ["watchInitStripe"],
+    "stripe": ["watchInitStripe"]
+  }; }
+};
+ZonosPayment.style = zonosPaymentCss;
+
+exports.zonos_banner = ZonosBanner;
+exports.zonos_payment = ZonosPayment;
+
+//# sourceMappingURL=zonos-banner_2.cjs.entry.js.map

package/dist/cjs/zonos-banner_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"zonos-banner.zonos-payment.entry.cjs.js","mappings":"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","names":["h","classes","Host","stripeStore"],"sources":["src/components/common/zonos-banner/zonos-banner.scss?tag=zonos-banner&encapsulation=shadow","src/components/common/zonos-banner/zonos-banner.tsx","src/components/stripe/zonos-payment/zonos-payment.scss?tag=zonos-payment&encapsulation=scoped","src/components/stripe/zonos-payment/zonos-payment.tsx"],"sourcesContent":[":host {\n  border-radius: $amino-radius-10;\n  padding: $amino-space-16;\n  background: $amino-gray-100;\n  .zonos--container {\n    display: grid;\n    align-items: center;\n    grid-template-areas:\n      'icon header'\n      '. content';\n    grid-template-columns: 32px auto 0;\n  }\n\n  .zonos--icon-wrapper {\n    grid-area: icon;\n    display: flex;\n    justify-self: start;\n  }\n  .zonos--header-wrapper {\n    grid-area: header;\n  }\n  .zonos--content-wrapper {\n    grid-area: content;\n    margin-top: 8px;\n  }\n}\n\n:host(.info) {\n  background-color: $amino-blue-100;\n}\n\n:host(.success) {\n  background-color: $amino-green-100;\n}\n\n:host(.error) {\n  background-color: $amino-red-100;\n}\n\n:host(.warning) {\n  background-color: $amino-orange-100;\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { Color, ColorPrefix } from 'src/types/styles/Color';\n\nexport type BannerIntent = 'default' | 'error' | 'success' | 'warning' | 'info';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-banner.scss',\n  tag: 'zonos-banner',\n})\nexport class ZonosBanner {\n  /**\n   * Whether or not the banner is bold\n   */\n  @Prop() bannerTitle?: string;\n\n  /**\n   * Intent of the banner (success, warning, error)\n   */\n  @Prop() intent?: BannerIntent;\n\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n  /**\n   * Whether or not the button has content\n   */\n  @State() hasContent: boolean = false;\n\n  /**\n   * Detect if the button has an content\n   */\n  private handleSlotChange = () => {\n    this.hasContent = true;\n  };\n\n  render() {\n    const renderContent = ({ color }: { color: ColorPrefix }) => {\n      const primaryColor = `var(--amino-${color}-800)`;\n      const secondaryColor = `var(--amino-${color}-300)`;\n\n      const [header, content] = [\n        this.bannerTitle,\n        <slot onSlotchange={this.handleSlotChange} />,\n      ].filter(Boolean);\n\n      const textColor: Color = color === 'gray' ? 'gray-1200' : `${color}-800`;\n      return (\n        <div class={classes(['zonos--container'])}>\n          <div class=\"zonos--icon-wrapper\">\n            {/* Info svg icon (couldn't use zonos-icon because \n            this component only use one icon, and only\n            need to update the color).\n            Use svg directly better in this case */}\n            <svg\n              color={primaryColor}\n              fill=\"none\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              width=\"20\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                clip-rule=\"evenodd\"\n                d=\"M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z\"\n                data-is-secondary-color=\"true\"\n                fill={secondaryColor}\n                fill-rule=\"evenodd\"\n              ></path>\n              <path\n                clip-rule=\"evenodd\"\n                d=\"M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z\"\n                fill=\"currentColor\"\n                fill-rule=\"evenodd\"\n              ></path>\n            </svg>\n          </div>\n          <div class=\"zonos--header-wrapper\">\n            <zonos-text color={textColor} type=\"label\" weight={600}>\n              {header}\n            </zonos-text>\n          </div>\n          {content && (\n            <div class=\"zonos--content-wrapper\">\n              <zonos-text color={textColor}>{content}</zonos-text>\n            </div>\n          )}\n        </div>\n      );\n    };\n\n    const baseClass = classes([\n      'zonos--elements zonos--banner',\n      this.class,\n      this.intent,\n    ]);\n    switch (this.intent) {\n      case 'error':\n        return (\n          <Host class={baseClass}>\n            {renderContent({\n              color: 'red',\n            })}\n          </Host>\n        );\n\n      case 'info':\n        return (\n          <Host class={baseClass}>\n            {renderContent({\n              color: 'blue',\n            })}\n          </Host>\n        );\n\n      case 'success':\n        return (\n          <Host class={baseClass}>\n            {renderContent({\n              color: 'green',\n            })}\n          </Host>\n        );\n\n      case 'warning':\n        return (\n          <Host class={baseClass}>\n            {renderContent({\n              color: 'orange',\n            })}\n          </Host>\n        );\n      default:\n        return (\n          <Host class={baseClass}>\n            {renderContent({\n              color: 'gray',\n            })}\n          </Host>\n        );\n    }\n  }\n}\n",":host {\n  .zonos--title {\n    margin-bottom: $amino-space-16;\n  }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { Stripe, StripeElements } from '@stripe/stripe-js';\n\nimport { stripeStore } from 'src/components/store/checkout/stripe';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is using stripe elements and stripe\n   * need to be able to inject iframe into this component\n   * **NOTE**: Prefer `shadow` when creating new component\n   * */\n  scoped: true,\n  styleUrl: 'zonos-payment.scss',\n  tag: 'zonos-payment',\n})\n/**\n * This component is a wrapper for the stripe authentication element that would render default style object\n */\nexport class ZonosPayment {\n  /**\n   * The title text for the authentication element\n   */\n  @Prop() titleText?: string;\n\n  @State() stripe: Stripe | null = stripeStore.stripe;\n\n  @State() stripeElements: StripeElements | null = stripeStore.stripeElements;\n\n  @Element() el!: HTMLZonosPaymentElement;\n\n  @Watch('stripeElements')\n  @Watch('stripe')\n  watchInitStripe() {\n    if (!this.stripeElements) {\n      return;\n    }\n\n    // Create and mount the Authentication Element in ${type} mode\n    const paymentElement =\n      stripeStore.stripePaymentElement ||\n      this.stripeElements.create('payment', {\n        layout: 'tabs',\n      });\n\n    const paymentElementContainer = this.el.querySelector<HTMLElement>(\n      '.zonos--payment-component',\n    );\n\n    if (!paymentElementContainer) {\n      // eslint-disable-next-line no-console\n      console.error('Cannot find container element for paymentElement');\n      return;\n    }\n\n    paymentElement.mount(paymentElementContainer);\n    paymentElement.on('change', event => {\n      stripeStore.stripePaymentEventData = event;\n    });\n\n    stripeStore.stripePaymentElement = paymentElement;\n  }\n\n  componentDidLoad() {\n    // @Watch doesn't get trigger on initial load\n    this.watchInitStripe();\n  }\n\n  render() {\n    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here\n    return (\n      <Host class=\"zonos--payment zonos--elements\">\n        {this.titleText && (\n          <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n            {this.titleText}\n          </zonos-text>\n        )}\n        <div class=\"zonos--payment-component\"></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,129 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9542d2e7.js');
+const zonosStore = require('./zonosStore-960e5542.js');
+const classes = require('./classes-b7918f56.js');
+const getBorderRadius = require('./getBorderRadius-2904800c.js');
+const isColorVariable = require('./isColorVariable-c1ed7303.js');
+const isDarkColor = require('./isDarkColor-a86b8a05.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;
+};
+
+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 ZonosButton = class {
+  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 icon changes and update the state accordingly
+   */
+  iconChangeHandler() {
+    this.hasIcon = !!this.icon;
+  }
+  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,
+      } }, 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 ZonosSpinner = class {
+  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" }))));
+  }
+  get el() { return index.getElement(this); }
+};
+ZonosSpinner.style = zonosSpinnerCss;
+
+exports.zonos_button = ZonosButton;
+exports.zonos_spinner = ZonosSpinner;
+
+//# sourceMappingURL=zonos-button_2.cjs.entry.js.map

package/dist/cjs/zonos-button_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"zonos-button.zonos-spinner.entry.cjs.js","mappings":"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","names":["zonosStore","isColorVariable","isDarkColor","getBorderRadius","h","Host","classes"],"sources":["src/components/utils/getButtonTheme.ts","src/components/common/zonos-button/zonos-button.scss?tag=zonos-button&encapsulation=shadow","src/components/common/zonos-button/zonos-button.tsx","src/components/common/zonos-spinner/zonos-spinner.scss?tag=zonos-spinner&encapsulation=shadow","src/components/common/zonos-spinner/zonos-spinner.tsx"],"sourcesContent":["import { zonosStore } from 'src/components/store/zonosStore';\nimport { isColorVariable } from 'src/components/utils/isColorVariable';\nimport { isDarkColor } from 'src/components/utils/isDarkColor';\nimport type { ElementsUiTheme } from 'src/types/generated/graphql.customer.types';\n\n/**\n * Get theme for button text based on background color\n */\nexport const getButtonTheme = (overrideBackground?: string) => {\n  // use override background if it exists, otherwise use color from setting\n  const background = overrideBackground || zonosStore.appearance.colorSecondary;\n\n  const backgroundColor =\n    background && isColorVariable(background)\n      ? `var(--amino-${background})`\n      : background;\n\n  // determine theme based on background color (to change button text color if needed)\n  const buttonTheme: ElementsUiTheme =\n    backgroundColor && isDarkColor(backgroundColor) ? 'DARK' : 'LIGHT';\n\n  return buttonTheme;\n};\n","$color: var(--color, $amino-gray-1200);\n\n$border-radius: var(--border-radius, $amino-radius-10);\n\n@function get-text-color($defaultColor) {\n  @return var(--color, $defaultColor);\n}\n@function get-background-color($defaultColor) {\n  @return var(--background-color, $defaultColor);\n}\n\n:host {\n  display: inline-flex;\n\n  .zonos--spinner-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    background-color: $amino-surface-color;\n    justify-content: center;\n    border-radius: $amino-radius-10;\n    gap: $amino-space-8;\n  }\n\n  button {\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    outline: none;\n    font-size: 14px;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    padding: 0 $amino-space-16;\n    background-color: $amino-surface-color;\n    border: none;\n    outline: 1px solid $amino-surface-color;\n    border-radius: $border-radius;\n    transition: $amino-transition;\n    font-weight: 500;\n    user-select: none;\n    font-family: $amino-font-sans;\n    letter-spacing: normal;\n    cursor: pointer;\n    white-space: nowrap;\n    padding: $amino-space-8 $amino-space-24;\n    color: $color;\n\n    &.sm,\n    &.md,\n    &.lg {\n      &.no-background {\n        background: none;\n        outline: none;\n      }\n      &.no-padding-left {\n        padding-left: 0;\n      }\n      &.no-padding-right {\n        padding-right: 0;\n      }\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      background-color: $amino-gray-200;\n      .zonos--spinner-wrapper {\n        background-color: $amino-gray-200;\n      }\n    }\n\n    &:active {\n      transform: scale(0.99);\n    }\n\n    /** Button size */\n    &.sm {\n      height: $amino-size-sm;\n      line-height: $amino-size-sm;\n      padding: $amino-space-4 $amino-space-8;\n      // only icon and no content\n      &:not(.has-content).has-icon {\n        padding: 0 $amino-space-4;\n      }\n    }\n    &.md {\n      height: $amino-size-md;\n      line-height: $amino-size-md;\n      padding: $amino-space-8 $amino-space-16;\n      // only icon and no content\n      &:not(.has-content).has-icon {\n        padding: 0 $amino-space-8;\n      }\n    }\n    &.lg {\n      height: $amino-size-lg;\n      line-height: $amino-size-lg;\n      padding: $amino-space-12 $amino-space-24;\n      // only icon and no content\n      &:not(.has-content).has-icon {\n        padding: 0 $amino-space-16;\n      }\n    }\n\n    &:not(.only-icon).has-icon {\n      gap: $amino-space-8;\n    }\n\n    // styling button with override background color setting\n    &.override-background {\n      background-color: get-background-color($amino-gray-0);\n      color: get-text-color($amino-gray-1200);\n      outline: 1px solid get-background-color($amino-gray-0);\n      &:disabled {\n        opacity: 0.8;\n      }\n      &:not(:disabled):hover {\n        opacity: 0.9;\n      }\n    }\n\n    &:not(.override-background) {\n      /** Button variant */\n      &.primary {\n        background: $amino-blue-600;\n        outline: 1px solid $amino-blue-600;\n        color: $amino-gray-0;\n\n        &:not([disabled]) {\n          &:hover {\n            background-image: $amino-button-primary-hover;\n          }\n          &:active {\n            background: $amino-blue-700;\n          }\n          &:focus {\n            box-shadow: $amino-focus-button;\n          }\n        }\n\n        &[disabled] {\n          background: $amino-blue-400;\n          .zonos--spinner-wrapper {\n            background-color: $amino-blue-400;\n          }\n        }\n\n        .zonos--spinner-wrapper {\n          background-color: $amino-blue-600;\n        }\n      }\n      &.success {\n        background: $amino-green-600;\n        outline: 1px solid $amino-green-600;\n        color: $amino-gray-0;\n\n        &:not([disabled]) {\n          &:hover {\n            background-image: $amino-button-success-hover;\n          }\n          &:active {\n            background: $amino-green-700;\n          }\n          &:focus {\n            box-shadow: $amino-focus-button;\n          }\n        }\n\n        &[disabled] {\n          background: $amino-green-400;\n          .zonos--spinner-wrapper {\n            background-color: $amino-green-400;\n          }\n        }\n      }\n      &.danger {\n        background: $amino-red-600;\n        outline: 1px solid $amino-red-600;\n        color: $amino-gray-0;\n\n        &:not([disabled]) {\n          &:hover {\n            background-image: $amino-button-danger-hover;\n          }\n          &:active {\n            background: $amino-red-700;\n          }\n          &:focus {\n            box-shadow: $amino-focus-button;\n          }\n        }\n\n        &[disabled] {\n          background: $amino-red-400;\n          .zonos--spinner-wrapper {\n            background-color: $amino-red-400;\n          }\n        }\n      }\n      &.warning {\n        background: $amino-orange-600;\n        outline: 1px solid $amino-orange-600;\n        color: $amino-gray-0;\n\n        &:not([disabled]) {\n          &:hover {\n            background-image: $amino-button-warning-hover;\n          }\n          &:active {\n            background: $amino-orange-700;\n          }\n          &:focus {\n            box-shadow: $amino-focus-button;\n          }\n        }\n\n        &[disabled] {\n          background: $amino-orange-400;\n          .zonos--spinner-wrapper {\n            background-color: $amino-orange-400;\n          }\n        }\n      }\n      &.subtle {\n        background: transparent;\n        color: var(--color);\n\n        &:not([disabled]) {\n          &:hover {\n            background: $amino-gray-100;\n          }\n          &:active {\n            background: $amino-gray-200;\n          }\n        }\n\n        &:focus {\n          box-shadow: $amino-button-focus-ring;\n        }\n\n        &[disabled] {\n          .content {\n            opacity: 0.6;\n          }\n          .zonos--spinner-wrapper {\n            background-color: $amino-gray-0;\n          }\n        }\n      }\n      &.outline {\n        background: transparent;\n        outline: 1px solid $amino-gray-700;\n\n        &:not([disabled]) {\n          &:hover {\n            background-color: $amino-gray-100;\n          }\n          &:active {\n            background: $amino-gray-200;\n          }\n        }\n      }\n    }\n  }\n}\n","import { Component, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { getButtonTheme } from 'src/components/utils/getButtonTheme';\nimport { isColorVariable } from 'src/components/utils/isColorVariable';\nimport type {\n  ElementsUiStyle,\n  ElementsUiTheme,\n} from 'src/types/generated/graphql.customer.types';\nimport type { Color } from 'src/types/styles/Color';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-button.scss',\n  tag: 'zonos-button',\n})\nexport class ZonosButton {\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n\n  /**\n   * The color of the button text and svg\n   */\n  @Prop() color?: Color | (string & { _placeholder?: never });\n\n  /**\n   * The color of the button text and svg\n   * **NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded\n   */\n  @Prop() backgroundColor?: Color | (string & { _placeholder?: never });\n\n  /**\n   * The border style of the button\n   * @default ROUNDED\n   */\n  @Prop() borderStyle?: ElementsUiStyle;\n\n  /**\n   * Whether or not the button is disabled\n   * @note Prop should not conflict name with native html attribute if the prop is also affected by another prop.\n   * The issue is the component has internal disabled @prop(). @prop decorator is to watch the update of the attribute of the component in the dom.\n   * And `disabled` prop is not an only factor to determine the component is disabled. isLoading @prop() also affect that.\n   * <Host> is also referred to a component itself, if disabled prop is true, the `zonos-button` will have disabled attribute.\n   *  So let's say when the loading state is true, and the component consume the zonos-button doesn't pass the disabled prop down.\n   * It accidentally turns the disabled prop on even thought the disabled state is not changed from the outside.\n   */\n  @Prop() isDisabled: boolean = false;\n\n  /**\n   * The icon element to display\n   * @default null\n   */\n  @Prop() icon: HTMLZonosIconElement | null = null;\n\n  /**\n   * Whether or not the icon is on the right\n   * @default false\n   */\n  @Prop() iconRight?: boolean = false;\n\n  /**\n   * The size of the button\n   * @default 'sm'\n   */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /**\n   * The variance of the button\n   * **NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded\n   */\n  @Prop() variant:\n    | 'primary'\n    | 'success'\n    | 'subtle'\n    | 'outline'\n    | 'standard'\n    | 'danger'\n    | 'warning' = 'standard';\n\n  /**\n   * Whether or not the button has a background\n   * @default false\n   */\n  @Prop() noBackground: boolean = false;\n\n  /**\n   * Whether or not the button has a left padding\n   */\n  @Prop() noPaddingLeft: boolean = false;\n\n  /**\n   * Whether or not the button has a right padding\n   */\n  @Prop() noPaddingRight: boolean = false;\n\n  /**\n   * Whether or not the button is loading\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * The theme of the button\n   */\n  @Prop() theme?: ElementsUiTheme;\n\n  /**\n   * Whether or not the button has an icon\n   */\n  @State() hasIcon: boolean = !!this.icon;\n  /**\n   * Detect if the icon changes and update the state accordingly\n   */\n  @Watch('icon')\n  iconChangeHandler() {\n    this.hasIcon = !!this.icon;\n  }\n\n  /**\n   * Whether or not the button has content\n   */\n  @State() hasContent: boolean = false;\n\n  @Listen('click', {\n    capture: true,\n  })\n  clickHandler(event: MouseEvent) {\n    if (this.loading || this.isDisabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * Detect if the button has an content\n   */\n  private handleSlotChange = () => {\n    this.hasContent = true;\n  };\n\n  componentWillLoad() {\n    this.iconChangeHandler();\n  }\n\n  render() {\n    const disabled = this.loading || this.isDisabled;\n\n    const color =\n      this.color && isColorVariable(this.color)\n        ? `var(--amino-${this.color})`\n        : this.color;\n\n    // use override background if it exists, otherwise use color from setting\n    const overrideBackground =\n      this.backgroundColor || zonosStore.appearance.colorSecondary;\n    // only set theme for button to change text color if variant is standard and override background is set\n    const buttonTheme =\n      this.variant === 'standard'\n        ? getButtonTheme(overrideBackground)\n        : undefined;\n\n    const borderStyle = getBorderRadius(this.borderStyle);\n    return (\n      <Host\n        class={classes(['zonos--elements', this.class])}\n        data-theme={this.theme || buttonTheme}\n        disabled={disabled}\n        style={{\n          '--background-color': overrideBackground,\n          '--border-radius': borderStyle,\n          '--color': color,\n        }}\n      >\n        <button\n          class={classes([\n            this.hasIcon && 'has-icon',\n            this.hasContent && 'has-content',\n            this.noBackground && 'no-background',\n            this.noPaddingLeft && 'no-padding-left',\n            this.noPaddingRight && 'no-padding-right',\n            this.iconRight && 'icon-right',\n            this.variant,\n            this.size,\n            // only override background if variant is set to standard\n            this.backgroundColor &&\n              this.variant === 'standard' &&\n              'override-background',\n          ])}\n          disabled={disabled}\n        >\n          {this.loading && (\n            <div class=\"zonos--spinner-wrapper\">\n              <zonos-spinner size={16}></zonos-spinner>\n            </div>\n          )}\n          {/* show content if not loading */}\n          {!this.loading && !this.iconRight && this.icon}\n          <slot onSlotchange={this.handleSlotChange} />\n          {!this.loading && this.iconRight && this.icon}\n        </button>\n      </Host>\n    );\n  }\n}\n","$size: var(--size);\n\n:host {\n  position: relative;\n  overflow: hidden;\n  width: $size;\n  height: $size;\n  display: inline-flex;\n  svg {\n    width: $size;\n    height: $size;\n    stroke: $amino-blue-600;\n    animation: rotate 2s linear infinite;\n  }\n\n  circle.track {\n    stroke: $amino-gray-200;\n  }\n\n  &.black {\n    stroke: $amino-spinner-stroke-black;\n\n    circle.track {\n      stroke: $amino-spinner-track-black;\n    }\n  }\n  &.white {\n    stroke: $amino-spinner-stroke-white;\n\n    circle.track {\n      stroke: $amino-spinner-track-white;\n    }\n  }\n  &.info {\n    stroke: $amino-blue-600;\n    circle.track {\n      stroke: $amino-blue-100;\n    }\n  }\n  &.success {\n    stroke: $amino-green-600;\n    circle.track {\n      stroke: $amino-green-100;\n    }\n  }\n  &.danger {\n    stroke: $amino-red-600;\n    circle.track {\n      stroke: $amino-red-100;\n    }\n  }\n  &.warning {\n    stroke: $amino-orange-600;\n    circle.track {\n      stroke: $amino-orange-100;\n    }\n  }\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n\n  circle:not(.track) {\n    stroke-linecap: round;\n    animation: dash 1.5s ease-in-out infinite;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\n\nexport type SpinnerColor =\n  | 'primary'\n  | 'info'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'black'\n  | 'white';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-spinner.scss',\n  tag: 'zonos-spinner',\n})\nexport class ZonosSpinner {\n  /**\n   * The size of the spinner\n   * @default 32\n   */\n  @Prop() size: number = 32;\n\n  /**\n   * Color of the spinner\n   */\n  @Prop() color?: SpinnerColor;\n\n  @Element() el!: HTMLZonosSpinnerElement;\n\n  render() {\n    if (!this.el.shadowRoot) {\n      return null;\n    }\n\n    return (\n      <Host\n        class={classes(['zonos--elements', this.color])}\n        style={{\n          '--size': `${this.size}px`,\n        }}\n      >\n        <svg viewBox=\"0 0 50 50\">\n          <circle\n            class=\"track\"\n            cx=\"25\"\n            cy=\"25\"\n            fill=\"none\"\n            id=\"loading-spinner-circle\"\n            r=\"20\"\n            stroke-width=\"5\"\n          />\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            fill=\"none\"\n            id=\"loading-spinner-circle\"\n            r=\"20\"\n            stroke-width=\"5\"\n          />\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9542d2e7.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 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))))));
+  }
+};
+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 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))));
+  }
+};
+VStack.style = zonosVStackCss;
+
+exports.zonos_card = ZonosCard;
+exports.zonos_v_stack = VStack;
+
+//# sourceMappingURL=zonos-card_2.cjs.entry.js.map

package/dist/cjs/zonos-card_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"zonos-card.zonos-v-stack.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,YAAY,GAAG,mgDAAmgD;;MCU3gD,SAAS;;;;;;;;;mBAkCO,MAAM;;EAEjC,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,KAAK,EAAEE,eAAO,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAE/B,IAAI,CAAC,KAAK,KACTF,oBAAQ,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAC1DA,4BAAgB,IAAI,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAkB,EAE9DA,qBAAS,OAAO,EAAE,CAAC,IAAG,IAAI,CAAC,OAAO,CAAW,CACtC,CACV,EAGDA,qBAAa,EAEZ,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,MACxCA,oBACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,IAAI,GAAG,MAAM;QAC7D,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,IAEDA,qBAAM,IAAI,CAAC,aAAa,CAAO,EAC/BA,qBAAS,OAAO,EAAE,CAAC,IAAG,IAAI,CAAC,aAAa,CAAW,CAC5C,CACV,CACG,CACD,EACP;GACH;;;;AC/EH,MAAM,cAAc,GAAG,sXAAsX;;MCWhY,MAAM;;;mBAKc,EAAE;iBAKT,EAAE;;EAE1B,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,KAAK,EAAEE,eAAO,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EACtC,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,IAE9CF,qBAAa,CACT,CACD,EACP;GACH;;;;;;;","names":["h","Host","classes"],"sources":["src/components/common/zonos-card/zonos-card.scss?tag=zonos-card&encapsulation=shadow","src/components/common/zonos-card/zonos-card.tsx","src/components/common/zonos-v-stack/zonos-v-stack.scss?tag=zonos-v-stack&encapsulation=shadow","src/components/common/zonos-v-stack/zonos-v-stack.tsx"],"sourcesContent":[":host {\n  .styled-card {\n    border: $amino-border;\n    border-radius: $amino-radius-6;\n    padding: var(--spacing, $amino-space-24);\n    text-align: left;\n\n    hr {\n      margin-left: calc(var(--spacing, $amino-space-24) * -1);\n      margin-right: calc(var(--spacing, $amino-space-24) * -1);\n    }\n\n    .card-header {\n      margin: calc(var(--spacing, $amino-space-24) * -1);\n      padding: var(--spacing, $amino-space-24);\n      display: flex;\n      align-items: center;\n      margin-bottom: var(--spacing, $amino-space-24);\n      border-bottom: $amino-border;\n      height: 65px;\n      line-height: 65px;\n      user-select: none;\n\n      h5 {\n        margin-bottom: 0;\n        flex: 1;\n      }\n    }\n\n    .card-footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin: calc(var(--spacing, $amino-space-24) * -1);\n      padding: var(--spacing, $amino-space-24);\n      border-top: $amino-border;\n      background: $amino-surface-color-secondary;\n      margin-top: var(--spacing, $amino-space-24);\n      border-bottom-left-radius: $amino-radius-8;\n      border-bottom-right-radius: $amino-radius-8;\n      height: var(--footerHeight);\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Host } from '@stencil/core/internal';\n\nimport { classes } from 'src/components/utils/classes';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-card.scss',\n  tag: 'zonos-card',\n})\nexport class ZonosCard {\n  /**\n   * The actions to display in the header of the card\n   */\n  @Prop() actions?: HTMLElement;\n\n  /**\n   * The CSS class to apply to the card element\n   */\n  @Prop() class?: string;\n\n  /**\n   * The actions to display in the footer of the card\n   */\n  @Prop() footerActions?: HTMLElement;\n\n  /**\n   * The content to display in the footer of the card\n   */\n  @Prop() footerContent?: HTMLElement;\n\n  /**\n   * The height of the footer in pixels\n   */\n  @Prop() footerHeight?: number;\n\n  /**\n   * The label to display in the header of the card\n   */\n  @Prop() label?: HTMLElement;\n\n  /**\n   * The spacing to apply between elements in the card\n   */\n  @Prop() spacing?: string = '24px';\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={classes(['styled-card', this.class])}\n          style={{ padding: this.spacing }}\n        >\n          {this.label && (\n            <header class=\"card-header\" style={{ padding: this.spacing }}>\n              <text-component type=\"subheader\">{this.label}</text-component>\n\n              <h-stack spacing={8}>{this.actions}</h-stack>\n            </header>\n          )}\n\n          {/* Slot automatically inherits the children passed in */}\n          <slot></slot>\n\n          {(this.footerActions || this.footerContent) && (\n            <footer\n              class=\"card-footer\"\n              style={{\n                height: this.footerHeight ? `${this.footerHeight}px` : 'auto',\n                padding: this.spacing,\n              }}\n            >\n              <div>{this.footerContent}</div>\n              <h-stack spacing={8}>{this.footerActions}</h-stack>\n            </footer>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  .vstack {\n    display: grid;\n    grid-auto-columns: minmax(0, 1fr);\n    grid-row-gap: var(--spacing, 24px);\n    grid-auto-flow: row;\n  }\n}\n","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"],"version":3}