@zonos/elements 1.3.217 → 1.3.219

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

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1c710d00.js');
-const cart = require('./cart-54ff39d6.js');
-const paypal = require('./paypal-e7504122.js');
-const localization = require('./localization-721a5ec3.js');
+const cart = require('./cart-9a2b32e4.js');
+const paypal = require('./paypal-e80871d0.js');
+const localization = require('./localization-b12edb2a.js');
+const translationStore = require('./translationStore-20a6d8bf.js');
 const zonosStore = require('./zonosStore-f8ee56aa.js');
-const handleFetch = require('./handleFetch-0313ebba.js');
-const updateCheckoutSessionAttributes = require('./updateCheckoutSessionAttributes-8db49644.js');
+const buildCartItemsByTempCart = require('./buildCartItemsByTempCart-309fcebf.js');
+const handleFetch = require('./handleFetch-45f35cac.js');
+const updateCheckoutSessionAttributes = require('./updateCheckoutSessionAttributes-c0853fdd.js');
 const CheckoutConfig = require('./CheckoutConfig-27c82f94.js');
 const classes = require('./classes-b7918f56.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
@@ -19,31 +21,6 @@ const RemoveIcon = require('./RemoveIcon-081ac073.js');
 require('./VarianceTest-0cb1e118.js');
 require('./debounce-465a4328.js');
 
-/**
- * Map the items from tempCart like how we do it in dgs
- * @ref https://github.com/Zonos/ShippingQuoteService/blob/f8bd4f1ff41cb34b49b9f3f435576ec28dedf906/src/main/java/com/iglobal/services/shippingquote/dto/ShippingQuoteRequestDto.java#L393
- */
-const buildCartItemsByTempCart = (tempCartData) => {
-    const tempCartItems = tempCartData.items.map(item => ({
-        amount: item.amount,
-        attributes: item.attributes || [],
-        countryOfOrigin: item.countryOfOrigin || undefined,
-        currencyCode: item.currencyCode,
-        description: item.description || '',
-        imageUrl: item.imageUrl || '',
-        itemType: item.itemType || 'PHYSICAL_GOOD',
-        measurements: item.measurements || [],
-        name: item.name || item.description || '',
-        productId: item.productId || '',
-        quantity: item.quantity || 0,
-        sku: item.sku || '',
-    })) || [];
-    return {
-        adjustments: tempCartData.adjustments,
-        cartItems: tempCartItems,
-    };
-};
-
 /**
  * Check if store discount is enabled
  */
@@ -899,7 +876,7 @@ const ZonosCheckout = class {
             const cartIdResult = await zonosStore.zonosStore.checkoutSettings.createCartId();
             let cartId;
             if (typeof cartIdResult === 'object') {
-                handleFetch.log('object detected, use cartId and prefill address from createCartId');
+                handleFetch.log('object detected, use cartId and prefill address from createCartId', 'info', cartIdResult);
                 cartId = cartIdResult.cartId;
                 // set prefill address if provided in createCartId callback result
                 this.useShippingDataFromCreateCartId(cartIdResult.shippingData);
@@ -917,13 +894,13 @@ const ZonosCheckout = class {
                 return false;
             }
             window.Zonos.cartData = cartData;
-            const { adjustments, cartItems } = buildCartItemsByTempCart(cartData);
+            const { adjustments, cartItems } = buildCartItemsByTempCart.buildCartItemsByTempCart(cartData);
             await cart.cartStoreUpdateItems({ adjustments, cartItems });
         }
         // if tempCartUUID is provided, use it instead of buildCartDetail
         else if (window.Zonos.cartData) {
             handleFetch.log('tempCartUUID is provided, start building cart');
-            const { adjustments, cartItems } = buildCartItemsByTempCart(window.Zonos.cartData);
+            const { adjustments, cartItems } = buildCartItemsByTempCart.buildCartItemsByTempCart(window.Zonos.cartData);
             await cart.cartStoreUpdateItems({ adjustments, cartItems });
         }
         else if (zonosStore.zonosStore.checkoutSettings.buildCartDetail &&
@@ -1215,9 +1192,9 @@ const ZonosCheckout = class {
                     });
                     cart.cartStoreUpdateToErrorState({
                         messages: [
-                            localization.translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),
+                            translationStore.translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),
                         ],
-                        title: localization.translate('Error creating Checkout'),
+                        title: translationStore.translate('Error creating Checkout'),
                     });
                 }
             }, {
@@ -1587,7 +1564,7 @@ const ZonosCheckout = class {
         // Should not proceed to confirm payment if base currency update failed
         if (!baseCurrencyUpdateSuccess) {
             cart.stripeStore.hasPaymentError = true;
-            cart.stripeStore.customErrorMessage = localization.translate('Unable to complete payment in [currency]. Please try again or select a different currency. If the issue persists, contact our support team for assistance.', {
+            cart.stripeStore.customErrorMessage = translationStore.translate('Unable to complete payment in [currency]. Please try again or select a different currency. If the issue persists, contact our support team for assistance.', {
                 currency: cart.stripeStore.checkoutSettlementCurrency,
             });
             this.submitLoading = false;
@@ -1600,7 +1577,7 @@ const ZonosCheckout = class {
         }
         catch (_a) {
             // If user provide callback and it throw an exception, default to this message and stop the payment.
-            cart.cartStore.inventoryCheckErrorMessage = localization.translate('Unable to check inventory. Please try again.');
+            cart.cartStore.inventoryCheckErrorMessage = translationStore.translate('Unable to check inventory. Please try again.');
         }
         // Don't proceed to payment if there's an error message
         if (cart.cartStore.inventoryCheckErrorMessage) {
@@ -1846,13 +1823,13 @@ const ZonosCheckout = class {
             const zonosDebug = urlParams.get('zonosDebug');
             const zonosE2ETest = urlParams.get('zonosE2ETest');
             const zonosStagingMode = this.overrideStagingMode || handleFetch.getIsStagingMode();
-            return (index.h("zonos-v-stack", null, index.h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (index.h("zonos-badge", { badgeColor: "orange", size: "small" }, localization.translate('Test mode'))), zonosStagingMode && (index.h("zonos-badge", { badgeColor: "red", size: "small" }, localization.translate('Staging mode'))), zonosDebug === '1' && (index.h("zonos-badge", { badgeColor: "cyan", size: "small" }, "debug")), zonosQaUrl && (index.h("zonos-badge", { badgeColor: "purple", size: "small" }, zonosQaUrl)), zonosE2ETest && (index.h("zonos-badge", { badgeColor: "gray", size: "small" }, "E2E Test"))), index.h("zonos-checkout-progress-tabs", { backgroundColor: 
+            return (index.h("zonos-v-stack", null, index.h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (index.h("zonos-badge", { badgeColor: "orange", size: "small" }, translationStore.translate('Test mode'))), zonosStagingMode && (index.h("zonos-badge", { badgeColor: "red", size: "small" }, translationStore.translate('Staging mode'))), zonosDebug === '1' && (index.h("zonos-badge", { badgeColor: "cyan", size: "small" }, "debug")), zonosQaUrl && (index.h("zonos-badge", { badgeColor: "purple", size: "small" }, zonosQaUrl)), zonosE2ETest && (index.h("zonos-badge", { badgeColor: "gray", size: "small" }, "E2E Test"))), index.h("zonos-checkout-progress-tabs", { backgroundColor: 
                 // only use different contrast color when the secondary color is too off with the background in mobile
                 this.isMobile ? '--zonos-elements-gray-0' : null }), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
         };
         const renderContent = () => {
             if (cart.cartStore.checkoutSessionTimeoutShow) {
-                return (index.h("zonos-rest-state", { class: "zonos--session-timeout", restStateSubtitle: localization.translate('Your checkout session has expired. Please reload the page to continue.'), restStateTitle: localization.translate('Session timed out'), restStateType: 'Warning' }, index.h("zonos-button", { onClick: () => this.reloadCheckoutSession(), variant: "primary" }, localization.translate('Reload'))));
+                return (index.h("zonos-rest-state", { class: "zonos--session-timeout", restStateSubtitle: translationStore.translate('Your checkout session has expired. Please reload the page to continue.'), restStateTitle: translationStore.translate('Session timed out'), restStateType: 'Warning' }, index.h("zonos-button", { onClick: () => this.reloadCheckoutSession(), variant: "primary" }, translationStore.translate('Reload'))));
             }
             return (index.h("div", { class: 'zonos--content', style: {
                     '--zonos--border-radius': getBorderRadius.getBorderRadius({
@@ -1889,50 +1866,50 @@ const ZonosCheckout = class {
                 this.isMobile && 'mobile',
                 this.isIframed && 'iframed',
                 this.hiddenMode && 'hidden-mode',
-            ]) }, this.preview ? (renderContent()) : (index.h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), index.h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: localization.translate("Don't close"), dialogConfirmBtnText: localization.translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: localization.translate('Would you like to close checkout and return to the site?'), dialogTitle: localization.translate('Are you sure?'), onCancelClicked: () => {
+            ]) }, this.preview ? (renderContent()) : (index.h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), index.h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: translationStore.translate("Don't close"), dialogConfirmBtnText: translationStore.translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translationStore.translate('Would you like to close checkout and return to the site?'), dialogTitle: translationStore.translate('Are you sure?'), onCancelClicked: () => {
                 this.confirmDialogOpen = false;
             },
             // Mark user selected confirm to close the dialog
-            onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) }), index.h("zonos-confirm-dialog", { class: "zonos--order-duplication-dialog", dialogCancelBtnText: localization.translate('Return to merchant site'), dialogConfirmBtnText: localization.translate('Proceed with order'), dialogIntent: "warn", dialogOpen: !!this.placedOrderInfo, dialogSubtitle: 
+            onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) }), index.h("zonos-confirm-dialog", { class: "zonos--order-duplication-dialog", dialogCancelBtnText: translationStore.translate('Return to merchant site'), dialogConfirmBtnText: translationStore.translate('Proceed with order'), dialogIntent: "warn", dialogOpen: !!this.placedOrderInfo, dialogSubtitle: 
             /**
              * Show order number if it's available, otherwise just show the time
              */
             ((_b = this.placedOrderInfo) === null || _b === void 0 ? void 0 : _b.zonosOrderNumber)
-                ? localization.translate('It looks like you placed an order recently ([date] at [time]) under order number #[orderNumber]. Check your email for the order confirmation. Are you sure you want to place another order?', {
+                ? translationStore.translate('It looks like you placed an order recently ([date] at [time]) under order number #[orderNumber]. Check your email for the order confirmation. Are you sure you want to place another order?', {
                     date: this.formatDate(this.placedOrderInfo.time),
                     orderNumber: this.placedOrderInfo.zonosOrderNumber,
                     time: this.formatTime(this.placedOrderInfo.time),
                 })
-                : localization.translate('It looks like you placed an order recently ([date] at [time]). Check your email for the order confirmation. Are you sure you want to place another one?', {
+                : translationStore.translate('It looks like you placed an order recently ([date] at [time]). Check your email for the order confirmation. Are you sure you want to place another one?', {
                     date: this.formatDate(((_c = this.placedOrderInfo) === null || _c === void 0 ? void 0 : _c.time) || null),
                     time: this.formatTime(((_d = this.placedOrderInfo) === null || _d === void 0 ? void 0 : _d.time) || null),
-                }), dialogTitle: localization.translate('Are you sure?'), dialogWidth: 530, onCancelClicked: () => {
+                }), dialogTitle: translationStore.translate('Are you sure?'), dialogWidth: 530, onCancelClicked: () => {
                 this.handleCancelOrderDuplication();
             },
             // Mark user selected confirm to close the dialog
             onConfirmClicked: () => {
                 // Reset the placed order info and close the dialog
                 this.confirmProceedWithOrderDuplication();
-            } }), index.h("zonos-confirm-dialog", { class: "zonos--inventory-check-failure-dialog", dialogConfirmBtnText: localization.translate('Return to cart'), dialogIntent: "danger",
+            } }), index.h("zonos-confirm-dialog", { class: "zonos--inventory-check-failure-dialog", dialogConfirmBtnText: translationStore.translate('Return to cart'), dialogIntent: "danger",
             // Show dialog if inventory check error message is not null
             dialogOpen: !!cart.cartStore.inventoryCheckErrorMessage,
             // If dialog is in open state, the message should not be null
-            dialogSubtitle: cart.cartStore.inventoryCheckErrorMessage, dialogTitle: localization.translate("Couldn't place order"), dialogType: "alert",
+            dialogSubtitle: cart.cartStore.inventoryCheckErrorMessage, dialogTitle: translationStore.translate("Couldn't place order"), dialogType: "alert",
             // Mark user selected confirm to close the dialog
-            onConfirmClicked: () => this.handleInventoryCheckDialogConfirm() }), baseCurrencySettlementInfo && (index.h("zonos-confirm-dialog", { class: "zonos--pay-in-usd-dialog", dialogCancelBtnText: localization.translate('Cancel'), dialogConfirmBtnText: localization.translate('Pay [orderTotal]', {
+            onConfirmClicked: () => this.handleInventoryCheckDialogConfirm() }), baseCurrencySettlementInfo && (index.h("zonos-confirm-dialog", { class: "zonos--pay-in-usd-dialog", dialogCancelBtnText: translationStore.translate('Cancel'), dialogConfirmBtnText: translationStore.translate('Pay [orderTotal]', {
                 orderTotal: localization.currencyFormat({
                     amount: baseCurrencySettlementInfo.settlementAmount,
                     currency: 'USD',
                 }),
-            }), dialogIntent: "warn", dialogOpen: this.payInUsdConfirmDialogOpen, dialogSubtitle: localization.translate('By paying in USD, your card will be charged directly with no currency conversion. However, using a non-USD based card may result in additional currency conversion fees at the bank level.'), dialogTitle: localization.translate('Pay in USD (United States Dollar)?'), dialogType: "confirm", dialogWidth: 480, onCancelClicked: () => {
+            }), dialogIntent: "warn", dialogOpen: this.payInUsdConfirmDialogOpen, dialogSubtitle: translationStore.translate('By paying in USD, your card will be charged directly with no currency conversion. However, using a non-USD based card may result in additional currency conversion fees at the bank level.'), dialogTitle: translationStore.translate('Pay in USD (United States Dollar)?'), dialogType: "confirm", dialogWidth: 480, onCancelClicked: () => {
                 this.payInUsdConfirmDialogOpen = false;
             },
             // Mark user selected confirm to continue with payment
-            onConfirmClicked: () => this.handleStripePaymentContinue() })), index.h("zonos-confirm-dialog", { class: "zonos--shopping-cart-expired-dialog", dialogConfirmBtnText: localization.translate('OK'), dialogIntent: "danger",
+            onConfirmClicked: () => this.handleStripePaymentContinue() })), index.h("zonos-confirm-dialog", { class: "zonos--shopping-cart-expired-dialog", dialogConfirmBtnText: translationStore.translate('OK'), dialogIntent: "danger",
             // Show dialog if inventory check error message is not null
             dialogOpen: this.isCartExpired,
             // If dialog is in open state, the message should not be null
-            dialogSubtitle: localization.translate('You are being sent back to the shop to re-add items to your cart.'), dialogTitle: localization.translate('Shopping cart expired'), dialogType: "alert",
+            dialogSubtitle: translationStore.translate('You are being sent back to the shop to re-add items to your cart.'), dialogTitle: translationStore.translate('Shopping cart expired'), dialogType: "alert",
             // Mark user selected confirm to close the dialog
             onConfirmClicked: () => this.handleCartExpiredDialogConfirm() }), index.h("zonos-loading-overlay", { open: this.isOverlayLoading })));
     }

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

@@ -57,10 +57,10 @@ const ZonosCollapse = class {
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (index.h(index.Host, { key: 'f27608bd02d0800dda8273909aa3041311dda3eb', class: 'zonos--elements zonos--collapse', style: {
+        return (index.h(index.Host, { key: '617e4c1a39bae3c5765ba05c6c7d3585c1822aea', class: 'zonos--elements zonos--collapse', style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, index.h("div", { key: '7901ab34757169767c99b46523e8cc353874a606' }, index.h("iframe", { key: '1d1e735c535df07e209878f6d66089ab30b943a3', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), index.h("slot", { key: '213bb5f472be8dfcd026207d706f8a0a3227f5cb' }))));
+            } }, index.h("div", { key: 'a4ef3763a3b2d802faacd4cc12dc84cfe9ad55a5' }, index.h("iframe", { key: 'f44ea760cb5c088241a737bd9b82ae0eac22f426', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), index.h("slot", { key: 'c01b886c941c6c50753d50cec244701c9854e589' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/zonos-collect-cart-items_3.cjs.entry.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1c710d00.js');
+const cart = require('./cart-9a2b32e4.js');
+const cleanHtmlMarkdown = require('./cleanHtmlMarkdown-577d0a77.js');
+const zonosStore = require('./zonosStore-f8ee56aa.js');
+const classes = require('./classes-b7918f56.js');
+const styles = require('./styles-d1e64fb9.js');
+require('./localization-b12edb2a.js');
+require('./handleFetch-45f35cac.js');
+require('./VarianceTest-0cb1e118.js');
+require('./translationStore-20a6d8bf.js');
+require('./isDarkColor-428965f4.js');
+require('./getBorderRadius-1b5e33cf.js');
+
+const zonosCollectCartItemsCss = ":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--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:8px;padding-left:0;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column:first-child{width:48px}:host .zonos--cart-table td{vertical-align:middle}:host .zonos--cart-item-price zonos-text{white-space:nowrap}:host img{min-width:40px;margin-top:6px;-webkit-box-shadow:0 0 0 1px rgba(110, 110, 120, 0.1), 0 1px 2px 0 rgba(10, 10, 11, 0.06), 0 1px 3px 0 rgba(10, 10, 11, 0.1);box-shadow:0 0 0 1px rgba(110, 110, 120, 0.1), 0 1px 2px 0 rgba(10, 10, 11, 0.06), 0 1px 3px 0 rgba(10, 10, 11, 0.1);border-radius:10px}";
+const ZonosCollectCartItemsStyle0 = zonosCollectCartItemsCss;
+
+const ZonosCollectCartItems = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.errorImages = [];
+    }
+    render() {
+        const emptyItemImg = index.getAssetPath('./assets/empty-item.jpeg');
+        const nonRestrictedItems = cart.cartStore.items.filter(item => !item.isRestricted);
+        return (index.h(index.Host, { key: '2f5507537492851b67a5204ab68ce2f938899f23', class: "zonos--collect-cart-items zonos--elements" }, index.h("table", { key: 'e648cda9d4c111ecde60291f420178e4e4230b50', class: "zonos--cart-table" }, index.h("tbody", { key: 'b266291e61d0df5c0ea3ae8240a3bfb6147edbb4' }, nonRestrictedItems.map(item => {
+            const itemImg = item.imageUrl;
+            const cleanedItemNames = cleanHtmlMarkdown.cleanHtmlMarkdown(item.name);
+            return (index.h("tr", { class: "zonos--collect-cart-item" }, index.h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (index.h("img", { alt: item.name, onError: () => {
+                    this.errorImages = [...this.errorImages, itemImg];
+                }, src: item.imageUrl, style: {
+                    'min-width': '40px',
+                }, width: 40 })) : (index.h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), index.h("td", { class: "zonos--column zonos--cart-item-name" }, index.h("div", null, cleanedItemNames.map(name => (index.h("zonos-text", { type: "semiBoldLabel" }, name)))))));
+        })))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+ZonosCollectCartItems.style = ZonosCollectCartItemsStyle0;
+
+const zonosHStackCss = ":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{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:var(--spacing, 24px)}";
+const ZonosHStackStyle0 = zonosHStackCss;
+
+const HStack = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The spacing between elements in the stack
+         * @default 24
+         */
+        this.spacing = 24;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e78dcb23a7c91df7f7a2533dc65412f27dd6e969', style: {
+                '--spacing': `${this.spacing}px`,
+                '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("slot", { key: 'cd668b443c01aea20c589fd4ef30636fb4178d3b' })));
+    }
+};
+HStack.style = ZonosHStackStyle0;
+
+const zonosSkeletonCss = ":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{display:inline-block;background:var(--zonos-elements-gray-200);border-radius:var(--zonos-elements-radius-12);width:var(--zonos--skeleton-width);height:var(--zonos--skeleton-height)}";
+const ZonosSkeletonStyle0 = zonosSkeletonCss;
+
+const ZonosSkeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The width of the skeleton
+         * @default '100%'
+         */
+        this.skeletonWidth = '100%';
+        /**
+         * The height of the skeleton
+         * @default '14px'
+         */
+        this.skeletonHeight = '14px';
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e6a000d9ef38aa8ee1c08743830d0b2b0230b4f1', class: classes.classes(['zonos--elements zonos--skeleton']), style: styles.styles({
+                '--zonos--skeleton-height': this.skeletonHeight,
+                '--zonos--skeleton-width': this.skeletonWidth,
+            }) }));
+    }
+};
+ZonosSkeleton.style = ZonosSkeletonStyle0;
+
+exports.zonos_collect_cart_items = ZonosCollectCartItems;
+exports.zonos_h_stack = HStack;
+exports.zonos_skeleton = ZonosSkeleton;