@zonos/elements 1.3.158 → 1.3.160

package/dist/scripts/index.d.ts

@@ -3,6 +3,85 @@ import { StripeConstructor, StripeAddressElementChangeEvent, ContactOption, Paym
 import { z } from 'zod';
 import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 
+type CustomEventMap = {
+    legacyCheckoutError: string;
+    'zonos-checkout-success': {
+        message: string;
+    };
+};
+
+declare const _envClientSchema: z.ZodObject<{
+    NEXT_PUBLIC_FLAG_URL: z.ZodString;
+    NEXT_PUBLIC_RELEASE_DATE: z.ZodString;
+    NEXT_PUBLIC_ZONOS_API_KEY: z.ZodString;
+    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: z.ZodString;
+    NEXT_PUBLIC_ZONOS_CDN_URL: z.ZodString;
+    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: z.ZodString;
+    NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL: z.ZodString;
+    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: z.ZodString;
+    NEXT_PUBLIC_ZONOS_ROUTE_URL: z.ZodString;
+    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    NEXT_PUBLIC_FLAG_URL: string;
+    NEXT_PUBLIC_RELEASE_DATE: string;
+    NEXT_PUBLIC_ZONOS_API_KEY: string;
+    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: string;
+    NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: string;
+    NEXT_PUBLIC_ZONOS_ROUTE_URL: string;
+    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: string;
+}, {
+    NEXT_PUBLIC_FLAG_URL: string;
+    NEXT_PUBLIC_RELEASE_DATE: string;
+    NEXT_PUBLIC_ZONOS_API_KEY: string;
+    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: string;
+    NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: string;
+    NEXT_PUBLIC_ZONOS_ROUTE_URL: string;
+    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: string;
+}>;
+interface Env extends z.infer<typeof _envClientSchema> {
+}
+
+/* eslint-disable no-relative-import-paths/no-relative-import-paths */
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface Document {
+    addEventListener<K extends keyof CustomEventMap>(
+      type: K,
+      listener: (this: Document, ev: CustomEvent<CustomEventMap[K]>) => void,
+    ): void;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface Window {
+    Stripe?: StripeConstructor;
+    Zonos: Zonos;
+    /**
+     * A flag to determine if the current page is a BigCommerce page
+     */
+    bcConfig?: unknown;
+    /**
+     * This flag would be set to true if zonosQaUrl is present in the query params and preview script loadZonos.js is injected to DOM
+     */
+    isZonosPreview?: boolean;
+    /**
+     * A flag to determine if the current page is a BigCommerce page
+     */
+    stencilBootstrap?: unknown;
+  }
+
+  namespace NodeJS {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+    interface ProcessEnv extends Env {}
+  }
+}
+
 declare const adjustmentSource: {
     readonly ApiRequest: "API_REQUEST";
     readonly PromoCode: "PROMO_CODE";
@@ -965,6 +1044,153 @@ type GetOrderQuery = {
     } | null;
 };
 
+type TranslatedText = {
+    [key: string]: string;
+};
+type EnteredInfo = {
+    city: string;
+    country: CountryCode;
+    email: string;
+    line1: string;
+    line2: string;
+    name: string;
+    phone: string;
+    postal_code: string;
+    state: string;
+};
+type ValidateAddressFields = Omit<StripeAddressElementChangeEvent['value']['address'], 'country'> & {
+    name: string;
+};
+type TranslatedAddressObject = {
+    [key in keyof ValidateAddressFields]?: TranslatedText;
+};
+
+type SubmitEventData = {
+    billingAddress: Record<keyof TranslatedAddressObject, string> | null;
+    shippingAddress: Record<keyof TranslatedAddressObject, string>;
+};
+
+declare const colorPrefixes: readonly ["blue", "cyan", "green", "orange", "purple", "red", "gray", "glass"];
+declare const colorContrasts: readonly ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+type ColorContrast = (typeof colorContrasts)[number];
+type ColorPrefix = (typeof colorPrefixes)[number];
+type Color = 'gray-0' | 'gray-50' | 'glass-0' | 'glass-50' | `${ColorPrefix}-${ColorContrast}` | 'gray-1000' | 'glass-1100' | 'glass-1200';
+declare const checkboxColorPrefix: readonly ["blue", "cyan", "green", "orange", "purple", "red", "gray"];
+type CheckboxColorPrefix = (typeof checkboxColorPrefix)[number];
+
+type BannerIntent = 'default' | 'error' | 'success' | 'warning' | 'info';
+
+declare const textOptions: {
+    readonly pageHeader: {
+        readonly label: "Page Header (3XL) · 34px (2.125rem)";
+        readonly size: "3xl";
+        readonly tag: "h2";
+        readonly weight: 900;
+    };
+    readonly secondaryPageHeader: {
+        readonly label: "Secondary Page Header (3XL) • 34px, 500 \"Medium\"";
+        readonly size: "3xl";
+        readonly tag: "h2";
+        readonly weight: 500;
+    };
+    readonly header: {
+        readonly label: "Header (2XL) · 28px (1.75rem)";
+        readonly size: "2xl";
+        readonly tag: "h3";
+        readonly weight: 700;
+    };
+    readonly descriptionHeader: {
+        readonly label: "Description Header (2XL) · 28px (1.75rem)";
+        readonly size: "2xl";
+        readonly tag: "h3";
+        readonly weight: 700;
+    };
+    readonly title: {
+        readonly label: "Title (XL) • 22px (1.375rem)";
+        readonly size: "xl";
+        readonly tag: "h4";
+        readonly weight: 600;
+    };
+    readonly boldSubheader: {
+        readonly label: "Bold Subheader (L) • 18px (1.125rem)";
+        readonly size: "l";
+        readonly tag: "h5";
+        readonly weight: 700;
+    };
+    readonly semiBoldSubheader: {
+        readonly label: "Semi Bold Subheader (L / H4) • 18px (1.125rem)";
+        readonly size: "l";
+        readonly tag: "h5";
+        readonly weight: 600;
+    };
+    readonly subheader: {
+        readonly label: "Subheader (L) • 18px (1.125rem)";
+        readonly size: "l";
+        readonly tag: "h5";
+        readonly weight: 500;
+    };
+    readonly boldLabel: {
+        readonly label: "Bold Label (Base) • 14px (.875rem)";
+        readonly size: "base";
+        readonly tag: "span";
+        readonly weight: 700;
+    };
+    readonly semiBoldLabel: {
+        readonly label: "Semi Bold Label (Base) • 14px (.875rem)";
+        readonly size: "base";
+        readonly tag: "span";
+        readonly weight: 600;
+    };
+    readonly label: {
+        readonly label: "Label (Base) • 14px (.875rem)";
+        readonly size: "base";
+        readonly tag: "span";
+        readonly weight: 500;
+    };
+    readonly body: {
+        readonly label: "Body (Base) • 14px (.875rem)";
+        readonly size: "base";
+        readonly tag: "span";
+        readonly weight: 400;
+    };
+    readonly smallHeader: {
+        readonly label: "Small header (S) • 12px (.75rem)";
+        readonly size: "s";
+        readonly tag: "span";
+        readonly weight: 600;
+    };
+    readonly caption: {
+        readonly label: "Caption (S) • 12px (.75rem)";
+        readonly size: "s";
+        readonly tag: "span";
+        readonly weight: 400;
+    };
+    readonly hintText: {
+        readonly label: "Hint text (XS) • 10px (.625rem)";
+        readonly size: "xs";
+        readonly tag: "span";
+        readonly weight: 400;
+    };
+};
+type TextOptions = typeof textOptions;
+type Size = TextOptions[keyof TextOptions]['size'];
+type Type = keyof TextOptions;
+type FontWeight = TextOptions[keyof TextOptions]['weight'];
+
+type StripeStoreContactOption = {
+    address: {
+        city: string;
+        country: string;
+        line1: string;
+        line2?: string;
+        postal_code: string;
+        state: string;
+    };
+    email: string;
+    name: string;
+    phone?: string;
+};
+
 type TabItem = {
     index: number;
     isDone: boolean;
@@ -1003,644 +1229,81 @@ type CartItem = {
     sku?: string;
 };
 
-type CalculateLandedCostAdjustmentInput = {
-    amount: number;
-    name?: string | null;
-    productId: string | null;
-    promoCode?: string | null;
-    sku: string | null;
-    type: LandedCostAdjustmentType;
-};
-type Extensions = {
-    [key: string]: unknown;
-} & {
-    rule?: {
-        description: string;
-        id: string;
-        name: string;
-    };
-    ruleMessageType?: 'CUSTOM' | 'DEFAULT';
-};
-type ApiError = {
-    extensions?: Extensions | null;
+type NotificationInit = {
     message: string;
-};
-type CalculateLandedCostRequest = {
-    billingAddress: {
-        addressLine1: string;
-        addressLine2?: string | undefined;
-        city: string;
-        country: CountryCode;
-        postalCode: string;
-        state: string;
-    };
-    billingContact: {
-        firstName: string;
-        lastName: string;
-        phone: string;
-    };
-    checkoutSessionId: string;
-    contact: {
-        email?: string;
-        firstName: string;
-        lastName: string;
-        phone: string;
-    };
     /**
-     * When this is set, the created quote will not be shown on the Quote List page in the Zonos Dashboard.
+     * Time in milliseconds
+     * @default 4000
      */
-    isTest?: boolean;
-    items: CartItem[];
-    landedCostAdjustments?: CalculateLandedCostAdjustmentInput[];
-    metadata?: {
-        key: string;
-        value: string;
-    }[];
+    timeout?: number;
     /**
-     * TaxId that the some destination countries require for the shipment.
+     * Type of notification
+     * @default 'success'
      */
-    shipToTaxId?: string;
-    shippingAddress: {
-        addressLine1: string;
-        addressLine2?: string | undefined;
-        city: string;
-        country: CountryCode;
-        postalCode: string;
-        state: string;
-    };
+    type?: 'error' | 'success' | 'warning';
 };
 
-type BuildLandedCostParams = {
-    billingAddress: CalculateLandedCostRequest['billingAddress'];
-    billingContact: CalculateLandedCostRequest['billingContact'];
-    checkoutSessionId: string;
-    contact: CalculateLandedCostRequest['contact'];
-    landedCostAdjustments?: CalculateLandedCostRequest['landedCostAdjustments'];
-    publicCredential: string;
-    shippingAddress: CalculateLandedCostRequest['shippingAddress'];
-    zonosApiRoute: string;
+declare const localeElementsSupportedLocationCodeEnum: {
+    readonly Ar: "ar";
+    readonly Da: "da";
+    readonly De: "de";
+    readonly En: "en";
+    readonly Es: "es";
+    readonly Fr: "fr";
+    readonly He: "he";
+    readonly Id: "id";
+    readonly It: "it";
+    readonly Ja: "ja";
+    readonly Ko: "ko";
+    readonly Nl: "nl";
+    readonly No: "no";
+    readonly Pl: "pl";
+    readonly Pt: "pt";
+    readonly Ru: "ru";
+    readonly Sv: "sv";
+    readonly Tr: "tr";
+    readonly Vi: "vi";
+    readonly Zh: "zh";
 };
-type BuildLandedCostResponse = (CalculateLandedCostMutation & {
-    errors: ApiError[];
-}) | null;
+type Locale_ElementsSupportedLocationCode_Enum = (typeof localeElementsSupportedLocationCodeEnum)[keyof typeof localeElementsSupportedLocationCodeEnum];
 
-type ZonosOrder = GetOrderQuery['order'];
+type ICountry = {
+    bigcommerceDisplayName?: string;
+    code: CountryCode;
+    currencyCode: string;
+    displayName: string;
+    languageCode: Locale_ElementsSupportedLocationCode_Enum;
+};
+type ICountryJson = {
+    [countryCode: string]: ICountry;
+};
 
-type BuildCardDetailParams = {
-    countryCode: CountryCode;
-    currencyCode: CurrencyCode;
+type Items = CheckItemRestrictionsMutation['itemRestrictionApply']['items'];
+type RestrictedItem = Items[number] & {
+    name?: string;
 };
-type PromiseOrValue<T> = T | Promise<T>;
-type PrefillAddress = {
-    customerAddress1: string;
-    customerAddress2?: string;
-    customerCity?: string;
-    /**
-     * If country is not provided, it will try to pull from query params `zCountry` or `country` or `customerCountry` in the URL or fallback to user's selected country
-     */
-    customerCountry?: string;
-    customerEmail: string;
-    customerName: string;
-    customerPhone: string;
-    customerState?: string;
-    customerZip: string;
+
+declare const restStateType: readonly ["Boxes", "Earth", "EmptyBox", "Lock", "PigBank", "Scribble", "Search", "Settings", "ShoppingCart", "SpilledCup", "Switch", "TaxId", "Truck", "Warning"];
+type RestStateType = (typeof restStateType)[number];
+
+type ShippingRichRadioItem = {
+    amount: number;
+    caption?: string;
+    label: string;
+    landedCostId: string;
+    method: IncotermCode;
+    price: string;
+    shipmentRatingId: string;
+    sublabel?: string;
+    value: string | number;
 };
-type CreateCartIdObject = {
-    cartId: string;
-    shippingData?: PrefillAddress | null;
-};
-type CheckoutConfig = {
-    /**
-     * Validate address to allow specific character sets
-     * @default ALL
-     */
-    allowedCharacterSets?: 'ALL' | 'LATIN';
-    /**
-     * Enable settlement currencies to pay in USD
-     * @default LOCAL
-     */
-    allowedSettlementCurrencies: AllowedSettlementCurrencies;
-    analyticsProviders: Array<{
-        status: AnalyticsProviderStatus;
-        type: AnalyticsProviderType;
-    }>;
-    /**
-     * Duration (in seconds) for which the cart remains valid for checkout in hosted checkout.
-     * @default 3_600 (1 hour)
-     */
-    defaultCartExpiration?: number;
-    /**
-     * @default false - when false, the place order button will be disabled until the script is loaded
-     * @note if set to true, the place order button will not be enabled or disabled
-     */
-    disablePlaceOrderButtonActivation?: boolean;
-    externalPaymentMethods: Array<{
-        status: ExternalPaymentMethodStatus;
-        type: ExternalPaymentMethodType;
-    }> | null;
-    externalServiceTokens: {
-        token: string;
-        type: ExternalServiceTokenType;
-    }[];
-    /**
-     * Test mode for checkout (sandbox or production)
-     * @default TEST
-     */
-    mode: Mode;
-    orderNotifications: {
-        abandonedCart: {
-            delay: number;
-            discountPercent: number;
-            status: {
-                active: NotificationActiveStatus;
-                sendCopiesTo: Array<string>;
-            };
-        };
-        orderCancelled: {
-            active: NotificationActiveStatus;
-            sendCopiesTo: Array<string>;
-        };
-        orderShipped: {
-            active: NotificationActiveStatus;
-            sendCopiesTo: Array<string>;
-        };
-    };
-    organization: string;
-    placeOrderButtonSelector: string | null;
-    /**
-     * @param subscriptionStatus subscription status for checkout, checkout only available if subscription status is ENABLED and visibility status is ENABLED
-     *
-     * **NOTE: this value can't be overridden in Zonos.init**
-     */
-    subscriptionStatus: CheckoutSubscriptionStatus;
-    successBehavior: CheckoutSuccessBehavior;
-    /**
-     * The success page action text for checkout.
-     * @note Default text supports translation automatically, but any custom text will not be translated.
-     */
-    successPageActionText?: string;
-    /**
-     * The success page subtitle text for checkout. Each item in the array will appear on a new line.
-     * @note Default text supports translation automatically, but any custom text will not be translated.
-     */
-    successPageSubtitleText?: string[];
-    /**
-     * The success page title text for checkout.
-     * @note Default text supports translation automatically, but any custom text will not be translated.
-     */
-    successPageTitleText?: string;
-    successRedirectUrl: string;
-    visibilityStatus: CheckoutVisibilityStatus;
-    /**
-     * Cart info callback for checkout (optional),
-     * @deprecated This is deprecated in favor of the new callback `createCartId`. The new API would only need the cart ID to retrieve cart data.
-     * @note will attempt to use cart data if available
-     * User can dispatch an event 'zonos--init-cart-info' to update the cart
-     * @example
-     * const initEvent = new CustomEvent<CartItem[]>('zonos--init-cart-info', {
-     *    detail: cartItems,
-     * });
-     * document.body.dispatchEvent(initEvent);
-     * @returns {object[]} - object with the the item info to be added to cart:
-     * - amount: number;
-     * - countryOfOrigin?: string;
-     * - currencyCode: string;
-     * - description?: string;
-     * - hsCode?: string;
-     * - imageUrl?: string;
-     * - name: string;
-     * - productId?: string;
-     * - quantity: number;
-     */
-    buildCartDetail?: (params: BuildCardDetailParams) => Promise<CartItem[]>;
-    /**
-     * Calculate landed cost callback for checkout (optional)
-     * @deprecated This is deprecated in favor of the new callback `createCartId`. When using the new callback, the cart details will be retrieved using the cart ID, so this callback would no longer be needed.
-     * @note will attempt to use cart data if available
-     */
-    buildLandedCost?: (params: BuildLandedCostParams) => Promise<BuildLandedCostResponse>;
-    /**
-     * A callback that returns the cart id from `cartCreate` mutation. You would use your cart data to call the `cartCreate` mutation and return the cart ID that was created.
-     * @note
-     * The mutation `cartCreate` should be called on the server side
-     * @returns string - Cart ID
-     */
-    createCartId?: () => PromiseOrValue<string | CreateCartIdObject>;
-    /**
-     * Callback trigger when the checkout is closed
-     */
-    onClose?: () => void;
-    /**
-     * This callback is optional. If provided, it will be called right before the payment is processed.
-     * @param items - The cart items.
-     * @returns {string | null} - The error message to display to the user. If the message is empty or null, the payment will proceed.
-     * @example
-     * onInventoryCheck: async ({ items }) => {
-     *   // Check if all items are available from the server. If the fetch is throwing an error, show a generic error message "Unable to check inventory. Please try again.".
-     *   const itemsInfo = await fetch('https://yourserver.com/api/get-available-items', {
-     *     method: 'POST',
-     *     body: JSON.stringify({ items }),
-     *   });
-     *   const items = await itemsInfo.json();
-     *   // Filter out unavailable items.
-     *   const unavailableItems = items.filter(item => !item.available);
-     *   if (unavailableItems.length) {
-     *     // Display an error message to the user.
-     *     return `The following items are not available: ${unavailableItems.map(item => item.name).join(', ')}`;
-     *   }
-     *   // Proceed with the payment if you return an empty string or null.
-     *   return '';
-     * }
-     */
-    onInventoryCheck?: (params: {
-        items: CartItem[];
-    }) => Promise<string | null>;
-    /**
-     * Callback trigger when payment succeeds
-     */
-    onOrderSuccess?: (props: {
-        zonosApiRoute: string;
-        zonosOrder: ZonosOrder;
-    }) => Promise<void>;
-};
-
-type CountryOverrideBehavior = 'URL_PARAM' | 'SESSION';
-type ShowForCountries = 'ALL' | 'ONLY_SHIPPABLE' | CountryCode[];
-type ShowCountryList = 'ALL' | 'ONLY_SHIPPABLE' | CountryCode[];
-type HelloConfig = {
-    anchorElementSelector: string;
-    cartUrlPattern: string | null;
-    /**
-     * The behavior to use when determining the country to use for the user.
-     * @default 'URL_PARAM'
-     */
-    countryOverrideBehavior?: CountryOverrideBehavior;
-    currencyBehavior: HelloCurrencyBehavior;
-    currencyElementSelector: string;
-    desktopLocation?: HelloMobileLocation | null;
-    excludedUrlPatterns: Array<string>;
-    homepageUrlPattern: string | null;
-    mobileLocation: HelloMobileLocation | null;
-    mode: Mode;
-    /**
-     * Position of floating hello if `anchorElementSelector` is not found after 3 seconds
-     *
-     * null: don't render if not found
-     *
-     * @default null
-     */
-    notFoundElementFallback: HelloMobileLocation | null;
-    organization: string;
-    peekMessageBehavior: HelloPeekMessageBehavior;
-    peekMessageDelay: number;
-    productAddToCartElementSelector: string | null;
-    productDescriptionElementSelector: string | null;
-    productDetailUrlPattern: string | null;
-    productListUrlPattern: string | null;
-    productTitleElementSelector: string | null;
-    restrictionBehavior: HelloRestrictionBehavior;
-    /**
-     * The countries to include in the country list dropdown of the Hello widget.
-     * @default ONLY_SHIPPABLE
-     */
-    showCountryList?: ShowCountryList;
-    /**
-     * The countries to show the widget for.
-     * @default ONLY_SHIPPABLE
-     */
-    showForCountries?: ShowForCountries;
-    visibilityStatus?: 'ENABLED' | 'DISABLED';
-    /**
-     * Callback function to run after the Hello widget has been initialized. This should be triggered only once when hello is attached to the DOM.
-     * **Note**: If hello is detached from the DOM and reattached, this callback will be called again.
-     * @param params - The parameters containing the country code and currency code that hello is initialized with.
-     */
-    onInitSuccess?: (params: {
-        countryCode: CountryCode;
-        currencyCode: CurrencyCode;
-    }) => Promise<void>;
-};
-
-type AppearanceConfig = {
-    colorPrimary?: string;
-    colorSecondary?: string;
-    fontFamily: string;
-    fontSize2XL?: number;
-    fontSize3XL?: number;
-    fontSizeBase?: number;
-    fontSizeInputLabel?: number;
-    fontSizeInputValue?: number;
-    fontSizeL?: number;
-    fontSizeS?: number;
-    fontSizeXL?: number;
-    fontSizeXS?: number;
-    logoUrl: string;
-    style: ElementsUiStyle;
-    theme: ElementsUiTheme;
-    zonosAttribution: ZonosAttribution | null;
-};
-
-type CustomEventMap = {
-    legacyCheckoutError: string;
-    'zonos-checkout-success': {
-        message: string;
-    };
-};
-
-declare const _envClientSchema: z.ZodObject<{
-    NEXT_PUBLIC_FLAG_URL: z.ZodString;
-    NEXT_PUBLIC_RELEASE_DATE: z.ZodString;
-    NEXT_PUBLIC_ZONOS_API_KEY: z.ZodString;
-    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: z.ZodString;
-    NEXT_PUBLIC_ZONOS_CDN_URL: z.ZodString;
-    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: z.ZodString;
-    NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL: z.ZodString;
-    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: z.ZodString;
-    NEXT_PUBLIC_ZONOS_ROUTE_URL: z.ZodString;
-    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: z.ZodString;
-}, "strip", z.ZodTypeAny, {
-    NEXT_PUBLIC_FLAG_URL: string;
-    NEXT_PUBLIC_RELEASE_DATE: string;
-    NEXT_PUBLIC_ZONOS_API_KEY: string;
-    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: string;
-    NEXT_PUBLIC_ZONOS_CDN_URL: string;
-    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: string;
-    NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL: string;
-    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: string;
-    NEXT_PUBLIC_ZONOS_ROUTE_URL: string;
-    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: string;
-}, {
-    NEXT_PUBLIC_FLAG_URL: string;
-    NEXT_PUBLIC_RELEASE_DATE: string;
-    NEXT_PUBLIC_ZONOS_API_KEY: string;
-    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: string;
-    NEXT_PUBLIC_ZONOS_CDN_URL: string;
-    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: string;
-    NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL: string;
-    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: string;
-    NEXT_PUBLIC_ZONOS_ROUTE_URL: string;
-    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: string;
-}>;
-interface Env extends z.infer<typeof _envClientSchema> {
-}
-
-/* eslint-disable no-relative-import-paths/no-relative-import-paths */
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-  interface Document {
-    addEventListener<K extends keyof CustomEventMap>(
-      type: K,
-      listener: (this: Document, ev: CustomEvent<CustomEventMap[K]>) => void,
-    ): void;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-  interface Window {
-    Stripe?: StripeConstructor;
-    Zonos: Zonos;
-    /**
-     * A flag to determine if the current page is a BigCommerce page
-     */
-    bcConfig?: unknown;
-    /**
-     * This flag would be set to true if zonosQaUrl is present in the query params and preview script loadZonos.js is injected to DOM
-     */
-    isZonosPreview?: boolean;
-    /**
-     * A flag to determine if the current page is a BigCommerce page
-     */
-    stencilBootstrap?: unknown;
-  }
-
-  namespace NodeJS {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-    interface ProcessEnv extends Env {}
-  }
-}
-
-type TranslatedText = {
-    [key: string]: string;
-};
-type EnteredInfo = {
-    city: string;
-    country: CountryCode;
-    email: string;
-    line1: string;
-    line2: string;
-    name: string;
-    phone: string;
-    postal_code: string;
-    state: string;
-};
-type ValidateAddressFields = Omit<StripeAddressElementChangeEvent['value']['address'], 'country'> & {
-    name: string;
-};
-type TranslatedAddressObject = {
-    [key in keyof ValidateAddressFields]?: TranslatedText;
-};
-
-type SubmitEventData = {
-    billingAddress: Record<keyof TranslatedAddressObject, string> | null;
-    shippingAddress: Record<keyof TranslatedAddressObject, string>;
-};
-
-declare const colorPrefixes: readonly ["blue", "cyan", "green", "orange", "purple", "red", "gray", "glass"];
-declare const colorContrasts: readonly ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
-type ColorContrast = (typeof colorContrasts)[number];
-type ColorPrefix = (typeof colorPrefixes)[number];
-type Color = 'gray-0' | 'gray-50' | 'glass-0' | 'glass-50' | `${ColorPrefix}-${ColorContrast}` | 'gray-1000' | 'glass-1100' | 'glass-1200';
-declare const checkboxColorPrefix: readonly ["blue", "cyan", "green", "orange", "purple", "red", "gray"];
-type CheckboxColorPrefix = (typeof checkboxColorPrefix)[number];
-
-type BannerIntent = 'default' | 'error' | 'success' | 'warning' | 'info';
-
-declare const textOptions: {
-    readonly pageHeader: {
-        readonly label: "Page Header (3XL) · 34px (2.125rem)";
-        readonly size: "3xl";
-        readonly tag: "h2";
-        readonly weight: 900;
-    };
-    readonly secondaryPageHeader: {
-        readonly label: "Secondary Page Header (3XL) • 34px, 500 \"Medium\"";
-        readonly size: "3xl";
-        readonly tag: "h2";
-        readonly weight: 500;
-    };
-    readonly header: {
-        readonly label: "Header (2XL) · 28px (1.75rem)";
-        readonly size: "2xl";
-        readonly tag: "h3";
-        readonly weight: 700;
-    };
-    readonly descriptionHeader: {
-        readonly label: "Description Header (2XL) · 28px (1.75rem)";
-        readonly size: "2xl";
-        readonly tag: "h3";
-        readonly weight: 700;
-    };
-    readonly title: {
-        readonly label: "Title (XL) • 22px (1.375rem)";
-        readonly size: "xl";
-        readonly tag: "h4";
-        readonly weight: 600;
-    };
-    readonly boldSubheader: {
-        readonly label: "Bold Subheader (L) • 18px (1.125rem)";
-        readonly size: "l";
-        readonly tag: "h5";
-        readonly weight: 700;
-    };
-    readonly semiBoldSubheader: {
-        readonly label: "Semi Bold Subheader (L / H4) • 18px (1.125rem)";
-        readonly size: "l";
-        readonly tag: "h5";
-        readonly weight: 600;
-    };
-    readonly subheader: {
-        readonly label: "Subheader (L) • 18px (1.125rem)";
-        readonly size: "l";
-        readonly tag: "h5";
-        readonly weight: 500;
-    };
-    readonly boldLabel: {
-        readonly label: "Bold Label (Base) • 14px (.875rem)";
-        readonly size: "base";
-        readonly tag: "span";
-        readonly weight: 700;
-    };
-    readonly semiBoldLabel: {
-        readonly label: "Semi Bold Label (Base) • 14px (.875rem)";
-        readonly size: "base";
-        readonly tag: "span";
-        readonly weight: 600;
-    };
-    readonly label: {
-        readonly label: "Label (Base) • 14px (.875rem)";
-        readonly size: "base";
-        readonly tag: "span";
-        readonly weight: 500;
-    };
-    readonly body: {
-        readonly label: "Body (Base) • 14px (.875rem)";
-        readonly size: "base";
-        readonly tag: "span";
-        readonly weight: 400;
-    };
-    readonly smallHeader: {
-        readonly label: "Small header (S) • 12px (.75rem)";
-        readonly size: "s";
-        readonly tag: "span";
-        readonly weight: 600;
-    };
-    readonly caption: {
-        readonly label: "Caption (S) • 12px (.75rem)";
-        readonly size: "s";
-        readonly tag: "span";
-        readonly weight: 400;
-    };
-    readonly hintText: {
-        readonly label: "Hint text (XS) • 10px (.625rem)";
-        readonly size: "xs";
-        readonly tag: "span";
-        readonly weight: 400;
-    };
-};
-type TextOptions = typeof textOptions;
-type Size = TextOptions[keyof TextOptions]['size'];
-type Type = keyof TextOptions;
-type FontWeight = TextOptions[keyof TextOptions]['weight'];
-
-type StripeStoreContactOption = {
-    address: {
-        city: string;
-        country: string;
-        line1: string;
-        line2?: string;
-        postal_code: string;
-        state: string;
-    };
-    email: string;
-    name: string;
-    phone?: string;
-};
-
-type NotificationInit = {
-    message: string;
-    /**
-     * Time in milliseconds
-     * @default 4000
-     */
-    timeout?: number;
-    /**
-     * Type of notification
-     * @default 'success'
-     */
-    type?: 'error' | 'success' | 'warning';
-};
-
-declare const localeElementsSupportedLocationCodeEnum: {
-    readonly Ar: "ar";
-    readonly Da: "da";
-    readonly De: "de";
-    readonly En: "en";
-    readonly Es: "es";
-    readonly Fr: "fr";
-    readonly He: "he";
-    readonly Id: "id";
-    readonly It: "it";
-    readonly Ja: "ja";
-    readonly Ko: "ko";
-    readonly Nl: "nl";
-    readonly No: "no";
-    readonly Pl: "pl";
-    readonly Pt: "pt";
-    readonly Ru: "ru";
-    readonly Sv: "sv";
-    readonly Tr: "tr";
-    readonly Vi: "vi";
-    readonly Zh: "zh";
-};
-type Locale_ElementsSupportedLocationCode_Enum = (typeof localeElementsSupportedLocationCodeEnum)[keyof typeof localeElementsSupportedLocationCodeEnum];
-
-type ICountry = {
-    bigcommerceDisplayName?: string;
-    code: CountryCode;
-    currencyCode: string;
-    displayName: string;
-    languageCode: Locale_ElementsSupportedLocationCode_Enum;
-};
-type ICountryJson = {
-    [countryCode: string]: ICountry;
-};
-
-type Items = CheckItemRestrictionsMutation['itemRestrictionApply']['items'];
-type RestrictedItem = Items[number] & {
-    name?: string;
-};
-
-declare const restStateType: readonly ["Boxes", "Earth", "EmptyBox", "Lock", "PigBank", "Scribble", "Search", "Settings", "ShoppingCart", "SpilledCup", "Switch", "TaxId", "Truck", "Warning"];
-type RestStateType = (typeof restStateType)[number];
-
-type ShippingRichRadioItem = {
-    amount: number;
-    caption?: string;
-    label: string;
-    landedCostId: string;
-    method: IncotermCode;
-    price: string;
-    shipmentRatingId: string;
-    sublabel?: string;
-    value: string | number;
-};
-
-type SpinnerColor = 'primary' | 'info' | 'success' | 'danger' | 'warning' | 'black' | 'white';
-
-type ToggleItem<TValue> = {
-    isDisabled?: boolean;
-    label: string;
-    value: TValue;
+
+type SpinnerColor = 'primary' | 'info' | 'success' | 'danger' | 'warning' | 'black' | 'white';
+
+type ToggleItem<TValue> = {
+    isDisabled?: boolean;
+    label: string;
+    value: TValue;
 };
 
 type GridSpacing = 0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40;
@@ -4538,6 +4201,73 @@ declare module "@stencil/core" {
     }
 }
 
+type CalculateLandedCostAdjustmentInput = {
+    amount: number;
+    name?: string | null;
+    productId: string | null;
+    promoCode?: string | null;
+    sku: string | null;
+    type: LandedCostAdjustmentType;
+};
+type Extensions = {
+    [key: string]: unknown;
+} & {
+    rule?: {
+        description: string;
+        id: string;
+        name: string;
+    };
+    ruleMessageType?: 'CUSTOM' | 'DEFAULT';
+};
+type ApiError = {
+    extensions?: Extensions | null;
+    message: string;
+};
+type CalculateLandedCostRequest = {
+    billingAddress: {
+        addressLine1: string;
+        addressLine2?: string | undefined;
+        city: string;
+        country: CountryCode;
+        postalCode: string;
+        state: string;
+    };
+    billingContact: {
+        firstName: string;
+        lastName: string;
+        phone: string;
+    };
+    checkoutSessionId: string;
+    contact: {
+        email?: string;
+        firstName: string;
+        lastName: string;
+        phone: string;
+    };
+    /**
+     * When this is set, the created quote will not be shown on the Quote List page in the Zonos Dashboard.
+     */
+    isTest?: boolean;
+    items: CartItem[];
+    landedCostAdjustments?: CalculateLandedCostAdjustmentInput[];
+    metadata?: {
+        key: string;
+        value: string;
+    }[];
+    /**
+     * TaxId that the some destination countries require for the shipment.
+     */
+    shipToTaxId?: string;
+    shippingAddress: {
+        addressLine1: string;
+        addressLine2?: string | undefined;
+        city: string;
+        country: CountryCode;
+        postalCode: string;
+        state: string;
+    };
+};
+
 type NormalizedItemAttribute = {
     key: string;
     value: string;
@@ -4556,31 +4286,301 @@ type NormalizedTempCartItem = {
         unitOfMeasure: ItemUnitOfMeasure;
         value: number;
     }[];
-    name: string | null;
-    productId: string | null;
-    quantity: number;
-    sku: string | null;
+    name: string | null;
+    productId: string | null;
+    quantity: number;
+    sku: string | null;
+};
+type NormalizedTempCart = {
+    adjustments: {
+        amount: number;
+        currencyCode: CurrencyCode;
+        description: string | null;
+        productId: string | null;
+        promoCode?: string | null;
+        sku: string | null;
+        type: CartAdjustmentType;
+    }[];
+    createdAt: string;
+    credentialToken: string;
+    id: string;
+    items: NormalizedTempCartItem[];
+    metadata: {
+        key: string;
+        value: string;
+    }[];
+    storeBaseUrl: string;
+    storeId: number;
+};
+
+type BuildLandedCostParams = {
+    billingAddress: CalculateLandedCostRequest['billingAddress'];
+    billingContact: CalculateLandedCostRequest['billingContact'];
+    checkoutSessionId: string;
+    contact: CalculateLandedCostRequest['contact'];
+    landedCostAdjustments?: CalculateLandedCostRequest['landedCostAdjustments'];
+    publicCredential: string;
+    shippingAddress: CalculateLandedCostRequest['shippingAddress'];
+    zonosApiRoute: string;
+};
+type BuildLandedCostResponse = (CalculateLandedCostMutation & {
+    errors: ApiError[];
+}) | null;
+
+type ZonosOrder = GetOrderQuery['order'];
+
+type BuildCardDetailParams = {
+    countryCode: CountryCode;
+    currencyCode: CurrencyCode;
+};
+type PromiseOrValue<T> = T | Promise<T>;
+type PrefillAddress = {
+    customerAddress1: string;
+    customerAddress2?: string;
+    customerCity?: string;
+    /**
+     * If country is not provided, it will try to pull from query params `zCountry` or `country` or `customerCountry` in the URL or fallback to user's selected country
+     */
+    customerCountry?: string;
+    customerEmail: string;
+    customerName: string;
+    customerPhone: string;
+    customerState?: string;
+    customerZip: string;
+};
+type CreateCartIdObject = {
+    cartId: string;
+    shippingData?: PrefillAddress | null;
+};
+type CheckoutConfig = {
+    /**
+     * Validate address to allow specific character sets
+     * @default ALL
+     */
+    allowedCharacterSets?: 'ALL' | 'LATIN';
+    /**
+     * Enable settlement currencies to pay in USD
+     * @default LOCAL
+     */
+    allowedSettlementCurrencies: AllowedSettlementCurrencies;
+    analyticsProviders: Array<{
+        status: AnalyticsProviderStatus;
+        type: AnalyticsProviderType;
+    }>;
+    /**
+     * Duration (in seconds) for which the cart remains valid for checkout in hosted checkout.
+     * @default 3_600 (1 hour)
+     */
+    defaultCartExpiration?: number;
+    /**
+     * @default false - when false, the place order button will be disabled until the script is loaded
+     * @note if set to true, the place order button will not be enabled or disabled
+     */
+    disablePlaceOrderButtonActivation?: boolean;
+    externalPaymentMethods: Array<{
+        status: ExternalPaymentMethodStatus;
+        type: ExternalPaymentMethodType;
+    }> | null;
+    externalServiceTokens: {
+        token: string;
+        type: ExternalServiceTokenType;
+    }[];
+    /**
+     * Test mode for checkout (sandbox or production)
+     * @default TEST
+     */
+    mode: Mode;
+    orderNotifications: {
+        abandonedCart: {
+            delay: number;
+            discountPercent: number;
+            status: {
+                active: NotificationActiveStatus;
+                sendCopiesTo: Array<string>;
+            };
+        };
+        orderCancelled: {
+            active: NotificationActiveStatus;
+            sendCopiesTo: Array<string>;
+        };
+        orderShipped: {
+            active: NotificationActiveStatus;
+            sendCopiesTo: Array<string>;
+        };
+    };
+    organization: string;
+    placeOrderButtonSelector: string | null;
+    /**
+     * @param subscriptionStatus subscription status for checkout, checkout only available if subscription status is ENABLED and visibility status is ENABLED
+     *
+     * **NOTE: this value can't be overridden in Zonos.init**
+     */
+    subscriptionStatus: CheckoutSubscriptionStatus;
+    successBehavior: CheckoutSuccessBehavior;
+    /**
+     * The success page action text for checkout.
+     * @note Default text supports translation automatically, but any custom text will not be translated.
+     */
+    successPageActionText?: string;
+    /**
+     * The success page subtitle text for checkout. Each item in the array will appear on a new line.
+     * @note Default text supports translation automatically, but any custom text will not be translated.
+     */
+    successPageSubtitleText?: string[];
+    /**
+     * The success page title text for checkout.
+     * @note Default text supports translation automatically, but any custom text will not be translated.
+     */
+    successPageTitleText?: string;
+    successRedirectUrl: string;
+    visibilityStatus: CheckoutVisibilityStatus;
+    /**
+     * Cart info callback for checkout (optional),
+     * @deprecated This is deprecated in favor of the new callback `createCartId`. The new API would only need the cart ID to retrieve cart data.
+     * @note will attempt to use cart data if available
+     * User can dispatch an event 'zonos--init-cart-info' to update the cart
+     * @example
+     * const initEvent = new CustomEvent<CartItem[]>('zonos--init-cart-info', {
+     *    detail: cartItems,
+     * });
+     * document.body.dispatchEvent(initEvent);
+     * @returns {object[]} - object with the the item info to be added to cart:
+     * - amount: number;
+     * - countryOfOrigin?: string;
+     * - currencyCode: string;
+     * - description?: string;
+     * - hsCode?: string;
+     * - imageUrl?: string;
+     * - name: string;
+     * - productId?: string;
+     * - quantity: number;
+     */
+    buildCartDetail?: (params: BuildCardDetailParams) => Promise<CartItem[]>;
+    /**
+     * Calculate landed cost callback for checkout (optional)
+     * @deprecated This is deprecated in favor of the new callback `createCartId`. When using the new callback, the cart details will be retrieved using the cart ID, so this callback would no longer be needed.
+     * @note will attempt to use cart data if available
+     */
+    buildLandedCost?: (params: BuildLandedCostParams) => Promise<BuildLandedCostResponse>;
+    /**
+     * A callback that returns the cart id from `cartCreate` mutation. You would use your cart data to call the `cartCreate` mutation and return the cart ID that was created.
+     * @note
+     * The mutation `cartCreate` should be called on the server side
+     * @returns string - Cart ID
+     */
+    createCartId?: () => PromiseOrValue<string | CreateCartIdObject>;
+    /**
+     * Callback trigger when the checkout is closed
+     */
+    onClose?: () => void;
+    /**
+     * This callback is optional. If provided, it will be called right before the payment is processed.
+     * @param items - The cart items.
+     * @returns {string | null} - The error message to display to the user. If the message is empty or null, the payment will proceed.
+     * @example
+     * onInventoryCheck: async ({ items }) => {
+     *   // Check if all items are available from the server. If the fetch is throwing an error, show a generic error message "Unable to check inventory. Please try again.".
+     *   const itemsInfo = await fetch('https://yourserver.com/api/get-available-items', {
+     *     method: 'POST',
+     *     body: JSON.stringify({ items }),
+     *   });
+     *   const items = await itemsInfo.json();
+     *   // Filter out unavailable items.
+     *   const unavailableItems = items.filter(item => !item.available);
+     *   if (unavailableItems.length) {
+     *     // Display an error message to the user.
+     *     return `The following items are not available: ${unavailableItems.map(item => item.name).join(', ')}`;
+     *   }
+     *   // Proceed with the payment if you return an empty string or null.
+     *   return '';
+     * }
+     */
+    onInventoryCheck?: (params: {
+        items: CartItem[];
+    }) => Promise<string | null>;
+    /**
+     * Callback trigger when payment succeeds
+     */
+    onOrderSuccess?: (props: {
+        zonosApiRoute: string;
+        zonosOrder: ZonosOrder;
+    }) => Promise<void>;
 };
-type NormalizedTempCart = {
-    adjustments: {
-        amount: number;
+
+type CountryOverrideBehavior = 'URL_PARAM' | 'SESSION';
+type ShowForCountries = 'ALL' | 'ONLY_SHIPPABLE' | CountryCode[];
+type ShowCountryList = 'ALL' | 'ONLY_SHIPPABLE' | CountryCode[];
+type HelloConfig = {
+    anchorElementSelector: string;
+    cartUrlPattern: string | null;
+    /**
+     * The behavior to use when determining the country to use for the user.
+     * @default 'URL_PARAM'
+     */
+    countryOverrideBehavior?: CountryOverrideBehavior;
+    currencyBehavior: HelloCurrencyBehavior;
+    currencyElementSelector: string;
+    desktopLocation?: HelloMobileLocation | null;
+    excludedUrlPatterns: Array<string>;
+    homepageUrlPattern: string | null;
+    mobileLocation: HelloMobileLocation | null;
+    mode: Mode;
+    /**
+     * Position of floating hello if `anchorElementSelector` is not found after 3 seconds
+     *
+     * null: don't render if not found
+     *
+     * @default null
+     */
+    notFoundElementFallback: HelloMobileLocation | null;
+    organization: string;
+    peekMessageBehavior: HelloPeekMessageBehavior;
+    peekMessageDelay: number;
+    productAddToCartElementSelector: string | null;
+    productDescriptionElementSelector: string | null;
+    productDetailUrlPattern: string | null;
+    productListUrlPattern: string | null;
+    productTitleElementSelector: string | null;
+    restrictionBehavior: HelloRestrictionBehavior;
+    /**
+     * The countries to include in the country list dropdown of the Hello widget.
+     * @default ONLY_SHIPPABLE
+     */
+    showCountryList?: ShowCountryList;
+    /**
+     * The countries to show the widget for.
+     * @default ONLY_SHIPPABLE
+     */
+    showForCountries?: ShowForCountries;
+    visibilityStatus?: 'ENABLED' | 'DISABLED';
+    /**
+     * Callback function to run after the Hello widget has been initialized. This should be triggered only once when hello is attached to the DOM.
+     * **Note**: If hello is detached from the DOM and reattached, this callback will be called again.
+     * @param params - The parameters containing the country code and currency code that hello is initialized with.
+     */
+    onInitSuccess?: (params: {
+        countryCode: CountryCode;
         currencyCode: CurrencyCode;
-        description: string | null;
-        productId: string | null;
-        promoCode?: string | null;
-        sku: string | null;
-        type: CartAdjustmentType;
-    }[];
-    createdAt: string;
-    credentialToken: string;
-    id: string;
-    items: NormalizedTempCartItem[];
-    metadata: {
-        key: string;
-        value: string;
-    }[];
-    storeBaseUrl: string;
-    storeId: number;
+    }) => Promise<void>;
+};
+
+type AppearanceConfig = {
+    colorPrimary?: string;
+    colorSecondary?: string;
+    fontFamily: string;
+    fontSize2XL?: number;
+    fontSize3XL?: number;
+    fontSizeBase?: number;
+    fontSizeInputLabel?: number;
+    fontSizeInputValue?: number;
+    fontSizeL?: number;
+    fontSizeS?: number;
+    fontSizeXL?: number;
+    fontSizeXS?: number;
+    logoUrl: string;
+    style: ElementsUiStyle;
+    theme: ElementsUiTheme;
+    zonosAttribution: ZonosAttribution | null;
 };
 
 /**