@zonos/elements 1.0.16

package/dist/components/zonos-button2.js

@@ -0,0 +1,144 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { z as zonosStore } from './zonosStore.js';
+import { c as classes } from './classes.js';
+import { g as getBorderRadius } from './getBorderRadius.js';
+import { i as isColorVariable } from './isColorVariable.js';
+import { i as isDarkColor } from './isDarkColor.js';
+import { d as defineCustomElement$1 } from './zonos-spinner2.js';
+
+/**
+ * Get theme for button text based on background color
+ */
+const getButtonTheme = (overrideBackground) => {
+  // use override background if it exists, otherwise use color from setting
+  const background = overrideBackground || zonosStore.appearance.colorSecondary;
+  const backgroundColor = background && isColorVariable(background)
+    ? `var(--amino-${background})`
+    : background;
+  // determine theme based on background color (to change button text color if needed)
+  const buttonTheme = backgroundColor && isDarkColor(backgroundColor) ? 'DARK' : 'LIGHT';
+  return buttonTheme;
+};
+
+const zonosButtonCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{display:-ms-inline-flexbox;display:inline-flex;width:100%;position:relative;outline:none;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 var(--amino-space-16);background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--amino-font-sans);letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--amino-gray-200)}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-200)}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";
+
+const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Detect if the button has an content
+     */
+    this.handleSlotChange = () => {
+      this.hasContent = true;
+    };
+    this.class = '';
+    this.color = undefined;
+    this.backgroundColor = undefined;
+    this.borderStyle = undefined;
+    this.isDisabled = false;
+    this.icon = null;
+    this.iconRight = false;
+    this.size = 'sm';
+    this.variant = 'standard';
+    this.noBackground = false;
+    this.noPaddingLeft = false;
+    this.noPaddingRight = false;
+    this.loading = false;
+    this.theme = undefined;
+    this.hasIcon = !!this.icon;
+    this.hasContent = false;
+  }
+  /**
+   * Detect if the icon changes and update the state accordingly
+   */
+  iconChangeHandler() {
+    this.hasIcon = !!this.icon;
+  }
+  clickHandler(event) {
+    if (this.loading || this.isDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  componentWillLoad() {
+    this.iconChangeHandler();
+  }
+  render() {
+    const disabled = this.loading || this.isDisabled;
+    const color = this.color && isColorVariable(this.color)
+      ? `var(--amino-${this.color})`
+      : this.color;
+    // use override background if it exists, otherwise use color from setting
+    const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
+    // only set theme for button to change text color if variant is standard and override background is set
+    const buttonTheme = this.variant === 'standard'
+      ? getButtonTheme(overrideBackground)
+      : undefined;
+    const borderStyle = getBorderRadius(this.borderStyle);
+    return (h(Host, { class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        '--background-color': overrideBackground,
+        '--border-radius': borderStyle,
+        '--color': color,
+      } }, h("button", { class: classes([
+        this.hasIcon && 'has-icon',
+        this.hasContent && 'has-content',
+        this.noBackground && 'no-background',
+        this.noPaddingLeft && 'no-padding-left',
+        this.noPaddingRight && 'no-padding-right',
+        this.iconRight && 'icon-right',
+        this.variant,
+        this.size,
+        // only override background if variant is set to standard
+        this.backgroundColor &&
+          this.variant === 'standard' &&
+          'override-background',
+      ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+  }
+  static get watchers() { return {
+    "icon": ["iconChangeHandler"]
+  }; }
+  static get style() { return zonosButtonCss; }
+}, [1, "zonos-button", {
+    "class": [1],
+    "color": [1],
+    "backgroundColor": [1, "background-color"],
+    "borderStyle": [1, "border-style"],
+    "isDisabled": [4, "is-disabled"],
+    "icon": [16],
+    "iconRight": [4, "icon-right"],
+    "size": [1],
+    "variant": [1],
+    "noBackground": [4, "no-background"],
+    "noPaddingLeft": [4, "no-padding-left"],
+    "noPaddingRight": [4, "no-padding-right"],
+    "loading": [4],
+    "theme": [1],
+    "hasIcon": [32],
+    "hasContent": [32]
+  }, [[2, "click", "clickHandler"]], {
+    "icon": ["iconChangeHandler"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-button", "zonos-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosButton);
+      }
+      break;
+    case "zonos-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ZonosButton as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-button2.js.map

package/dist/components/zonos-button2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-button2.js","mappings":"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","names":[],"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"],"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"],"version":3}

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

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

package/dist/components/zonos-card.js

@@ -0,0 +1,8 @@
+import { Z as ZonosCard$1, d as defineCustomElement$1 } from './zonos-card2.js';
+
+const ZonosCard = ZonosCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosCard, defineCustomElement };
+
+//# sourceMappingURL=zonos-card.js.map

package/dist/components/zonos-card.js.map

@@ -0,0 +1 @@
+{"file":"zonos-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-card2.js

@@ -0,0 +1,51 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classes } from './classes.js';
+
+const zonosCardCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .styled-card{border:var(--amino-border);border-radius:var(--amino-radius-6);padding:var(--spacing, var(--amino-space-24));text-align:left}:host .styled-card hr{margin-left:calc(var(--spacing, var(--amino-space-24)) * -1);margin-right:calc(var(--spacing, var(--amino-space-24)) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, var(--amino-space-24));border-bottom:var(--amino-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));border-top:var(--amino-border);background:var(--amino-surface-color-secondary);margin-top:var(--spacing, var(--amino-space-24));border-bottom-left-radius:var(--amino-radius-8);border-bottom-right-radius:var(--amino-radius-8);height:var(--footerHeight)}";
+
+const ZonosCard = /*@__PURE__*/ proxyCustomElement(class ZonosCard extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.actions = undefined;
+    this.class = undefined;
+    this.footerActions = undefined;
+    this.footerContent = undefined;
+    this.footerHeight = undefined;
+    this.label = undefined;
+    this.spacing = '24px';
+  }
+  render() {
+    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 ? `${this.footerHeight}px` : 'auto',
+        padding: this.spacing,
+      } }, h("div", null, this.footerContent), h("h-stack", { spacing: 8 }, this.footerActions))))));
+  }
+  static get style() { return zonosCardCss; }
+}, [1, "zonos-card", {
+    "actions": [16],
+    "class": [1],
+    "footerActions": [16],
+    "footerContent": [16],
+    "footerHeight": [2, "footer-height"],
+    "label": [16],
+    "spacing": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosCard);
+      }
+      break;
+  } });
+}
+
+export { ZonosCard as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-card2.js.map

package/dist/components/zonos-card2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-card2.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,mgDAAmgD;;MCU3gD,SAAS;;;;;;;;;;;mBAkCO,MAAM;;EAEjC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE,OAAO,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAE/B,IAAI,CAAC,KAAK,KACT,cAAQ,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAC1D,sBAAgB,IAAI,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAkB,EAE9D,eAAS,OAAO,EAAE,CAAC,IAAG,IAAI,CAAC,OAAO,CAAW,CACtC,CACV,EAGD,eAAa,EAEZ,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,MACxC,cACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,IAAI,GAAG,MAAM;QAC7D,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,IAED,eAAM,IAAI,CAAC,aAAa,CAAO,EAC/B,eAAS,OAAO,EAAE,CAAC,IAAG,IAAI,CAAC,aAAa,CAAW,CAC5C,CACV,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/common/zonos-card/zonos-card.scss?tag=zonos-card&encapsulation=shadow","src/components/common/zonos-card/zonos-card.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"],"version":3}

package/dist/components/zonos-cart-items.d.ts

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

package/dist/components/zonos-cart-items.js

@@ -0,0 +1,8 @@
+import { Z as ZonosCartItems$1, d as defineCustomElement$1 } from './zonos-cart-items2.js';
+
+const ZonosCartItems = ZonosCartItems$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosCartItems, defineCustomElement };
+
+//# sourceMappingURL=zonos-cart-items.js.map

package/dist/components/zonos-cart-items.js.map

@@ -0,0 +1 @@
+{"file":"zonos-cart-items.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-cart-items2.js

@@ -0,0 +1,55 @@
+import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
+import { c as cartStore } from './stripe.js';
+import { f as formatCurrency } from './formatCurrency.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const 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}";
+
+const ZonosCartItems = /*@__PURE__*/ proxyCustomElement(class ZonosCartItems extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.errorImages = [];
+  }
+  render() {
+    const emptyItemImg = 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(item => {
+      const itemImg = item.imageUrl;
+      return (h("tr", { class: "zonos--cart-item" }, h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (h("img", { alt: item.name, onError: () => {
+          this.errorImages = [...this.errorImages, itemImg];
+        }, src: item.imageUrl, style: {
+          'min-width': '40px',
+        }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, item.name)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+        amount: item.amount * item.quantity,
+        currency: cartStore.currency,
+      })))));
+    })))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get style() { return zonosCartItemsCss; }
+}, [1, "zonos-cart-items", {
+    "errorImages": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-cart-items", "zonos-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-cart-items":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosCartItems);
+      }
+      break;
+    case "zonos-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ZonosCartItems as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-cart-items2.js.map

package/dist/components/zonos-cart-items2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-cart-items2.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,yoBAAyoB;;MCWtpB,cAAc;;;;;uBACQ,EAAE;;EAEnC,MAAM;IACJ,MAAM,YAAY,GAAG,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,mCAAmC,IAC7C,aAAO,KAAK,EAAC,mBAAmB,IAC9B,iBACG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI;MACvB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;MAC9B,QACE,UAAI,KAAK,EAAC,kBAAkB,IAC1B,UAAI,KAAK,EAAC,sCAAsC,IAC7C,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,IAC7C,WACE,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,OAAO,EAAE;UACP,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;SACnD,EACD,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE;UACL,WAAW,EAAE,MAAM;SACpB,EACD,KAAK,EAAE,EAAE,GACT,KAEF,WAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,GAAI,CACtD,CACE,EACL,UAAI,KAAK,EAAC,qCAAqC,IAC7C,kBAAY,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,IAAI,CAAc,CAC9C,EACL,UAAI,KAAK,EAAC,sCAAsC,IAC9C,kBAAY,IAAI,EAAC,eAAe,IAC7B,cAAc,CAAC;QACd,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ;QACnC,QAAQ,EAAE,SAAS,CAAC,QAAQ;OAC7B,CAAC,CACS,CACV,CACF,EACL;KACH,CAAC,CACI,CACF,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["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"],"sourcesContent":[":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"],"version":3}

package/dist/components/zonos-cart-subtotal.d.ts

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

package/dist/components/zonos-cart-subtotal.js

@@ -0,0 +1,8 @@
+import { Z as ZonosCartSubtotal$1, d as defineCustomElement$1 } from './zonos-cart-subtotal2.js';
+
+const ZonosCartSubtotal = ZonosCartSubtotal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosCartSubtotal, defineCustomElement };
+
+//# sourceMappingURL=zonos-cart-subtotal.js.map

package/dist/components/zonos-cart-subtotal.js.map

@@ -0,0 +1 @@
+{"file":"zonos-cart-subtotal.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-cart-subtotal2.js

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
+import { c as cartStore } from './stripe.js';
+import { t as translate } from './localization.js';
+import { f as formatCurrency } from './formatCurrency.js';
+import { d as defineCustomElement$3 } from './zonos-badge2.js';
+import { d as defineCustomElement$2 } from './zonos-icon2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const InfoIcon = `<svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+<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"/>
+</svg>
+`;
+
+const 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}";
+
+const ZonosCartSubtotal = /*@__PURE__*/ proxyCustomElement(class ZonosCartSubtotal extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
+    const renderShippingInfo = () => {
+      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" }, renderShippingInfo()), 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: 
+      // show total without taxes when step is shipping, show total with taxes when step is payment
+      cartStore.step === 'shipping'
+        ? totalWithoutTaxes
+        : cartStore.total,
+      currency: cartStore.currency,
+    })))))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get style() { return zonosCartSubtotalCss; }
+}, [1, "zonos-cart-subtotal"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-cart-subtotal", "zonos-badge", "zonos-icon", "zonos-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-cart-subtotal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosCartSubtotal);
+      }
+      break;
+    case "zonos-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "zonos-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "zonos-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ZonosCartSubtotal as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-cart-subtotal2.js.map

package/dist/components/zonos-cart-subtotal2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-cart-subtotal2.js","mappings":"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","names":[],"sources":["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"],"sourcesContent":[":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"],"version":3}

package/dist/components/zonos-checkout-finish.d.ts

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

package/dist/components/zonos-checkout-finish.js

@@ -0,0 +1,8 @@
+import { Z as ZonosCheckoutFinish$1, d as defineCustomElement$1 } from './zonos-checkout-finish2.js';
+
+const ZonosCheckoutFinish = ZonosCheckoutFinish$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosCheckoutFinish, defineCustomElement };
+
+//# sourceMappingURL=zonos-checkout-finish.js.map

package/dist/components/zonos-checkout-finish.js.map

@@ -0,0 +1 @@
+{"file":"zonos-checkout-finish.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}