@zonos/elements 1.3.204 → 1.3.206

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
+import { r as registerInstance, h, H as Host } from './index-5ea9f81d.js';
+import { d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
 import { c as classes } from './classes-0d95c529.js';
 import './VarianceTest-fef2d958.js';
 
@@ -14,14 +14,36 @@ const ZonosBadgeStyle0 = zonosBadgeCss;
 const ZonosBadge = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * 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/esm/zonos-banner.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
+import { r as registerInstance, h, H as Host } from './index-5ea9f81d.js';
+import { d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
 import { c as classes } from './classes-0d95c529.js';
 import './VarianceTest-fef2d958.js';
 
@@ -9,15 +9,16 @@ const ZonosBannerStyle0 = zonosBannerCss;
 const ZonosBanner = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * 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 }) => {

package/dist/esm/zonos-button_3.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-a457c60c.js';
-import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-5ea9f81d.js';
+import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './helpers-2f6955b1.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
+import { g as getBorderRadius } from './getBorderRadius-b18c924f.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
-import { i as isDarkColor } from './isDarkColor-31dd7dff.js';
+import { i as isDarkColor } from './isDarkColor-d8bb8659.js';
 import { s as styles } from './styles-6fc2fad9.js';
 import './VarianceTest-fef2d958.js';
 
@@ -37,6 +37,75 @@ const ZonosButton = class {
          * Inherited attributes from the host element
          */
         this.inheritedAttributes = {};
+        /**
+         * Whether or not the button is disabled
+         * @note Prop should not conflict name with native html attribute if the prop is also affected by another prop.
+         * 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.
+         * And `disabled` prop is not an only factor to determine the component is disabled. isLoading @prop() also affect that.
+         * <Host> is also referred to a component itself, if disabled prop is true, the `zonos-button` will have disabled attribute.
+         *  So let's say when the loading state is true, and the component consume the zonos-button doesn't pass the disabled prop down.
+         * It accidentally turns the disabled prop on even thought the disabled state is not changed from the outside.
+         */
+        this.isDisabled = false;
+        /**
+         * The icon element to display
+         * @default null
+         */
+        this.icon = null;
+        /**
+         * Whether or not the icon is on the right
+         * @default false
+         */
+        this.iconRight = false;
+        /**
+         * The size of the button
+         * @default 'sm'
+         */
+        this.size = 'sm';
+        /**
+         * The variance of the button
+         * @note If the button `variant` is set to 'standard', backgroundColor will be disregarded
+         * @default standard
+         */
+        this.variant = 'standard';
+        /**
+         * Whether or not the button has a background
+         * @default false
+         */
+        this.noBackground = false;
+        /**
+         * Whether or not the button has a box shadow
+         */
+        this.withBoxShadow = false;
+        /**
+         * Whether or not the button has a left padding
+         */
+        this.noPaddingLeft = false;
+        /**
+         * Whether or not the button has a right padding
+         */
+        this.noPaddingRight = false;
+        /**
+         * Whether or not the button is loading
+         */
+        this.loading = false;
+        /**
+         * The content alignment within the button
+         * @default 'center'
+         */
+        this.justifyContent = 'center';
+        /**
+         * Whether or not the button text color is bold
+         */
+        this.bold = false;
+        /**
+         * Whether or not the button has an icon
+         */
+        this.hasIcon = !!this.icon;
+        /**
+         * Whether or not the button has content
+         */
+        this.hasContent = false;
         /**
          * Detect if the button has an content
          */
@@ -107,24 +176,6 @@ const ZonosButton = class {
                 }
             }
         };
-        this.buttonColor = 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.withBoxShadow = false;
-        this.noPaddingLeft = false;
-        this.noPaddingRight = false;
-        this.loading = false;
-        this.justifyContent = 'center';
-        this.bold = false;
-        this.theme = undefined;
-        this.hasIcon = !!this.icon;
-        this.hasContent = false;
     }
     /**
      * Detect if the icon changes and update the state accordingly
@@ -193,9 +244,20 @@ const ZonosIconStyle0 = zonosIconCss;
 const ZonosIcon = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Determines if the icon should be auto height instead of square
+         * @default false
+         */
         this.autoHeight = false;
+        /**
+         * Color of the SVG
+         * @default 'gray-1000'
+         */
         this.iconColor = 'gray-1000';
-        this.content = undefined;
+        /**
+         * The size of the icon
+         * @default 24
+         */
         this.size = 24;
     }
     render() {
@@ -223,8 +285,11 @@ const ZonosSpinnerStyle0 = zonosSpinnerCss;
 const ZonosSpinner = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * The size of the spinner
+         * @default 32
+         */
         this.size = 32;
-        this.spinnerColor = undefined;
     }
     render() {
         if (!this.el.shadowRoot) {

package/dist/esm/zonos-card.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
+import { r as registerInstance, h, H as Host } from './index-5ea9f81d.js';
+import { d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
+import { g as getBorderRadius } from './getBorderRadius-b18c924f.js';
 import './VarianceTest-fef2d958.js';
 
 const zonosCardCss = ":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 .styled-card{border:var(--zonos-elements-border);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-6));padding:var(--spacing, 24px);text-align:left;background-color:var(--zonos--background-color);overflow:hidden}:host .styled-card hr{margin-left:calc(var(--spacing, 24px) * -1);margin-right:calc(var(--spacing, 24px) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, 24px);border-bottom:var(--zonos-elements-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, 24px) * -1);padding:var(--spacing, 24px);border-top:var(--zonos-elements-border);background:var(--zonos-elements-surface-color-secondary);margin-top:var(--spacing, 24px);border-bottom-left-radius:var(--zonos-elements-radius-8);border-bottom-right-radius:var(--zonos-elements-radius-8);height:var(--footerHeight)}";
@@ -10,13 +10,14 @@ const ZonosCardStyle0 = zonosCardCss;
 const ZonosCard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.actions = undefined;
-        this.backgroundColor = undefined;
+        /**
+         * The border radius of the card
+         * @default 6
+         */
         this.borderRadius = 6;
-        this.footerActions = undefined;
-        this.footerContent = undefined;
-        this.footerHeight = undefined;
-        this.label = undefined;
+        /**
+         * The spacing to apply between elements in the card
+         */
         this.spacing = '24px';
     }
     render() {

package/dist/esm/zonos-cart-items_14.entry.js

@@ -1,14 +1,14 @@
-import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-a457c60c.js';
-import { e as cartStore, A as cartStoreHasOneEligibleItem, B as stripeStoreApplyPromoCode, C as stripeStoreRemovePromoCode, d as stripeStore, y as stripeStoreReset, c as stripeStoreRetrievePayment, t as trackConversionEvent, D as stripeStoreResetPromoCode, E as stripeStoreMessageBasedOnStatus, r as cartStoreNextStep, F as stripeStoreTranslateAddressToLatin, G as cartStoreUpdateSelectedShippingOption, H as cartStoreGetShippingTransitInfo, I as sortServiceLevelOptionsByAmount, J as cartStoreGetMethod } from './cart-db61eb95.js';
-import { d as currencyFormat, t as translate, s as storageStore, l as localizationStore } from './localization-bf7224aa.js';
+import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-5ea9f81d.js';
+import { e as cartStore, A as cartStoreHasOneEligibleItem, B as stripeStoreApplyPromoCode, C as stripeStoreRemovePromoCode, c as stripeStore, y as stripeStoreReset, d as stripeStoreRetrievePayment, t as trackConversionEvent, D as stripeStoreResetPromoCode, E as stripeStoreMessageBasedOnStatus, r as cartStoreNextStep, F as stripeStoreTranslateAddressToLatin, G as cartStoreUpdateSelectedShippingOption, H as cartStoreGetShippingTransitInfo, I as sortServiceLevelOptionsByAmount, J as cartStoreGetMethod } from './cart-5835676d.js';
+import { d as currencyFormat, t as translate, s as storageStore, l as localizationStore } from './localization-4c7f64e8.js';
 import { c as classes } from './classes-0d95c529.js';
-import { s as submitGtag, c as paypalStoreReset, b as paypalStore, i as isContrastColor } from './paypal-2e0ffb07.js';
-import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
+import { s as submitGtag, c as paypalStoreReset, b as paypalStore, i as isContrastColor } from './paypal-b4f106be.js';
+import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
 import { h as handleFetch, l as log, s as sendErrorLog, j as jsonParse, g as getIsTestMode, d as allLogs, i as isCheckoutMobile, b as logError, a as getIsStagingMode } from './handleFetch-621e45bc.js';
 import { c as createCustomEvent } from './createCustomEvent-58159025.js';
-import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
+import { g as getBorderRadius } from './getBorderRadius-b18c924f.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
-import { i as isDarkColor, t as tinycolor } from './isDarkColor-31dd7dff.js';
+import { i as isDarkColor, t as tinycolor } from './isDarkColor-d8bb8659.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
 import { s as shouldRenderTaxIdInput, c as containsNonLatinChars } from './shouldRenderTaxIdInput-8bc112bb.js';
 import { e as euCountryCodes } from './TaxId-50d72254.js';
@@ -1108,9 +1108,15 @@ const ZonosCartRestrictedItemsStyle0 = zonosCartRestrictedItemsCss;
 const ZonosCartRestrictedItems = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * 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() {
@@ -1167,8 +1173,9 @@ const ZonosCartSubtotalStyle0 = zonosCartSubtotalCss;
 const ZonosCartSubtotal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.submitBtnType = undefined;
-        this.submitBtnColor = undefined;
+        /**
+         * Loading state for apply promo code button
+         */
         this.loading = false;
     }
     render() {
@@ -1276,6 +1283,20 @@ const ZonosCheckoutFinish = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.closeClick = createEvent(this, "closeClick", 7);
+        /**
+         * 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;
@@ -1606,16 +1627,6 @@ const ZonosCheckoutFinish = class {
             };
             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
@@ -1687,8 +1698,10 @@ const ZonosCheckoutFooterStyle0 = zonosCheckoutFooterCss;
 const ZonosCheckoutFooter = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Override mobile mode
+         */
         this.mobile = false;
-        this.dataTheme = undefined;
         this.showLanguageDialog = false;
         this.isMobile = false;
     }
@@ -1774,6 +1787,31 @@ const ZonosCheckoutPayment = class {
         this.continueClicked = createEvent(this, "continueClicked", 7);
         this.paypalSessionFailed = createEvent(this, "paypalSessionFailed", 7);
         this.paypalSessionDone = createEvent(this, "paypalSessionDone", 7);
+        /**
+         * 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);
@@ -1840,15 +1878,6 @@ const ZonosCheckoutPayment = class {
             // 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;
@@ -1984,6 +2013,14 @@ const ZonosCheckoutProgressTabsStyle0 = zonosCheckoutProgressTabsCss;
 const ZonosCheckoutProgressTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Color of the tab progress bar and label, override the secondary color of the appearance settings
+         */
+        this.tabColor = null;
+        /**
+         * Background color of the parent that's wrapped around the tab progress bar
+         */
+        this.backgroundColor = null;
         /**
          * The total number of steps that's done
          */
@@ -2007,8 +2044,6 @@ const ZonosCheckoutProgressTabs = class {
                 .slice(0, currentTab.index - 1)
                 .every(tab => tab.isDone);
         };
-        this.tabColor = null;
-        this.backgroundColor = null;
     }
     /**
      * Set the tab items data. This is to be used in storybook
@@ -2085,22 +2120,47 @@ const ZonosConfirmDialog = class {
         registerInstance(this, hostRef);
         this.confirmClicked = createEvent(this, "confirmClicked", 7);
         this.cancelClicked = createEvent(this, "cancelClicked", 7);
-        this.clickOutsideDialogHandler = (event) => {
-            if (event.target === event.currentTarget && !this.noClickOutside) {
-                this.closeDialogHandler();
-            }
-        };
+        /**
+         * Dialog title text
+         * @default "Are you sure?"
+         */
         this.dialogTitle = translate('Are you sure?');
+        /**
+         * Dialog intent (for icon and button color)
+         * @default "info"
+         */
         this.dialogIntent = 'info';
+        /**
+         * Dialog subtitle text
+         * @default null No subtitle
+         */
         this.dialogSubtitle = null;
-        this.submitBtnColor = undefined;
-        this.dialogConfirmBtnText = undefined;
+        /**
+         * Dialog width
+         * @default 350 px
+         */
         this.dialogWidth = 350;
-        this.dialogCancelBtnText = undefined;
+        /**
+         * Type of dialog
+         * - "alert" - Only confirm button
+         * - "confirm" - Both Confirm and cancel buttons
+         * @default "confirm"
+         */
         this.dialogType = 'confirm';
+        /**
+         * Whether or not the dialog is open
+         */
         this.isMobile = false;
-        this.dialogOpen = undefined;
+        /**
+         * Whether or not to close the dialog when clicking outside of it
+         * @default false
+         */
         this.noClickOutside = false;
+        this.clickOutsideDialogHandler = (event) => {
+            if (event.target === event.currentTarget && !this.noClickOutside) {
+                this.closeDialogHandler();
+            }
+        };
     }
     handleKeyDown(ev) {
         if (ev.key === 'Escape') {
@@ -2284,6 +2344,60 @@ const ZonosCustomerInfo = class {
         registerInstance(this, hostRef);
         this.continueClicked = createEvent(this, "continueClicked", 7);
         this.testContinueClicked = createEvent(this, "testContinueClicked", 7);
+        /**
+         * 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
          */
@@ -2514,23 +2628,6 @@ const ZonosCustomerInfo = class {
             // 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
@@ -2622,8 +2719,14 @@ const ZonosLoadingOverlayStyle0 = zonosLoadingOverlayCss;
 const ZonosLoadingOverlay = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Whether or not the overlay is open
+         * @default false
+         */
         this.open = false;
-        this.spinnerColor = undefined;
+        /**
+         * Spinner size (optional, default 40)
+         */
         this.size = 40;
     }
     render() {
@@ -2638,14 +2741,14 @@ const ZonosRestStateStyle0 = zonosRestStateCss;
 const ZonosRestState = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Whether or not the image failed to load
+         */
+        this.isErrorImageLoad = false;
         this.getImageRestState = () => {
             const imageSrc = getAssetPath(`./assets/${this.restStateType}.png`);
             return imageSrc;
         };
-        this.restStateSubtitle = undefined;
-        this.restStateTitle = undefined;
-        this.restStateType = undefined;
-        this.isErrorImageLoad = false;
     }
     render() {
         const imageUrl = this.getImageRestState();
@@ -2669,7 +2772,15 @@ const ZonosReviewStyle0 = zonosReviewCss;
 const ZonosReview = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * 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;
     }
@@ -2742,6 +2853,26 @@ const ZonosShipping = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.continueClicked = createEvent(this, "continueClicked", 7);
+        /**
+         * 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;
@@ -2880,18 +3011,6 @@ const ZonosShipping = class {
                 });
             }
         };
-        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();