@zonos/elements 1.3.204 → 1.3.206

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-9264749e.js');
+const index = require('./index-1c710d00.js');
+const zonosStore = require('./zonosStore-7c1e1bc1.js');
 const classes = require('./classes-b7918f56.js');
 require('./VarianceTest-0cb1e118.js');
 
@@ -14,8 +14,10 @@ const ZonosToggle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.toggleChanged = index.createEvent(this, "toggleChanged", 7);
+        /**
+         * Options for the toggle
+         */
         this.options = [];
-        this.value = undefined;
     }
     render() {
         return (index.h(index.Host, { key: '9a526e8fee8e4c5af558442c82f7acbc634706c3', class: classes.classes(['zonos--elements zonos--toggle']), style: {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
+const index = require('./index-1c710d00.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosTooltipCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--tooltip{position:relative}:host .zonos--tooltip .zonos--tooltip-content{position:absolute;bottom:100%;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:12px;background-color:var(--zonos-elements-gray-1000);opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:var(--zonos-elements-radius-4);z-index:100;-webkit-box-shadow:var(--zonos-elements-v3-shadow-large);box-shadow:var(--zonos-elements-v3-shadow-large)}:host .zonos--tooltip .zonos--tooltip-content.zonos--show-tooltip{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
@@ -11,7 +11,13 @@ const ZonosTooltipStyle0 = zonosTooltipCss;
 const ZonosTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * The title of the tooltip
+         */
         this.label = '';
+        /**
+         * The subtitle of the tooltip
+         */
         this.subtitle = '';
         this.showTooltip = false;
     }

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-9264749e.js');
+const index = require('./index-1c710d00.js');
+const zonosStore = require('./zonosStore-7c1e1bc1.js');
 const classes = require('./classes-b7918f56.js');
 require('./VarianceTest-0cb1e118.js');
 
@@ -13,6 +13,10 @@ const ZonosVStackStyle0 = zonosVStackCss;
 const VStack = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * The spacing between elements in the stack
+         * @default 24
+         */
         this.spacing = 24;
     }
     render() {

package/dist/cjs/{zonosStore-9264749e.js → zonosStore-7c1e1bc1.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-0993f42d.js');
+const index = require('./index-1c710d00.js');
 const VarianceTest = require('./VarianceTest-0cb1e118.js');
 
 const appendToMap = (map, propName, value) => {
@@ -39,7 +39,7 @@ const cleanupElements = debounce((map) => {
     for (let key of map.keys()) {
         map.set(key, map.get(key).filter(isConnected));
     }
-}, 2000);
+}, 2_000);
 const stencilSubscription = () => {
     if (typeof index.getRenderingRef !== 'function') {
         // If we are not in a stencil project, we do nothing.
@@ -72,7 +72,7 @@ const stencilSubscription = () => {
 const unwrap = (val) => (typeof val === 'function' ? val() : val);
 const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
     const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    let states = new Map(Object.entries(unwrappedState ?? {}));
     const handlers = {
         dispose: [],
         get: [],
@@ -80,10 +80,9 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         reset: [],
     };
     const reset = () => {
-        var _a;
         // When resetting the state, the default state may be a function - unwrap it to invoke it.
         // otherwise, the state won't be properly reset
-        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
         handlers.reset.forEach((cb) => cb());
     };
     const dispose = () => {

package/dist/collection/collection-manifest.json

@@ -60,7 +60,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.23.0",
+    "version": "4.27.2",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-display/zonos-address-display.js

@@ -3,10 +3,6 @@ import { localizationStore } from "../../../../store/hello/localization";
 import { translate } from "../../../../store/translationStore";
 import { isTextContainsNonLatinChars } from "../../../../utils/containsNonLatinChars";
 export class ZonosAddressDisplay {
-    constructor() {
-        this.currentAddress = undefined;
-        this.addressType = undefined;
-    }
     render() {
         var _a;
         const { city, country, email, line1, line2, name, phone, postal_code, state, } = this.currentAddress;

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-form/zonos-address-form.js

@@ -3,13 +3,13 @@ import { translate } from "../../../../store/translationStore";
 import { isTextContainsNonLatinChars } from "../../../../utils/containsNonLatinChars";
 export class ZonosAddressForm {
     constructor() {
+        /**
+         * Local address to update
+         */
+        this.localAddress = this.currentAddress;
         this.onInputChange = ({ key, value, }) => {
             this.addressChange.emit(Object.assign(Object.assign({}, this.localAddress), { [key]: value }));
         };
-        this.currentAddress = undefined;
-        this.translatedAddress = undefined;
-        this.addressType = undefined;
-        this.localAddress = this.currentAddress;
     }
     watchCurrentAddress() {
         var _a, _b, _c, _d, _e, _f;

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-update-dialog.js

@@ -7,6 +7,30 @@ import { containsNonLatinChars } from "../../../utils/containsNonLatinChars";
 import RemoveIcon from "./../assets/RemoveIcon.svg";
 export class ZonosAddressUpdateDialog {
     constructor() {
+        /**
+         * Whether or not the continue button is loading
+         */
+        this.continueLoading = false;
+        /**
+         * Whether or not the dialog is open
+         */
+        this.dialogOpen = false;
+        /**
+         * Whether or not the dialog is open
+         */
+        this.isMobile = false;
+        /**
+         * Due to Stripe's validation difficulties, we need to show a banner when users hasn't filled out the form correctly but clicked continue
+         */
+        this.showErrorBanner = false;
+        /**
+         * State of shipping address input fields
+         */
+        this.translatedShippingAddressState = {};
+        /**
+         * State of billing address input fields
+         */
+        this.translatedBillingAddressState = {};
         /**
          * handler for close button click
          */
@@ -108,19 +132,6 @@ export class ZonosAddressUpdateDialog {
                 },
             };
         };
-        this.continueLoading = false;
-        this.dialogLoading = undefined;
-        this.dialogOpen = false;
-        this.submitBtnType = undefined;
-        this.submitBtnColor = undefined;
-        this.isMobile = false;
-        this.shippingAddress = undefined;
-        this.billingAddress = undefined;
-        this.translatedShippingAddress = undefined;
-        this.translatedBillingAddress = undefined;
-        this.showErrorBanner = false;
-        this.translatedShippingAddressState = {};
-        this.translatedBillingAddressState = {};
     }
     watchTranslatedShippingAddress() {
         this.translatedShippingAddressState = this.translatedShippingAddress;

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-restricted-items/zonos-cart-restricted-items.js

@@ -7,9 +7,15 @@ import { classes } from "../../../utils/classes";
 import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
 export class ZonosCartRestrictedItems {
     constructor() {
+        /**
+         * This is to hide the section when the parent collapse on mobile
+         */
         this.hide = false;
         this.errorImages = [];
         this.internalCollapsed = true;
+        /**
+         * Should do something after the component is loaded
+         */
         this.firstRender = true;
     }
     componentDidLoad() {

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

@@ -5,8 +5,9 @@ import { translate } from "../../../store/translationStore";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
 export class ZonosCartSubtotal {
     constructor() {
-        this.submitBtnType = undefined;
-        this.submitBtnColor = undefined;
+        /**
+         * Loading state for apply promo code button
+         */
         this.loading = false;
     }
     render() {

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

@@ -25,6 +25,20 @@ import SuccessIcon from "./assets/SuccessIcon.svg";
 const MAX_RETRIES = 30;
 export class ZonosCheckoutFinish {
     constructor() {
+        /**
+         * The border radius style of the dialog
+         */
+        this.borderRadius = 'ROUNDED';
+        this.isLoading = true;
+        this.notificationType = 'success';
+        this.notificationTitle = '';
+        this.notificationMessages = [];
+        this.notificationActionText = translate('Keep shopping');
+        this.order = null;
+        /**
+         * Is waiting to redirect to a different page
+         */
+        this.isWaitingToRedirect = true;
         this.pullOrder = async () => {
             var _a, _b;
             const checkoutSessionId = storageStore.checkoutSessionId;
@@ -355,16 +369,6 @@ export class ZonosCheckoutFinish {
             };
             localStorage.setItem('zonos--placed-order-info', JSON.stringify(placedOrderTime));
         };
-        this.borderRadius = 'ROUNDED';
-        this.storybookForceStatus = undefined;
-        this.overrideNotification = undefined;
-        this.isLoading = true;
-        this.notificationType = 'success';
-        this.notificationTitle = '';
-        this.notificationMessages = [];
-        this.notificationActionText = translate('Keep shopping');
-        this.order = null;
-        this.isWaitingToRedirect = true;
     }
     componentDidLoad() {
         // Reset local storage for placed order info

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-footer/zonos-checkout-footer.js

@@ -9,8 +9,10 @@ import Globe from "./assets/globe.svg";
 import ZonosIcon from "./assets/zonosIcon.svg";
 export class ZonosCheckoutFooter {
     constructor() {
+        /**
+         * Override mobile mode
+         */
         this.mobile = false;
-        this.dataTheme = undefined;
         this.showLanguageDialog = false;
         this.isMobile = false;
     }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.js

@@ -17,6 +17,31 @@ import CheckmarkLineIcon from "./assets/CheckmarkLineIcon.svg";
 import RemoveLineIcon from "./assets/RemoveLineIcon.svg";
 export class ZonosCheckoutPayment {
     constructor() {
+        /**
+         * Whether or not the continue button is loading
+         */
+        this.continueLoading = false;
+        /**
+         * Whether or not the checkout is in mobile mode
+         */
+        this.isMobile = false;
+        /**
+         * Show error banner when the form is not complete, and user clicks on `Submit` button
+         * @default false
+         */
+        this.showErrorBanner = false;
+        /**
+         * Show payment error banner when the payment is failed
+         */
+        this.hasStripePaymentError = false;
+        /**
+         * Error message when the staging order creation is failed
+         */
+        this.stagingOrderCreateErrorMessage = '';
+        /**
+         * Internal state to handle continue loading
+         */
+        this.internalContinueLoading = this.continueLoading;
         this.handleValidate = () => {
             var _a;
             return !!((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
@@ -83,15 +108,6 @@ export class ZonosCheckoutPayment {
             // continue to the next step
             cartStoreNextStep();
         };
-        this.submitBtnType = undefined;
-        this.continueLoading = false;
-        this.submitBtnColor = undefined;
-        this.isMobile = false;
-        this.overridePrimaryColor = undefined;
-        this.showErrorBanner = false;
-        this.hasStripePaymentError = false;
-        this.stagingOrderCreateErrorMessage = '';
-        this.internalContinueLoading = this.continueLoading;
     }
     continueLoadingWatcher() {
         this.internalContinueLoading = this.continueLoading;

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-empty-state-payment/zonos-empty-state-payment.js

@@ -6,7 +6,9 @@ import PaymentEmptyStateDarkIcon from "./assets/PaymentEmptyStateDarkIcon.svg";
 import PaymentEmptyStateLightIcon from "./assets/PaymentEmptyStateLightIcon.svg";
 export class ZonosEmptyStatePayment {
     constructor() {
-        this.emptyStateText = undefined;
+        /**
+         * Theme color of the icon
+         */
         this.theme = 'LIGHT';
     }
     render() {

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

@@ -57,6 +57,89 @@ export class ZonosCheckout {
          */
         this.onChangeLocaleListener = () => { };
         this.isRedirectAfterOrder = false;
+        /**
+         * Preview checkout without needing to click on the button. This would be useful for demo purpose
+         */
+        this.preview = false;
+        /**
+         * Hidden mode to hide the checkout modal in preview mode
+         */
+        this.hiddenMode = false;
+        /**
+         * Flag to determine if the checkout is on mobile
+         */
+        this.mobile = false;
+        /**
+         * Default address to use for the checkout (preview mode)
+         */
+        this.defaultAddress = [];
+        /**
+         * Force dialog to be open
+         */
+        this.forceDialogOpen = false;
+        this.defaultAddressParams = [];
+        /**
+         * List of addresses from authenticated checkout customer
+         */
+        this.defaultCustomerProfileAddress = [];
+        /**
+         * Customer profile of the authenticated checkout user
+         */
+        this.customerProfile = null;
+        /**
+         * Whether or not the dialog is open
+         */
+        this.open = this.forceDialogOpen;
+        /**
+         * Whether or not the overlay is loading (for waiting for fetching test variance)
+         */
+        this.isOverlayLoading = false;
+        /**
+         * The stripe instance
+         */
+        this.stripe = window.Zonos.stripe;
+        /**
+         * Whether or not the submit button is loading in `step` component
+         */
+        this.submitLoading = false;
+        // default to collapse the review on mobile
+        this.collapseReviewMobile = true;
+        /**
+         * Determine if we should skip and not hijack the Checkout button click event
+         * Sometimes stripe or our api has error, we don't want to hijack the click event.
+         */
+        this.isAttachError = false;
+        this.isMobile = false;
+        this.isIframed = false;
+        this.isLegacyCheckout = window.Zonos.isLegacyCheckout;
+        /**
+         * Confirm dialog open state
+         */
+        this.confirmDialogOpen = false;
+        /**
+         * Cart expired state to show the cart expired dialog
+         */
+        this.isCartExpired = false;
+        /**
+         * Pay in USD confirm dialog open state
+         */
+        this.payInUsdConfirmDialogOpen = false;
+        /**
+         * Error message from onInventoryCheck callback
+         */
+        this.inventoryCheckErrorMessage = null;
+        /**
+         * Placed order info to show the confirm dialog to the user
+         */
+        this.placedOrderInfo = null;
+        /**
+         * Client secret value
+         */
+        this.clientSecret = stripeStore.clientSecret;
+        /**
+         * Client secret value of customer session (use to load saved payment method and render saved consent)
+         */
+        this.stripeCustomerSessionClientSecret = stripeStore.stripeCustomerSessionClientSecret;
         this.applyStripeTheme = async () => {
             var _a, _b, _c, _d;
             const theme = ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) || zonosStore.appearance.theme;
@@ -358,34 +441,6 @@ export class ZonosCheckout {
             url.searchParams.delete('zonosVariantTest');
             window.history.replaceState({}, '', url.toString());
         };
-        this.appearanceSettingsOverride = undefined;
-        this.preview = false;
-        this.hiddenMode = false;
-        this.mobile = false;
-        this.overrideStagingMode = undefined;
-        this.defaultAddress = [];
-        this.forceDialogOpen = false;
-        this.defaultAddressParams = [];
-        this.defaultCustomerProfileAddress = [];
-        this.customerProfile = null;
-        this.open = this.forceDialogOpen;
-        this.isOverlayLoading = false;
-        this.stripe = window.Zonos.stripe;
-        this.submitLoading = false;
-        this.collapseReviewMobile = true;
-        this.isAttachError = false;
-        this.isMobile = false;
-        this.isIframed = false;
-        this.zonosReviewRef = undefined;
-        this.storybookPaymentStatusOverride = undefined;
-        this.isLegacyCheckout = window.Zonos.isLegacyCheckout;
-        this.confirmDialogOpen = false;
-        this.isCartExpired = false;
-        this.payInUsdConfirmDialogOpen = false;
-        this.inventoryCheckErrorMessage = null;
-        this.placedOrderInfo = null;
-        this.clientSecret = stripeStore.clientSecret;
-        this.stripeCustomerSessionClientSecret = stripeStore.stripeCustomerSessionClientSecret;
     }
     /**
      * Init cart info handler event

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.js

@@ -11,6 +11,60 @@ import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
 import { taxIdValidationResult } from "../../../utils/taxIdValidationResult";
 export class ZonosCustomerInfo {
     constructor() {
+        /**
+         * Whether or not the continue button is loading
+         */
+        this.continueLoading = false;
+        /**
+         * Whether or not the dialog is open
+         */
+        this.isMobile = false;
+        /**
+         * Default address to use for the checkout (preview mode)
+         */
+        this.defaultAddress = [];
+        /**
+         * Whether to override custom address form to be always visible
+         */
+        this.shouldUseCustomAddressFormOverride = false;
+        /**
+         * Due to Stripe's validation difficulties, we need to show a banner when users hasn't filled out the form correctly but clicked continue
+         */
+        this.showErrorBanner = false;
+        this.shippingCountry = '';
+        this.isCheckingForRestrictedItems = false;
+        /**
+         * Whether or not the address is being validated
+         */
+        this.isValidatingAddress = false;
+        /**
+         * Whether or not the tax id input is invalid
+         */
+        this.taxIdErrorMessage = '';
+        /**
+         * Whether or not the shipping address contains invalid characters
+         */
+        this.invalidShippingCharacterList = null;
+        /**
+         * Whether or not the shipping address contains invalid characters
+         */
+        this.invalidBillingCharacterList = null;
+        /**
+         * Handler for the dialog close button
+         */
+        this.openAddressValidationDialog = false;
+        /**
+         * Whether or not the custom address form is enabled
+         */
+        this.shouldEnabledCustomAddress = false;
+        /**
+         * Handler for the email error state
+         */
+        this.isEmailError = false;
+        /**
+         * Whether or not the custom address form is used
+         */
+        this.recordedFormTypeUsed = false;
         /**
          * Handler for invalid characters in the address
          */
@@ -241,23 +295,6 @@ export class ZonosCustomerInfo {
             // Render Stripe address component by default
             return (h("zonos-address", { defaultAddress: defaultAddress, taxIdErrorMessage: this.taxIdErrorMessage, titleText: translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }));
         };
-        this.continueLoading = false;
-        this.submitBtnType = undefined;
-        this.submitBtnColor = undefined;
-        this.isMobile = false;
-        this.defaultAddress = [];
-        this.shouldUseCustomAddressFormOverride = false;
-        this.showErrorBanner = false;
-        this.shippingCountry = '';
-        this.isCheckingForRestrictedItems = false;
-        this.isValidatingAddress = false;
-        this.taxIdErrorMessage = '';
-        this.invalidShippingCharacterList = null;
-        this.invalidBillingCharacterList = null;
-        this.openAddressValidationDialog = false;
-        this.shouldEnabledCustomAddress = false;
-        this.isEmailError = false;
-        this.recordedFormTypeUsed = false;
     }
     watchShowErrorBanner() {
         // start validate on typing after error banner is shown, and hide it if the form is complete

package/dist/collection/components/checkout/zonos-checkout/zonos-review/zonos-review.js

@@ -12,7 +12,15 @@ import ChevronDownIcon from "./assets/ChevronDownIcon.svg";
 import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
 export class ZonosReview {
     constructor() {
+        /**
+         * Whether or not the component is being rendered with mobile styles
+         */
         this.mobile = false;
+        /**
+         * Whether or not to show the collapse icon
+         * This is controled from the collapsed state of the zonos-collapse component
+         * to show the collapse icon
+         */
         this.collapsed = false;
         this.isMobile = false;
     }

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js

@@ -12,6 +12,26 @@ import { submitGtag } from "../../../utils/submitGtag";
 import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
 export class ZonosShipping {
     constructor() {
+        /**
+         * Whether or not the continue button is loading
+         */
+        this.continueLoading = false;
+        this.selectedShippingMethod = null;
+        this.collapsedDAPOptions = true;
+        /**
+         * Whether or not the user is selecting a shipping method
+         */
+        this.isSelecting = false;
+        /**
+         * Show error banner when the form is not complete, and user clicks on `Submit` button
+         * @default false
+         */
+        this.showErrorBanner = false;
+        this.serviceLevelsDDP = [];
+        this.serviceLevelsDAP = [];
+        this.serviceLevelsOther = [];
+        this.serviceLevelsAll = [];
+        this.displayBaseCurrency = false;
         this.handleRadioSelected = async (e) => {
             var _a;
             this.selectedShippingMethod = e.detail;
@@ -150,18 +170,6 @@ export class ZonosShipping {
                 });
             }
         };
-        this.continueLoading = false;
-        this.submitBtnColor = undefined;
-        this.submitBtnType = undefined;
-        this.selectedShippingMethod = null;
-        this.collapsedDAPOptions = true;
-        this.isSelecting = false;
-        this.showErrorBanner = false;
-        this.serviceLevelsDDP = [];
-        this.serviceLevelsDAP = [];
-        this.serviceLevelsOther = [];
-        this.serviceLevelsAll = [];
-        this.displayBaseCurrency = false;
     }
     componentWillLoad() {
         this.preselectFirstShippingMethod();

package/dist/collection/components/common/zonos-badge/zonos-badge.js

@@ -5,14 +5,36 @@ import { classes } from "../../utils/classes";
 import RemoveLineIcon from "./assets/RemoveLineIcon.svg";
 export class ZonosBadge {
     constructor() {
+        /**
+         * Whether or not the badge is bold
+         * @default false
+         */
         this.bold = false;
+        /**
+         * The color of the badge
+         * @default 24
+         */
         this.badgeColor = 'gray';
-        this.icon = undefined;
+        /**
+         * Position the icon to the right when icon is specified
+         * @default false
+         */
         this.iconRight = false;
+        /**
+         * The size of the badge
+         * @default 'default'
+         */
         this.size = 'default';
+        /**
+         * Whether or not the badge is rounded
+         * @default false
+         */
         this.rounded = false;
+        /**
+         * Whether or not the badge is loading
+         * @default false
+         */
         this.loading = false;
-        this.dismissHandler = undefined;
     }
     render() {
         return (h(Host, { key: 'd8a6a11f10c36a272ecdb52c54919f9ad45e1a9a', class: classes(['zonos--elements zonos--badge']), style: {

package/dist/collection/components/common/zonos-banner/zonos-banner.js

@@ -3,15 +3,16 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 export class ZonosBanner {
     constructor() {
+        /**
+         * Whether or not the button has content
+         */
+        this.hasContent = false;
         /**
          * Detect if the button has an content
          */
         this.handleSlotChange = () => {
             this.hasContent = true;
         };
-        this.bannerTitle = undefined;
-        this.intent = undefined;
-        this.hasContent = false;
     }
     render() {
         const renderContent = ({ color }) => {