@solvimon/solvimon-web 0.1.0-alpha.8 → 0.1.0-alpha.9

package/dist/screens/Checkout/Checkout.es.js

@@ -1,21 +1,21 @@
-import { ref, computed, onMounted, watch, defineComponent, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString, useModel, createElementBlock, withModifiers, Fragment, createCommentVNode, createSlots, normalizeClass, mergeModels, renderSlot, renderList, toRef, nextTick, withDirectives, withKeys, vShow, defineAsyncComponent } from "vue";
-import { $ as taxId, a0 as convertDateRangeToTimePeriod, H as useValidation, J as objectDiff, u as useIntl, a1 as _sfc_main$q, _ as _sfc_main$r, a2 as isEUCountry, a3 as isValidCountryCode, a4 as getCountryNameByCode, b as _sfc_main$s, M as _sfc_main$t, N as _sfc_main$u, e as _sfc_main$v, a5 as _sfc_main$w, O as _sfc_main$x, a6 as _sfc_main$y, a7 as _sfc_main$z, a8 as _sfc_main$A, a9 as TooltipContent, aa as _sfc_main$B, ab as formatBillingPeriod, v as formatAmount, ac as _sfc_main$D, ad as useTimePeriod, f as _sfc_main$E, ae as _sfc_main$G, af as _sfc_main$H, ag as _sfc_main$I, t as _sfc_main$J, D as _sfc_main$L, ah as _sfc_main$M, ai as usePricingItem, aj as _sfc_main$N, ak as _sfc_main$O, A as _sfc_main$P } from "../../vendor-ui-BwxuPDg8.mjs";
-import { a as useLogger, _ as _sfc_main$Q, d as defineCustomElement, g as getComponentName } from "../../component-CM9g6tbD.mjs";
-import { c as createSubscriptionsService } from "../../subscriptions-mOgjjzUi.mjs";
+import { ref, computed, onMounted, toRaw, watch, defineComponent, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString, useModel, createElementBlock, withModifiers, Fragment, createCommentVNode, createSlots, normalizeClass, mergeModels, renderSlot, renderList, toRef, nextTick, withDirectives, withKeys, vShow, defineAsyncComponent } from "vue";
+import { U as taxId, k as isEqual, V as convertDateRangeToTimePeriod, H as useValidation, J as objectDiff, W as isEmpty, u as useIntl, X as _sfc_main$q, _ as _sfc_main$r, Y as isEUCountry, Z as isValidCountryCode, $ as getCountryNameByCode, b as _sfc_main$s, M as _sfc_main$t, N as _sfc_main$u, e as _sfc_main$v, a0 as _sfc_main$w, O as _sfc_main$x, a1 as _sfc_main$y, a2 as _sfc_main$z, a3 as _sfc_main$A, a4 as TooltipContent, a5 as _sfc_main$B, a6 as formatBillingPeriod, x as formatAmount, a7 as _sfc_main$D, a8 as useTimePeriod, f as _sfc_main$E, a9 as _sfc_main$G, aa as _sfc_main$H, ab as _sfc_main$I, l as _sfc_main$J, D as _sfc_main$L, ac as _sfc_main$M, ad as usePricingItem, ae as _sfc_main$N, af as _sfc_main$O, ag as uniqueId, B as _sfc_main$P } from "../../vendor-ui-C0K3osvz.mjs";
+import { a as useLogger, _ as _sfc_main$Q, d as defineCustomElement, g as getComponentName } from "../../component-Djrf1L-Z.mjs";
+import { c as createSubscriptionsService } from "../../subscriptions-ClGIr_aS.mjs";
 import { A as ApiStatus } from "../../ApiStatus-CyNDp_op.mjs";
-import { i as isEqual, u as useService, a as isEmpty } from "../../useService-BuWWE5ND.mjs";
-import { c as createInvoicesService } from "../../invoices-BuVOuTOm.mjs";
+import { c as createInvoicesService } from "../../invoices-DIYPN2j_.mjs";
 import { a as requiredIf, r as required, e as email } from "../../index-CzL1ZcGi.mjs";
 import { u as useWatchDebounced } from "../../useWatchDebounced-D1xuIX6_.mjs";
-import { c as createPaymentMethodsService } from "../../paymentMethods-Di32oJ39.mjs";
-import { u as usePortal } from "../../usePortal-DJDJNLbo.mjs";
-import { c as createCustomerService } from "../../customer-TIi7iZFw.mjs";
-import { _ as _sfc_main$C, l as loadAdyen, e as getAdyenExpressCheckoutConfiguration, c as transformObjectToAdyenObject, d as createReturnUrl, s as safeUrlRedirect } from "../../adyenLoader-gsbzSjYV.mjs";
-import { _ as _sfc_main$F } from "../../PricingGroupContent.vue_vue_type_script_setup_true_lang-CzS32ZUt.mjs";
+import { c as createPaymentMethodsService } from "../../paymentMethods-67b3UlTZ.mjs";
+import { u as useService } from "../../useService-BsSEI8DZ.mjs";
+import { u as usePortal } from "../../usePortal-cmE08vYs.mjs";
+import { c as createCustomerService } from "../../customer-B31QzznT.mjs";
+import { _ as _sfc_main$C, e as getAdyenExpressCheckoutConfiguration, c as transformObjectToAdyenObject, d as createReturnUrl, s as safeUrlRedirect } from "../../adyen-Bwewy3HC.mjs";
+import { _ as _sfc_main$F } from "../../PricingGroupContent.vue_vue_type_script_setup_true_lang-BChVMzCj.mjs";
 import { u as useViewport } from "../../useViewport-Bu0cyeSi.mjs";
-import { _ as _sfc_main$K } from "../../Skeleton.vue_vue_type_script_setup_true_lang-DXJcL7x6.mjs";
-import { c as createPaymentsService } from "../../payments-C5fD1PXB.mjs";
-import { C as ContentWithAsideLayout } from "../../ContentWithAsideLayout-BTdixy3L.mjs";
+import { _ as _sfc_main$K } from "../../Skeleton.vue_vue_type_script_setup_true_lang-DGMxHc20.mjs";
+import { c as createPaymentsService } from "../../payments-Dq6R37Fz.mjs";
+import { C as ContentWithAsideLayout } from "../../ContentWithAsideLayout-DhfUkZZg.mjs";
 function getFirstPricingPlanScheduleOfType({
   pricingPlanScheduleInfos,
   type
@@ -386,6 +386,7 @@ const EMPTY_LEGAL_ENTITY_NAME = "preview";
 const EMPTY_COUNTRY = "NL";
 const useInvoicePreview = () => {
   const { getInvoicePreview } = createInvoicesService();
+  const logger = useLogger();
   const trialPeriod = ref();
   const trialInvoicePreview = ref();
   const invoicePreview = ref();
@@ -529,6 +530,7 @@ const useInvoicePreview = () => {
       invoicePreview.value = updatedPreviews[selectedPeriodKey];
     } catch (error) {
       status.value = ApiStatus.Failed;
+      logger.error("INVOICE_PREVIEW_FAILED", "Failed to load invoice preview", {}, error);
       throw error;
     } finally {
       status.value = ApiStatus.Done;
@@ -574,7 +576,7 @@ function useCheckoutForm({
   const updateInitialState = (state) => {
     const newState = getInitialState({ ...form.value, ...state });
     form.value = newState;
-    initialFormState.value = structuredClone(newState);
+    initialFormState.value = structuredClone(toRaw(newState));
   };
   const requiredFields = computed(
     () => getRequiredFieldsForCountry(form.value.country)
@@ -625,7 +627,9 @@ function useCheckoutForm({
   onMounted(async () => {
     await getCountryFromGeoLocationService(initialState == null ? void 0 : initialState.country);
   });
-  useWatchDebounced(() => structuredClone(form.value), handleFormChange, { debounce: 200 });
+  useWatchDebounced(() => structuredClone(toRaw(form.value)), handleFormChange, {
+    debounce: 200
+  });
   return {
     form,
     validation,
@@ -661,7 +665,11 @@ const usePaymentMethodOptions = () => {
   const cachedPayload = ref();
   const { getPaymentMethodOptions } = createPaymentMethodsService();
   const initialValue = [];
-  const { data: paymentMethodOptions, execute, isPending } = useService({
+  const {
+    data: paymentMethodOptions,
+    execute,
+    isPending
+  } = useService({
     initialValue,
     service: getPaymentMethodOptions
   });
@@ -1033,11 +1041,11 @@ function useCheckoutView({
 function usePromotionCode({
   checkoutForm,
   updateInvoicePreviewOnBillingInformationChange,
-  logger,
   formatErrorMessage,
   onInvalidPromotionCode,
   onApplyError
 }) {
+  const logger = useLogger();
   const isPromotionCodePending = ref(false);
   const promotionCodeErrorMessage = ref(null);
   const setErrorMessage = (action, error) => {
@@ -1059,7 +1067,7 @@ function usePromotionCode({
         promotionCode: normalizedCode
       });
     } catch (error) {
-      logger == null ? void 0 : logger.capture(error, {
+      logger.capture(error, {
         code: "PROMOTION_CODE_APPLY_FAILED",
         message: "Failed to apply promotion code"
       });
@@ -1085,7 +1093,7 @@ function usePromotionCode({
     try {
       await updateInvoicePreviewOnBillingInformationChange({});
     } catch (error) {
-      logger == null ? void 0 : logger.capture(error, {
+      logger.capture(error, {
         code: "PROMOTION_CODE_REMOVE_FAILED",
         message: "Failed to remove promotion code"
       });
@@ -1203,10 +1211,10 @@ function useTaxIDValidationCheck(form) {
 }
 const _hoisted_1$l = { class: "grid grid-cols-1 gap-1" };
 const _hoisted_2$d = { class: "grid grid-cols-1 gap-2" };
-const _hoisted_3$6 = { key: 0 };
-const _hoisted_4$4 = { class: "mt-2 flex flex-col gap-3" };
-const _hoisted_5$2 = { class: "grid grid-cols-3 gap-2" };
-const _hoisted_6$1 = { class: "flex grow flex-col" };
+const _hoisted_3$7 = { key: 0 };
+const _hoisted_4$5 = { class: "mt-2 flex flex-col gap-3" };
+const _hoisted_5$4 = { class: "grid grid-cols-3 gap-2" };
+const _hoisted_6$2 = { class: "flex grow flex-col" };
 const _hoisted_7$1 = { key: 0 };
 const _hoisted_8$1 = { class: "mt-4 grid grid-cols-1 gap-3" };
 const FORM_ID = "checkout-form";
@@ -1370,8 +1378,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
               ]),
               createVNode(unref(_sfc_main$w), null, {
                 default: withCtx(() => [
-                  showBillingDetails.value || __props.isBillingInformationMandatory ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
-                    createElementVNode("div", _hoisted_4$4, [
+                  showBillingDetails.value || __props.isBillingInformationMandatory ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
+                    createElementVNode("div", _hoisted_4$5, [
                       createVNode(unref(_sfc_main$t), {
                         modelValue: model.value.addressLine1,
                         "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => model.value.addressLine1 = $event),
@@ -1399,7 +1407,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                           description: "Address line 2 of the customer address in the checkout form"
                         }) + getOptionalSuffix("addressLine2")
                       }, null, 8, ["modelValue", "placeholder"]),
-                      createElementVNode("div", _hoisted_5$2, [
+                      createElementVNode("div", _hoisted_5$4, [
                         createVNode(unref(_sfc_main$t), {
                           modelValue: model.value.postalCode,
                           "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => model.value.postalCode = $event),
@@ -1451,7 +1459,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 class: "!flex"
               }, {
                 "inline-label": withCtx(() => [
-                  createElementVNode("div", _hoisted_6$1, [
+                  createElementVNode("div", _hoisted_6$2, [
                     createVNode(unref(_sfc_main$r), { tag: "span" }, {
                       default: withCtx(() => [
                         createTextVNode(toDisplayString(unref($t)({
@@ -1566,7 +1574,7 @@ const _hoisted_1$k = {
   class: "flex items-center"
 };
 const _hoisted_2$c = ["innerHTML"];
-const _hoisted_3$5 = ["innerHTML"];
+const _hoisted_3$6 = ["innerHTML"];
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "CheckoutTitle",
   props: {
@@ -1581,7 +1589,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const { $t } = useIntl();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
+      return openBlock(), createElementBlock("div", null, [
         createElementVNode("div", null, [
           createVNode(unref(_sfc_main$r), {
             variant: "heading-1",
@@ -1702,11 +1710,11 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   strong: (text) => `<strong>${text}</strong>`
                 }
               )
-            }, null, 8, _hoisted_3$5))
+            }, null, 8, _hoisted_3$6))
           ]),
           _: 1
         })
-      ], 64);
+      ]);
     };
   }
 });
@@ -1927,10 +1935,14 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$h = { class: "grid grid-cols-1 gap-1" };
+const _hoisted_1$h = { class: "sv-order-summary__body grid grid-cols-1 gap-1" };
 const _hoisted_2$9 = { class: "px-3 py-2" };
-const _hoisted_3$4 = { class: "flex flex-col gap-3" };
-const _hoisted_4$3 = { class: "px-3 py-2" };
+const _hoisted_3$5 = { class: "sv-order-summary__billing-period flex flex-col gap-3" };
+const _hoisted_4$4 = { class: "px-3 py-2" };
+const _hoisted_5$3 = {
+  key: 3,
+  class: "sv-order-summary__items"
+};
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "OrderSummary",
   props: {
@@ -2213,6 +2225,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$s), {
+        class: "sv-order-summary",
         "no-border": "",
         "no-spacing": "",
         "content-background": "none",
@@ -2224,7 +2237,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$h, [
-            createVNode(unref(_sfc_main$s), { "no-spacing": "" }, {
+            createVNode(unref(_sfc_main$s), {
+              "no-spacing": "",
+              class: "sv-order-summary__subscription"
+            }, {
               default: withCtx(() => [
                 __props.subscription ? (openBlock(), createBlock(_sfc_main$k, {
                   key: 0,
@@ -2247,7 +2263,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                 var _a;
                 return [
                   createElementVNode("div", _hoisted_2$9, [
-                    createElementVNode("div", _hoisted_3$4, [
+                    createElementVNode("div", _hoisted_3$5, [
                       highOption.value ? (openBlock(), createBlock(_sfc_main$F, {
                         key: 0,
                         name: highOption.value.label,
@@ -2283,6 +2299,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               key: 1,
               "single-model-value": selectedBillingPeriodKey.value,
               "onUpdate:singleModelValue": _cache[0] || (_cache[0] = ($event) => selectedBillingPeriodKey.value = $event),
+              class: "sv-order-summary__billing-period",
               options: billingPeriodOptions.value,
               size: "xl",
               "has-large-dropdown": "",
@@ -2291,10 +2308,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             }, null, 8, ["single-model-value", "options"])) : createCommentVNode("", true),
             __props.isUsageBased ? (openBlock(), createBlock(unref(_sfc_main$s), {
               key: 2,
-              "no-spacing": ""
+              "no-spacing": "",
+              class: "sv-order-summary__usage"
             }, {
               default: withCtx(() => [
-                createElementVNode("div", _hoisted_4$3, [
+                createElementVNode("div", _hoisted_4$4, [
                   createVNode(unref(_sfc_main$r), {
                     "no-spacing": "",
                     variant: "body-sm",
@@ -2313,15 +2331,17 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             })) : createCommentVNode("", true),
-            __props.invoice && __props.variant !== "products-inline" ? (openBlock(), createBlock(unref(_sfc_main$H), {
-              key: 3,
-              invoice: __props.invoice,
-              "wrapper-component": unref(_sfc_main$s)
-            }, null, 8, ["invoice", "wrapper-component"])) : createCommentVNode("", true),
-            createVNode(unref(_sfc_main$s), null, {
+            __props.invoice && __props.variant !== "products-inline" ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
+              createVNode(unref(_sfc_main$H), {
+                invoice: __props.invoice,
+                "wrapper-component": unref(_sfc_main$s)
+              }, null, 8, ["invoice", "wrapper-component"])
+            ])) : createCommentVNode("", true),
+            createVNode(unref(_sfc_main$s), { class: "sv-order-summary__totals" }, {
               default: withCtx(() => [
                 __props.invoice ? (openBlock(), createBlock(unref(_sfc_main$I), {
                   key: 0,
+                  class: "sv-order-summary__invoice-preview",
                   variant: __props.variant === "products-inline" ? "default" : "without-products",
                   invoice: __props.invoice,
                   "trial-invoice": __props.trialInvoice,
@@ -2332,7 +2352,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["variant", "invoice", "trial-invoice", "is-paid", "collapsible", "is-preview-without-taxes"])) : (openBlock(), createBlock(unref(_sfc_main$r), {
                   key: 1,
                   variant: "body-sm",
-                  shade: "lighter"
+                  shade: "lighter",
+                  class: "sv-order-summary__empty"
                 }, {
                   default: withCtx(() => [
                     createTextVNode(toDisplayString(unref($t)({
@@ -2353,7 +2374,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$g = { class: "py-4 flex flex-col items-center justify-center" };
+const _hoisted_1$g = { class: "sv-empty-state__body flex flex-col items-center justify-center py-4" };
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "EmptyStatePlaceholder",
   props: {
@@ -2361,13 +2382,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$s), null, {
+      return openBlock(), createBlock(unref(_sfc_main$s), { class: "sv-empty-state" }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$g, [
             createVNode(unref(_sfc_main$J), {
               icon: __props.icon,
               size: "lg",
-              class: "text-gray-500"
+              class: "sv-empty-state__icon text-gray-500"
             }, null, 8, ["icon"]),
             createVNode(unref(_sfc_main$r), {
               center: "",
@@ -2375,7 +2396,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               variant: "body-sm",
               weight: "semibold",
               shade: "lighter",
-              class: "mt-2"
+              class: "sv-empty-state__title mt-2"
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "title")
@@ -2387,7 +2408,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               tag: "span",
               variant: "body-xs",
               shade: "lightest",
-              class: "mt-1"
+              class: "sv-empty-state__message mt-1"
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "message")
@@ -2514,13 +2535,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const { authorizePayment } = createPaymentsService();
     const paymentAcceptorId = props.paymentMethodOptionsResponse.payment_acceptor.id;
     const initApplePay = async () => {
-      const { AdyenCheckout, ApplePay } = await loadAdyen();
+      const { AdyenCheckout, ApplePay } = await import("../../index-DyvRdSR7.mjs");
       const checkout = await AdyenCheckout(
         getAdyenExpressCheckoutConfiguration({
           amount: props.amount,
           locale: props.locale,
           countryCode: props.countryCode,
-          paymentMethodOptionResponse: props.paymentMethodOptionsResponse
+          paymentMethodOptionResponse: props.paymentMethodOptionsResponse,
+          logger
         })
       );
       const applePay = new ApplePay(checkout, {
@@ -2666,7 +2688,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         }
       });
       if (!applePayButtonRef.value) {
-        console.warn("Apple Pay button not found");
+        logger.error("APPLE_PAY_ERROR", "Apple Pay button ref not found");
         return;
       }
       try {
@@ -2674,7 +2696,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         applePay.mount(applePayButtonRef.value);
         emit("ready");
       } catch (e) {
-        console.warn("Apple Pay not available", e);
+        logger.error("APPLE_PAY_ERROR", "Apple Pay not available on this device", {}, e);
       }
     };
     const getAppleIntervalConfigFromTimePeriod = (timePeriod) => {
@@ -2761,13 +2783,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const paypalButtonRef = ref();
     const logger = useLogger();
     const initPaypal = async () => {
-      const { AdyenCheckout, PayPal } = await loadAdyen();
+      const { AdyenCheckout, PayPal } = await import("../../index-DyvRdSR7.mjs");
       const checkout = await AdyenCheckout(
         getAdyenExpressCheckoutConfiguration({
           locale: props.locale,
           amount: props.amount,
           countryCode: props.countryCode,
-          paymentMethodOptionResponse: props.paymentMethodOptionsResponse
+          paymentMethodOptionResponse: props.paymentMethodOptionsResponse,
+          logger
         })
       );
       const paypal = new PayPal(checkout, {
@@ -2817,7 +2840,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = { class: "w-[1px] h-[1px] overflow-hidden opacity-0 absolute" };
+const _hoisted_1$c = { class: "absolute h-[1px] w-[1px] overflow-hidden opacity-0" };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "ExpressPaymentMethodGooglePay",
   props: {
@@ -2835,13 +2858,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const googlePayButtonRef = ref();
     const logger = useLogger();
     const initGooglePay = async () => {
-      const { AdyenCheckout, GooglePay } = await loadAdyen();
+      const { AdyenCheckout, GooglePay } = await import("../../index-DyvRdSR7.mjs");
       const checkout = await AdyenCheckout(
         getAdyenExpressCheckoutConfiguration({
           locale: props.locale,
           amount: props.amount,
           countryCode: props.countryCode,
-          paymentMethodOptionResponse: props.paymentMethodOptionsResponse
+          paymentMethodOptionResponse: props.paymentMethodOptionsResponse,
+          logger
         })
       );
       const googlePay = new GooglePay(checkout, { isExpress: true });
@@ -2901,8 +2925,8 @@ const _hoisted_1$b = {
   class: "mt-4n"
 };
 const _hoisted_2$7 = { class: "mb-2" };
-const _hoisted_3$3 = { class: "grid grid-cols-6 gap-1 md:gap-2" };
-const _hoisted_4$2 = { class: "h-4 mt-4" };
+const _hoisted_3$4 = { class: "grid grid-cols-6 gap-1 md:gap-2" };
+const _hoisted_4$3 = { class: "h-4 mt-4" };
 const DEFAULT_EXPRESS_PAYMENT_BUTTON_COUNT = 2;
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "ExpressPaymentMethods",
@@ -2998,7 +3022,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             _: 1
           }))
         ]),
-        createElementVNode("div", _hoisted_3$3, [
+        createElementVNode("div", _hoisted_3$4, [
           !isReady.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             createVNode(_sfc_main$K, { class: "h-11 col-span-3" }),
             createVNode(_sfc_main$K, { class: "h-11 col-span-3" })
@@ -3061,7 +3085,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             }, null, 8, ["amount", "billing-information", "country-code", "locale", "is-visible", "payment-method-options-response"])) : createCommentVNode("", true)
           ], 2)
         ]),
-        createElementVNode("div", _hoisted_4$2, [
+        createElementVNode("div", _hoisted_4$3, [
           !isReady.value ? (openBlock(), createBlock(_sfc_main$K, {
             key: 0,
             variant: "divider-text"
@@ -3238,9 +3262,9 @@ function useSeatBasedPricing({
 }
 const _hoisted_1$8 = { class: "flex flex-row-reverse md:flex-row gap-4" };
 const _hoisted_2$6 = { class: "w-24 md:w-32 shrink-0 justify-start" };
-const _hoisted_3$2 = ["tabindex"];
-const _hoisted_4$1 = { key: 0 };
-const _hoisted_5$1 = { key: 0 };
+const _hoisted_3$3 = ["tabindex"];
+const _hoisted_4$2 = { key: 0 };
+const _hoisted_5$2 = { key: 0 };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "SeatsEditorItem",
   props: /* @__PURE__ */ mergeModels({
@@ -3349,12 +3373,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             })) : createCommentVNode("", true)
-          ], 10, _hoisted_3$2)
+          ], 10, _hoisted_3$3)
         ]),
-        ((_c = (_b = unref(seats).pricing) == null ? void 0 : _b.tiered) == null ? void 0 : _c.bands) ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+        ((_c = (_b = unref(seats).pricing) == null ? void 0 : _b.tiered) == null ? void 0 : _c.bands) ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
           createVNode(unref(_sfc_main$w), null, {
             default: withCtx(() => [
-              isExpanded.value ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+              isExpanded.value ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
                 createVNode(_sfc_main$b, {
                   bands: unref(seats).pricing.tiered.bands,
                   period: unref(seats).billing.period
@@ -3783,7 +3807,7 @@ function getAllPricingsFromPricingPlanVersion(pricingPlanVersion) {
   const pricings = ((_a = pricingPlanVersion.pricing_categories) == null ? void 0 : _a.flatMap((category) => category.pricings ?? [])) ?? [];
   return pricings.filter((pricing) => pricing !== null);
 }
-const _hoisted_1$3 = { class: "grid grid-cols-1 gap-1" };
+const _hoisted_1$3 = { class: "sv-plan-customization__body grid grid-cols-1 gap-1" };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "PlanCustomizationEditor",
   props: /* @__PURE__ */ mergeModels({
@@ -3825,6 +3849,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$s), {
+        class: "sv-plan-customization",
         title: unref($t)({
           defaultMessage: "Customize plan",
           id: "checkout.customize_plan_block.title",
@@ -3839,6 +3864,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$9, {
               modelValue: seatsModel.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => seatsModel.value = $event),
+              class: "sv-plan-customization__seats",
               "initial-seats-values": __props.initialSeatsValues,
               pricings: pricings.value
             }, null, 8, ["modelValue", "initial-seats-values", "pricings"]),
@@ -3850,6 +3876,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   key: 0,
                   modelValue: enabledPricingIdsModel.value,
                   "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => enabledPricingIdsModel.value = $event),
+                  class: "sv-plan-customization__group",
                   "group-name": pricingGroup.name,
                   pricings: pricingGroup.pricings,
                   "billing-period": __props.billingPeriod,
@@ -3858,6 +3885,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   key: 1,
                   modelValue: enabledPricingIdsModel.value,
                   "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => enabledPricingIdsModel.value = $event),
+                  class: "sv-plan-customization__group",
                   "group-name": pricingGroup.name,
                   pricings: pricingGroup.pricings,
                   constraint: pricingGroup.selection_constraint,
@@ -3867,6 +3895,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   key: 2,
                   modelValue: enabledPricingIdsModel.value,
                   "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => enabledPricingIdsModel.value = $event),
+                  class: "sv-plan-customization__group",
                   pricings: pricingGroup.pricings,
                   "group-name": pricingGroup.name,
                   "billing-period": __props.billingPeriod,
@@ -3877,6 +3906,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$6, {
               modelValue: enabledPricingIdsModel.value,
               "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => enabledPricingIdsModel.value = $event),
+              class: "sv-plan-customization__group",
               pricings: addonPricings.value,
               "billing-period": __props.billingPeriod,
               currency: __props.currency
@@ -3888,15 +3918,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function uniqueId(prefix = "") {
-  return `${prefix}${crypto.randomUUID()}`;
-}
 const _hoisted_1$2 = ["aria-expanded", "aria-label"];
 const _hoisted_2$2 = { class: "flex w-full cursor-pointer flex-row items-center justify-between gap-3 px-3 py-2" };
-const _hoisted_3$1 = { class: "flex flex-row items-center gap-2" };
-const _hoisted_4 = ["onKeydown"];
-const _hoisted_5 = ["aria-label"];
-const _hoisted_6 = { class: "flex w-full cursor-pointer flex-row items-center justify-between gap-3 px-3 py-2" };
+const _hoisted_3$2 = { class: "flex flex-row items-center gap-2" };
+const _hoisted_4$1 = ["onKeydown"];
+const _hoisted_5$1 = ["aria-label"];
+const _hoisted_6$1 = { class: "flex w-full cursor-pointer flex-row items-center justify-between gap-3 px-3 py-2" };
 const _hoisted_7 = { class: "flex flex-row items-center gap-2" };
 const _hoisted_8 = {
   class: "sr-only",
@@ -4040,7 +4067,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               onClick: toggleExpanded
             }, [
               createElementVNode("div", _hoisted_2$2, [
-                createElementVNode("div", _hoisted_3$1, [
+                createElementVNode("div", _hoisted_3$2, [
                   createVNode(unref(_sfc_main$J), { icon: "local_activity" }),
                   createVNode(unref(_sfc_main$r), {
                     id: labelId,
@@ -4102,7 +4129,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }, 8, ["disabled", "aria-label", "aria-disabled"])
-            ], 40, _hoisted_4), [
+            ], 40, _hoisted_4$1), [
               [vShow, isExpanded.value]
             ])
           ]),
@@ -4121,7 +4148,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               "aria-label": removeAriaLabel.value,
               onClick: removeCode
             }, [
-              createElementVNode("div", _hoisted_6, [
+              createElementVNode("div", _hoisted_6$1, [
                 createElementVNode("div", _hoisted_7, [
                   createVNode(unref(_sfc_main$J), { icon: "local_activity" }),
                   createVNode(unref(_sfc_main$r), {
@@ -4136,7 +4163,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 ]),
                 createVNode(unref(_sfc_main$J), { icon: "close" })
               ])
-            ], 8, _hoisted_5)
+            ], 8, _hoisted_5$1)
           ]),
           _: 1
         })),
@@ -4147,7 +4174,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$1 = { class: "flex justify-around" };
 const _hoisted_2$1 = { class: "flex items-center gap-0.5" };
-const _hoisted_3 = {
+const _hoisted_3$1 = {
   key: 0,
   xmlns: "http://www.w3.org/2000/svg",
   width: "40",
@@ -4200,7 +4227,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(securePaymentsText.value) + " ", 1),
-              showAdyen.value ? (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[0] || (_cache[0] = [
+              showAdyen.value ? (openBlock(), createElementBlock("svg", _hoisted_3$1, [..._cache[0] || (_cache[0] = [
                 createElementVNode("path", {
                   fill: "currentColor",
                   d: "M.049 2.917h5.845c.646 0 1.17.522 1.17 1.166v5.834H1.217c-.646 0-1.17-.522-1.17-1.167V5.833h2.924v2.334H4.14v-3.5H.049zM32.784 2.917v7h2.922v-5.25h1.17v5.25h2.922V4.083c0-.644-.523-1.166-1.169-1.166zM16.417 12.833h5.845c.646 0 1.17-.522 1.17-1.166v-8.75h-2.924v5.25H19.34v-5.25h-2.922V8.75c0 .645.523 1.167 1.169 1.167h2.922v1.166h-4.091zM31.614 9.917H25.77c-.646 0-1.17-.522-1.17-1.167V2.917h5.846c.646 0 1.17.522 1.17 1.166V7h-2.923V4.667h-1.17v3.5h4.092zM15.248 0v9.917H9.402c-.646 0-1.17-.522-1.17-1.167V4.083c0-.644.524-1.166 1.17-1.166h1.754v5.25h1.169V0z"
@@ -4214,8 +4241,21 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = { class: "flex flex-col gap-2" };
+const _hoisted_1 = { class: "sv-checkout__header" };
+const _hoisted_2 = {
+  key: 5,
+  class: "sv-checkout__payment-methods"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "sv-checkout__payment-methods-body"
+};
+const _hoisted_4 = {
+  key: 2,
+  class: "sv-checkout__payment-form"
+};
+const _hoisted_5 = { class: "sv-checkout__order-summary" };
+const _hoisted_6 = { class: "flex flex-col gap-2" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Checkout",
   props: {
@@ -4225,7 +4265,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const PaymentIntegrationForm = defineAsyncComponent(
-      () => import("../../PaymentIntegrationForm-ID4QnvA3.mjs")
+      () => import("../../PaymentIntegrationForm-DNkjhqMF.mjs")
     );
     const props = __props;
     const emit = __emit;
@@ -4492,7 +4532,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     } = usePromotionCode({
       checkoutForm,
       updateInvoicePreviewOnBillingInformationChange,
-      logger,
       formatErrorMessage: ({ action }) => action === "apply" ? $t({
         defaultMessage: "Promotion code could not be applied. Please try again.",
         id: "checkout.promotion_code.apply_failed",
@@ -4540,32 +4579,42 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       emit("ready");
     });
     return (_ctx, _cache) => {
-      return criticalError.value ? (openBlock(), createBlock(_sfc_main$m, { key: 0 })) : (openBlock(), createBlock(unref(ContentWithAsideLayout), { key: 1 }, {
+      return criticalError.value ? (openBlock(), createBlock(_sfc_main$m, {
+        key: 0,
+        class: "sv-checkout sv-root sv-screen sv-checkout--error"
+      })) : (openBlock(), createBlock(unref(ContentWithAsideLayout), {
+        key: 1,
+        class: normalizeClass(["sv-checkout sv-root sv-screen", { "sv-checkout--paid": unref(isPaid) }])
+      }, {
         header: withCtx(() => [
-          createVNode(_sfc_main$K, { class: "min-h-[52px] w-96" }, {
-            default: withCtx(() => {
-              var _a2, _b2, _c2;
-              return [
-                unref(invoicePreview) && unref(subscription) && subscriptionStartDate.value ? (openBlock(), createBlock(_sfc_main$n, {
-                  key: 0,
-                  "trial-start-date": trialStartDate.value,
-                  "trial-period": unref(trialPeriod),
-                  "subscription-start-date": subscriptionStartDate.value,
-                  "subscription-name": ((_a2 = unref(subscription)) == null ? void 0 : _a2.name) ?? "",
-                  amount: (_b2 = unref(invoicePreview)) == null ? void 0 : _b2.invoice_amount_including_tax,
-                  "billing-period": (_c2 = unref(subscription)) == null ? void 0 : _c2.billing_period,
-                  "country-code": unref(checkoutForm).form.value.country
-                }, null, 8, ["trial-start-date", "trial-period", "subscription-start-date", "subscription-name", "amount", "billing-period", "country-code"])) : createCommentVNode("", true)
-              ];
-            }),
-            _: 1
-          })
+          createElementVNode("div", _hoisted_1, [
+            createVNode(_sfc_main$K, { class: "min-h-[52px] w-96" }, {
+              default: withCtx(() => {
+                var _a2, _b2, _c2;
+                return [
+                  unref(invoicePreview) && unref(subscription) && subscriptionStartDate.value ? (openBlock(), createBlock(_sfc_main$n, {
+                    key: 0,
+                    class: "sv-checkout__title",
+                    "trial-start-date": trialStartDate.value,
+                    "trial-period": unref(trialPeriod),
+                    "subscription-start-date": subscriptionStartDate.value,
+                    "subscription-name": ((_a2 = unref(subscription)) == null ? void 0 : _a2.name) ?? "",
+                    amount: (_b2 = unref(invoicePreview)) == null ? void 0 : _b2.invoice_amount_including_tax,
+                    "billing-period": (_c2 = unref(subscription)) == null ? void 0 : _c2.billing_period,
+                    "country-code": unref(checkoutForm).form.value.country
+                  }, null, 8, ["trial-start-date", "trial-period", "subscription-start-date", "subscription-name", "amount", "billing-period", "country-code"])) : createCommentVNode("", true)
+                ];
+              }),
+              _: 1
+            })
+          ])
         ]),
         content: withCtx(() => {
           var _a2, _b2, _c2;
           return [
             unref(subscription) && unref(isMobileViewport) ? (openBlock(), createBlock(_sfc_main$j, {
               key: 0,
+              class: "sv-checkout__mobile-order-summary",
               subscription: unref(subscription),
               invoice: unref(invoicePreview),
               "invoice-preview-by-billing-period": unref(invoicePreviewByBillingPeriod),
@@ -4587,6 +4636,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               "onUpdate:seatsValues": _cache[0] || (_cache[0] = ($event) => seatsValuesModel.value = $event),
               "enabled-pricing-ids": enabledPricingIdsModel.value,
               "onUpdate:enabledPricingIds": _cache[1] || (_cache[1] = ($event) => enabledPricingIdsModel.value = $event),
+              class: "sv-checkout__plan-customization",
               subscription: unref(subscription),
               "initial-seats-values": (_b2 = unref(checkoutForm).initialState) == null ? void 0 : _b2.value.seatsValues,
               "billing-period": unref(subscription).billing_period,
@@ -4594,6 +4644,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["seats-values", "enabled-pricing-ids", "subscription", "initial-seats-values", "billing-period", "currency"])) : createCommentVNode("", true),
             !unref(isPaid) && unref(checkoutForm).form.value.country && unref(amount) && expressPaymentMethodBillingInformation.value ? (openBlock(), createBlock(_sfc_main$d, {
               key: 2,
+              class: "sv-checkout__express-payment-methods",
               amount: unref(amount),
               "country-code": unref(checkoutForm).form.value.country,
               locale: unref(locale),
@@ -4604,12 +4655,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["amount", "country-code", "locale", "payment-methods-options-response", "billing-information", "on-billing-information-change"])) : createCommentVNode("", true),
             unref(isPaid) ? (openBlock(), createBlock(_sfc_main$l, {
               key: 3,
+              class: "sv-checkout__completed-payment",
               onContinueToMerchant: handleRedirect
             })) : createCommentVNode("", true),
             !unref(isPaid) ? (openBlock(), createBlock(_sfc_main$o, {
               key: 4,
               modelValue: unref(checkoutForm).form.value,
               "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(checkoutForm).form.value = $event),
+              class: "sv-checkout__customer-form",
               validation: unref(checkoutForm).validation,
               "read-only-email": (_c2 = props.configuration) == null ? void 0 : _c2.email,
               "show-customer-info-on-top": showCustomerInfoOnTop.value || unref(isPaid),
@@ -4617,114 +4670,121 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               "get-is-field-required": unref(checkoutForm).getIsFieldRequired,
               "read-only": unref(isPaid)
             }, null, 8, ["modelValue", "validation", "read-only-email", "show-customer-info-on-top", "is-billing-information-mandatory", "get-is-field-required", "read-only"])) : createCommentVNode("", true),
-            !unref(isPaid) ? (openBlock(), createBlock(_sfc_main$K, {
-              key: 5,
+            !unref(isPaid) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              createVNode(_sfc_main$K, {
+                variant: "section",
+                class: "min-h-[130px]"
+              }, {
+                default: withCtx(() => [
+                  !unref(isPaymentMethodsPending) || unref(isPaymentMethodsPending) && unref(paymentMethodOptions).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                    createVNode(unref(_sfc_main$r), {
+                      variant: "heading-3",
+                      tag: "h2",
+                      class: "sv-checkout__payment-methods-title mb-2"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref($t)({
+                          defaultMessage: "Payment method",
+                          id: "checkout.payment_method_block.title",
+                          description: "The title of the payment method block in the checkout form"
+                        })), 1)
+                      ]),
+                      _: 1
+                    }),
+                    !unref(checkoutForm).form.value.country ? (openBlock(), createBlock(_sfc_main$i, {
+                      key: 0,
+                      class: "sv-checkout__payment-methods-empty",
+                      icon: "captive_portal"
+                    }, {
+                      title: withCtx(() => [
+                        createTextVNode(toDisplayString(unref($t)({
+                          defaultMessage: "Select your billing country",
+                          id: "checkout.payment_method_block.no_country_selected_title",
+                          description: "The title shown when no country is selected"
+                        })), 1)
+                      ]),
+                      message: withCtx(() => [
+                        createTextVNode(toDisplayString(unref($t)({
+                          defaultMessage: "Payment methods will be shown after you select the billing country.",
+                          id: "checkout.payment_method_block.no_country_selected_message",
+                          description: "The message shown when no country is selected"
+                        })), 1)
+                      ]),
+                      _: 1
+                    })) : unref(paymentMethodOptions).length === 0 ? (openBlock(), createBlock(_sfc_main$i, {
+                      key: 1,
+                      class: "sv-checkout__payment-methods-empty",
+                      icon: "credit_card_off"
+                    }, {
+                      title: withCtx(() => [
+                        createTextVNode(toDisplayString(unref($t)({
+                          defaultMessage: "No payment methods available",
+                          id: "checkout.payment_method_block.no_payment_methods_available_title",
+                          description: "The title shown when there are no available payment methods"
+                        })), 1)
+                      ]),
+                      message: withCtx(() => [
+                        createTextVNode(toDisplayString(unref($t)({
+                          defaultMessage: "There are no available payment methods. Please contact support for more information.",
+                          id: "checkout.payment_method_block.no_payment_methods_available_message",
+                          description: "The message shown when there are no available payment methods"
+                        })), 1)
+                      ]),
+                      _: 1
+                    })) : unref(amount) && unref(checkoutForm).form.value.country ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                      createVNode(unref(PaymentIntegrationForm), {
+                        ref_key: "paymentIntegrationFormRef",
+                        ref: paymentIntegrationFormRef,
+                        "country-code": unref(checkoutForm).form.value.country,
+                        context: unref(authorizationContext),
+                        amount: unref(amount),
+                        variant: "AUTHORIZE",
+                        "payment-method-options": unref(paymentMethodOptions) ?? [],
+                        "validate-on-submit": handleValidateOnSubmit,
+                        "force-store-payment-method": "",
+                        onPaymentSuccess: handlePaymentSuccess,
+                        onReady: _cache[3] || (_cache[3] = ($event) => emit("ready"))
+                      }, null, 8, ["country-code", "context", "amount", "payment-method-options"])
+                    ])) : createCommentVNode("", true)
+                  ])) : createCommentVNode("", true)
+                ]),
+                _: 1
+              })
+            ])) : createCommentVNode("", true)
+          ];
+        }),
+        aside: withCtx(() => [
+          createElementVNode("div", _hoisted_5, [
+            createVNode(_sfc_main$K, {
               variant: "section",
-              class: "min-h-[130px]"
+              class: "min-h-[220px]"
             }, {
-              default: withCtx(() => [
-                !unref(isPaymentMethodsPending) || unref(isPaymentMethodsPending) && unref(paymentMethodOptions).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [
-                  createVNode(unref(_sfc_main$r), {
-                    variant: "heading-3",
-                    tag: "h2",
-                    class: "mb-2"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(unref($t)({
-                        defaultMessage: "Payment method",
-                        id: "checkout.payment_method_block.title",
-                        description: "The title of the payment method block in the checkout form"
-                      })), 1)
-                    ]),
-                    _: 1
-                  }),
-                  !unref(checkoutForm).form.value.country ? (openBlock(), createBlock(_sfc_main$i, {
+              default: withCtx(() => {
+                var _a2;
+                return [
+                  unref(subscription) && unref(invoicePreview) ? (openBlock(), createBlock(_sfc_main$j, {
                     key: 0,
-                    icon: "captive_portal"
-                  }, {
-                    title: withCtx(() => [
-                      createTextVNode(toDisplayString(unref($t)({
-                        defaultMessage: "Select your billing country",
-                        id: "checkout.payment_method_block.no_country_selected_title",
-                        description: "The title shown when no country is selected"
-                      })), 1)
-                    ]),
-                    message: withCtx(() => [
-                      createTextVNode(toDisplayString(unref($t)({
-                        defaultMessage: "Payment methods will be shown after you select the billing country.",
-                        id: "checkout.payment_method_block.no_country_selected_message",
-                        description: "The message shown when no country is selected"
-                      })), 1)
-                    ]),
-                    _: 1
-                  })) : unref(paymentMethodOptions).length === 0 ? (openBlock(), createBlock(_sfc_main$i, {
-                    key: 1,
-                    icon: "credit_card_off"
-                  }, {
-                    title: withCtx(() => [
-                      createTextVNode(toDisplayString(unref($t)({
-                        defaultMessage: "No payment methods available",
-                        id: "checkout.payment_method_block.no_payment_methods_available_title",
-                        description: "The title shown when there are no available payment methods"
-                      })), 1)
-                    ]),
-                    message: withCtx(() => [
-                      createTextVNode(toDisplayString(unref($t)({
-                        defaultMessage: "There are no available payment methods. Please contact support for more information.",
-                        id: "checkout.payment_method_block.no_payment_methods_available_message",
-                        description: "The message shown when there are no available payment methods"
-                      })), 1)
-                    ]),
-                    _: 1
-                  })) : unref(amount) && unref(checkoutForm).form.value.country ? (openBlock(), createBlock(unref(PaymentIntegrationForm), {
-                    key: 2,
-                    ref_key: "paymentIntegrationFormRef",
-                    ref: paymentIntegrationFormRef,
+                    subscription: unref(subscription),
+                    invoice: unref(invoicePreview),
+                    "invoice-preview-by-billing-period": unref(invoicePreviewByBillingPeriod),
+                    "trial-invoice": unref(trialInvoicePreview),
+                    "enabled-pricing-ids": enabledPricingIdsModel.value,
+                    "trial-period": unref(trialPeriod),
                     "country-code": unref(checkoutForm).form.value.country,
-                    context: unref(authorizationContext),
-                    amount: unref(amount),
-                    variant: "AUTHORIZE",
-                    "payment-method-options": unref(paymentMethodOptions) ?? [],
-                    "validate-on-submit": handleValidateOnSubmit,
-                    "force-store-payment-method": "",
-                    onPaymentSuccess: handlePaymentSuccess,
-                    onReady: _cache[3] || (_cache[3] = ($event) => emit("ready"))
-                  }, null, 8, ["country-code", "context", "amount", "payment-method-options"])) : createCommentVNode("", true)
-                ])) : createCommentVNode("", true)
-              ]),
+                    avatar: (_a2 = configuration.value) == null ? void 0 : _a2.avatar,
+                    "is-paid": unref(isPaid),
+                    "is-usage-based": isUsageBased.value,
+                    "is-preview-and-payment-methods-pending": unref(isPaymentMethodsPending) || unref(isInvoicePreviewPending),
+                    onBillingPeriodChange: handleBillingPeriodChange
+                  }, null, 8, ["subscription", "invoice", "invoice-preview-by-billing-period", "trial-invoice", "enabled-pricing-ids", "trial-period", "country-code", "avatar", "is-paid", "is-usage-based", "is-preview-and-payment-methods-pending"])) : createCommentVNode("", true)
+                ];
+              }),
               _: 1
-            })) : createCommentVNode("", true)
-          ];
-        }),
-        aside: withCtx(() => [
-          createVNode(_sfc_main$K, {
-            variant: "section",
-            class: "min-h-[220px]"
-          }, {
-            default: withCtx(() => {
-              var _a2;
-              return [
-                unref(subscription) && unref(invoicePreview) ? (openBlock(), createBlock(_sfc_main$j, {
-                  key: 0,
-                  subscription: unref(subscription),
-                  invoice: unref(invoicePreview),
-                  "invoice-preview-by-billing-period": unref(invoicePreviewByBillingPeriod),
-                  "trial-invoice": unref(trialInvoicePreview),
-                  "enabled-pricing-ids": enabledPricingIdsModel.value,
-                  "trial-period": unref(trialPeriod),
-                  "country-code": unref(checkoutForm).form.value.country,
-                  avatar: (_a2 = configuration.value) == null ? void 0 : _a2.avatar,
-                  "is-paid": unref(isPaid),
-                  "is-usage-based": isUsageBased.value,
-                  "is-preview-and-payment-methods-pending": unref(isPaymentMethodsPending) || unref(isInvoicePreviewPending),
-                  onBillingPeriodChange: handleBillingPeriodChange
-                }, null, 8, ["subscription", "invoice", "invoice-preview-by-billing-period", "trial-invoice", "enabled-pricing-ids", "trial-period", "country-code", "avatar", "is-paid", "is-usage-based", "is-preview-and-payment-methods-pending"])) : createCommentVNode("", true)
-              ];
-            }),
-            _: 1
-          }),
+            })
+          ]),
           !unref(isPaid) ? (openBlock(), createBlock(_sfc_main$3, {
             key: 0,
+            class: "sv-checkout__promotion-code",
             "promotion-code": promotionCode.value,
             "onUpdate:appliedCode": _cache[4] || (_cache[4] = ($event) => promotionCode.value = $event),
             onRemove: unref(removePromotionCode),
@@ -4732,20 +4792,20 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           }, null, 8, ["promotion-code", "onRemove", "onApply"])) : createCommentVNode("", true),
           unref(promotionCodeErrorMessage) ? (openBlock(), createBlock(unref(_sfc_main$P), {
             key: 1,
-            class: "mt-2",
+            class: "sv-checkout__promotion-error mt-2",
             title: unref(promotionCodeErrorMessage)
           }, null, 8, ["title"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_6, [
             !unref(isPaid) ? (openBlock(), createBlock(_sfc_main$K, {
               key: 0,
-              class: "min-h-[44px]"
+              class: "sv-checkout__submit-skeleton min-h-[44px]"
             }, {
               default: withCtx(() => [
                 unref(invoicePreview) ? (openBlock(), createBlock(unref(_sfc_main$v), {
                   key: 0,
                   type: "button",
                   size: "lg",
-                  class: "w-full",
+                  class: "sv-action sv-action--primary sv-action--full-width sv-checkout__submit w-full",
                   disabled: unref(isPromotionCodePending) || unref(paymentMethodOptions).length === 0,
                   onClick: handleSubmit
                 }, {
@@ -4769,7 +4829,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ])
         ]),
         _: 1
-      }));
+      }, 8, ["class"]));
     };
   }
 });
@@ -4788,6 +4848,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onLog: { type: Function },
     allowedPortalTypes: { type: Array },
     portalObject: { type: Object },
+    cssOverrides: { type: [String, Array] },
     branding: { type: Object },
     configuration: { type: Object }
   },
@@ -4832,6 +4893,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "experimental-features": __props.experimentalFeatures,
         "log-level": __props.logLevel,
         "on-log": __props.onLog,
+        "css-overrides": __props.cssOverrides,
         onError: _cache[1] || (_cache[1] = (error) => _ctx.$emit("error", error))
       }, {
         default: withCtx(() => {
@@ -4857,7 +4919,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ];
         }),
         _: 3
-      }, 8, ["custom-element-name", "environment", "locale", "portal-object", "primary-color", "secondary-color", "experimental-features", "log-level", "on-log"]);
+      }, 8, ["custom-element-name", "environment", "locale", "portal-object", "primary-color", "secondary-color", "experimental-features", "log-level", "on-log", "css-overrides"]);
     };
   }
 });