@zonos/elements 1.0.16

package/dist/esm-es5/zonos-button_2.entry.js

@@ -0,0 +1,2 @@
+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";var getButtonTheme=function(o){var n=o||zonosStore.appearance.colorSecondary;var t=n&&isColorVariable(n)?"var(--amino-".concat(n,")"):n;var r=t&&isDarkColor(t)?"DARK":"LIGHT";return r};var 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)}";var ZonosButton=function(){function o(o){var n=this;registerInstance(this,o);this.handleSlotChange=function(){n.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}o.prototype.iconChangeHandler=function(){this.hasIcon=!!this.icon};o.prototype.clickHandler=function(o){if(this.loading||this.isDisabled){o.preventDefault();o.stopPropagation()}};o.prototype.componentWillLoad=function(){this.iconChangeHandler()};o.prototype.render=function(){var o=this.loading||this.isDisabled;var n=this.color&&isColorVariable(this.color)?"var(--amino-".concat(this.color,")"):this.color;var t=this.backgroundColor||zonosStore.appearance.colorSecondary;var r=this.variant==="standard"?getButtonTheme(t):undefined;var a=getBorderRadius(this.borderStyle);return h(Host,{class:classes(["zonos--elements",this.class]),"data-theme":this.theme||r,disabled:o,style:{"--background-color":t,"--border-radius":a,"--color":n}},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,this.backgroundColor&&this.variant==="standard"&&"override-background"]),disabled:o},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))};Object.defineProperty(o,"watchers",{get:function(){return{icon:["iconChangeHandler"]}},enumerable:false,configurable:true});return o}();ZonosButton.style=zonosButtonCss;var 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}";var ZonosSpinner=function(){function o(o){registerInstance(this,o);this.size=32;this.color=undefined}o.prototype.render=function(){if(!this.el.shadowRoot){return null}return h(Host,{class:classes(["zonos--elements",this.color]),style:{"--size":"".concat(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"})))};Object.defineProperty(o.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return o}();ZonosSpinner.style=zonosSpinnerCss;export{ZonosButton as zonos_button,ZonosSpinner as zonos_spinner};
+//# sourceMappingURL=zonos-button_2.entry.js.map

package/dist/esm-es5/zonos-button_2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getButtonTheme","overrideBackground","background","zonosStore","appearance","colorSecondary","backgroundColor","isColorVariable","concat","buttonTheme","isDarkColor","zonosButtonCss","ZonosButton","this","handleSlotChange","_this","hasContent","icon","prototype","iconChangeHandler","hasIcon","clickHandler","event","loading","isDisabled","preventDefault","stopPropagation","componentWillLoad","render","disabled","color","variant","undefined","borderStyle","getBorderRadius","h","Host","class","classes","theme","style","noBackground","noPaddingLeft","noPaddingRight","iconRight","size","onSlotchange","zonosSpinnerCss","ZonosSpinner","el","shadowRoot","viewBox","cx","cy","fill","id","r"],"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"],"mappings":"iXAQO,IAAMA,eAAiB,SAACC,GAE7B,IAAMC,EAAaD,GAAsBE,WAAWC,WAAWC,eAE/D,IAAMC,EACJJ,GAAcK,gBAAgBL,GAC1B,eAAAM,OAAeN,EAAU,KACzBA,EAGN,IAAMO,EACJH,GAAmBI,YAAYJ,GAAmB,OAAS,QAE7D,OAAOG,CACT,ECtBA,IAAME,eAAiB,67N,ICkBVC,YAAW,W,kDAyHdC,KAAAC,iBAAmB,WACzBC,EAAKC,WAAa,I,aAtHI,G,+FA4BM,M,UAMc,K,eAMd,M,UAMK,K,aAanB,W,kBAMgB,M,mBAKC,M,oBAKC,M,aAKP,M,oCAUGH,KAAKI,K,gBAYJ,K,CAP/BL,EAAAM,UAAAC,kBAAA,WACEN,KAAKO,UAAYP,KAAKI,I,EAWxBL,EAAAM,UAAAG,aAAA,SAAaC,GACX,GAAIT,KAAKU,SAAWV,KAAKW,WAAY,CACnCF,EAAMG,iBACNH,EAAMI,iB,GAWVd,EAAAM,UAAAS,kBAAA,WACEd,KAAKM,mB,EAGPP,EAAAM,UAAAU,OAAA,WACE,IAAMC,EAAWhB,KAAKU,SAAWV,KAAKW,WAEtC,IAAMM,EACJjB,KAAKiB,OAASvB,gBAAgBM,KAAKiB,OAC/B,eAAAtB,OAAeK,KAAKiB,MAAK,KACzBjB,KAAKiB,MAGX,IAAM7B,EACJY,KAAKP,iBAAmBH,WAAWC,WAAWC,eAEhD,IAAMI,EACJI,KAAKkB,UAAY,WACb/B,eAAeC,GACf+B,UAEN,IAAMC,EAAcC,gBAAgBrB,KAAKoB,aACzC,OACEE,EAACC,KAAI,CACHC,MAAOC,QAAQ,CAAC,kBAAmBzB,KAAKwB,QAAO,aACnCxB,KAAK0B,OAAS9B,EAC1BoB,SAAUA,EACVW,MAAO,CACL,qBAAsBvC,EACtB,kBAAmBgC,EACnB,UAAWH,IAGbK,EAAA,UACEE,MAAOC,QAAQ,CACbzB,KAAKO,SAAW,WAChBP,KAAKG,YAAc,cACnBH,KAAK4B,cAAgB,gBACrB5B,KAAK6B,eAAiB,kBACtB7B,KAAK8B,gBAAkB,mBACvB9B,KAAK+B,WAAa,aAClB/B,KAAKkB,QACLlB,KAAKgC,KAELhC,KAAKP,iBACHO,KAAKkB,UAAY,YACjB,wBAEJF,SAAUA,GAEThB,KAAKU,SACJY,EAAA,OAAKE,MAAM,0BACTF,EAAA,iBAAeU,KAAM,OAIvBhC,KAAKU,UAAYV,KAAK+B,WAAa/B,KAAKI,KAC1CkB,EAAA,QAAMW,aAAcjC,KAAKC,oBACvBD,KAAKU,SAAWV,KAAK+B,WAAa/B,KAAKI,M,uIAvL3B,G,iCClBxB,IAAM8B,gBAAkB,80D,ICkBXC,aAAY,W,iDAKA,G,qBASvBA,EAAA9B,UAAAU,OAAA,WACE,IAAKf,KAAKoC,GAAGC,WAAY,CACvB,OAAO,I,CAGT,OACEf,EAACC,KAAI,CACHC,MAAOC,QAAQ,CAAC,kBAAmBzB,KAAKiB,QACxCU,MAAO,CACL,SAAU,GAAAhC,OAAGK,KAAKgC,KAAI,QAGxBV,EAAA,OAAKgB,QAAQ,aACXhB,EAAA,UACEE,MAAM,QACNe,GAAG,KACHC,GAAG,KACHC,KAAK,OACLC,GAAG,yBACHC,EAAE,KAAI,eACO,MAEfrB,EAAA,UACEiB,GAAG,KACHC,GAAG,KACHC,KAAK,OACLC,GAAG,yBACHC,EAAE,KAAI,eACO,O,gIA1CA,G"}

package/dist/esm-es5/zonos-card_2.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,h,H as Host}from"./index-d1aa9293.js";import{c as classes}from"./classes-0d95c529.js";var 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)}";var ZonosCard=function(){function s(s){registerInstance(this,s);this.actions=undefined;this.class=undefined;this.footerActions=undefined;this.footerContent=undefined;this.footerHeight=undefined;this.label=undefined;this.spacing="24px"}s.prototype.render=function(){return h(Host,null,h("div",{class:classes(["styled-card",this.class]),style:{padding:this.spacing}},this.label&&h("header",{class:"card-header",style:{padding:this.spacing}},h("text-component",{type:"subheader"},this.label),h("h-stack",{spacing:8},this.actions)),h("slot",null),(this.footerActions||this.footerContent)&&h("footer",{class:"card-footer",style:{height:this.footerHeight?"".concat(this.footerHeight,"px"):"auto",padding:this.spacing}},h("div",null,this.footerContent),h("h-stack",{spacing:8},this.footerActions))))};return s}();ZonosCard.style=zonosCardCss;var 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}";var VStack=function(){function s(s){registerInstance(this,s);this.spacing=24;this.class=""}s.prototype.render=function(){return h(Host,null,h("div",{class:classes(["vstack",this.class]),style:{"grid-row-gap":"".concat(this.spacing,"px")}},h("slot",null)))};return s}();VStack.style=zonosVStackCss;export{ZonosCard as zonos_card,VStack as zonos_v_stack};
+//# sourceMappingURL=zonos-card_2.entry.js.map

package/dist/esm-es5/zonos-card_2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["zonosCardCss","ZonosCard","prototype","render","h","Host","class","classes","this","style","padding","spacing","label","type","actions","footerActions","footerContent","height","footerHeight","concat","zonosVStackCss","VStack"],"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"],"mappings":"mHAAA,IAAMA,aAAe,ogD,ICURC,UAAS,W,2MAkCO,M,CAE3BA,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,KAAI,KACHD,EAAA,OACEE,MAAOC,QAAQ,CAAC,cAAeC,KAAKF,QACpCG,MAAO,CAAEC,QAASF,KAAKG,UAEtBH,KAAKI,OACJR,EAAA,UAAQE,MAAM,cAAcG,MAAO,CAAEC,QAASF,KAAKG,UACjDP,EAAA,kBAAgBS,KAAK,aAAaL,KAAKI,OAEvCR,EAAA,WAASO,QAAS,GAAIH,KAAKM,UAK/BV,EAAA,cAEEI,KAAKO,eAAiBP,KAAKQ,gBAC3BZ,EAAA,UACEE,MAAM,cACNG,MAAO,CACLQ,OAAQT,KAAKU,aAAe,GAAAC,OAAGX,KAAKU,aAAY,MAAO,OACvDR,QAASF,KAAKG,UAGhBP,EAAA,WAAMI,KAAKQ,eACXZ,EAAA,WAASO,QAAS,GAAIH,KAAKO,iB,WA/DnB,G,6BCVtB,IAAMK,eAAiB,uX,ICWVC,OAAM,W,oDAKc,G,WAKP,E,CAExBA,EAAAnB,UAAAC,OAAA,WACE,OACEC,EAACC,KAAI,KACHD,EAAA,OACEE,MAAOC,QAAQ,CAAC,SAAUC,KAAKF,QAC/BG,MAAO,CAAE,eAAgB,GAAAU,OAAGX,KAAKG,QAAO,QAExCP,EAAA,c,WAnBS,G"}

package/dist/esm-es5/zonos-cart-items_10.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(o,t,e,s){function n(o){return o instanceof e?o:new e((function(t){t(o)}))}return new(e||(e=Promise))((function(e,i){function a(o){try{c(s.next(o))}catch(o){i(o)}}function r(o){try{c(s["throw"](o))}catch(o){i(o)}}function c(o){o.done?e(o.value):n(o.value).then(a,r)}c((s=s.apply(o,t||[])).next())}))};var __generator=this&&this.__generator||function(o,t){var e={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},s,n,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(o){return function(t){return c([o,t])}}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,n&&(i=r[0]&2?n["return"]:r[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,r[1])).done)return i;if(n=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++;n=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=t.call(o,e)}catch(o){r=[6,o];n=0}finally{s=i=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(o,t,e){if(e||arguments.length===2)for(var s=0,n=t.length,i;s<n;s++){if(i||!(s in t)){if(!i)i=Array.prototype.slice.call(t,0,s);i[s]=t[s]}}return o.concat(i||Array.prototype.slice.call(t))};import{r as registerInstance,a as getAssetPath,h,H as Host,F as Fragment,c as createEvent,d as getElement}from"./index-d1aa9293.js";import{c as cartStore,s as stripeStore,l as stripeStoreRetrievePayment,j as stripeStoreReset,m as cartStoreUpdateSelectedShippingOption,n as cartStoreGetShippingTransitInfo}from"./cart-36c33342.js";import{t as translate}from"./localization-4a424f49.js";import{g as getBorderRadius}from"./getBorderRadius-82fbaf25.js";import{s as submitGtag,i as isCheckoutMobile}from"./submitGtag-fbdb454b.js";import{c as classes}from"./classes-0d95c529.js";import{z as zonosStore}from"./zonosStore-13a7b534.js";import"./isDarkColor-b21326ae.js";var formatCurrency=function(o){var t=o.amount,e=o.currency,s=o.showCurrencyText;return s?"".concat(new Intl.NumberFormat("en-US",{currency:e,style:"currency"}).format(t)," ").concat(e):new Intl.NumberFormat("en-US",{currency:e,style:"currency"}).format(t)};var zonosCartItemsCss=":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 .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column{padding:var(--amino-space-8);font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host img{min-width:40px}";var ZonosCartItems=function(){function o(o){registerInstance(this,o);this.errorImages=[]}o.prototype.render=function(){var o=this;var t=getAssetPath("./assets/empty-item.jpeg");return h(Host,{class:"zonos--cart-items zonos--elements"},h("table",{class:"zonos--cart-table"},h("tbody",null,cartStore.items.map((function(e){var s=e.imageUrl;return h("tr",{class:"zonos--cart-item"},h("td",{class:"zonos--column zonos--cart-item-image"},s&&!o.errorImages.includes(s)?h("img",{alt:e.name,onError:function(){o.errorImages=__spreadArray(__spreadArray([],o.errorImages,true),[s],false)},src:e.imageUrl,style:{"min-width":"40px"},width:40}):h("img",{alt:e.name,src:t,width:40})),h("td",{class:"zonos--column zonos--cart-item-name"},h("zonos-text",{type:"label"},e.name)),h("td",{class:"zonos--column zonos--cart-item-price"},h("zonos-text",{type:"semiBoldLabel"},formatCurrency({amount:e.amount*e.quantity,currency:cartStore.currency}))))})))))};Object.defineProperty(o,"assetsDirs",{get:function(){return["assets"]},enumerable:false,configurable:true});return o}();ZonosCartItems.style=zonosCartItemsCss;var InfoIcon='<svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M1.96704 8.00065C1.96704 4.31875 4.93024 1.33398 8.58554 1.33398C12.2408 1.33398 15.204 4.31875 15.204 8.00065C15.204 11.6826 12.2408 14.6673 8.58554 14.6673C4.93024 14.6673 1.96704 11.6825 1.96704 8.00065Z" fill="#C5C6CA"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.58543 4.66016C8.95096 4.66016 9.24728 4.95863 9.24728 5.32682V5.33349C9.24728 5.70168 8.95096 6.00016 8.58543 6.00016C8.2199 6.00016 7.92358 5.70168 7.92358 5.33349V5.32682C7.92358 4.95863 8.2199 4.66016 8.58543 4.66016ZM8.58543 7.33349C8.95096 7.33349 9.24728 7.63197 9.24728 8.00016V10.6668C9.24728 11.035 8.95096 11.3335 8.58543 11.3335C8.2199 11.3335 7.92358 11.035 7.92358 10.6668V8.00016C7.92358 7.63197 8.2199 7.33349 8.58543 7.33349Z" fill="#4D505A"/>\n</svg>\n';var zonosCartSubtotalCss=":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 .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column{padding:var(--amino-space-20) var(--amino-space-8);vertical-align:top}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--title-with-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}:host .zonos--cart-subtotal-title,:host .zonos--cart-subtotal-price{border-bottom:1px solid var(--amino-gray-200)}:host .zonos--cart-subtotal-price{text-align:right}";var ZonosCartSubtotal=function(){function o(o){registerInstance(this,o)}o.prototype.render=function(){var o=cartStore.total-cartStore.dutiesTaxFees;var t=function(){if(!cartStore.selectedShippingOption){return h(Fragment,null,h("zonos-text",{class:"zonos--title",type:"semiBoldLabel"},translate("Shipping")),h("zonos-text",{class:"zonos--caption",type:"caption"},translate("No shipping method selected")))}return h(Fragment,null,h("zonos-text",{class:"zonos--title",type:"semiBoldLabel"},cartStore.selectedShippingOption.displayName),cartStore.selectedShippingOptionTransitTime&&h("zonos-text",{class:"zonos--caption",type:"caption"},cartStore.selectedShippingOptionTransitTime," ",translate("business days")))};return h(Host,{class:"zonos--cart-subtotal zonos--elements"},h("table",{class:"zonos--cart-table"},h("tr",{class:"zonos--row zonos--cart-subtotal"},h("td",{class:"zonos--column"}),h("td",{class:"zonos--column zonos--cart-subtotal-title"},h("zonos-text",{type:"semiBoldLabel"},translate("Cart subtotal"))),h("td",{class:"zonos--column zonos--cart-subtotal-price"},h("zonos-text",{type:"semiBoldLabel"},formatCurrency({amount:cartStore.subtotal,currency:cartStore.currency})))),h("tr",{class:"zonos--row zonos--cart-shipping"},h("td",{class:"zonos--column"}),h("td",{class:"zonos--column zonos--cart-subtotal-title"},t()),h("td",{class:"zonos--column zonos--cart-subtotal-price"},cartStore.shipping?formatCurrency({amount:cartStore.shipping,currency:cartStore.currency}):"-")),cartStore.step==="payment"&&h("tr",{class:"zonos--row zonos--cart-duties"},h("td",{class:"zonos--column"}),h("td",{class:"zonos--column zonos--cart-subtotal-title"},h("div",{class:"zonos--title-with-icon"},h("zonos-text",{class:"zonos--title",type:"semiBoldLabel"},translate("Duties, taxes, and fees")),h("zonos-icon",{content:InfoIcon,size:16})),!!cartStore.isSelectedShippingAboveDeminimis&&h("zonos-text",{color:"gray-800",type:"body"},translate("Order is over the de minimis threshold for both duty and tax"))),h("td",{class:"zonos--column zonos--cart-subtotal-price"},cartStore.dutiesTaxFees?formatCurrency({amount:cartStore.dutiesTaxFees,currency:cartStore.currency}):"-",cartStore.isSelectedShippingGuarantee&&h("zonos-badge",null,translate("Guaranteed")))),h("tr",{class:"zonos--row zonos--cart-pay-total"},h("td",{class:"zonos--column"}),h("td",{class:"zonos--column"},h("zonos-text",{class:"zonos--title",type:"semiBoldLabel"},translate("Order total"))),h("td",{class:"zonos--column"},h("zonos-text",{type:"semiBoldLabel"},formatCurrency({amount:cartStore.step==="shipping"?o:cartStore.total,currency:cartStore.currency}))))))};Object.defineProperty(o,"assetsDirs",{get:function(){return["assets"]},enumerable:false,configurable:true});return o}();ZonosCartSubtotal.style=zonosCartSubtotalCss;var RemoveIcon$1='<svg color="var(--amino-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--amino-red-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>';var SuccessIcon='<svg color="var(--amino-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><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="var(--amino-blue-100)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M15.707 9.293a1 1 0 0 1 0 1.414l-3.646 3.647a1.5 1.5 0 0 1-2.122 0l-1.646-1.647a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0Z" fill="currentColor" fill-rule="evenodd"></path></svg>';var zonosCheckoutFinishCss=":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-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-bottom:var(--amino-space-24);border-radius:var(--border-radius, 10px);gap:var(--amino-space-24);max-width:360px;width:auto;margin:auto;margin-top:var(--amino-space-24);background-color:var(--amino-gray-50);padding:var(--amino-space-20)}:host zonos-button{width:100%}:host .loading-wrapper{min-height:300px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";var ZonosCheckoutFinish=function(){function o(o){var t=this;registerInstance(this,o);this.closeClick=createEvent(this,"closeClick",7);this.checkPaymentStatus=function(){return __awaiter(t,void 0,void 0,(function(){var o,t,e,s;return __generator(this,(function(n){switch(n.label){case 0:this.isLoading=true;o=new URLSearchParams(window.location.search).get("payment_intent_client_secret")||stripeStore.clientSecret;if(!o)return[3,2];return[4,stripeStoreRetrievePayment({clientSecret:o,storybookForceStatus:this.storybookForceStatus})];case 1:t=n.sent(),e=t.error,s=t.messages;this.notificationType=e?"error":"success";this.notificationMessages=s||[];this.notificationTitle=e?translate("Payment failed"):translate("You're all set!");if(e){submitGtag("zonos-checkout-payment-fail")}else{submitGtag("zonos-checkout-success")}n.label=2;case 2:stripeStoreReset();this.isLoading=false;return[2]}}))}))};this.closeClickHandler=function(){t.closeClick.emit()};this.borderRadius="ROUNDED";this.storybookForceStatus=undefined;this.overrideNotification=undefined;this.isLoading=true;this.notificationType="success";this.notificationTitle="";this.notificationMessages=[]}o.prototype.componentDidLoad=function(){if(this.overrideNotification){this.notificationType=this.overrideNotification.type;this.notificationTitle=this.overrideNotification.title;this.notificationMessages=this.overrideNotification.messages;return}void this.checkPaymentStatus()};o.prototype.render=function(){var o=this;return h(Host,{class:"zonos--checkout-finish zonos--elements",style:{"--border-radius":getBorderRadius(this.borderRadius)}},this.isLoading&&h("div",{class:"loading-wrapper"},h("zonos-spinner",null)),!this.isLoading&&h("div",{class:"zonos--group"},this.notificationType==="success"?h("zonos-icon",{color:"blue-800",content:SuccessIcon,size:50}):h("zonos-icon",{color:"red-800",content:RemoveIcon$1,size:50}),h("zonos-text",{class:"zonos--title",type:"semiBoldSubheader"},this.notificationTitle),h("zonos-text",null,this.notificationMessages.map((function(o){return h(Fragment,null,o,h("br",null))}))),h("zonos-button",{onClick:function(){return o.closeClickHandler()},size:"md",variant:"primary"},translate("Keep shopping"))))};Object.defineProperty(o,"assetsDirs",{get:function(){return["assets"]},enumerable:false,configurable:true});return o}();ZonosCheckoutFinish.style=zonosCheckoutFinishCss;var zonosCheckoutPaymentCss=".sc-zonos-checkout-payment-h{font-family:Inter;display:block}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-20);overflow:auto;padding:0 5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-8)}.sc-zonos-checkout-payment-h zonos-button.sc-zonos-checkout-payment{width:100%}";var ZonosCheckoutPayment=function(){function o(o){var t=this;registerInstance(this,o);this.continueClicked=createEvent(this,"continueClicked",7);this.continueClickHandler=function(){t.continueClicked.emit()};this.paymentError=false;this.submitBtnType=undefined;this.continueLoading=false;this.submitBtnColor=undefined;this.disabled=true}o.prototype.watchFormComplete=function(){if(!this.disabled){submitGtag("zonos-checkout-payment-info")}};o.prototype.render=function(){var o=this;var t;if(!stripeStore.stripeElements){return null}this.disabled=!((t=stripeStore.stripePaymentEventData)===null||t===void 0?void 0:t.complete);return h(Host,{class:"zonos--checkout-payment zonos--elements"},h("div",{class:"zonos--group"},h("zonos-text",{class:"zonos--title",type:"semiBoldSubheader"},translate("Payment method")),this.paymentError&&h("zonos-banner",{class:"zonos--payment-error-banner",intent:"error"},translate("We couldn't complete your payment. Please verify the payment details and try again.")),h("zonos-payment",null)),h("zonos-button",{backgroundColor:this.submitBtnColor,"is-disabled":this.disabled,loading:this.continueLoading,onClick:function(){return o.continueClickHandler()},size:"lg",variant:this.submitBtnType},"Pay"," ",formatCurrency({amount:cartStore.total,currency:cartStore.currency})))};Object.defineProperty(o,"watchers",{get:function(){return{disabled:["watchFormComplete"]}},enumerable:false,configurable:true});return o}();ZonosCheckoutPayment.style=zonosCheckoutPaymentCss;var zonosCollapseCss=":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{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";var ZonosCollapse=function(){function o(o){registerInstance(this,o);this.collapsed=false;this.collapseSize=0;this.height=this.el.scrollHeight}o.prototype.getElementHeight=function(){var o="".concat(this.height,"px");var t="".concat(this.collapseSize,"px");return this.collapsed?t:o};o.prototype.componentDidLoad=function(){this.height=this.el.scrollHeight};o.prototype.componentDidRender=function(){var o=this;var t,e,s;(s=(e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector("iframe"))===null||e===void 0?void 0:e.contentWindow)===null||s===void 0?void 0:s.addEventListener("resize",(function(){o.height=o.el.scrollHeight}))};o.prototype.render=function(){this.height=this.el.scrollHeight;return h(Host,{class:"zonos--elements zonos--collapse",style:{height:this.getElementHeight()}},h("div",null,h("iframe",{class:"height-change-listener",tabindex:"-1",title:"collapse-height-change-listener"}),h("slot",null)))};Object.defineProperty(o.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return o}();ZonosCollapse.style=zonosCollapseCss;var zonosCustomerInfoCss=".sc-zonos-customer-info-h{font-family:Inter;display:block}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:0 5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h zonos-button.sc-zonos-customer-info{width:100%}";var ZonosCustomerInfo=function(){function o(o){var t=this;registerInstance(this,o);this.continueClicked=createEvent(this,"continueClicked",7);this.continueClickHandler=function(){t.continueClicked.emit()};this.continueLoading=false;this.submitBtnType=undefined;this.submitBtnColor=undefined;this.defaultAddress=null;this.disabled=true}o.prototype.watchFormComplete=function(){if(!this.disabled){submitGtag("zonos-checkout-customer-info")}};o.prototype.render=function(){var o=this;var t,e;if(!stripeStore.stripeElements){return null}this.disabled=!((t=stripeStore.stripeAddressEventData)===null||t===void 0?void 0:t.complete)||!((e=stripeStore.stripeLinkEventData)===null||e===void 0?void 0:e.complete);return h(Host,{class:"zonos--customer-info zonos--elements"},h("div",{class:"zonos--group"},h("zonos-text",{class:"zonos--title",type:"semiBoldSubheader"},translate("Customer information")),h("zonos-link-authentication",{titleText:translate("Contact")}),h("zonos-address",{defaultAddress:this.defaultAddress,titleText:translate("Address"),type:"shipping"})),h("zonos-button",{backgroundColor:this.submitBtnColor,isDisabled:this.disabled,loading:this.continueLoading,onClick:function(){return o.continueClickHandler()},size:"lg",variant:this.submitBtnType},translate("Continue to shipping")))};Object.defineProperty(o,"watchers",{get:function(){return{disabled:["watchFormComplete"]}},enumerable:false,configurable:true});return o}();ZonosCustomerInfo.style=zonosCustomerInfoCss;var RemoveIcon='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>';var zonosDialogCss=":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 .zonos--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0px;top:0px;background:var(--amino-backdrop-color);z-index:-999;opacity:0;visibility:hidden;position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:1002;background:white}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--amino-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:1001;background:var(--amino-gray-0);max-width:90vw;max-height:90vh;min-height:500px;height:var(--height, auto);width:var(--width, auto);border-radius:var(--border-radius, var(--amino-radius-10));outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);border:var(--amino-border);overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-16) var(--amino-space-24)}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--amino-size-md);height:var(--amino-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--amino-radius-10)}:host .zonos--header .zonos--close-button:hover{background:var(--amino-hover-color)}:host .zonos--body{padding:var(--amino-space-8) var(--amino-space-24);max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:var(--amino-space-16) var(--amino-space-24)}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:1001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:1002;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";var ZonosDialog=function(){function o(o){var t=this;registerInstance(this,o);this.closeDialog=createEvent(this,"closeDialog",7);this.isMobileMode=function(){return t.mobile||window.innerWidth<=768};this.closeButtonHandler=function(){t.closeDialog.emit()};this.clickOutsideDialogHandler=function(o){if(o.target===o.currentTarget&&!t.noClickOutside){t.closeDialog.emit()}};this.open=false;this.headerText="";this.width="460px";this.height=undefined;this.noHeader=false;this.noBodyPadding=false;this.noBorder=false;this.footerRightAction=null;this.borderStyle=undefined;this.noCloseButton=false;this.noClickOutside=false;this.mobile=false;this.isLoading=true;this.isMobile=false}o.prototype.handleWindowResize=function(){this.isMobile=this.isMobileMode()};o.prototype.componentDidLoad=function(){this.isMobile=this.isMobileMode()};o.prototype.render=function(){if(this.open){document.body.style.overflow="hidden"}else{document.body.style.overflow="auto"}var o=getBorderRadius(this.borderStyle);return h(Host,{class:classes(["zonos--elements",this.open&&"open",this.isLoading&&"is-loading",this.noBorder&&"no-border",this.isMobile&&"mobile"]),style:{"--border-radius":o,"--height":this.height||"initial","--width":this.width}},h("div",{class:"zonos--backdrop"}),h("div",{"aria-hidden":"true",class:"zonos--dialog-layout",onClick:this.clickOutsideDialogHandler},h("div",{class:"zonos--dialog"},this.isLoading&&h("div",{class:"zonos--loading"},h("zonos-spinner",{size:30})),(this.headerText||!this.noCloseButton)&&h("div",{class:"zonos--header"},this.headerText&&h("h3",{class:"zonos--header-text"},this.headerText),!this.noCloseButton&&h("zonos-button",{class:"zonos--close-button",icon:h("zonos-icon",{content:RemoveIcon}),noBackground:true,onClick:this.closeButtonHandler})),h("div",{class:classes(["zonos--body",this.noBodyPadding&&"zonos--no-body-padding"])},h("slot",null)),this.footerRightAction&&h("div",{class:"zonos--footer"},h("div",{class:"zonos--footer-right-action"},this.footerRightAction)))))};Object.defineProperty(o,"assetsDirs",{get:function(){return["assets"]},enumerable:false,configurable:true});return o}();ZonosDialog.style=zonosDialogCss;var zonosLogoCss=":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 img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";var ZonosLogo=function(){function o(o){registerInstance(this,o);this.theme="LIGHT";this.width="auto";this.class=""}o.prototype.render=function(){var o=this.theme==="DARK"?"invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)":"whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)";return h(Host,{class:classes(["zonos--elements zonos--logo",this.class]),style:{"--filter-color":o,"--width":this.width}},h("img",{alt:"Zonos Logo",src:getAssetPath("./assets/ZonosLogo.png")}))};Object.defineProperty(o,"assetsDirs",{get:function(){return["assets"]},enumerable:false,configurable:true});return o}();ZonosLogo.style=zonosLogoCss;var ChevronDownIcon='<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>';var ChevronUpIcon='<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M17.707 14.707a1 1 0 0 1-1.414 0L12 10.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l4.93-4.93a1.1 1.1 0 0 1 1.555 0l4.93 4.93a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>';var zonosReviewCss=":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 .zonos--total-pay{margin:var(--amino-space-16) 0 var(--amino-space-32)}:host(.mobile){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:var(--amino-space-24);-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-4) 0;margin-bottom:var(--amino-space-8)}:host(.mobile) .zonos--title{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;gap:var(--amino-space-8)}:host(.mobile) .zonos--total-pay{margin:0}";var ZonosReview=function(){function o(o){registerInstance(this,o);this.mobile=false;this.collapsed=false;this.isMobile=false}o.prototype.handleWindowResize=function(){this.isMobile=isCheckoutMobile(this.mobile)};o.prototype.componentWillLoad=function(){this.isMobile=isCheckoutMobile(this.mobile)};o.prototype.render=function(){var o=this;var t=this.isMobile?"boldSubheader":"semiBoldLabel";var e=this.isMobile?"boldSubheader":"secondaryPageHeader";var s=this.isMobile?"gray-1200":"gray-800";var n=cartStore.total-cartStore.dutiesTaxFees;var i=function(){if(!o.isMobile){return null}if(!o.collapsed){return h("zonos-icon",{color:"gray-1200",content:ChevronDownIcon})}return h("zonos-icon",{color:"gray-1200",content:ChevronUpIcon})};return h(Host,{class:classes(["zonos--review zonos--elements",this.isMobile&&"mobile"])},h("div",{class:"zonos--title"},h("zonos-text",{color:s,type:t},translate("Pay")," ",zonosStore.organizationName),i()),h("div",{class:"zonos--total-pay"},h("zonos-text",{type:e},formatCurrency({amount:cartStore.step==="shipping"?n:cartStore.total,currency:cartStore.currency}))))};Object.defineProperty(o,"assetsDirs",{get:function(){return["assets"]},enumerable:false,configurable:true});return o}();ZonosReview.style=zonosReviewCss;var zonosShippingCss=".sc-zonos-shipping-h{font-family:Inter;display:block}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding-right:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";var ZonosShipping=function(){function o(o){var t=this;registerInstance(this,o);this.continueClicked=createEvent(this,"continueClicked",7);this.handleRadioSelected=function(o){return __awaiter(t,void 0,void 0,(function(){var t,e,s;var n=this;return __generator(this,(function(i){switch(i.label){case 0:this.selectedShippingMethod=o.detail;if(!this.selectedShippingMethod){return[2]}e=((t=cartStore.shippingData)===null||t===void 0?void 0:t.find((function(o){var t;return o.id===((t=n.selectedShippingMethod)===null||t===void 0?void 0:t.value)})))||null;if(!e){return[2]}return[4,cartStoreUpdateSelectedShippingOption(e)];case 1:s=i.sent();if(!s){return[2]}this.disabled=false;return[2]}}))}))};this.continueClickHandler=function(){t.continueClicked.emit()};this.continueLoading=false;this.submitBtnColor=undefined;this.submitBtnType=undefined;this.selectedShippingMethod=null;this.disabled=true}o.prototype.watchFormComplete=function(){if(!this.disabled){submitGtag("zonos-checkout-shipping-info")}};o.prototype.render=function(){var o=this;var t,e;var s=(t=stripeStore.stripeAddressEventData)===null||t===void 0?void 0:t.value.address.country;var n=(e=cartStore.shippingData)===null||e===void 0?void 0:e.flatMap((function(o){var t,e;var s=cartStoreGetShippingTransitInfo(o),n=s.expectedDate,i=s.maxTransit,a=s.minTransit;var r=n?"".concat(translate("Expected delivery")," ").concat(n):"";var c=a&&i?"(".concat(a,"-").concat(i," ").concat(translate("business days"),")"):"";var l=((e=(t=cartStore.landedCostData)===null||t===void 0?void 0:t.find((function(t){var e;return((e=t.landedCost)===null||e===void 0?void 0:e.shipmentRating.id)===o.id})))===null||e===void 0?void 0:e.subtotals.shipping)||0;return{caption:c,label:o.displayName,price:formatCurrency({amount:l,currency:cartStore.currency}),sublabel:r,value:o.id}}));return h(Host,{class:"zonos--shipping zonos--elements"},h("div",{class:"zonos--group"},h("zonos-text",{class:"zonos--title",type:"semiBoldSubheader"},translate("Shipping information")),h("zonos-text",{class:"zonos--shipping-method-title",type:"semiBoldLabel"},translate("Shipping method")),!(n===null||n===void 0?void 0:n.length)?h("zonos-banner",{bannerTitle:"No shipping methods found - try editing your address or contacting support if the error persists",intent:"error"}):h("zonos-shipping-rich-radio",{items:n||[],onRadioSelected:function(t){return o.handleRadioSelected(t)}}),cartStore.isSelectedShippingAboveDeminimis&&h("zonos-banner",{intent:"warning"},translate("Above de minimis threshold for")," ",s,"."," ",translate("Duties and taxes will be applied to items and shipping."))),h("zonos-button",{backgroundColor:this.submitBtnColor,"is-disabled":this.disabled,loading:this.continueLoading,onClick:function(){return o.continueClickHandler()},size:"lg",variant:this.submitBtnType},translate("Go to payment")))};Object.defineProperty(o,"watchers",{get:function(){return{disabled:["watchFormComplete"]}},enumerable:false,configurable:true});return o}();ZonosShipping.style=zonosShippingCss;export{ZonosCartItems as zonos_cart_items,ZonosCartSubtotal as zonos_cart_subtotal,ZonosCheckoutFinish as zonos_checkout_finish,ZonosCheckoutPayment as zonos_checkout_payment,ZonosCollapse as zonos_collapse,ZonosCustomerInfo as zonos_customer_info,ZonosDialog as zonos_dialog,ZonosLogo as zonos_logo,ZonosReview as zonos_review,ZonosShipping as zonos_shipping};
+//# sourceMappingURL=zonos-cart-items_10.entry.js.map

package/dist/esm-es5/zonos-cart-items_10.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["formatCurrency","_d","amount","currency","showCurrencyText","concat","Intl","NumberFormat","style","format","zonosCartItemsCss","ZonosCartItems","prototype","render","_this","this","emptyItemImg","getAssetPath","h","Host","class","cartStore","items","map","item","itemImg","imageUrl","errorImages","includes","alt","name","onError","__spreadArray","src","width","type","quantity","zonosCartSubtotalCss","ZonosCartSubtotal","totalWithoutTaxes","total","dutiesTaxFees","renderShippingInfo","selectedShippingOption","Fragment","translate","displayName","selectedShippingOptionTransitTime","subtotal","shipping","step","content","InfoIcon","size","isSelectedShippingAboveDeminimis","color","isSelectedShippingGuarantee","zonosCheckoutFinishCss","ZonosCheckoutFinish","checkPaymentStatus","__awaiter","isLoading","clientSecret","URLSearchParams","window","location","search","get","stripeStore","stripeStoreRetrievePayment","storybookForceStatus","_e","sent","error","messages","notificationType","notificationMessages","notificationTitle","submitGtag","stripeStoreReset","closeClickHandler","closeClick","emit","class_1","componentDidLoad","overrideNotification","title","getBorderRadius","borderRadius","SuccessIcon","RemoveIcon","message","onClick","variant","zonosCheckoutPaymentCss","ZonosCheckoutPayment","continueClickHandler","continueClicked","watchFormComplete","disabled","stripeElements","_a","stripePaymentEventData","complete","paymentError","intent","backgroundColor","submitBtnColor","loading","continueLoading","submitBtnType","zonosCollapseCss","ZonosCollapse","el","scrollHeight","getElementHeight","fullHeight","height","collapsedHeight","collapseSize","collapsed","componentDidRender","_c","_b","shadowRoot","querySelector","contentWindow","addEventListener","tabindex","zonosCustomerInfoCss","ZonosCustomerInfo","stripeAddressEventData","stripeLinkEventData","titleText","defaultAddress","isDisabled","zonosDialogCss","ZonosDialog","isMobileMode","mobile","innerWidth","closeButtonHandler","closeDialog","clickOutsideDialogHandler","event","target","currentTarget","noClickOutside","handleWindowResize","isMobile","open","document","body","overflow","borderStyle","classes","noBorder","headerText","noCloseButton","icon","noBackground","noBodyPadding","footerRightAction","zonosLogoCss","ZonosLogo","filterColor","theme","zonosReviewCss","ZonosReview","isCheckoutMobile","componentWillLoad","titleTextType","totalTextType","titleTextColor","renderCollapseIcon","ChevronDownIcon","ChevronUpIcon","zonosStore","organizationName","zonosShippingCss","ZonosShipping","handleRadioSelected","e","selectedShippingMethod","detail","shippingData","find","id","value","cartStoreUpdateSelectedShippingOption","updateStatus","class_2","shipToCountry","address","country","serviceLevels","flatMap","cartStoreGetShippingTransitInfo","expectedDate","maxTransit","minTransit","sublabel","caption","shippingAmount","landedCostData","landedCostItem","landedCost","shipmentRating","subtotals","label","price","length","bannerTitle","onRadioSelected"],"sources":["src/components/utils/formatCurrency.ts","src/components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.scss?tag=zonos-cart-items&encapsulation=shadow","src/components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.tsx","src/components/checkout/zonos-checkout/zonos-cart-subtotal/zonos-cart-subtotal.scss?tag=zonos-cart-subtotal&encapsulation=shadow","src/components/checkout/zonos-checkout/zonos-cart-subtotal/zonos-cart-subtotal.tsx","src/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.scss?tag=zonos-checkout-finish&encapsulation=shadow","src/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.tsx","src/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.scss?tag=zonos-checkout-payment&encapsulation=scoped","src/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.tsx","src/components/common/zonos-collapse/zonos-collapse.scss?tag=zonos-collapse&encapsulation=shadow","src/components/common/zonos-collapse/zonos-collapse.tsx","src/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.scss?tag=zonos-customer-info&encapsulation=scoped","src/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.tsx","src/components/common/zonos-dialog/zonos-dialog.scss?tag=zonos-dialog&encapsulation=shadow","src/components/common/zonos-dialog/zonos-dialog.tsx","src/components/common/zonos-logo/zonos-logo.scss?tag=zonos-logo&encapsulation=shadow","src/components/common/zonos-logo/zonos-logo.tsx","src/components/checkout/zonos-checkout/zonos-review/zonos-review.scss?tag=zonos-review&encapsulation=shadow","src/components/checkout/zonos-checkout/zonos-review/zonos-review.tsx","src/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.scss?tag=zonos-shipping&encapsulation=scoped","src/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.tsx"],"sourcesContent":["export const formatCurrency = ({\n  amount,\n  currency,\n  showCurrencyText,\n}: {\n  amount: number;\n  currency: string;\n  showCurrencyText?: boolean;\n}) =>\n  showCurrencyText\n    ? `${new Intl.NumberFormat('en-US', {\n        currency,\n        style: 'currency',\n      }).format(amount)} ${currency}`\n    : new Intl.NumberFormat('en-US', {\n        currency,\n        style: 'currency',\n      }).format(amount);\n",":host {\n  .zonos--cart-table {\n    width: 100%;\n    border: none;\n    border-collapse: collapse;\n    overflow: auto;\n    font-size: $amino-font-size-base;\n    .zonos--column {\n      padding: $amino-space-8;\n      font-size: $amino-font-size-base;\n      &:last-child {\n        text-align: right;\n      }\n      &:first-child {\n        width: 60px;\n      }\n    }\n  }\n  img {\n    min-width: 40px;\n  }\n}\n","import { Component, getAssetPath, h, Host, State } from '@stencil/core';\n\nimport { cartStore } from 'src/components/store/checkout/cart';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-cart-items.scss',\n  tag: 'zonos-cart-items',\n})\nexport class ZonosCartItems {\n  @State() errorImages: string[] = [];\n\n  render() {\n    const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');\n    return (\n      <Host class=\"zonos--cart-items zonos--elements\">\n        <table class=\"zonos--cart-table\">\n          <tbody>\n            {cartStore.items.map(item => {\n              const itemImg = item.imageUrl;\n              return (\n                <tr class=\"zonos--cart-item\">\n                  <td class=\"zonos--column zonos--cart-item-image\">\n                    {itemImg && !this.errorImages.includes(itemImg) ? (\n                      <img\n                        alt={item.name}\n                        onError={() => {\n                          this.errorImages = [...this.errorImages, itemImg];\n                        }}\n                        src={item.imageUrl}\n                        style={{\n                          'min-width': '40px',\n                        }}\n                        width={40}\n                      />\n                    ) : (\n                      <img alt={item.name} src={emptyItemImg} width={40} />\n                    )}\n                  </td>\n                  <td class=\"zonos--column zonos--cart-item-name\">\n                    <zonos-text type=\"label\">{item.name}</zonos-text>\n                  </td>\n                  <td class=\"zonos--column zonos--cart-item-price\">\n                    <zonos-text type=\"semiBoldLabel\">\n                      {formatCurrency({\n                        amount: item.amount * item.quantity,\n                        currency: cartStore.currency,\n                      })}\n                    </zonos-text>\n                  </td>\n                </tr>\n              );\n            })}\n          </tbody>\n        </table>\n      </Host>\n    );\n  }\n}\n",":host {\n  .zonos--cart-table {\n    width: 100%;\n    border: none;\n    border-collapse: collapse;\n    overflow: auto;\n    font-size: $amino-font-size-base;\n    .zonos--column {\n      padding: $amino-space-20 $amino-space-8;\n      vertical-align: top;\n      &:last-child {\n        text-align: right;\n      }\n      &:first-child {\n        width: 60px;\n      }\n    }\n  }\n  .zonos--title-with-icon {\n    display: flex;\n    align-items: center;\n    gap: $amino-space-8;\n  }\n  .zonos--cart-subtotal-title,\n  .zonos--cart-subtotal-price {\n    border-bottom: 1px solid $amino-gray-200;\n  }\n\n  .zonos--cart-subtotal-price {\n    text-align: right;\n  }\n}\n","import { Component, Fragment, h, Host } from '@stencil/core';\n\nimport { cartStore } from 'src/components/store/checkout/cart';\nimport { translate } from 'src/components/store/translationStore';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\n\n// These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport InfoIcon from './assets/InfoIcon.svg';\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-cart-subtotal.scss',\n  tag: 'zonos-cart-subtotal',\n})\nexport class ZonosCartSubtotal {\n  render() {\n    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;\n    const renderShippingInfo = () => {\n      if (!cartStore.selectedShippingOption) {\n        return (\n          <>\n            <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n              {translate('Shipping')}\n            </zonos-text>\n            <zonos-text class=\"zonos--caption\" type=\"caption\">\n              {translate('No shipping method selected')}\n            </zonos-text>\n          </>\n        );\n      }\n      return (\n        <>\n          <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n            {cartStore.selectedShippingOption.displayName}\n          </zonos-text>\n          {cartStore.selectedShippingOptionTransitTime && (\n            <zonos-text class=\"zonos--caption\" type=\"caption\">\n              {cartStore.selectedShippingOptionTransitTime}{' '}\n              {translate('business days')}\n            </zonos-text>\n          )}\n        </>\n      );\n    };\n    return (\n      <Host class=\"zonos--cart-subtotal zonos--elements\">\n        <table class=\"zonos--cart-table\">\n          <tr class=\"zonos--row zonos--cart-subtotal\">\n            <td class=\"zonos--column\"></td>\n            <td class=\"zonos--column zonos--cart-subtotal-title\">\n              <zonos-text type=\"semiBoldLabel\">\n                {translate('Cart subtotal')}\n              </zonos-text>\n            </td>\n            <td class=\"zonos--column zonos--cart-subtotal-price\">\n              <zonos-text type=\"semiBoldLabel\">\n                {formatCurrency({\n                  amount: cartStore.subtotal,\n                  currency: cartStore.currency,\n                })}\n              </zonos-text>\n            </td>\n          </tr>\n          <tr class=\"zonos--row zonos--cart-shipping\">\n            <td class=\"zonos--column\"></td>\n            <td class=\"zonos--column zonos--cart-subtotal-title\">\n              {renderShippingInfo()}\n            </td>\n            <td class=\"zonos--column zonos--cart-subtotal-price\">\n              {cartStore.shipping\n                ? formatCurrency({\n                    amount: cartStore.shipping,\n                    currency: cartStore.currency,\n                  })\n                : '-'}\n            </td>\n          </tr>\n          {/* Only show fee row when step is payment */}\n          {cartStore.step === 'payment' && (\n            <tr class=\"zonos--row zonos--cart-duties\">\n              <td class=\"zonos--column\"></td>\n              <td class=\"zonos--column zonos--cart-subtotal-title\">\n                <div class=\"zonos--title-with-icon\">\n                  <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n                    {translate('Duties, taxes, and fees')}\n                  </zonos-text>\n                  <zonos-icon content={InfoIcon} size={16}></zonos-icon>\n                </div>\n                {!!cartStore.isSelectedShippingAboveDeminimis && (\n                  <zonos-text color=\"gray-800\" type=\"body\">\n                    {translate(\n                      'Order is over the de minimis threshold for both duty and tax',\n                    )}\n                  </zonos-text>\n                )}\n              </td>\n              <td class=\"zonos--column zonos--cart-subtotal-price\">\n                {cartStore.dutiesTaxFees\n                  ? formatCurrency({\n                      amount: cartStore.dutiesTaxFees,\n                      currency: cartStore.currency,\n                    })\n                  : '-'}\n                {cartStore.isSelectedShippingGuarantee && (\n                  <zonos-badge>{translate('Guaranteed')}</zonos-badge>\n                )}\n              </td>\n            </tr>\n          )}\n          <tr class=\"zonos--row zonos--cart-pay-total\">\n            <td class=\"zonos--column\"></td>\n            <td class=\"zonos--column\">\n              <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n                {translate('Order total')}\n              </zonos-text>\n            </td>\n            <td class=\"zonos--column\">\n              <zonos-text type=\"semiBoldLabel\">\n                {formatCurrency({\n                  amount:\n                    // show total without taxes when step is shipping, show total with taxes when step is payment\n                    cartStore.step === 'shipping'\n                      ? totalWithoutTaxes\n                      : cartStore.total,\n                  currency: cartStore.currency,\n                })}\n              </zonos-text>\n            </td>\n          </tr>\n        </table>\n      </Host>\n    );\n  }\n}\n","$border-radius: var(--border-radius, 10px);\n\n:host {\n  display: flex;\n  flex-direction: column;\n  .zonos--group {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-bottom: $amino-space-24;\n    border-radius: $border-radius;\n    gap: $amino-space-24;\n    max-width: 360px;\n    width: auto;\n    margin: auto;\n    margin-top: $amino-space-24;\n    background-color: $amino-gray-50;\n    padding: $amino-space-20;\n  }\n  zonos-button {\n    width: 100%;\n  }\n  .loading-wrapper {\n    min-height: 300px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { PaymentIntent } from '@stripe/stripe-js';\n\nimport {\n  stripeStore,\n  stripeStoreReset,\n  stripeStoreRetrievePayment,\n} from 'src/components/store/checkout/stripe';\nimport { translate } from 'src/components/store/translationStore';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { submitGtag } from 'src/components/utils/submitGtag';\nimport type { ElementsUiStyle } from 'src/types';\n\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport RemoveIcon from './assets/RemoveIcon.svg';\n/* Need to use relative import because inline-svg-stencil couldn't resolve absolute path */\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport SuccessIcon from './assets/SuccessIcon.svg';\n\ntype OverrideNotification = {\n  messages: string[];\n  title: string;\n  type: 'success' | 'error';\n};\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-checkout-finish.scss',\n  tag: 'zonos-checkout-finish',\n})\nexport class ZonosCheckoutFinish {\n  /**\n   * The border radius style of the dialog\n   */\n  @Prop() borderRadius: ElementsUiStyle = 'ROUNDED';\n\n  /**\n   * Force status to test the UI for storybook\n   */\n  @Prop() storybookForceStatus?: PaymentIntent['status'];\n\n  /**\n   * Override the notification message and title, bypass checking stripe payment status\n   *\n   */\n  @Prop() overrideNotification?: OverrideNotification;\n\n  /**\n   * Event to emit when the continue button is clicked\n   */\n  @Event() closeClick!: EventEmitter<void>;\n\n  @State() isLoading: boolean = true;\n  @State() notificationType: 'success' | 'error' = 'success';\n  @State() notificationTitle: string = '';\n  @State() notificationMessages: string[] = [];\n\n  private checkPaymentStatus = async () => {\n    this.isLoading = true;\n    const clientSecret =\n      new URLSearchParams(window.location.search).get(\n        'payment_intent_client_secret',\n      ) || stripeStore.clientSecret;\n    if (clientSecret) {\n      const { error, messages } = await stripeStoreRetrievePayment({\n        clientSecret,\n        storybookForceStatus: this.storybookForceStatus,\n      });\n      this.notificationType = error ? 'error' : 'success';\n      this.notificationMessages = messages || [];\n      this.notificationTitle = error\n        ? translate('Payment failed')\n        : translate(\"You're all set!\");\n\n      if (error) {\n        submitGtag('zonos-checkout-payment-fail');\n      } else {\n        submitGtag('zonos-checkout-success');\n      }\n    }\n    stripeStoreReset();\n    this.isLoading = false;\n  };\n\n  private closeClickHandler = () => {\n    this.closeClick.emit();\n  };\n\n  componentDidLoad() {\n    if (this.overrideNotification) {\n      // just show the notification and don't check any of the payment status\n      this.notificationType = this.overrideNotification.type;\n      this.notificationTitle = this.overrideNotification.title;\n      this.notificationMessages = this.overrideNotification.messages;\n      return;\n    }\n    void this.checkPaymentStatus();\n  }\n\n  render() {\n    return (\n      <Host\n        class=\"zonos--checkout-finish zonos--elements\"\n        style={{\n          '--border-radius': getBorderRadius(this.borderRadius),\n        }}\n      >\n        {this.isLoading && (\n          <div class=\"loading-wrapper\">\n            <zonos-spinner></zonos-spinner>\n          </div>\n        )}\n        {!this.isLoading && (\n          <div class=\"zonos--group\">\n            {this.notificationType === 'success' ? (\n              <zonos-icon\n                color={'blue-800'}\n                content={SuccessIcon}\n                size={50}\n              ></zonos-icon>\n            ) : (\n              <zonos-icon\n                color={'red-800'}\n                content={RemoveIcon}\n                size={50}\n              ></zonos-icon>\n            )}\n            <zonos-text class=\"zonos--title\" type=\"semiBoldSubheader\">\n              {this.notificationTitle}\n            </zonos-text>\n            <zonos-text>\n              {this.notificationMessages.map(message => (\n                <>\n                  {message}\n                  <br />\n                </>\n              ))}\n            </zonos-text>\n            <zonos-button\n              onClick={() => this.closeClickHandler()}\n              size=\"md\"\n              variant=\"primary\"\n            >\n              {translate('Keep shopping')}\n            </zonos-button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n",":host {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  .zonos--title {\n    margin-bottom: $amino-space-24;\n  }\n  .zonos--group {\n    margin-bottom: $amino-space-20;\n    overflow: auto;\n    padding: 0 5px;\n\n    @include zonos--scrollbar;\n  }\n\n  .zonos--payment-error-banner {\n    margin-bottom: $amino-space-8;\n  }\n\n  zonos-button {\n    width: 100%;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { cartStore } from 'src/components/store/checkout/cart';\nimport { stripeStore } from 'src/components/store/checkout/stripe';\nimport { translate } from 'src/components/store/translationStore';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\nimport { submitGtag } from 'src/components/utils/submitGtag';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is `zonos-address` which is using stripe elements and stripe\n   * need to be able to inject iframe into this component from the DOM\n   */\n  scoped: true,\n  styleUrl: 'zonos-checkout-payment.scss',\n  tag: 'zonos-checkout-payment',\n})\nexport class ZonosCheckoutPayment {\n  /**\n   * Error occurred during payment\n   */\n  @Prop() paymentError: boolean = false;\n\n  /**\n   * Whether or not the checkout is in mobile mode\n   */\n  @Prop() submitBtnType?: HTMLZonosButtonElement['variant'];\n\n  /**\n   * Whether or not the continue button is loading\n   */\n  @Prop() continueLoading: boolean = false;\n\n  /**\n   * Submit button main color\n   */\n  @Prop() submitBtnColor?: string;\n\n  /**\n   * Event to emit when the continue button is clicked\n   */\n  @Event() continueClicked!: EventEmitter<void>;\n\n  /**\n   * Whether or not the continue button is disabled\n   * @default true\n   */\n  @State() disabled: boolean = true;\n\n  @Watch('disabled')\n  watchFormComplete() {\n    if (!this.disabled) {\n      // submit google tag when the form is complete\n      submitGtag('zonos-checkout-payment-info');\n    }\n  }\n\n  /**\n   * handler for continue button click\n   */\n  private continueClickHandler = () => {\n    this.continueClicked.emit();\n  };\n\n  render() {\n    if (!stripeStore.stripeElements) {\n      return null;\n    }\n\n    this.disabled = !stripeStore.stripePaymentEventData?.complete;\n\n    return (\n      <Host class=\"zonos--checkout-payment zonos--elements\">\n        <div class=\"zonos--group\">\n          <zonos-text class=\"zonos--title\" type=\"semiBoldSubheader\">\n            {translate('Payment method')}\n          </zonos-text>\n          {this.paymentError && (\n            <zonos-banner class=\"zonos--payment-error-banner\" intent=\"error\">\n              {translate(\n                \"We couldn't complete your payment. Please verify the payment details and try again.\",\n              )}\n            </zonos-banner>\n          )}\n          <zonos-payment></zonos-payment>\n        </div>\n        <zonos-button\n          backgroundColor={this.submitBtnColor}\n          is-disabled={this.disabled}\n          loading={this.continueLoading}\n          onClick={() => this.continueClickHandler()}\n          size=\"lg\"\n          // use primary type when on mobile mode\n          variant={this.submitBtnType}\n        >\n          Pay{' '}\n          {formatCurrency({\n            amount: cartStore.total,\n            currency: cartStore.currency,\n          })}\n        </zonos-button>\n      </Host>\n    );\n  }\n}\n",":host {\n  transition: all 0.3s ease-in-out;\n  overflow: hidden;\n  div {\n    position: relative;\n  }\n  iframe {\n    width: 0;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    border: 0;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Element, Host, State } from '@stencil/core/internal';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-collapse.scss',\n  tag: 'zonos-collapse',\n})\nexport class ZonosCollapse {\n  /**\n   * Collapsed state of the element\n   */\n  @Prop() collapsed: boolean = false;\n  /**\n   * Collapsed size when collapsed\n   */\n  @Prop() collapseSize: number = 0;\n\n  @Element() el!: HTMLZonosCollapseElement;\n\n  @State() height: number = this.el.scrollHeight;\n\n  private getElementHeight() {\n    const fullHeight = `${this.height}px`;\n    const collapsedHeight = `${this.collapseSize}px`;\n    return this.collapsed ? collapsedHeight : fullHeight;\n  }\n\n  componentDidLoad() {\n    this.height = this.el.scrollHeight;\n  }\n\n  componentDidRender() {\n    this.el.shadowRoot\n      ?.querySelector('iframe')\n      ?.contentWindow?.addEventListener('resize', () => {\n        this.height = this.el.scrollHeight;\n      });\n  }\n\n  render() {\n    this.height = this.el.scrollHeight;\n    return (\n      <Host\n        class={'zonos--elements zonos--collapse'}\n        style={{\n          height: this.getElementHeight(),\n        }}\n      >\n        <div>\n          <iframe\n            class=\"height-change-listener\"\n            tabindex=\"-1\"\n            title=\"collapse-height-change-listener\"\n          ></iframe>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n\n  .zonos--title {\n    margin-bottom: $amino-space-20;\n  }\n  .zonos--link-authentication {\n    margin-bottom: $amino-space-32;\n  }\n\n  .zonos--group {\n    margin-bottom: $amino-space-20;\n    overflow: auto;\n    padding: 0 5px;\n\n    @include zonos--scrollbar;\n  }\n\n  zonos-button {\n    width: 100%;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport {\n  type ContactOption,\n  stripeStore,\n} from 'src/components/store/checkout/stripe';\nimport { translate } from 'src/components/store/translationStore';\nimport { submitGtag } from 'src/components/utils/submitGtag';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is `zonos-address` which is using stripe elements and stripe\n   * need to be able to inject iframe into this component from the DOM\n   */\n  scoped: true,\n  styleUrl: 'zonos-customer-info.scss',\n  tag: 'zonos-customer-info',\n})\nexport class ZonosCustomerInfo {\n  /**\n   * Whether or not the continue button is loading\n   */\n  @Prop() continueLoading: boolean = false;\n\n  /**\n   * Whether or not the checkout is in mobile mode\n   */\n  @Prop() submitBtnType?: HTMLZonosButtonElement['variant'];\n\n  /**\n   * Submit button main color\n   */\n  @Prop() submitBtnColor?: string;\n\n  /**\n   * Default address to use for the checkout (preview mode)\n   */\n  @Prop() defaultAddress: ContactOption | null = null;\n\n  /**\n   * Event to emit when the continue button is clicked\n   */\n  @Event() continueClicked!: EventEmitter<void>;\n\n  /**\n   * Whether or not the continue button is disabled\n   * @default true\n   */\n  @State() disabled: boolean = true;\n\n  @Watch('disabled')\n  watchFormComplete() {\n    if (!this.disabled) {\n      // submit google tag when the form is complete\n      submitGtag('zonos-checkout-customer-info');\n    }\n  }\n\n  /**\n   * handler for continue button click\n   */\n  private continueClickHandler = () => {\n    this.continueClicked.emit();\n  };\n\n  render() {\n    if (!stripeStore.stripeElements) {\n      return null;\n    }\n    // make sure data is valid\n    this.disabled =\n      !stripeStore.stripeAddressEventData?.complete ||\n      !stripeStore.stripeLinkEventData?.complete;\n\n    return (\n      <Host class=\"zonos--customer-info zonos--elements\">\n        <div class=\"zonos--group\">\n          <zonos-text class=\"zonos--title\" type=\"semiBoldSubheader\">\n            {translate('Customer information')}\n          </zonos-text>\n          <zonos-link-authentication\n            titleText={translate('Contact')}\n          ></zonos-link-authentication>\n          <zonos-address\n            defaultAddress={this.defaultAddress}\n            titleText={translate('Address')}\n            type=\"shipping\"\n          ></zonos-address>\n        </div>\n        <zonos-button\n          backgroundColor={this.submitBtnColor}\n          isDisabled={this.disabled}\n          loading={this.continueLoading}\n          onClick={() => this.continueClickHandler()}\n          size=\"lg\"\n          // use primary type when on mobile mode\n          variant={this.submitBtnType}\n        >\n          {translate('Continue to shipping')}\n        </zonos-button>\n      </Host>\n    );\n  }\n}\n","$border-radius: var(--border-radius, $amino-radius-10);\n$height: var(--height, auto);\n$width: var(--width, auto);\n\n:host {\n  .zonos--backdrop,\n  .zonos--dialog-layout {\n    opacity: 0;\n    z-index: -999;\n    visibility: hidden;\n    transition: 0.3s all ease;\n  }\n  // close by default\n  .zonos--backdrop {\n    width: 100vw;\n    height: 100vh;\n    left: 0px;\n    top: 0px;\n    background: $amino-backdrop-color;\n    z-index: -999;\n    opacity: 0;\n    visibility: hidden;\n    position: fixed;\n  }\n  .zonos--loading {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1002;\n    background: white;\n  }\n\n  // close by default\n  .zonos--dialog-layout {\n    width: 100vw;\n    height: 100vh;\n    left: 0;\n    top: 0;\n    position: fixed;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: $amino-text-color;\n    visibility: hidden;\n  }\n\n  .zonos--dialog {\n    position: relative;\n    z-index: 1001;\n    background: $amino-gray-0;\n    max-width: calc(90vw);\n    max-height: 90vh;\n    min-height: 500px;\n    height: $height;\n    width: $width;\n    border-radius: $border-radius;\n    outline: none;\n    box-shadow: $amino-v3-shadow-xxl;\n    border: $amino-border;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .zonos--header {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    padding: $amino-space-16 $amino-space-24;\n\n    .-zonos-stencil-library--header-text {\n      flex-grow: 1;\n    }\n\n    .zonos--close-button {\n      width: $amino-size-md;\n      height: $amino-size-md;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      border-radius: $amino-radius-10;\n      &:hover {\n        background: $amino-hover-color;\n      }\n    }\n  }\n\n  .zonos--body {\n    padding: $amino-space-8 $amino-space-24;\n    max-height: 100%;\n    height: 100%;\n    overflow: auto;\n    &.zonos--no-body-padding {\n      padding: 0;\n    }\n  }\n\n  .zonos--footer {\n    padding: $amino-space-16 $amino-space-24;\n  }\n}\n\n:host(.open) {\n  .zonos--dialog-layout,\n  .zonos--backdrop {\n    visibility: visible;\n  }\n  .zonos--backdrop {\n    z-index: 1001;\n    opacity: 0.65;\n  }\n  .zonos--dialog-layout {\n    opacity: 1;\n    z-index: 1002;\n    transform: scale(1);\n  }\n}\n\n:host(.no-border) {\n  .zonos--dialog {\n    border: none;\n  }\n}\n\n:host(.mobile) {\n  .zonos--dialog {\n    max-width: 100vw;\n    max-height: 100vh;\n    height: 100%;\n    width: 100%;\n    border-radius: 0;\n    box-shadow: none;\n    border: none;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport type { ElementsUiStyle } from 'src/types';\n\n/** These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport RemoveIcon from './assets/removeIcon.svg';\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-dialog.scss',\n  tag: 'zonos-dialog',\n})\nexport class ZonosDialog {\n  /**\n   * Whether or not the dialog is open\n   * @default false\n   */\n  @Prop() open: boolean = false;\n  /**\n   * The header text for the dialog\n   */\n  @Prop() headerText: string = '';\n  /**\n   * The width of the dialog\n   * @default 460px\n   */\n  @Prop() width: string = '460px';\n  /**\n   * The height of the dialog (max-wdith still 90vh)\n   */\n  @Prop() height?: string;\n  /**\n   * Whether or not to show the header\n   * @default false\n   */\n  @Prop() noHeader: boolean = false;\n\n  /**\n   * Whether or not to have body padding\n   * @default false\n   */\n  @Prop() noBodyPadding: boolean = false;\n\n  /**\n   * Whether or not to have body padding\n   * @default false\n   */\n  @Prop() noBorder: boolean = false;\n\n  /**\n   * The right area for the action in the footer\n   * @default null\n   */\n  @Prop() footerRightAction: HTMLElement | null = null;\n\n  /**\n   * The border style of the button\n   * @default ROUNDED\n   */\n  @Prop() borderStyle?: ElementsUiStyle;\n\n  /**\n   * Close dialog button click\n   */\n  // @Prop() onCloseDialog!: () => void;\n\n  /**\n   * Whether or not to show the close button\n   * @default false\n   */\n  @Prop() noCloseButton: boolean = false;\n\n  /**\n   * Whether or not to close the dialog when clicking outside of it\n   * @default false\n   */\n  @Prop() noClickOutside: boolean = false;\n\n  /**\n   * Flag to determine if the checkout is on mobile\n   */\n  @Prop() mobile: boolean = false;\n\n  /**\n   * Load loading spinner for the dialog or not\n   */\n  @Prop() isLoading: boolean = true;\n\n  @State() isMobile: boolean = false;\n\n  /**\n   * Close dialog button click\n   */\n  @Event() closeDialog!: EventEmitter<void>;\n\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.isMobile = this.isMobileMode();\n  }\n\n  private isMobileMode = () => {\n    return this.mobile || window.innerWidth <= 768;\n  };\n\n  private closeButtonHandler = () => {\n    this.closeDialog.emit();\n  };\n\n  private clickOutsideDialogHandler = (event: MouseEvent) => {\n    if (event.target === event.currentTarget && !this.noClickOutside) {\n      this.closeDialog.emit();\n    }\n  };\n\n  componentDidLoad() {\n    this.isMobile = this.isMobileMode();\n  }\n\n  render() {\n    // disable scroll on the body when dialog is open\n    if (this.open) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = 'auto';\n    }\n\n    const borderStyle = getBorderRadius(this.borderStyle);\n    return (\n      <Host\n        class={classes([\n          'zonos--elements',\n          this.open && 'open',\n          this.isLoading && 'is-loading',\n          this.noBorder && 'no-border',\n          this.isMobile && 'mobile',\n        ])}\n        style={{\n          '--border-radius': borderStyle,\n          '--height': this.height || 'initial',\n          '--width': this.width,\n        }}\n      >\n        <div class=\"zonos--backdrop\"></div>\n        <div\n          aria-hidden=\"true\"\n          class=\"zonos--dialog-layout\"\n          onClick={this.clickOutsideDialogHandler}\n        >\n          <div class=\"zonos--dialog\">\n            {this.isLoading && (\n              <div class=\"zonos--loading\">\n                <zonos-spinner size={30}></zonos-spinner>\n              </div>\n            )}\n            {(this.headerText || !this.noCloseButton) && (\n              <div class=\"zonos--header\">\n                {this.headerText && (\n                  <h3 class=\"zonos--header-text\">{this.headerText}</h3>\n                )}\n                {!this.noCloseButton && (\n                  <zonos-button\n                    class=\"zonos--close-button\"\n                    icon={<zonos-icon content={RemoveIcon}></zonos-icon>}\n                    noBackground\n                    onClick={this.closeButtonHandler}\n                  ></zonos-button>\n                )}\n              </div>\n            )}\n            <div\n              class={classes([\n                'zonos--body',\n                this.noBodyPadding && 'zonos--no-body-padding',\n              ])}\n            >\n              <slot />\n            </div>\n            {this.footerRightAction && (\n              <div class=\"zonos--footer\">\n                <div class=\"zonos--footer-right-action\">\n                  {this.footerRightAction}\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","$filter-color: var(--filter-color);\n$width: var(--width);\n\n:host {\n  display: inline-flex;\n  img {\n    filter: $filter-color;\n    width: $width;\n  }\n}\n","import { Component, getAssetPath, h, Host, Prop } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { ElementsUiTheme } from 'src/types';\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-logo.scss',\n  tag: 'zonos-logo',\n})\nexport class ZonosLogo {\n  /**\n   * Theme to change the color of the logo\n   */\n  @Prop() theme: ElementsUiTheme = 'LIGHT';\n\n  /**\n   * The width of the logo\n   */\n  @Prop() width: string = 'auto';\n\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n\n  render() {\n    const filterColor =\n      this.theme === 'DARK'\n        ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'\n        : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';\n\n    return (\n      <Host\n        class={classes(['zonos--elements zonos--logo', this.class])}\n        style={{\n          '--filter-color': filterColor,\n          '--width': this.width,\n        }}\n      >\n        <img alt=\"Zonos Logo\" src={getAssetPath('./assets/ZonosLogo.png')} />\n      </Host>\n    );\n  }\n}\n",":host {\n  .zonos--total-pay {\n    margin: $amino-space-16 0 $amino-space-32;\n  }\n}\n\n:host(.mobile) {\n  @include checkout-review-mobile;\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\n\nimport { cartStore } from 'src/components/store/checkout/cart';\nimport { translate } from 'src/components/store/translationStore';\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { isCheckoutMobile } from 'src/components/utils/checkout/isCheckoutMobile';\nimport { classes } from 'src/components/utils/classes';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\n\n/** These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport ChevronDownIcon from './assets/ChevronDownIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport ChevronUpIcon from './assets/ChevronUpIcon.svg';\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-review.scss',\n  tag: 'zonos-review',\n})\nexport class ZonosReview {\n  /**\n   * Whether or not the component is being rendered with mobile styles\n   */\n  @Prop() mobile: boolean = false;\n\n  /**\n   * Whether or not to show the collapse icon\n   * This is controled from the collapsed state of the zonos-collapse component\n   * to show the collapse icon\n   */\n  @Prop() collapsed: boolean = false;\n\n  @State() isMobile: boolean = false;\n\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n  }\n\n  componentWillLoad() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n  }\n\n  render() {\n    const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';\n    const totalTextType = this.isMobile\n      ? 'boldSubheader'\n      : 'secondaryPageHeader';\n\n    const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';\n    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;\n    const renderCollapseIcon = () => {\n      // only display the collapse icon if the component is being rendered with mobile styles\n      if (!this.isMobile) {\n        return null;\n      }\n\n      if (!this.collapsed) {\n        return (\n          <zonos-icon color=\"gray-1200\" content={ChevronDownIcon}></zonos-icon>\n        );\n      }\n      return (\n        <zonos-icon color=\"gray-1200\" content={ChevronUpIcon}></zonos-icon>\n      );\n    };\n    return (\n      <Host\n        class={classes([\n          'zonos--review zonos--elements',\n          this.isMobile && 'mobile',\n        ])}\n      >\n        <div class=\"zonos--title\">\n          <zonos-text color={titleTextColor} type={titleTextType}>\n            {translate('Pay')} {zonosStore.organizationName}\n          </zonos-text>\n          {renderCollapseIcon()}\n        </div>\n        <div class=\"zonos--total-pay\">\n          <zonos-text type={totalTextType}>\n            {formatCurrency({\n              amount:\n                // show total without taxes when step is shipping, show total with taxes when step is payment\n                cartStore.step === 'shipping'\n                  ? totalWithoutTaxes\n                  : cartStore.total,\n              currency: cartStore.currency,\n            })}\n          </zonos-text>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n\n  .zonos--title {\n    margin-bottom: $amino-space-24;\n  }\n  .zonos--shipping-method-title {\n    margin-bottom: $amino-space-16;\n  }\n\n  .zonos-shipping-rich-radio {\n    margin-bottom: $amino-space-24;\n  }\n\n  .zonos--group {\n    margin-bottom: $amino-space-20;\n    overflow: auto;\n    padding-right: 5px;\n\n    @include zonos--scrollbar;\n  }\n\n  zonos-button {\n    width: 100%;\n  }\n  zonos-banner {\n    margin-top: $amino-space-24;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport {\n  cartStore,\n  cartStoreGetShippingTransitInfo,\n  cartStoreUpdateSelectedShippingOption,\n} from 'src/components/store/checkout/cart';\nimport { stripeStore } from 'src/components/store/checkout/stripe';\nimport { translate } from 'src/components/store/translationStore';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\nimport { submitGtag } from 'src/components/utils/submitGtag';\nimport type { ShippingRichRadioItem } from 'src/types';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is `zonos-address` which is using stripe elements and stripe\n   * need to be able to inject iframe into this component from the DOM\n   */\n  scoped: true,\n  styleUrl: 'zonos-shipping.scss',\n  tag: 'zonos-shipping',\n})\nexport class ZonosShipping {\n  /**\n   * Whether or not the continue button is loading\n   */\n  @Prop() continueLoading: boolean = false;\n\n  /**\n   * Submit button main color\n   */\n  @Prop() submitBtnColor?: string;\n\n  /**\n   * Whether or not the checkout is in mobile mode\n   */\n  @Prop() submitBtnType?: HTMLZonosButtonElement['variant'];\n\n  /**\n   * Event to emit when the continue button is clicked\n   */\n  @Event() continueClicked!: EventEmitter<void>;\n\n  @State() selectedShippingMethod: ShippingRichRadioItem | null = null;\n\n  /**\n   * Whether or not the continue button is disabled\n   * @default true\n   */\n  @State() disabled: boolean = true;\n\n  @Watch('disabled')\n  watchFormComplete() {\n    if (!this.disabled) {\n      // submit google tag when the form is complete\n      submitGtag('zonos-checkout-shipping-info');\n    }\n  }\n\n  private handleRadioSelected = async (\n    e: CustomEvent<ShippingRichRadioItem>,\n  ) => {\n    this.selectedShippingMethod = e.detail;\n    if (!this.selectedShippingMethod) {\n      return;\n    }\n\n    const selectedShippingOption =\n      cartStore.shippingData?.find(\n        item => item.id === this.selectedShippingMethod?.value,\n      ) || null;\n    if (!selectedShippingOption) {\n      return;\n    }\n\n    // save selected shipping option to store\n    const updateStatus = await cartStoreUpdateSelectedShippingOption(\n      selectedShippingOption,\n    );\n    if (!updateStatus) {\n      return;\n    }\n\n    this.disabled = false;\n  };\n\n  /**\n   * handler for continue button click\n   */\n  private continueClickHandler = () => {\n    this.continueClicked.emit();\n  };\n\n  render() {\n    const shipToCountry =\n      stripeStore.stripeAddressEventData?.value.address.country;\n\n    const serviceLevels = cartStore.shippingData?.flatMap(\n      (item): ShippingRichRadioItem => {\n        const { expectedDate, maxTransit, minTransit } =\n          cartStoreGetShippingTransitInfo(item);\n        const sublabel = expectedDate\n          ? `${translate('Expected delivery')} ${expectedDate}`\n          : '';\n        const caption =\n          minTransit && maxTransit\n            ? `(${minTransit}-${maxTransit} ${translate('business days')})`\n            : '';\n        const shippingAmount =\n          cartStore.landedCostData?.find(\n            landedCostItem =>\n              landedCostItem.landedCost?.shipmentRating.id === item.id,\n          )?.subtotals.shipping || 0;\n        return {\n          caption,\n          label: item.displayName,\n          price: formatCurrency({\n            amount: shippingAmount,\n            currency: cartStore.currency,\n          }),\n          sublabel,\n          value: item.id,\n        };\n      },\n    );\n    return (\n      <Host class=\"zonos--shipping zonos--elements\">\n        <div class=\"zonos--group\">\n          <zonos-text class=\"zonos--title\" type=\"semiBoldSubheader\">\n            {translate('Shipping information')}\n          </zonos-text>\n          <zonos-text class=\"zonos--shipping-method-title\" type=\"semiBoldLabel\">\n            {translate('Shipping method')}\n          </zonos-text>\n          {!serviceLevels?.length ? (\n            <zonos-banner\n              bannerTitle=\"No shipping methods found - try editing your address or contacting support if the error persists\"\n              intent=\"error\"\n            ></zonos-banner>\n          ) : (\n            <zonos-shipping-rich-radio\n              items={serviceLevels || []}\n              onRadioSelected={e => this.handleRadioSelected(e)}\n            ></zonos-shipping-rich-radio>\n          )}\n\n          {cartStore.isSelectedShippingAboveDeminimis && (\n            <zonos-banner intent=\"warning\">\n              {translate('Above de minimis threshold for')} {shipToCountry}.{' '}\n              {translate(\n                'Duties and taxes will be applied to items and shipping.',\n              )}\n            </zonos-banner>\n          )}\n        </div>\n        <zonos-button\n          backgroundColor={this.submitBtnColor}\n          is-disabled={this.disabled}\n          loading={this.continueLoading}\n          onClick={() => this.continueClickHandler()}\n          size=\"lg\"\n          // use primary type when on mobile mode\n          variant={this.submitBtnType}\n        >\n          {translate('Go to payment')}\n        </zonos-button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/zonos-checkout.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(o,e,t,n){function s(o){return o instanceof t?o:new t((function(e){e(o)}))}return new(t||(t=Promise))((function(t,r){function i(o){try{a(n.next(o))}catch(o){r(o)}}function c(o){try{a(n["throw"](o))}catch(o){r(o)}}function a(o){o.done?t(o.value):s(o.value).then(i,c)}a((n=n.apply(o,e||[])).next())}))};var __generator=this&&this.__generator||function(o,e){var t={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,s,r,i;return i={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function c(o){return function(e){return a([o,e])}}function a(c){if(n)throw new TypeError("Generator is already executing.");while(i&&(i=0,c[0]&&(t=0)),t)try{if(n=1,s&&(r=c[0]&2?s["return"]:c[0]?s["throw"]||((r=s["return"])&&r.call(s),0):s.next)&&!(r=r.call(s,c[1])).done)return r;if(s=0,r)c=[c[0]&2,r.value];switch(c[0]){case 0:case 1:r=c;break;case 4:t.label++;return{value:c[1],done:false};case 5:t.label++;s=c[1];c=[0];continue;case 7:c=t.ops.pop();t.trys.pop();continue;default:if(!(r=t.trys,r=r.length>0&&r[r.length-1])&&(c[0]===6||c[0]===2)){t=0;continue}if(c[0]===3&&(!r||c[1]>r[0]&&c[1]<r[3])){t.label=c[1];break}if(c[0]===6&&t.label<r[1]){t.label=r[1];r=c;break}if(r&&t.label<r[2]){t.label=r[2];t.ops.push(c);break}if(r[2])t.ops.pop();t.trys.pop();continue}c=e.call(o,t)}catch(o){c=[6,o];s=0}finally{n=r=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{r as registerInstance,h,F as Fragment,H as Host}from"./index-d1aa9293.js";import{i as initStripeElements,c as cartStore,a as cartStoreUpdateItems,b as cartStoreReset,s as stripeStore,d as stripeStoreInitCheckoutSession,e as cartStoreUpdateToErrorState,f as stripeStorePrefetchLandedCost,g as cartStoreNextStep,h as stripeStoreConfirmPayment,j as stripeStoreReset,k as cartStorePreviousStep}from"./cart-36c33342.js";import{l as log,a as localizationStore,t as translate}from"./localization-4a424f49.js";import{z as zonosStore,m as mergeConfig}from"./zonosStore-13a7b534.js";import{s as submitGtag,i as isCheckoutMobile}from"./submitGtag-fbdb454b.js";import{c as classes}from"./classes-0d95c529.js";import{g as getBorderRadius}from"./getBorderRadius-82fbaf25.js";import{i as isDarkColor}from"./isDarkColor-b21326ae.js";var LeftArrow='<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M9.707 16.707a1 1 0 0 1-1.414 0l-3.647-3.646a1.5 1.5 0 0 1 0-2.122l3.647-3.646a1 1 0 0 1 1.414 1.414L7.414 11H19a1 1 0 1 1 0 2H7.414l2.293 2.293a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>';var MessageIcon='<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4.5C2.25 3.25736 3.25736 2.25 4.5 2.25H13.5C14.7426 2.25 15.75 3.25736 15.75 4.5V10.5C15.75 11.7426 14.7426 12.75 13.5 12.75H8.25C8.01393 12.75 7.79164 12.8611 7.65 13.05L6.3 14.85C5.87508 15.4166 5.2082 15.75 4.5 15.75C3.25736 15.75 2.25 14.7426 2.25 13.5V4.5ZM4.5 3.75C4.08579 3.75 3.75 4.08579 3.75 4.5V13.5C3.75 13.9142 4.08579 14.25 4.5 14.25C4.73607 14.25 4.95836 14.1389 5.1 13.95L6.45 12.15C6.87492 11.5834 7.5418 11.25 8.25 11.25H13.5C13.9142 11.25 14.25 10.9142 14.25 10.5V4.5C14.25 4.08579 13.9142 3.75 13.5 3.75H4.5ZM5.25 6C5.25 5.58579 5.58579 5.25 6 5.25H12C12.4142 5.25 12.75 5.58579 12.75 6C12.75 6.41421 12.4142 6.75 12 6.75H6C5.58579 6.75 5.25 6.41421 5.25 6ZM5.25 9C5.25 8.58579 5.58579 8.25 6 8.25H8.25C8.66421 8.25 9 8.58579 9 9C9 9.41421 8.66421 9.75 8.25 9.75H6C5.58579 9.75 5.25 9.41421 5.25 9Z" fill="#4D505A"/>\n</svg>\n';var RemoveIcon='<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--amino-gray-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>';var zonosCheckoutCss=".sc-zonos-checkout-h{font-family:Inter;display:block}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--amino-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:var(--amino-space-48) var(--amino-space-56)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-gray-0);padding-bottom:var(--amino-space-80)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--back-button.sc-zonos-checkout{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:var(--amino-space-32);top:var(--amino-space-32)}.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;position:absolute;bottom:var(--amino-space-32);right:var(--amino-space-56);gap:var(--amino-space-8)}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:var(--amino-space-12)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:var(--amino-space-16)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--amino-space-16);margin-top:var(--amino-space-24);border:var(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:var(--amino-space-12);margin-top:var(--amino-space-32)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}.mobile.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{bottom:0;left:0;padding:var(--amino-space-12);position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-gray-0)}";var ZonosCheckout=function(){function o(o){var e=this;registerInstance(this,o);this.applyStripeTheme=function(){return __awaiter(e,void 0,void 0,(function(){var o,e,t,n;return __generator(this,(function(s){switch(s.label){case 0:n=((o=this.appearanceSettingsOverride)===null||o===void 0?void 0:o.theme)||zonosStore.appearance.theme;return[4,initStripeElements({overrideBorderRaidus:(e=this.appearanceSettingsOverride)===null||e===void 0?void 0:e.style,overridePrimaryColor:(t=this.appearanceSettingsOverride)===null||t===void 0?void 0:t.colorPrimary,overrideTheme:this.isMobile?n:undefined})];case 1:s.sent();return[2]}}))}))};this.getCurrentLocalePageEnum=function(){switch(cartStore.step){case"customer-info":return"checkout_customer_info";case"shipping":return"checkout_shipping_info";case"payment":return"checkout_payment_info";default:return null}};this.appearanceSettingsOverride=undefined;this.preview=false;this.mobile=false;this.buttonAnchorElements=null;this.defaultAddress=null;this.forceDialogOpen=false;this.open=this.forceDialogOpen;this.stripe=window.Zonos.stripe;this.submitLoading=false;this.paymentError=false;this.collapseReviewMobile=false;this.isAttachError=false;this.isMobile=false;this.zonosReviewRef=undefined;this.storybookPaymentStatusOverride=undefined}o.prototype.initCartInfoHandler=function(o){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){e=o.detail;void cartStoreUpdateItems(e);return[2]}))}))};o.prototype.closeDialogHandler=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(o){submitGtag("zonos-checkout-close");this.open=this.forceDialogOpen||false;if(!this.preview&&cartStore.step==="finish"){cartStoreReset()}cartStore.step="customer-info";return[2]}))}))};o.prototype.buildCartAndInit=function(){return __awaiter(this,void 0,void 0,(function(){var o,e;return __generator(this,(function(t){switch(t.label){case 0:if(!zonosStore.checkoutSettings.buildCartDetail)return[3,3];log("build cart detail");return[4,zonosStore.checkoutSettings.buildCartDetail()];case 1:o=t.sent();return[4,cartStoreUpdateItems(o)];case 2:t.sent();t.label=3;case 3:if(!!stripeStore.clientSecret)return[3,5];return[4,stripeStoreInitCheckoutSession()];case 4:e=t.sent();if(!e){return[2,false]}t.label=5;case 5:return[4,this.applyStripeTheme()];case 6:t.sent();return[2,true]}}))}))};o.prototype.attachCheckout=function(){var o=this;if(!this.buttonAnchorElements){return}this.buttonAnchorElements.forEach((function(e){var t=e.getAttribute("data-zonos-checkout-attached");if(!t){e.addEventListener("click",(function(e){return __awaiter(o,void 0,void 0,(function(){var o;return __generator(this,(function(t){switch(t.label){case 0:if(!localizationStore.localizationLoaded){return[2]}if(!localizationStore.isShippableCountry){log("not shippable country");return[2]}e.preventDefault();e.stopPropagation();log("zonos checkout button clicked");this.open=true;return[4,this.buildCartAndInit()];case 1:o=t.sent();if(!o){cartStoreUpdateToErrorState({messages:[translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists")],title:translate("Error creating Checkout")});return[2]}submitGtag("zonos-checkout-start");return[2]}}))}))}));e.setAttribute("data-zonos-checkout-attached","true")}}))};o.prototype.appearanceSettingsOverrideChanged=function(){if(!this.appearanceSettingsOverride){return}void this.applyStripeTheme()};o.prototype.init=function(){return __awaiter(this,void 0,void 0,(function(){var o;var e=this;return __generator(this,(function(t){stripeStore.stripe=window.Zonos.stripe;this.stripe=window.Zonos.stripe;o=setInterval((function(){stripeStore.stripe=window.Zonos.stripe;e.stripe=window.Zonos.stripe;if(!localizationStore.localizationLoaded){return}if(!localizationStore.isShippableCountry&&!e.preview){log("not shippable country");clearInterval(o);return}if(!e.stripe){log("waiting for stripe to be loaded");return}log("init checkout");if(e.preview||e.forceDialogOpen){void e.buildCartAndInit()}else{e.attachCheckout()}clearInterval(o)}),100);setTimeout((function(){clearInterval(o)}),1e4);return[2]}))}))};o.prototype.setToFinishStep=function(o){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){cartStore.step="finish";this.storybookPaymentStatusOverride=o;return[2]}))}))};o.prototype.handleCustomerInfoContinue=function(){return __awaiter(this,void 0,void 0,(function(){var o;var e=this;return __generator(this,(function(t){switch(t.label){case 0:this.submitLoading=true;return[4,stripeStorePrefetchLandedCost()];case 1:t.sent();o=setInterval((function(){if(cartStore.landedCostData||!stripeStore.isFetchingLandedCost){if(cartStore.landedCostData){cartStoreNextStep()}e.submitLoading=false;clearInterval(o)}}),500);return[2]}}))}))};o.prototype.handleShippingContinue=function(){return __awaiter(this,void 0,void 0,(function(){var o=this;return __generator(this,(function(e){this.submitLoading=true;setTimeout((function(){cartStoreNextStep();o.submitLoading=false}),500);return[2]}))}))};o.prototype.handleCheckoutPaymentContinue=function(){return __awaiter(this,void 0,void 0,(function(){var o;return __generator(this,(function(e){switch(e.label){case 0:this.paymentError=false;this.submitLoading=true;e.label=1;case 1:e.trys.push([1,3,,4]);return[4,stripeStoreConfirmPayment()];case 2:e.sent();cartStoreNextStep();return[3,4];case 3:o=e.sent();console.error(o);this.paymentError=true;return[3,4];case 4:this.submitLoading=false;return[2]}}))}))};o.prototype.handleFinishClick=function(){return __awaiter(this,void 0,void 0,(function(){var o,e;return __generator(this,(function(t){switch(t.label){case 0:stripeStoreReset();if(!this.preview)return[3,2];cartStore.step="customer-info";return[4,this.init()];case 1:t.sent();return[2];case 2:cartStoreReset();o=window.location.href;e=o.split("?")[0];window.history.replaceState({},document.title,e);this.open=false;return[2]}}))}))};o.prototype.handleBackClick=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(o){switch(o.label){case 0:if(!(cartStore.step==="customer-info"))return[3,2];return[4,this.closeDialogHandler()];case 1:o.sent();return[2];case 2:cartStorePreviousStep();return[2]}}))}))};o.prototype.handleWindowResize=function(){this.isMobile=isCheckoutMobile(this.mobile);void this.applyStripeTheme();log("mobile: ".concat(this.isMobile))};o.prototype.handleMobileChange=function(){this.isMobile=isCheckoutMobile(this.mobile);void this.applyStripeTheme();log("mobile: ".concat(this.isMobile))};o.prototype.componentWillLoad=function(){void this.init();this.isMobile=isCheckoutMobile(this.mobile);log("mobile: ".concat(this.isMobile))};o.prototype.disconnectedCallback=function(){stripeStoreReset();cartStoreReset()};o.prototype.render=function(){var o=this;var e;var t=cartStore.step!=="finish"&&!stripeStore.stripeElements||stripeStore.isFetchingSession;var n=mergeConfig(zonosStore.appearance,this.appearanceSettingsOverride),s=n.colorPrimary,r=n.colorSecondary,i=n.logoUrl,c=n.style;var a=zonosStore.appearance.zonosAttribution==="ENABLED";var u=zonosStore.appearance.theme;var l=s&&isDarkColor(s)?"DARK":"LIGHT";var d=this.isMobile?u:l;var p=!this.isMobile?r:undefined;var f=localizationStore.customMessages;var m=((e=f.find((function(o){return o.pageName==="checkout_default"})))===null||e===void 0?void 0:e.message)||"Know about duties and taxes before you buy. Shop with confidence!";var z=this.getCurrentLocalePageEnum();var g=f.filter((function(o){return o.pageName===z}));var k=function(){return h("div",{class:"zonos--logo"},i&&h("img",{alt:"".concat(zonosStore.organizationName," logo"),src:i,width:100}))};var v=function(){return h("zonos-v-stack",null,k(),g.map((function(o){return h("zonos-custom-message",{icon:MessageIcon,message:o.message})})),h("div",null,h("zonos-button",{class:"zonos--back-button",icon:h("zonos-icon",{content:LeftArrow}),noBackground:true,noPaddingLeft:true,noPaddingRight:true,onClick:function(){return o.handleBackClick()},theme:d},translate("Back"))))};var b=function(){return a&&h("div",{class:"zonos--footer","data-theme":u},h("zonos-text",{type:"hintText"},translate("Powered by")),h("zonos-logo",{theme:u,width:"100px"}))};var y=function(){var e;var t=o.isMobile?"primary":undefined;var n=(e=o.zonosReviewRef)===null||e===void 0?void 0:e.scrollHeight;return h("div",{class:"zonos--content",style:{"--border-radius":getBorderRadius(c)}},cartStore.step!=="finish"&&h(Fragment,null,h("div",{class:"zonos--left","data-theme":d,style:{"--primary-color":!o.isMobile?s:""}},!o.isMobile&&v(),cartStore.step==="customer-info"&&h("zonos-customer-info",{continueLoading:o.submitLoading,defaultAddress:o.defaultAddress,onContinueClicked:function(){return o.handleCustomerInfoContinue()},submitBtnColor:p,submitBtnType:t}),cartStore.step==="shipping"&&h("zonos-shipping",{continueLoading:o.submitLoading,onContinueClicked:function(){return o.handleShippingContinue()},submitBtnColor:p,submitBtnType:t}),cartStore.step==="payment"&&h("zonos-checkout-payment",{continueLoading:o.submitLoading,onContinueClicked:function(){return o.handleCheckoutPaymentContinue()},paymentError:o.paymentError,submitBtnColor:p,submitBtnType:t})),h("div",{class:"zonos--right","data-theme":u},o.isMobile&&v(),!o.isMobile&&h("zonos-button",{class:"zonos--close-button",icon:h("zonos-icon",{content:RemoveIcon}),noBackground:true,onClick:function(){return o.closeDialogHandler()}}),h("div",{class:"flex--wrapper"},h("div",{class:"zonos--wrapper"},h("zonos-collapse",{collapseSize:n,collapsed:o.collapseReviewMobile},h("zonos-review",{collapsed:o.collapseReviewMobile,mobile:o.isMobile,onClick:function(){o.collapseReviewMobile=!o.collapseReviewMobile},ref:function(e){return o.zonosReviewRef=e}}),h("zonos-cart-items",null))),h("zonos-v-stack",{spacing:16},h("zonos-cart-subtotal",null),h("zonos-custom-message",{class:"zonos--checkout-default-message",icon:MessageIcon,message:m}))),!o.isMobile&&b()),o.isMobile&&b()),(cartStore.step==="finish"||cartStore.step==="error")&&h("div",{class:"zonos--done","data-theme":u},h("div",{class:"zonos--header"},k(),h("zonos-button",{class:"zonos--close-button",icon:h("zonos-icon",{content:RemoveIcon}),noBackground:true,onClick:function(){return o.handleFinishClick()},theme:u})),h("zonos-checkout-finish",{borderRadius:c,onCloseClick:function(){return o.handleFinishClick()},overrideNotification:cartStore.step==="error"&&!!cartStore.error?Object.assign(Object.assign({},cartStore.error),{type:"error"}):undefined,storybookForceStatus:o.storybookPaymentStatusOverride})))};return h(Host,{class:classes(["zonos--checkout zonos--elements",a&&"has-footer",this.preview&&"preview",this.isMobile&&"mobile"])},this.preview?y():h("zonos-dialog",{borderStyle:c,"data-theme":u,height:"980px",isLoading:t,mobile:this.isMobile,noBodyPadding:true,noBorder:true,noClickOutside:true,noCloseButton:true,onCloseDialog:function(){return o.closeDialogHandler()},open:this.open,width:"1200px"},y()))};Object.defineProperty(o,"assetsDirs",{get:function(){return["assets"]},enumerable:false,configurable:true});Object.defineProperty(o,"watchers",{get:function(){return{appearanceSettingsOverride:["appearanceSettingsOverrideChanged"],mobile:["handleMobileChange"]}},enumerable:false,configurable:true});return o}();ZonosCheckout.style=zonosCheckoutCss;export{ZonosCheckout as zonos_checkout};
+//# sourceMappingURL=zonos-checkout.entry.js.map

package/dist/esm-es5/zonos-checkout.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["zonosCheckoutCss","ZonosCheckout","this","applyStripeTheme","__awaiter","_this","theme","_a","appearanceSettingsOverride","zonosStore","appearance","initStripeElements","overrideBorderRaidus","_b","style","overridePrimaryColor","_c","colorPrimary","overrideTheme","isMobile","undefined","_d","sent","getCurrentLocalePageEnum","cartStore","step","forceDialogOpen","window","Zonos","stripe","class_1","prototype","initCartInfoHandler","e","cartItems","detail","cartStoreUpdateItems","closeDialogHandler","submitGtag","open","preview","cartStoreReset","buildCartAndInit","checkoutSettings","buildCartDetail","log","stripeStore","clientSecret","stripeStoreInitCheckoutSession","success","attachCheckout","buttonAnchorElements","forEach","button","isEventAttached","getAttribute","addEventListener","localizationStore","localizationLoaded","isShippableCountry","preventDefault","stopPropagation","result","cartStoreUpdateToErrorState","messages","translate","title","setAttribute","appearanceSettingsOverrideChanged","init","interval","setInterval","clearInterval","setTimeout","setToFinishStep","forcePaymentStatus","storybookPaymentStatusOverride","handleCustomerInfoContinue","submitLoading","stripeStorePrefetchLandedCost","landedCostData","isFetchingLandedCost","cartStoreNextStep","handleShippingContinue","handleCheckoutPaymentContinue","paymentError","stripeStoreConfirmPayment","console","error","err_1","handleFinishClick","stripeStoreReset","url","location","href","cleanUrl","split","history","replaceState","document","handleBackClick","cartStorePreviousStep","handleWindowResize","isCheckoutMobile","mobile","concat","handleMobileChange","componentWillLoad","disconnectedCallback","render","dialogLoading","stripeElements","isFetchingSession","mergeConfig","colorSecondary","logoUrl","hasFooter","zonosAttribution","rightSideTheme","themePrimaryColorBased","isDarkColor","leftSideTheme","submitButtonColor","customMessages","defaultMessage","find","x","pageName","message","localePageEnum","filteredMessages","filter","renderLogo","h","class","alt","organizationName","src","width","renderTopHeader","map","icon","MessageIcon","content","LeftArrow","noBackground","noPaddingLeft","noPaddingRight","onClick","renderFooter","type","renderContent","submitBtnType","reviewElementSize","zonosReviewRef","scrollHeight","getBorderRadius","Fragment","continueLoading","defaultAddress","onContinueClicked","submitBtnColor","RemoveIcon","collapseSize","collapsed","collapseReviewMobile","ref","el","spacing","borderRadius","onCloseClick","overrideNotification","storybookForceStatus","Host","classes","borderStyle","height","isLoading","noBodyPadding","noBorder","noClickOutside","noCloseButton","onCloseDialog"],"sources":["src/components/checkout/zonos-checkout/zonos-checkout.scss?tag=zonos-checkout&encapsulation=scoped","src/components/checkout/zonos-checkout/zonos-checkout.tsx"],"sourcesContent":["$primary-color: var(--primary-color, $amino-gray-0);\n$border-radius: var(--border-radius, $amino-radius-10);\n\n:host {\n  * {\n    @include zonos--scrollbar;\n  }\n  .zonos--content {\n    display: flex;\n    height: 100%;\n    overflow: hidden;\n    border-radius: $border-radius;\n    .zonos--left,\n    .zonos--right {\n      flex: 1;\n      padding: $amino-space-48 $amino-space-56;\n    }\n    .zonos--left {\n      background-color: $primary-color;\n      border-right: 1px solid $amino-gray-200;\n    }\n    .zonos--right {\n      background-color: $amino-gray-0;\n      padding-bottom: $amino-space-80;\n    }\n\n    .zonos--done {\n      width: 100%;\n      max-height: 100%;\n      height: 100%;\n      overflow: auto;\n      flex-direction: column;\n      background-color: $amino-gray-0;\n      align-items: center;\n      justify-content: center;\n      padding: $amino-space-24;\n      padding-bottom: 50px;\n      .zonos--header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n        img {\n          width: 150px;\n          min-width: 150px;\n        }\n      }\n      .zonos--logo {\n        margin-bottom: 0;\n      }\n\n      zonos-checkout-finish {\n        flex: 1;\n      }\n    }\n  }\n\n  .zonos--left {\n    display: flex;\n    flex-direction: column;\n    .zonos--back-button {\n      margin-bottom: $amino-space-24;\n    }\n    .zonos--wrapper {\n      padding: 0 $amino-space-8 $amino-space-8;\n    }\n    .zonos--payment-error-banner {\n      margin-top: $amino-space-24;\n    }\n  }\n\n  .zonos--right {\n    position: relative;\n    .zonos--close-button {\n      position: absolute;\n      right: $amino-space-32;\n      top: $amino-space-32;\n    }\n  }\n  .zonos--footer {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    position: absolute;\n    bottom: $amino-space-32;\n    right: $amino-space-56;\n    gap: $amino-space-8;\n  }\n\n  .zonos--wrapper {\n    overflow: auto;\n    max-height: 100%;\n    position: relative;\n  }\n\n  .flex--wrapper {\n    display: flex;\n    flex-direction: column;\n    max-height: 100%;\n  }\n\n  .zonos--logo {\n    display: flex;\n    align-items: center;\n  }\n\n  .zonos--checkout-default-message {\n    margin-left: $amino-space-76;\n    margin-bottom: $amino-space-8;\n  }\n}\n\n:host(.preview) {\n  min-width: 500px;\n  margin: auto;\n  .zonos--content {\n    border: $amino-border;\n    .zonos--done {\n      padding: $amino-space-32;\n    }\n  }\n}\n\n:host(.mobile) {\n  @include checkout-mobile;\n}\n","import {\n  Component,\n  Fragment,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { PaymentIntent, Stripe } from '@stripe/stripe-js';\n\nimport {\n  type CartItem,\n  cartStore,\n  cartStoreNextStep,\n  cartStorePreviousStep,\n  cartStoreReset,\n  cartStoreUpdateItems,\n  cartStoreUpdateToErrorState,\n} from 'src/components/store/checkout/cart';\nimport {\n  type ContactOption,\n  initStripeElements,\n  stripeStore,\n  stripeStoreConfirmPayment,\n  stripeStoreInitCheckoutSession,\n  stripeStorePrefetchLandedCost,\n  stripeStoreReset,\n} from 'src/components/store/checkout/stripe';\nimport { localizationStore } from 'src/components/store/hello/localization';\nimport { translate } from 'src/components/store/translationStore';\nimport {\n  type AppearanceConfig,\n  zonosStore,\n} from 'src/components/store/zonosStore';\nimport { isCheckoutMobile } from 'src/components/utils/checkout/isCheckoutMobile';\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { isDarkColor } from 'src/components/utils/isDarkColor';\nimport { log } from 'src/components/utils/logging/log';\nimport { mergeConfig } from 'src/components/utils/mergeConfig';\nimport { submitGtag } from 'src/components/utils/submitGtag';\nimport type { ElementsUiTheme } from 'src/types/generated/graphql.customer.types';\nimport type { Locale_PageName_Enum } from 'src/types/generated/graphql.frontend.types';\n\n/** These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport LeftArrow from './assets/LeftArrow.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport MessageIcon from './assets/MessageIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport RemoveIcon from './assets/RemoveIcon.svg';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is `zonos-address` which is using stripe elements and stripe\n   * need to be able to inject iframe into this component from the DOM\n   */\n  assetsDirs: ['assets'],\n  scoped: true,\n  styleUrl: 'zonos-checkout.scss',\n  tag: 'zonos-checkout',\n})\nexport class ZonosCheckout {\n  /**\n   * Override appearance config\n   */\n  @Prop() appearanceSettingsOverride?: Partial<AppearanceConfig>;\n  /**\n   * Preview checkout without needing to click on the button. This would be useful for demo purpose\n   */\n  @Prop() preview: boolean = false;\n\n  /**\n   * Flag to determine if the checkout is on mobile\n   */\n  @Prop() mobile: boolean = false;\n\n  /**\n   * The button element that will open the dialog\n   */\n  @Prop() buttonAnchorElements: HTMLElement[] | null = null;\n\n  /**\n   * Default address to use for the checkout (preview mode)\n   */\n  @Prop() defaultAddress: ContactOption | null = null;\n\n  /**\n   * Force dialog to be open\n   */\n  @Prop() forceDialogOpen: boolean = false;\n\n  /**\n   * Whether or not the dialog is open\n   */\n  @State() open: boolean = this.forceDialogOpen;\n\n  /**\n   * The stripe instance\n   */\n  @State() stripe: Stripe | null = window.Zonos.stripe;\n\n  /**\n   * Whether or not the submit button is loading in `step` component\n   */\n  @State() submitLoading: boolean = false;\n\n  /**\n   * Error when submitting payment\n   */\n  @State() paymentError: boolean = false;\n\n  @State() collapseReviewMobile: boolean = false;\n\n  /**\n   * Determine if we should skip and not hijack the Checkout button click event\n   * Sometimes stripe or our api has error, we don't want to hijack the click event.\n   */\n  @State() isAttachError = false;\n\n  @State() isMobile: boolean = false;\n\n  @State() zonosReviewRef?: HTMLZonosReviewElement;\n\n  @State() storybookPaymentStatusOverride?: PaymentIntent['status'];\n\n  /**\n   * Init cart info handler event\n   */\n  @Listen('zonos--init-cart-info', { target: 'body' })\n  async initCartInfoHandler(e: CustomEvent<CartItem[]>) {\n    const cartItems = e.detail;\n    void cartStoreUpdateItems(cartItems);\n  }\n\n  /**\n   * Close dialog action\n   */\n  @Method()\n  async closeDialogHandler() {\n    submitGtag('zonos-checkout-close');\n    this.open = this.forceDialogOpen || false;\n\n    if (!this.preview && cartStore.step === 'finish') {\n      // reset cart store if it's not preview mode and only when checkout is in the finish step.\n      cartStoreReset();\n    }\n    // reset step to customer info\n    cartStore.step = 'customer-info';\n  }\n\n  private applyStripeTheme = async () => {\n    const theme =\n      this.appearanceSettingsOverride?.theme || zonosStore.appearance.theme;\n\n    await initStripeElements({\n      overrideBorderRaidus: this.appearanceSettingsOverride?.style,\n      overridePrimaryColor: this.appearanceSettingsOverride?.colorPrimary,\n      // only override theme or theme from appearance if it's mobile\n      overrideTheme: this.isMobile ? theme : undefined,\n    });\n  };\n\n  private async buildCartAndInit() {\n    if (zonosStore.checkoutSettings.buildCartDetail) {\n      log('build cart detail');\n      const cartItems = await zonosStore.checkoutSettings.buildCartDetail();\n      await cartStoreUpdateItems(cartItems);\n    }\n\n    // if client secret doesn't exist, request a new one.\n    if (!stripeStore.clientSecret) {\n      const success = await stripeStoreInitCheckoutSession();\n      if (!success) {\n        return false;\n      }\n    }\n\n    // apply theme to stripe elements\n    await this.applyStripeTheme();\n    return true;\n  }\n\n  private attachCheckout() {\n    if (!this.buttonAnchorElements) {\n      // do nothing if button element is not found\n      return;\n    }\n    // only attach event once, and looping through all of the button elements\n    this.buttonAnchorElements.forEach(button => {\n      const isEventAttached = button.getAttribute(\n        'data-zonos-checkout-attached',\n      );\n      if (!isEventAttached) {\n        button.addEventListener('click', async e => {\n          if (!localizationStore.localizationLoaded) {\n            return;\n          }\n          // if localization is loaded and the localization is not a shippable country, keep the original click event\n          if (!localizationStore.isShippableCountry) {\n            log(`not shippable country`);\n            return;\n          }\n          e.preventDefault();\n          e.stopPropagation();\n          log('zonos checkout button clicked');\n          this.open = true;\n\n          const result = await this.buildCartAndInit();\n          if (!result) {\n            cartStoreUpdateToErrorState({\n              messages: [\n                translate(\n                  \"There's been an error creating your checkout session. Please reload and try again or contact support if the error persists\",\n                ),\n              ],\n              title: translate('Error creating Checkout'),\n            });\n            return;\n          }\n          submitGtag('zonos-checkout-start');\n        });\n        button.setAttribute('data-zonos-checkout-attached', 'true');\n      }\n    });\n  }\n\n  @Watch('appearanceSettingsOverride')\n  appearanceSettingsOverrideChanged() {\n    if (!this.appearanceSettingsOverride) {\n      return;\n    }\n\n    // apply theme to stripe elements\n    void this.applyStripeTheme();\n  }\n\n  /**\n   * Setup all of the event listeners for the component on first load\n   */\n  @Method()\n  public async init() {\n    stripeStore.stripe = window.Zonos.stripe;\n    this.stripe = window.Zonos.stripe;\n\n    // only init checkout if visitor's country is in the shipping zones.\n    const interval = setInterval(() => {\n      stripeStore.stripe = window.Zonos.stripe;\n      this.stripe = window.Zonos.stripe;\n\n      if (!localizationStore.localizationLoaded) {\n        return;\n      }\n      // if localization is loaded and the localization is not a shippable country, stop the interval and don't init checkout\n      // No need to check localization if it's preview mode\n      if (!localizationStore.isShippableCountry && !this.preview) {\n        log('not shippable country');\n        clearInterval(interval);\n        return;\n      }\n\n      if (!this.stripe) {\n        log('waiting for stripe to be loaded');\n        return;\n      }\n\n      log('init checkout');\n      if (this.preview || this.forceDialogOpen) {\n        void this.buildCartAndInit();\n      } else {\n        this.attachCheckout();\n      }\n      clearInterval(interval);\n    }, 100);\n\n    setTimeout(() => {\n      // if localization is not loaded after 10 seconds, stop the interval and don't init checkout\n      clearInterval(interval);\n    }, 10_000);\n  }\n\n  /**\n   * For storybook to set to finish step, this is to trigger in the story for zonos-checkout-finish\n   */\n  @Method()\n  public async setToFinishStep(forcePaymentStatus?: PaymentIntent['status']) {\n    cartStore.step = 'finish';\n    this.storybookPaymentStatusOverride = forcePaymentStatus;\n  }\n\n  private async handleCustomerInfoContinue() {\n    this.submitLoading = true;\n\n    // fetch landed cost data if we not fetching.\n    await stripeStorePrefetchLandedCost();\n\n    // keep checking landed cost data until it's ready to move to next screen\n    const interval = setInterval(() => {\n      if (cartStore.landedCostData || !stripeStore.isFetchingLandedCost) {\n        if (cartStore.landedCostData) {\n          // only go to next step if landed cost data is ready\n          cartStoreNextStep();\n        }\n        this.submitLoading = false;\n        clearInterval(interval);\n      }\n    }, 500);\n  }\n\n  private async handleShippingContinue() {\n    this.submitLoading = true;\n    // show loading for the button for a bit\n    setTimeout(() => {\n      cartStoreNextStep();\n      this.submitLoading = false;\n    }, 500);\n  }\n\n  private async handleCheckoutPaymentContinue() {\n    // reset error state\n    this.paymentError = false;\n    this.submitLoading = true;\n    try {\n      await stripeStoreConfirmPayment();\n      cartStoreNextStep();\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error(err);\n      this.paymentError = true;\n    }\n    this.submitLoading = false;\n  }\n\n  private async handleFinishClick() {\n    // reset stripe store\n    stripeStoreReset();\n\n    if (this.preview) {\n      cartStore.step = 'customer-info';\n      await this.init();\n      return;\n    }\n    // reset cart store\n    cartStoreReset();\n\n    // reset url\n    const url = window.location.href;\n\n    // Remove query parameters\n    const cleanUrl = url.split('?')[0];\n\n    // Update the URL without query parameters\n    window.history.replaceState({}, document.title, cleanUrl);\n    this.open = false;\n  }\n\n  private async handleBackClick() {\n    // close the modal if back button is clicked on customer info step\n    if (cartStore.step === 'customer-info') {\n      await this.closeDialogHandler();\n      return;\n    }\n    cartStorePreviousStep();\n  }\n\n  private getCurrentLocalePageEnum = (): Locale_PageName_Enum | null => {\n    switch (cartStore.step) {\n      case 'customer-info':\n        return 'checkout_customer_info';\n      case 'shipping':\n        return 'checkout_shipping_info';\n      case 'payment':\n        return 'checkout_payment_info';\n\n      default:\n        return null;\n    }\n  };\n\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n    // apply theme to stripe elements\n    void this.applyStripeTheme();\n    log(`mobile: ${this.isMobile}`);\n  }\n\n  @Watch('mobile')\n  handleMobileChange() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n    // apply theme to stripe elements\n    void this.applyStripeTheme();\n    log(`mobile: ${this.isMobile}`);\n  }\n\n  componentWillLoad() {\n    void this.init();\n    this.isMobile = isCheckoutMobile(this.mobile);\n    log(`mobile: ${this.isMobile}`);\n  }\n\n  // do clean up when component is unmounted\n  disconnectedCallback() {\n    // reset stripe store\n    stripeStoreReset();\n    // reset cart store\n    cartStoreReset();\n  }\n\n  render() {\n    const dialogLoading =\n      // if it's last step, don't need to check stripe elements\n      (cartStore.step !== 'finish' && !stripeStore.stripeElements) ||\n      stripeStore.isFetchingSession;\n\n    const { colorPrimary, colorSecondary, logoUrl, style } = mergeConfig(\n      zonosStore.appearance,\n      this.appearanceSettingsOverride,\n    );\n\n    const hasFooter = zonosStore.appearance.zonosAttribution === 'ENABLED';\n\n    const rightSideTheme = zonosStore.appearance.theme;\n\n    const themePrimaryColorBased: ElementsUiTheme =\n      colorPrimary && isDarkColor(colorPrimary) ? 'DARK' : 'LIGHT';\n\n    // use right side theme if it's mobile, otherwise use themePrimaryColorBased\n    const leftSideTheme: ElementsUiTheme = this.isMobile\n      ? rightSideTheme\n      : themePrimaryColorBased;\n\n    // only use submit button color if it's on desktop\n    const submitButtonColor = !this.isMobile ? colorSecondary : undefined;\n\n    const { customMessages } = localizationStore;\n    const defaultMessage =\n      customMessages.find(x => x.pageName === 'checkout_default')?.message ||\n      'Know about duties and taxes before you buy. Shop with confidence!';\n\n    const localePageEnum = this.getCurrentLocalePageEnum();\n    const filteredMessages = customMessages.filter(\n      x => x.pageName === localePageEnum,\n    );\n\n    const renderLogo = () => (\n      <div class=\"zonos--logo\">\n        {logoUrl && (\n          <img\n            alt={`${zonosStore.organizationName} logo`}\n            src={logoUrl}\n            width={100}\n          />\n        )}\n      </div>\n    );\n\n    const renderTopHeader = () => (\n      <zonos-v-stack>\n        {renderLogo()}\n\n        {filteredMessages.map(x => (\n          <zonos-custom-message\n            icon={MessageIcon}\n            message={x.message}\n          ></zonos-custom-message>\n        ))}\n\n        <div>\n          <zonos-button\n            class=\"zonos--back-button\"\n            icon={<zonos-icon content={LeftArrow}></zonos-icon>}\n            noBackground\n            noPaddingLeft\n            noPaddingRight\n            onClick={() => this.handleBackClick()}\n            theme={leftSideTheme}\n          >\n            {translate('Back')}\n          </zonos-button>\n        </div>\n      </zonos-v-stack>\n    );\n\n    const renderFooter = () =>\n      hasFooter && (\n        <div class=\"zonos--footer\" data-theme={rightSideTheme}>\n          <zonos-text type=\"hintText\">{translate('Powered by')}</zonos-text>\n          <zonos-logo theme={rightSideTheme} width=\"100px\"></zonos-logo>\n        </div>\n      );\n\n    const renderContent = () => {\n      const submitBtnType = this.isMobile ? 'primary' : undefined;\n      const reviewElementSize = this.zonosReviewRef?.scrollHeight;\n      return (\n        <div\n          class={'zonos--content'}\n          style={{\n            '--border-radius': getBorderRadius(style),\n          }}\n        >\n          {cartStore.step !== 'finish' && (\n            <>\n              <div\n                class=\"zonos--left\"\n                data-theme={leftSideTheme}\n                style={{\n                  '--primary-color': !this.isMobile ? colorPrimary : '',\n                }}\n              >\n                {!this.isMobile && renderTopHeader()}\n                {cartStore.step === 'customer-info' && (\n                  <zonos-customer-info\n                    continueLoading={this.submitLoading}\n                    defaultAddress={this.defaultAddress}\n                    onContinueClicked={() => this.handleCustomerInfoContinue()}\n                    submitBtnColor={submitButtonColor}\n                    submitBtnType={submitBtnType}\n                  ></zonos-customer-info>\n                )}\n                {cartStore.step === 'shipping' && (\n                  <zonos-shipping\n                    continueLoading={this.submitLoading}\n                    onContinueClicked={() => this.handleShippingContinue()}\n                    submitBtnColor={submitButtonColor}\n                    submitBtnType={submitBtnType}\n                  ></zonos-shipping>\n                )}\n                {cartStore.step === 'payment' && (\n                  <zonos-checkout-payment\n                    continueLoading={this.submitLoading}\n                    onContinueClicked={() =>\n                      this.handleCheckoutPaymentContinue()\n                    }\n                    paymentError={this.paymentError}\n                    submitBtnColor={submitButtonColor}\n                    submitBtnType={submitBtnType}\n                  ></zonos-checkout-payment>\n                )}\n              </div>\n              <div class=\"zonos--right\" data-theme={rightSideTheme}>\n                {this.isMobile && renderTopHeader()}\n                {!this.isMobile && (\n                  <zonos-button\n                    class=\"zonos--close-button\"\n                    icon={<zonos-icon content={RemoveIcon}></zonos-icon>}\n                    noBackground\n                    onClick={() => this.closeDialogHandler()}\n                  ></zonos-button>\n                )}\n                <div class=\"flex--wrapper\">\n                  <div class=\"zonos--wrapper\">\n                    <zonos-collapse\n                      collapseSize={reviewElementSize}\n                      collapsed={this.collapseReviewMobile}\n                    >\n                      <zonos-review\n                        collapsed={this.collapseReviewMobile}\n                        mobile={this.isMobile}\n                        onClick={() => {\n                          this.collapseReviewMobile =\n                            !this.collapseReviewMobile;\n                        }}\n                        ref={el => (this.zonosReviewRef = el)}\n                      ></zonos-review>\n                      {/* Cart item rows */}\n                      <zonos-cart-items></zonos-cart-items>\n                    </zonos-collapse>\n                  </div>\n\n                  <zonos-v-stack spacing={16}>\n                    {/* Cart subtotal row */}\n                    <zonos-cart-subtotal></zonos-cart-subtotal>\n\n                    <zonos-custom-message\n                      class=\"zonos--checkout-default-message\"\n                      icon={MessageIcon}\n                      message={defaultMessage}\n                    ></zonos-custom-message>\n                  </zonos-v-stack>\n                </div>\n\n                {/* Only show footer on desktop */}\n                {!this.isMobile && renderFooter()}\n              </div>\n              {/* Only show footer on mobile */}\n              {this.isMobile && renderFooter()}\n            </>\n          )}\n\n          {(cartStore.step === 'finish' || cartStore.step === 'error') && (\n            <div class=\"zonos--done\" data-theme={rightSideTheme}>\n              <div class=\"zonos--header\">\n                {renderLogo()}\n                <zonos-button\n                  class=\"zonos--close-button\"\n                  icon={<zonos-icon content={RemoveIcon}></zonos-icon>}\n                  noBackground\n                  onClick={() => this.handleFinishClick()}\n                  theme={rightSideTheme}\n                ></zonos-button>\n              </div>\n              <zonos-checkout-finish\n                borderRadius={style}\n                onCloseClick={() => this.handleFinishClick()}\n                overrideNotification={\n                  cartStore.step === 'error' && !!cartStore.error\n                    ? {\n                        ...cartStore.error,\n                        type: 'error',\n                      }\n                    : undefined\n                }\n                storybookForceStatus={this.storybookPaymentStatusOverride}\n              ></zonos-checkout-finish>\n            </div>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={classes([\n          'zonos--checkout zonos--elements',\n          hasFooter && 'has-footer',\n          this.preview && 'preview',\n          this.isMobile && 'mobile',\n        ])}\n      >\n        {this.preview ? (\n          renderContent()\n        ) : (\n          <zonos-dialog\n            borderStyle={style}\n            data-theme={rightSideTheme}\n            height=\"980px\"\n            isLoading={dialogLoading}\n            mobile={this.isMobile}\n            noBodyPadding\n            noBorder\n            noClickOutside\n            noCloseButton\n            onCloseDialog={() => this.closeDialogHandler()}\n            open={this.open}\n            width=\"1200px\"\n          >\n            {renderContent()}\n          </zonos-dialog>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/zonos-component.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,h}from"./index-d1aa9293.js";function format(t,o,s){return(t||"")+(o?" ".concat(o):"")+(s?" ".concat(s):"")}var zonosComponentCss=":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}div{color:red;font-size:large}";var ZonosComponent=function(){function t(t){registerInstance(this,t);this.first="";this.middle="";this.last=""}t.prototype.getText=function(){return format(this.first,this.middle,this.last)};t.prototype.render=function(){return h("div",null,"Hello, World! I'm ",this.getText())};return t}();ZonosComponent.style=zonosComponentCss;export{ZonosComponent as zonos_component};
+//# sourceMappingURL=zonos-component.entry.js.map

package/dist/esm-es5/zonos-component.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["format","first","middle","last","concat","zonosComponentCss","ZonosComponent","prototype","getText","this","render","h"],"sources":["src/utils/format.ts","src/components/component-template/zonos-component/zonos-component.scss?tag=zonos-component&encapsulation=shadow","src/components/component-template/zonos-component/zonos-component.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (\n    (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '')\n  );\n}\n","div {\n  color: red;\n  font-size: large;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nimport { format } from 'src/utils/format';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-component.scss',\n  tag: 'zonos-component',\n})\nexport class ZonosComponent {\n  /**\n   * The first name\n   */\n  @Prop() first: string = '';\n\n  /**\n   * The middle name\n   */\n  @Prop() middle: string = '';\n\n  /**\n   * The last name\n   */\n  @Prop() last: string = '';\n\n  private getText(): string {\n    return format(this.first, this.middle, this.last);\n  }\n\n  render() {\n    return <div>Hello, World! I'm {this.getText()}</div>;\n  }\n}\n"],"mappings":"kEAAgBA,OAAOC,EAAeC,EAAgBC,GACpD,OACGF,GAAS,KAAOC,EAAS,IAAAE,OAAIF,GAAW,KAAOC,EAAO,IAAAC,OAAID,GAAS,GAExE,CCJA,IAAME,kBAAoB,oS,ICSbC,eAAc,W,kDAID,G,YAKC,G,UAKF,E,CAEfA,EAAAC,UAAAC,QAAA,WACN,OAAOR,OAAOS,KAAKR,MAAOQ,KAAKP,OAAQO,KAAKN,K,EAG9CG,EAAAC,UAAAG,OAAA,WACE,OAAOC,EAAA,gCAAwBF,KAAKD,U,WArBb,G"}

package/dist/esm-es5/zonos-controller.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(t,o,e,n){function r(t){return t instanceof e?t:new e((function(o){o(t)}))}return new(e||(e=Promise))((function(e,i){function s(t){try{c(n.next(t))}catch(t){i(t)}}function a(t){try{c(n["throw"](t))}catch(t){i(t)}}function c(t){t.done?e(t.value):r(t.value).then(s,a)}c((n=n.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var e={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},n,r,i,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(o){return c([t,o])}}function c(a){if(n)throw new TypeError("Generator is already executing.");while(s&&(s=0,a[0]&&(e=0)),e)try{if(n=1,r&&(i=a[0]&2?r["return"]:a[0]?r["throw"]||((i=r["return"])&&i.call(r),0):r.next)&&!(i=i.call(r,a[1])).done)return i;if(r=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;r=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(i=e.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){e.label=a[1];break}if(a[0]===6&&e.label<i[1]){e.label=i[1];i=a;break}if(i&&e.label<i[2]){e.label=i[2];e.ops.push(a);break}if(i[2])e.ops.pop();e.trys.pop();continue}a=o.call(t,e)}catch(t){a=[6,t];r=0}finally{n=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host}from"./index-d1aa9293.js";import{s as stripeStore}from"./cart-36c33342.js";import{h as handleFetch,b as logError,i as isValidSelector,l as log,c as initLocalizationStore,d as localizationStoreUpdateSelectedCountryCode}from"./localization-4a424f49.js";import{z as zonosStore,d as zonosStoreInitSetting}from"./zonosStore-13a7b534.js";import"./isDarkColor-b21326ae.js";import"./getBorderRadius-82fbaf25.js";var getZonosSetting=function(){return __awaiter(void 0,void 0,void 0,(function(){var t,o,e,n;return __generator(this,(function(r){switch(r.label){case 0:t="".concat("https://route.js.zonos.com","/api/zonos-setting");return[4,handleFetch(t)];case 1:o=r.sent(),e=o.errors,n=o.json;if(e.length){logError("Error occurs when getting zonos settings. If this is not an unauthorized error, it will use user setting or default setting");return[2,{errors:e,json:null}]}return[2,{errors:[],json:n}]}}))}))};var injectCheckoutElement=function(t){var o=document.querySelector("zonos-checkout");if(!o){var e=document.createElement("zonos-checkout");e.buttonAnchorElements=t;document.body.appendChild(e)}};var initCheckout=function(t){return __awaiter(void 0,void 0,void 0,(function(){var o;return __generator(this,(function(e){if(!t.placeOrderButtonSelector){return[2]}if(!isValidSelector(t.placeOrderButtonSelector)){logError('Selector checkoutButtonAnchor "'.concat(t.placeOrderButtonSelector,'" is not a valid selector'));return[2]}o=document.querySelectorAll(t.placeOrderButtonSelector);injectCheckoutElement(o);return[2]}))}))};var injectHelloComponent=function(t){var o=document.querySelector("zonos-hello");if(!o&&t){var e=document.createElement("zonos-hello");t.appendChild(e)}};var initHello=function(t){return __awaiter(void 0,void 0,void 0,(function(){var o,e;return __generator(this,(function(n){o=t.anchorElementSelector;if(!o||!isValidSelector(o)){logError('Selector anchorElementSelector "'.concat(t.anchorElementSelector,'" is not a valid selector.'));return[2]}e=document.querySelector(o);log("Hello init complete");injectHelloComponent(e);return[2]}))}))};var zonosControllerCss=":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{visibility:hidden;opacity:0;height:0}";var ZonosController=function(){function t(t){registerInstance(this,t);this.stripeInitEvent=createEvent(this,"stripeInitEvent",7);this.config=undefined;this.zonosApiKey=undefined}t.prototype.initCheckoutElement=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(o){if(!t){log("Stripe is not loaded yet - cannot init checkout element","warn");return[2]}stripeStore.stripe=t;void initCheckout(zonosStore.checkoutSettings);log("init checkout element");return[2]}))}))};t.prototype.initZonosNotification=function(){var t=document.querySelector("zonos-notification");if(t){return}var o=document.createElement("zonos-notification");document.body.appendChild(o)};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(o){zonosStore.zonosApiKey=this.zonosApiKey;(function(){return __awaiter(t,void 0,void 0,(function(){var t,o,e,n,r,i;return __generator(this,(function(s){switch(s.label){case 0:return[4,getZonosSetting()];case 1:e=s.sent(),n=e.errors,r=e.json;if(((t=n[0])===null||t===void 0?void 0:t.type.toString())==="403"){log("Failed to load zonos settings. This domain may not have access","warn");return[2]}this.initZonosNotification();zonosStoreInitSetting({overrideSettings:this.config,zonosSettings:r});if(zonosStore.helloSettings){void initHello(zonosStore.helloSettings)}return[4,initLocalizationStore()];case 2:s.sent();i=((o=r===null||r===void 0?void 0:r.checkoutSettings)===null||o===void 0?void 0:o.externalServiceTokens.find((function(t){return t.type==="STRIPE_PUBLISHABLE_TOKEN"})))||null;if(!i||!this.stripeInitEvent){log("Checkout failed to load -- missing publishable key","warn");return[2]}this.stripeInitEvent.emit({publishableKey:i.token});log("zonos controller loaded");return[2]}}))}))})();return[2]}))}))};t.prototype.showNotification=function(t){return __awaiter(this,void 0,void 0,(function(){var o;return __generator(this,(function(e){o=document.querySelector("zonos-notification");if(!o){log("Failed to show notification - zonos-notification not found","warn");return[2]}void o.showNotification(t);return[2]}))}))};t.prototype.overrideConfig=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(o){zonosStoreInitSetting({overrideSettings:t,zonosSettings:null});return[2]}))}))};t.prototype.overrideCountry=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(o){void localizationStoreUpdateSelectedCountryCode(t);return[2]}))}))};t.prototype.render=function(){return h(Host,{class:"zonos--elements"})};return t}();ZonosController.style=zonosControllerCss;export{ZonosController as zonos_controller};
+//# sourceMappingURL=zonos-controller.entry.js.map

package/dist/esm-es5/zonos-controller.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getZonosSetting","__awaiter","url","concat","handleFetch","_c","_d","sent","errors","json","length","logError","injectCheckoutElement","triggerAnchorElement","checkoutElement","document","querySelector","newCheckoutElement","createElement","buttonAnchorElements","body","appendChild","initCheckout","config","placeOrderButtonSelector","isValidSelector","triggerElement","querySelectorAll","injectHelloComponent","helloElement","newHelloElement","initHello","helloSettings","anchorElementSelector","log","zonosControllerCss","ZonosController","class_1","prototype","initCheckoutElement","stripe","stripeStore","zonosStore","checkoutSettings","initZonosNotification","existingNotification","zonosNotification","componentWillLoad","zonosApiKey","this","_this","_a","type","toString","zonosStoreInitSetting","overrideSettings","zonosSettings","initLocalizationStore","publishableKey","_b","externalServiceTokens","find","item","stripeInitEvent","emit","token","showNotification","notification","notificationElement","overrideConfig","overrideCountry","countryCode","localizationStoreUpdateSelectedCountryCode","render","h","Host","class"],"sources":["src/components/utils/api/getZonosSetting.ts","src/components/utils/checkout/initCheckout.ts","src/components/utils/hello/initHello.ts","src/components/main/zonos-controller.scss?tag=zonos-controller&encapsulation=shadow","src/components/main/zonos-controller.tsx"],"sourcesContent":["import { handleFetch } from 'src/components/utils/handleFetch';\nimport { logError } from 'src/components/utils/logging/logError';\nimport type { ZonosSettingsQuery } from 'src/types/generated/graphql.customer.types';\n\nexport const getZonosSetting = async () => {\n  const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-setting`;\n  const { errors, json } = await handleFetch<ZonosSettingsQuery>(url);\n  if (errors.length) {\n    logError(\n      `Error occurs when getting zonos settings. If this is not an unauthorized error, it will use user setting or default setting`,\n    );\n    return { errors, json: null };\n  }\n  return { errors: [], json };\n};\n","import { isValidSelector } from 'src/components/utils/isValidSelector';\nimport { logError } from 'src/components/utils/logging/logError';\nimport type { CheckoutConfig } from 'src/types/checkout/CheckoutConfig';\n\nconst injectCheckoutElement = (triggerAnchorElement: HTMLElement[] | null) => {\n  // append checkout component if doesn't exist\n  const checkoutElement = document.querySelector('zonos-checkout');\n\n  if (!checkoutElement) {\n    const newCheckoutElement = document.createElement('zonos-checkout');\n    newCheckoutElement.buttonAnchorElements = triggerAnchorElement;\n\n    document.body.appendChild(newCheckoutElement);\n  }\n};\n\nexport const initCheckout = async (config: Partial<CheckoutConfig>) => {\n  if (!config.placeOrderButtonSelector) {\n    // do nothing if checkout button anchor is not set\n    return;\n  }\n\n  // check if checkout button anchor selector user pass in is valid\n  if (!isValidSelector(config.placeOrderButtonSelector)) {\n    logError(\n      `Selector checkoutButtonAnchor \"${config.placeOrderButtonSelector}\" is not a valid selector`,\n    );\n    return;\n  }\n\n  const triggerElement = document.querySelectorAll(\n    config.placeOrderButtonSelector,\n  );\n  injectCheckoutElement(triggerElement as unknown as HTMLElement[]);\n};\n","import { isValidSelector } from 'src/components/utils/isValidSelector';\nimport { log } from 'src/components/utils/logging/log';\nimport { logError } from 'src/components/utils/logging/logError';\nimport type { HelloSettingFragment } from 'src/types/generated/graphql.customer.types';\n\nconst injectHelloComponent = (triggerAnchorElement: HTMLElement | null) => {\n  // append checkout component if doesn't exist\n  const helloElement = document.querySelector('zonos-hello');\n\n  if (!helloElement && triggerAnchorElement) {\n    const newHelloElement = document.createElement('zonos-hello');\n    triggerAnchorElement.appendChild(newHelloElement);\n  }\n};\n\nexport const initHello = async (\n  helloSettings: Partial<HelloSettingFragment>,\n) => {\n  const { anchorElementSelector } = helloSettings;\n  // check if checkout button anchor selector user pass in is valid to setup hello\n  if (!anchorElementSelector || !isValidSelector(anchorElementSelector)) {\n    logError(\n      `Selector anchorElementSelector \"${helloSettings.anchorElementSelector}\" is not a valid selector.`,\n    );\n    return;\n  }\n\n  const triggerElement = document.querySelector<HTMLElement>(\n    anchorElementSelector,\n  );\n\n  log('Hello init complete');\n  injectHelloComponent(triggerElement);\n};\n",":host {\n  visibility: hidden;\n  opacity: 0;\n  height: 0;\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport type { Stripe } from '@stripe/stripe-js';\n\nimport type { NotificationInit } from 'src/components/common/zonos-notification/zonos-notification';\nimport { stripeStore } from 'src/components/store/checkout/stripe';\nimport {\n  initLocalizationStore,\n  localizationStoreUpdateSelectedCountryCode,\n} from 'src/components/store/hello/localization';\nimport {\n  zonosStore,\n  zonosStoreInitSetting,\n} from 'src/components/store/zonosStore';\nimport { getZonosSetting } from 'src/components/utils/api/getZonosSetting';\nimport { initCheckout } from 'src/components/utils/checkout/initCheckout';\nimport { initHello } from 'src/components/utils/hello/initHello';\nimport { log } from 'src/components/utils/logging/log';\nimport type { LoadZonosParamsConfig } from 'src/scripts/zonos';\nimport type { CountryCode } from 'src/types/generated/graphql.customer.types';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-controller.scss',\n  tag: 'zonos-controller',\n})\nexport class ZonosController {\n  /**\n   * The zonos config object\n   */\n  @Prop() config!: LoadZonosParamsConfig;\n\n  /**\n   * The zonos api key\n   */\n  @Prop() zonosApiKey!: string;\n\n  /**\n   * Event emitted when stripe is initialized\n   */\n  @Event() stripeInitEvent?: EventEmitter<{ publishableKey: string }>;\n\n  /**\n   * Method to initialize checkout element\n   */\n  @Method()\n  public async initCheckoutElement(stripe: Stripe) {\n    if (!stripe) {\n      // eslint-disable-next-line no-console\n      log('Stripe is not loaded yet - cannot init checkout element', 'warn');\n      return;\n    }\n    stripeStore.stripe = stripe;\n    void initCheckout(zonosStore.checkoutSettings);\n    log('init checkout element');\n  }\n\n  /**\n   * Init zonos notification\n   */\n  private initZonosNotification() {\n    const existingNotification = document.querySelector('zonos-notification');\n    if (existingNotification) {\n      return;\n    }\n    const zonosNotification = document.createElement('zonos-notification');\n    document.body.appendChild(zonosNotification);\n  }\n\n  async componentWillLoad() {\n    zonosStore.zonosApiKey = this.zonosApiKey;\n    // running with scope async function to avoid blocking the main thread\n    (async () => {\n      const { errors, json } = await getZonosSetting();\n      if (errors[0]?.type.toString() === '403') {\n        log(\n          'Failed to load zonos settings. This domain may not have access',\n          'warn',\n        );\n        return;\n      }\n\n      // init zonos notification\n      this.initZonosNotification();\n\n      // load default setting if fail to load user setting\n      zonosStoreInitSetting({\n        overrideSettings: this.config,\n        zonosSettings: json,\n      });\n\n      if (zonosStore.helloSettings) {\n        void initHello(zonosStore.helloSettings);\n      }\n      // init localization store\n      await initLocalizationStore();\n\n      // checkout init\n      const publishableKey =\n        json?.checkoutSettings?.externalServiceTokens.find(\n          item => item.type === 'STRIPE_PUBLISHABLE_TOKEN',\n        ) || null;\n\n      if (!publishableKey || !this.stripeInitEvent) {\n        log('Checkout failed to load -- missing publishable key', 'warn');\n        return;\n      }\n\n      // send publishable key out to load stripe\n      this.stripeInitEvent.emit({\n        publishableKey: publishableKey.token,\n      });\n\n      // eslint-disable-next-line no-console\n      log('zonos controller loaded');\n    })();\n  }\n\n  /**\n   * Show notification\n   */\n  @Method()\n  public async showNotification(notification: NotificationInit) {\n    const notificationElement = document.querySelector('zonos-notification');\n    if (!notificationElement) {\n      log('Failed to show notification - zonos-notification not found', 'warn');\n      return;\n    }\n    void notificationElement.showNotification(notification);\n  }\n\n  /**\n   * Override the setting\n   * @param config config that need to override the default setting\n   */\n  @Method()\n  public async overrideConfig(config: LoadZonosParamsConfig) {\n    zonosStoreInitSetting({\n      overrideSettings: config,\n      zonosSettings: null,\n    });\n  }\n\n  /**\n   * Override country code for storybook\n   */\n  @Method()\n  public async overrideCountry(countryCode: CountryCode) {\n    void localizationStoreUpdateSelectedCountryCode(countryCode);\n  }\n\n  render() {\n    return <Host class=\"zonos--elements\"></Host>;\n  }\n}\n"],"mappings":"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"}