npm - @zonos/elements - Versions diffs - 1.1.1 → 1.2.0 - Mend

@zonos/elements 1.1.1 → 1.2.0

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 (832) hide show

package/dist/zonos-elements/zonos-address_2.entry.js DELETED Viewed

@@ -1,121 +0,0 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-d1aa9293.js';
-import { s as stripeStore, f as stripeStorePrefetchLandedCost } from './cart-2f83e048.js';
-import { b as logError, a as localizationStore } from './localization-4a424f49.js';
-import './zonosStore-13a7b534.js';
-import './isDarkColor-b21326ae.js';
-import './getBorderRadius-82fbaf25.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) {
-    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 || !stripeStore.stripeElements) {
-      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 = localizationStore.shippingZoneCountries;
-    const addressElement = stripeStore.stripeAddressElement ||
-      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;
-      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 stripeStorePrefetchLandedCost();
-    });
-    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 (h(Host, { class: "zonos--address zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--address-component" })));
-  }
-  get el() { return 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) {
-    registerInstance(this, hostRef);
-    this.titleText = undefined;
-    this.stripe = stripeStore.stripe;
-  }
-  watchInitStripe() {
-    if (!this.stripe || !stripeStore.stripeElements) {
-      return;
-    }
-    // Create and mount the Authentication Element in ${type} mode
-    const linkAuthenticationElement = stripeStore.stripeLinkElement ||
-      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 => {
-      stripeStore.stripeLinkEventData = event;
-      // run prefetch landed cost when address is changed
-      void stripeStorePrefetchLandedCost();
-    });
-    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 (h(Host, { class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--link-authentication-component" })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "stripe": ["watchInitStripe"]
-  }; }
-};
-ZonosLinkAuthentication.style = zonosLinkAuthenticationCss;
-export { ZonosAddress as zonos_address, ZonosLinkAuthentication as zonos_link_authentication };
-//# sourceMappingURL=zonos-address_2.entry.js.map

package/dist/zonos-elements/zonos-address_2.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"zonos-address.zonos-link-authentication.entry.esm.js","mappings":"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","names":[],"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/zonos-elements/zonos-address_2.system.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- var __awaiter=this&&this.__awaiter\|\|function(t,n,e,s){function o(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e\|\|(e=Promise))((function(e,i){function a(t){try{c(s.next(t))}catch(t){i(t)}}function r(t){try{c(s["throw"](t))}catch(t){i(t)}}function c(t){t.done?e(t.value):o(t.value).then(a,r)}c((s=s.apply(t,n\|\|[])).next())}))};var __generator=this&&this.__generator\|\|function(t,n){var e={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},s,o,i,a;return a={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function r(t){return function(n){return c([t,n])}}function c(r){if(s)throw new TypeError("Generator is already executing.");while(a&&(a=0,r[0]&&(e=0)),e)try{if(s=1,o&&(i=r[0]&2?o["return"]:r[0]?o["throw"]\|\|((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;if(o=0,i)r=[r[0]&2,i.value];switch(r[0]){case 0:case 1:i=r;break;case 4:e.label++;return{value:r[1],done:false};case 5:e.label++;o=r[1];r=[0];continue;case 7:r=e.ops.pop();e.trys.pop();continue;default:if(!(i=e.trys,i=i.length>0&&i[i.length-1])&&(r[0]===6\|\|r[0]===2)){e=0;continue}if(r[0]===3&&(!i\|\|r[1]>i[0]&&r[1]<i[3])){e.label=r[1];break}if(r[0]===6&&e.label<i[1]){e.label=i[1];i=r;break}if(i&&e.label<i[2]){e.label=i[2];e.ops.push(r);break}if(i[2])e.ops.pop();e.trys.pop();continue}r=n.call(t,e)}catch(t){r=[6,t];o=0}finally{s=i=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./index-87193773.system.js","./cart-9780fa28.system.js","./localization-3c43290f.system.js","./zonosStore-77bcd7c0.system.js","./isDarkColor-dc2b7c8f.system.js","./getBorderRadius-4fbe49de.system.js"],(function(t){"use strict";var n,e,s,o,i,a,r,c;return{setters:[function(t){n=t.r;e=t.h;s=t.H;o=t.d},function(t){i=t.s;a=t.f},function(t){r=t.b;c=t.a},function(){},function(){},function(){}],execute:function(){var l=".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)}";var d=t("zonos_address",function(){function t(t){n(this,t);this.type=undefined;this.titleText=undefined;this.defaultAddress=null;this.stripe=window.Zonos.stripe}t.prototype.watchInitStripe=function(){return __awaiter(this,void 0,void 0,(function(){var t,n,e,s,o;return __generator(this,(function(l){this.stripe=window.Zonos.stripe;if(!this.stripe\|\|!i.stripeElements){r("Stripe is not initialized. Couldn't load stripe element.");return[2]}e=(t=this.defaultAddress)===null\|\|t===void 0?void 0:t.phone;if(!e){(n=this.defaultAddress)===null\|\|n===void 0?true:delete n.phone}s=c.shippingZoneCountries;o=i.stripeAddressElement\|\|i.stripeElements.create("address",{allowedCountries:s?Object.values(s).map((function(t){return t.code})):[],contacts:this.defaultAddress?[this.defaultAddress]:undefined,display:{name:"split"},fields:{phone:"always"},mode:this.type,validation:{phone:{required:"always"}}});o.mount(this.el.querySelector(".zonos--address-component"));o.on("change",(function(t){var n=t.value;i.stripeAddressEventData=Object.assign(Object.assign({},t),{elementMode:"shipping",elementType:"address",empty:false,value:Object.assign(Object.assign({},n),{firstName:n.firstName\|\|n.name.split(" ")[0],lastName:n.lastName\|\|n.name.split(" ").pop()})});void a()}));i.stripeAddressElement=o;return[2]}))}))};t.prototype.componentDidLoad=function(){void this.watchInitStripe()};t.prototype.render=function(){return e(s,{class:"zonos--address zonos--elements"},e("zonos-text",{class:"zonos--title",type:"semiBoldLabel"},this.titleText),e("div",{class:"zonos--address-component"}))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}());d.style=l;var u=".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)}";var h=t("zonos_link_authentication",function(){function t(t){n(this,t);this.titleText=undefined;this.stripe=i.stripe}t.prototype.watchInitStripe=function(){if(!this.stripe\|\|!i.stripeElements){return}var t=i.stripeLinkElement\|\|i.stripeElements.create("linkAuthentication");var n=this.el.querySelector(".zonos--link-authentication-component");if(!n){console.error("Cannot find container element for linkAuthenticationElement");return}t.mount(n);t.on("change",(function(t){i.stripeLinkEventData=t;void a()}));i.stripeLinkElement=t};t.prototype.componentDidLoad=function(){this.watchInitStripe()};t.prototype.render=function(){return e(s,{class:"zonos--link-authentication zonos--elements"},e("zonos-text",{class:"zonos--title",type:"semiBoldLabel"},this.titleText),e("div",{class:"zonos--link-authentication-component"}))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}());h.style=u}}}));
2	- //# sourceMappingURL=zonos-address_2.system.entry.js.map

package/dist/zonos-elements/zonos-address_2.system.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["zonosAddressCss","ZonosAddress","exports","window","Zonos","stripe","class_1","prototype","watchInitStripe","this","stripeStore","stripeElements","logError","phone","_a","defaultAddress","_b","shippableCountries","localizationStore","shippingZoneCountries","addressElement","stripeAddressElement","create","allowedCountries","Object","values","map","country","code","contacts","undefined","display","name","fields","mode","type","validation","required","mount","el","querySelector","on","event","eventValue","value","stripeAddressEventData","assign","elementMode","elementType","empty","firstName","split","lastName","pop","stripeStorePrefetchLandedCost","componentDidLoad","render","h","Host","class","titleText","zonosLinkAuthenticationCss","ZonosLinkAuthentication","class_2","linkAuthenticationElement","stripeLinkElement","linkAuthenticationElementContainer","console","error","stripeLinkEventData"],"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"],"mappings":"y3DAAA,IAAMA,EAAkB,4wB,ICwBXC,EAAYC,EAAA,2B,yFAcwB,K,YAEdC,OAAOC,MAAMC,M,CAKxCC,EAAAC,UAAAC,gBAAN,W,mGACEC,KAAKJ,OAASF,OAAOC,MAAMC,OAC3B,IAAKI,KAAKJ,SAAWK,EAAYC,eAAgB,CAC/CC,EAAS,4DACT,S,CAGIC,GAAQC,EAAAL,KAAKM,kBAAc,MAAAD,SAAA,SAAAA,EAAED,MACnC,IAAKA,EAAO,EAGHG,EAAAP,KAAKM,kBAAc,MAAAC,SAAA,cAAAA,EAAEH,K,CAGxBI,EAAqBC,EAAkBC,sBACvCC,EACJV,EAAYW,sBACZX,EAAYC,eAAeW,OAAO,UAAW,CAC3CC,iBAAkBN,EACdO,OAAOC,OAAOR,GAAoBS,KAAI,SAAAC,GAAW,OAAAA,EAAQC,IAAR,IACjD,GACJC,SAAUpB,KAAKM,eAAiB,CAACN,KAAKM,gBAAkBe,UACxDC,QAAS,CACPC,KAAM,SAERC,OAAQ,CACNpB,MAAO,UAETqB,KAAMzB,KAAK0B,KACXC,WAAY,CACVvB,MAAO,CACLwB,SAAU,aAKlBjB,EAAekB,MACb7B,KAAK8B,GAAGC,cAAc,8BAExBpB,EAAeqB,GAAG,UAAU,SAAAC,GAC1B,IAAMC,EAAaD,EAAME,MACzBlC,EAAYmC,uBAAsBrB,OAAAsB,OAAAtB,OAAAsB,OAAA,GAC7BJ,GAAK,CACRK,YAAa,WACbC,YAAa,UACbC,MAAO,MACPL,MAAKpB,OAAAsB,OAAAtB,OAAAsB,OAAA,GACAH,GAAU,CACbO,UAAWP,EAAWO,WAAaP,EAAWX,KAAKmB,MAAM,KAAK,GAC9DC,SAAUT,EAAWS,UAAYT,EAAWX,KAAKmB,MAAM,KAAKE,eAI3DC,G,IAEP5C,EAAYW,qBAAuBD,E,iBAGrCd,EAAAC,UAAAgD,iBAAA,gBAEO9C,KAAKD,iB,EAGZF,EAAAC,UAAAiD,OAAA,WAEE,OACEC,EAACC,EAAI,CAACC,MAAM,kCACVF,EAAA,cAAYE,MAAM,eAAexB,KAAK,iBACnC1B,KAAKmD,WAERH,EAAA,OAAKE,MAAM,6B,mPA3FM,I,UCxBzB,IAAME,EAA6B,onC,ICsBtBC,EAAuB5D,EAAA,uC,6DAMDQ,EAAYL,M,CAK7C0D,EAAAxD,UAAAC,gBAAA,WACE,IAAKC,KAAKJ,SAAWK,EAAYC,eAAgB,CAC/C,M,CAIF,IAAMqD,EACJtD,EAAYuD,mBACZvD,EAAYC,eAAeW,OAAO,sBAEpC,IAAM4C,EACJzD,KAAK8B,GAAGC,cACN,yCAGJ,IAAK0B,EAAoC,CAEvCC,QAAQC,MACN,+DAEF,M,CAGFJ,EAA0B1B,MAAM4B,GAChCF,EAA0BvB,GAAG,UAAU,SAAAC,GACrChC,EAAY2D,oBAAsB3B,OAE7BY,G,IAEP5C,EAAYuD,kBAAoBD,C,EAGlCD,EAAAxD,UAAAgD,iBAAA,WAEE9C,KAAKD,iB,EAGPuD,EAAAxD,UAAAiD,OAAA,WAEE,OACEC,EAACC,EAAI,CAACC,MAAM,8CACVF,EAAA,cAAYE,MAAM,eAAexB,KAAK,iBACnC1B,KAAKmD,WAERH,EAAA,OAAKE,MAAM,yC,mPAvDiB,I"}

package/dist/zonos-elements/zonos-badge.entry.js DELETED Viewed

@@ -1,32 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-d1aa9293.js';
-import { c as classes } from './classes-0d95c529.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) {
-    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 (h(Host, { class: classes(['zonos--elements zonos--badge', this.class]) }, h("div", { class: classes([
-        'zonos--badge-content',
-        this.color,
-        this.rounded && 'rounded',
-        this.iconRight && 'icon-right',
-        this.size,
-        this.bold && 'bold',
-      ]) }, this.icon, h("p", null, h("slot", null)))));
-  }
-};
-ZonosBadge.style = zonosBadgeCss;
-export { ZonosBadge as zonos_badge };
-//# sourceMappingURL=zonos-badge.entry.js.map

package/dist/zonos-elements/zonos-badge.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"zonos-badge.entry.esm.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,qzDAAqzD;;MCU9zD,UAAU;;;gBAKG,KAAK;iBAMA,MAAM;;qBAYN,KAAK;gBAME,SAAS;mBAMlB,KAAK;iBAKR,EAAE;;EAE1B,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,OAAO,CAAC,CAAC,8BAA8B,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAChE,WACE,KAAK,EAAE,OAAO,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,EACV,aACE,eAAQ,CACN,CACA,CACD,EACP;GACH;;;;;;","names":[],"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/zonos-elements/zonos-badge.system.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- System.register(["./index-87193773.system.js","./classes-ce25a814.system.js"],(function(o){"use strict";var r,a,n,e;return{setters:[function(o){r=o.r;a=o.h;n=o.H},function(o){e=o.c}],execute:function(){var s=":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)}";var i=o("zonos_badge",function(){function o(o){r(this,o);this.bold=false;this.color="gray";this.icon=undefined;this.iconRight=false;this.size="default";this.rounded=false;this.class=""}o.prototype.render=function(){return a(n,{class:e(["zonos--elements zonos--badge",this.class])},a("div",{class:e(["zonos--badge-content",this.color,this.rounded&&"rounded",this.iconRight&&"icon-right",this.size,this.bold&&"bold"])},this.icon,a("p",null,a("slot",null))))};return o}());i.style=s}}}));
2	- //# sourceMappingURL=zonos-badge.system.entry.js.map

package/dist/zonos-elements/zonos-badge.system.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["zonosBadgeCss","ZonosBadge","exports","class_1","prototype","render","h","Host","class","classes","this","color","rounded","iconRight","size","bold","icon"],"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"],"mappings":"0MAAA,IAAMA,EAAgB,szD,ICUTC,EAAUC,EAAA,yB,kCAKG,M,WAMK,O,mCAYA,M,UAMO,U,aAMT,M,WAKH,E,CAExBC,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAACC,MAAOC,EAAQ,CAAC,+BAAgCC,KAAKF,SACzDF,EAAA,OACEE,MAAOC,EAAQ,CACb,uBACAC,KAAKC,MACLD,KAAKE,SAAW,UAChBF,KAAKG,WAAa,aAClBH,KAAKI,KACLJ,KAAKK,MAAQ,UAGdL,KAAKM,KACNV,EAAA,SACEA,EAAA,e,WAzDW,I"}

package/dist/zonos-elements/zonos-banner_2.entry.js DELETED Viewed

@@ -1,115 +0,0 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-d1aa9293.js';
-import { c as classes } from './classes-0d95c529.js';
-import { s as stripeStore } from './cart-2f83e048.js';
-import './zonosStore-13a7b534.js';
-import './localization-4a424f49.js';
-import './isDarkColor-b21326ae.js';
-import './getBorderRadius-82fbaf25.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) {
-    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,
-        h("slot", { onSlotchange: this.handleSlotChange }),
-      ].filter(Boolean);
-      const textColor = color === 'gray' ? 'gray-1200' : `${color}-800`;
-      return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "http://www.w3.org/2000/svg" }, 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" }), 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" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { color: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { color: textColor }, content)))));
-    };
-    const baseClass = classes([
-      'zonos--elements zonos--banner',
-      this.class,
-      this.intent,
-    ]);
-    switch (this.intent) {
-      case 'error':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'red',
-        })));
-      case 'info':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'blue',
-        })));
-      case 'success':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'green',
-        })));
-      case 'warning':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'orange',
-        })));
-      default:
-        return (h(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) {
-    registerInstance(this, hostRef);
-    this.titleText = undefined;
-    this.stripe = stripeStore.stripe;
-    this.stripeElements = stripeStore.stripeElements;
-  }
-  watchInitStripe() {
-    if (!this.stripeElements) {
-      return;
-    }
-    // Create and mount the Authentication Element in ${type} mode
-    const paymentElement = 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 => {
-      stripeStore.stripePaymentEventData = event;
-    });
-    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 (h(Host, { class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { class: "zonos--payment-component" })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "stripeElements": ["watchInitStripe"],
-    "stripe": ["watchInitStripe"]
-  }; }
-};
-ZonosPayment.style = zonosPaymentCss;
-export { ZonosBanner as zonos_banner, ZonosPayment as zonos_payment };
-//# sourceMappingURL=zonos-banner_2.entry.js.map

package/dist/zonos-elements/zonos-banner_2.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"zonos-banner.zonos-payment.entry.esm.js","mappings":"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","names":[],"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/zonos-elements/zonos-banner_2.system.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- System.register(["./index-87193773.system.js","./classes-ce25a814.system.js","./cart-9780fa28.system.js","./zonosStore-77bcd7c0.system.js","./localization-3c43290f.system.js","./isDarkColor-dc2b7c8f.system.js","./getBorderRadius-4fbe49de.system.js"],(function(t){"use strict";var e,n,o,s,a,r;return{setters:[function(t){e=t.r;n=t.h;o=t.H;s=t.d},function(t){a=t.c},function(t){r=t.s},function(){},function(){},function(){},function(){}],execute:function(){var i=':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)}';var c=t("zonos_banner",function(){function t(t){var n=this;e(this,t);this.handleSlotChange=function(){n.hasContent=true};this.bannerTitle=undefined;this.intent=undefined;this.class="";this.hasContent=false}t.prototype.render=function(){var t=this;var e=function(e){var o=e.color;var s="var(--amino-".concat(o,"-800)");var r="var(--amino-".concat(o,"-300)");var i=[t.bannerTitle,n("slot",{onSlotchange:t.handleSlotChange})].filter(Boolean),c=i[0],l=i[1];var h=o==="gray"?"gray-1200":"".concat(o,"-800");return n("div",{class:a(["zonos--container"])},n("div",{class:"zonos--icon-wrapper"},n("svg",{color:s,fill:"none",height:"20",viewBox:"0 0 24 24",width:"20",xmlns:"http://www.w3.org/2000/svg"},n("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:r,"fill-rule":"evenodd"}),n("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"}))),n("div",{class:"zonos--header-wrapper"},n("zonos-text",{color:h,type:"label",weight:600},c)),l&&n("div",{class:"zonos--content-wrapper"},n("zonos-text",{color:h},l)))};var s=a(["zonos--elements zonos--banner",this.class,this.intent]);switch(this.intent){case"error":return n(o,{class:s},e({color:"red"}));case"info":return n(o,{class:s},e({color:"blue"}));case"success":return n(o,{class:s},e({color:"green"}));case"warning":return n(o,{class:s},e({color:"orange"}));default:return n(o,{class:s},e({color:"gray"}))}};return t}());c.style=i;var l=".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)}";var h=t("zonos_payment",function(){function t(t){e(this,t);this.titleText=undefined;this.stripe=r.stripe;this.stripeElements=r.stripeElements}t.prototype.watchInitStripe=function(){if(!this.stripeElements){return}var t=r.stripePaymentElement\|\|this.stripeElements.create("payment",{layout:"tabs"});var e=this.el.querySelector(".zonos--payment-component");if(!e){console.error("Cannot find container element for paymentElement");return}t.mount(e);t.on("change",(function(t){r.stripePaymentEventData=t}));r.stripePaymentElement=t};t.prototype.componentDidLoad=function(){this.watchInitStripe()};t.prototype.render=function(){return n(o,{class:"zonos--payment zonos--elements"},this.titleText&&n("zonos-text",{class:"zonos--title",type:"semiBoldLabel"},this.titleText),n("div",{class:"zonos--payment-component"}))};Object.defineProperty(t.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripeElements:["watchInitStripe"],stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}());h.style=l}}}));
2	- //# sourceMappingURL=zonos-banner_2.system.entry.js.map

package/dist/zonos-elements/zonos-banner_2.system.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["zonosBannerCss","ZonosBanner","exports","this","handleSlotChange","_this","hasContent","class_1","prototype","render","renderContent","_a","color","primaryColor","concat","secondaryColor","_b","bannerTitle","h","onSlotchange","filter","Boolean","header","content","textColor","class","classes","fill","height","viewBox","width","xmlns","d","type","weight","baseClass","intent","Host","zonosPaymentCss","ZonosPayment","stripeStore","stripe","stripeElements","class_2","watchInitStripe","paymentElement","stripePaymentElement","create","layout","paymentElementContainer","el","querySelector","console","error","mount","on","event","stripePaymentEventData","componentDidLoad","titleText"],"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"],"mappings":"ucAAA,IAAMA,EAAiB,k7B,ICYVC,EAAWC,EAAA,0B,mCAuBdC,KAAAC,iBAAmB,WACzBC,EAAKC,WAAa,I,8DAVI,G,gBAIO,K,CAS/BC,EAAAC,UAAAC,OAAA,eAAAJ,EAAAF,KACE,IAAMO,EAAgB,SAACC,G,IAAEC,EAAKD,EAAAC,MAC5B,IAAMC,EAAe,eAAAC,OAAeF,EAAK,SACzC,IAAMG,EAAiB,eAAAD,OAAeF,EAAK,SAErC,IAAAI,EAAoB,CACxBX,EAAKY,YACLC,EAAA,QAAMC,aAAcd,EAAKD,oBACzBgB,OAAOC,SAHFC,EAAMN,EAAA,GAAEO,EAAOP,EAAA,GAKtB,IAAMQ,EAAmBZ,IAAU,OAAS,YAAc,GAAAE,OAAGF,EAAK,QAClE,OACEM,EAAA,OAAKO,MAAOC,EAAQ,CAAC,sBACnBR,EAAA,OAAKO,MAAM,uBAKTP,EAAA,OACEN,MAAOC,EACPc,KAAK,OACLC,OAAO,KACPC,QAAQ,YACRC,MAAM,KACNC,MAAM,8BAENb,EAAA,oBACY,UACVc,EAAE,0EAAyE,0BACnD,OACxBL,KAAMZ,EAAc,YACV,YAEZG,EAAA,oBACY,UACVc,EAAE,mHACFL,KAAK,eAAc,YACT,cAIhBT,EAAA,OAAKO,MAAM,yBACTP,EAAA,cAAYN,MAAOY,EAAWS,KAAK,QAAQC,OAAQ,KAChDZ,IAGJC,GACCL,EAAA,OAAKO,MAAM,0BACTP,EAAA,cAAYN,MAAOY,GAAYD,I,EAOzC,IAAMY,EAAYT,EAAQ,CACxB,gCACAvB,KAAKsB,MACLtB,KAAKiC,SAEP,OAAQjC,KAAKiC,QACX,IAAK,QACH,OACElB,EAACmB,EAAI,CAACZ,MAAOU,GACVzB,EAAc,CACbE,MAAO,SAKf,IAAK,OACH,OACEM,EAACmB,EAAI,CAACZ,MAAOU,GACVzB,EAAc,CACbE,MAAO,UAKf,IAAK,UACH,OACEM,EAACmB,EAAI,CAACZ,MAAOU,GACVzB,EAAc,CACbE,MAAO,WAKf,IAAK,UACH,OACEM,EAACmB,EAAI,CAACZ,MAAOU,GACVzB,EAAc,CACbE,MAAO,YAIf,QACE,OACEM,EAACmB,EAAI,CAACZ,MAAOU,GACVzB,EAAc,CACbE,MAAO,U,WA/HG,I,UCZxB,IAAM0B,EAAkB,4wB,ICmBXC,EAAYrC,EAAA,2B,6DAMUsC,EAAYC,O,oBAEID,EAAYE,c,CAM7DC,EAAAnC,UAAAoC,gBAAA,WACE,IAAKzC,KAAKuC,eAAgB,CACxB,M,CAIF,IAAMG,EACJL,EAAYM,sBACZ3C,KAAKuC,eAAeK,OAAO,UAAW,CACpCC,OAAQ,SAGZ,IAAMC,EAA0B9C,KAAK+C,GAAGC,cACtC,6BAGF,IAAKF,EAAyB,CAE5BG,QAAQC,MAAM,oDACd,M,CAGFR,EAAeS,MAAML,GACrBJ,EAAeU,GAAG,UAAU,SAAAC,GAC1BhB,EAAYiB,uBAAyBD,C,IAGvChB,EAAYM,qBAAuBD,C,EAGrCF,EAAAnC,UAAAkD,iBAAA,WAEEvD,KAAKyC,iB,EAGPD,EAAAnC,UAAAC,OAAA,WAEE,OACES,EAACmB,EAAI,CAACZ,MAAM,kCACTtB,KAAKwD,WACJzC,EAAA,cAAYO,MAAM,eAAeQ,KAAK,iBACnC9B,KAAKwD,WAGVzC,EAAA,OAAKO,MAAM,6B,sRA1DM,I"}

package/dist/zonos-elements/zonos-button_2.entry.js DELETED Viewed

@@ -1,124 +0,0 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-d1aa9293.js';
-import { z as zonosStore } from './zonosStore-13a7b534.js';
-import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-82fbaf25.js';
-import { i as isColorVariable } from './isColorVariable-4cda28c9.js';
-import { i as isDarkColor } from './isDarkColor-b21326ae.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.appearance.colorSecondary;
-  const backgroundColor = background && isColorVariable(background)
-    ? `var(--amino-${background})`
-    : background;
-  // determine theme based on background color (to change button text color if needed)
-  const buttonTheme = backgroundColor && 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) {
-    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(this.color)
-      ? `var(--amino-${this.color})`
-      : this.color;
-    // use override background if it exists, otherwise use color from setting
-    const overrideBackground = this.backgroundColor || 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(this.borderStyle);
-    return (h(Host, { class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
-        '--background-color': overrideBackground,
-        '--border-radius': borderStyle,
-        '--color': color,
-      } }, h("button", { class: 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 && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, 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) {
-    registerInstance(this, hostRef);
-    this.size = 32;
-    this.color = undefined;
-  }
-  render() {
-    if (!this.el.shadowRoot) {
-      return null;
-    }
-    return (h(Host, { class: classes(['zonos--elements', this.color]), style: {
-        '--size': `${this.size}px`,
-      } }, h("svg", { viewBox: "0 0 50 50" }, h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
-  }
-  get el() { return getElement(this); }
-};
-ZonosSpinner.style = zonosSpinnerCss;
-export { ZonosButton as zonos_button, ZonosSpinner as zonos_spinner };
-//# sourceMappingURL=zonos-button_2.entry.js.map