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

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

@@ -1,2039 +1,21 @@
-import { defineComponent, createPropsRestProxy, computed, openBlock, createBlock, unref, mergeProps, withCtx, createTextVNode, toDisplayString, createElementBlock, normalizeClass, createVNode, renderSlot, Fragment, renderList, resolveDynamicComponent, ref, createCommentVNode, createElementVNode, withDirectives, isRef, vModelRadio, withKeys, normalizeProps, getCurrentInstance, inject, createSlots, guardReactiveProps, Teleport, normalizeStyle, nextTick, useModel, onMounted, watch, mergeModels, withModifiers, toRef, vShow } from "vue";
-import { _ as _sfc_main$C, a as useIntl, S as SEARCH_SELECT_TELEPORT_TARGET, I as I18N_INJECTION_KEY, b as _sfc_main$11, d as defineCustomElement, g as getComponentName } from "../../component-dpA83LIN.mjs";
-import { c as countryData } from "../../countryData.es--zJAd6LA.mjs";
-import { _ as _sfc_main$G, c as convertDateRangeToTimePeriod, a as _sfc_main$T, u as useTimePeriod, b as usePricingItem, d as _sfc_main$Z } from "../../TrialChip.vue.es-BHYbW8b6.mjs";
-import { b as formatBillingPeriod, a as formatAmount } from "../../formatting.es-D5H_ySFv.mjs";
-import { a as _sfc_main$I, _ as _sfc_main$P } from "../../Button.vue.es-6sBk5tBL.mjs";
-import { _ as _sfc_main$_ } from "../../ErrorNotification.vue.es-Bgw0MIl8.mjs";
-import { c as createSubscriptionsService } from "../../subscriptions-CoeCrY1I.mjs";
-import { S as Symbol$1, m as isArrayLike, d as isArray, i as isBuffer, c as isTypedArray, p as isArguments, a as getTag, k as isPrototype, q as baseKeys, A as ApiStatus } from "../../_Uint8Array-DHE03FZr.mjs";
-import { c as createInvoicesService } from "../../invoices-CNK1Ushv.mjs";
-import { i as isEqual$1, u as useService } from "../../useService-DG_zedHV.mjs";
-import { c as escapeUserInput, d as _sfc_main$M, s as sortedUniqBy, f as useIsMounted, _ as _sfc_main$N, u as useValidation, g as requiredIf, r as required, e as email, o as objectDiff, a as _sfc_main$R, b as _sfc_main$S } from "../../index-CI71bVGE.mjs";
-import { w as watchDebounced, f as watchOnce } from "../../index-BFZ0dPh9.mjs";
-import { c as cloneDeep } from "../../cloneDeep-sm9cY-u2.mjs";
-import { c as createPaymentMethodsService } from "../../paymentMethods-C-ApE-G4.mjs";
-import { u as usePortal, C as ContentWithAsideLayout } from "../../ContentWithAsideLayout-Ct24RV-2.mjs";
-import { a as _sfc_main$U, u as useLogger, g as getAdyenExpressCheckoutConfiguration, t as transformObjectToAdyenObject, c as createReturnUrl, _ as _sfc_main$10 } from "../../PaymentIntegrationForm.vue_vue_type_script_setup_true_lang-BE1lWOk9.mjs";
-import { _ as _sfc_main$W, a as _sfc_main$$ } from "../../PricingGroupContent.vue_vue_type_script_setup_true_lang-BbvDXvIS.mjs";
-import { _ as _sfc_main$Q } from "../../Section.vue.es-3-H1pUTB.mjs";
-import { g as getCountryNameByCode } from "../../getCountryNameByCode.es-ymC9R46j.mjs";
-import { _ as _sfc_main$K } from "../../Alert.vue.es-DsJ1ckRU.mjs";
-import { c as createCustomerService } from "../../customer-CJrpbGX4.mjs";
-import { _ as _sfc_main$D, T as TooltipContent, a as _sfc_main$E } from "../../TooltipParagraph.vue.es-DVJLF9Kv.mjs";
-import { _ as _sfc_main$B, b as _export_sfc, u as useFloating, a as autoUpdate, o as offset, f as flip } from "../../Chip.vue.es-DcW2CjUA.mjs";
-import { g as getComposedString, _ as _sfc_main$V } from "../../Avatar.vue.es-Ba8ZGfm4.mjs";
-import { _ as _sfc_main$F } from "../../Amount.vue.es-C6JE5rL8.mjs";
-import { i as isEmpty$1 } from "../../isEmpty.es-Bp1SbWFu.mjs";
-import { _ as _sfc_main$H } from "../../Divider.vue.es-wKkIVBgb.mjs";
-import { a as useVModel, d as useEventListener, c as useElementSize } from "../../index.es-LCAKs4tH.mjs";
-import { u as uniqueId$1, _ as _sfc_main$J, i as isEqual, a as _sfc_main$O } from "../../IconButton.vue.es-DNCwwH_j.mjs";
-import { a as useBreakpoints, b as breakpointsTailwind } from "../../index-D3v7hAtc.mjs";
-import { _ as _sfc_main$X } from "../../Skeleton.vue_vue_type_script_setup_true_lang-DXJcL7x6.mjs";
-import { _ as _sfc_main$Y } from "../../DividerText.vue.es-B7oa5Xpn.mjs";
-import { c as createPaymentsService } from "../../payments-CE9U7aKK.mjs";
-import { _ as _sfc_main$L } from "../../FormMessage.vue.es-DFQXxiSC.mjs";
-const EU_COUNTRIES = {
-  AT: "Austria",
-  BE: "Belgium",
-  BG: "Bulgaria",
-  CY: "Cyprus",
-  CZ: "Czech Republic",
-  DE: "Germany",
-  DK: "Denmark",
-  EE: "Estonia",
-  ES: "Spain",
-  FI: "Finland",
-  FR: "France",
-  GR: "Greece",
-  HR: "Croatia",
-  HU: "Hungary",
-  IE: "Ireland",
-  IT: "Italy",
-  LT: "Lithuania",
-  LU: "Luxembourg",
-  LV: "Latvia",
-  MT: "Malta",
-  NL: "Netherlands",
-  PL: "Poland",
-  PT: "Portugal",
-  RO: "Romania",
-  SE: "Sweden",
-  SI: "Slovenia",
-  SK: "Slovakia"
-};
-function isEUCountry(countryCode) {
-  return Object.keys(EU_COUNTRIES).includes(countryCode);
-}
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
-  __name: "DeltaChip",
-  props: {
-    oldValue: {},
-    newValue: {},
-    color: { default: "dark" },
-    content: {},
-    dark: { type: Boolean },
-    removable: { type: Boolean },
-    size: {},
-    variant: {},
-    textClass: {},
-    tag: {},
-    hasChipBefore: { type: Boolean },
-    hasChipAfter: { type: Boolean }
-  },
-  setup(__props) {
-    const chipProps = createPropsRestProxy(__props, ["oldValue", "newValue", "color"]);
-    const delta = computed(() => {
-      const calculatedDelta = __props.newValue - __props.oldValue;
-      return `${calculatedDelta >= 0 ? "+" : ""}${calculatedDelta}`;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$B), mergeProps(chipProps, {
-        color: __props.color,
-        class: "pointer-events-none select-none"
-      }), {
-        default: withCtx(() => [
-          createTextVNode(toDisplayString(delta.value), 1)
-        ]),
-        _: 1
-      }, 16, ["color"]);
-    };
-  }
-});
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
-  __name: "invoicePreviewRow",
-  props: {
-    weight: { default: "normal" },
-    variant: { default: "body-xs" },
-    noSpacing: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["flex flex-row gap-2", { "py-1.5": !__props.noSpacing }])
-      }, [
-        createVNode(_sfc_main$C, {
-          tag: "span",
-          variant: __props.variant,
-          class: "grow",
-          weight: __props.weight
-        }, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "label")
-          ]),
-          _: 3
-        }, 8, ["variant", "weight"]),
-        createVNode(_sfc_main$C, {
-          tag: "span",
-          variant: __props.variant,
-          weight: __props.weight
-        }, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "value")
-          ]),
-          _: 3
-        }, 8, ["variant", "weight"])
-      ], 2);
-    };
-  }
-});
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
-  __name: "Skeleton",
-  props: {
-    widthClass: { default: "w-10" },
-    heightClass: { default: "h-3" },
-    shade: { default: "default" }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["rounded", [
-          __props.widthClass,
-          __props.heightClass,
-          {
-            "bg-gray-50/50": __props.shade === "default",
-            "bg-gray-100/50": __props.shade === "dark",
-            "bg-gray-200/50": __props.shade === "darker",
-            "bg-gray-400/50": __props.shade === "darkest"
-          }
-        ]])
-      }, null, 2);
-    };
-  }
-});
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
-  __name: "InvoicePreviewNoTaxesSkeleton",
-  props: {
-    widthClass: { default: "w-12" },
-    heightClass: { default: "h-5" }
-  },
-  setup(__props) {
-    const { $t } = useIntl();
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$D, { "is-dark-mode": "" }, {
-        tooltip: withCtx(() => [
-          createVNode(TooltipContent, null, {
-            default: withCtx(() => [
-              createVNode(_sfc_main$E, null, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref($t)({
-                    defaultMessage: "Will be determined by billing information",
-                    description: "Tooltip content for the invoice preview when taxes are not determined by billing information",
-                    id: "invoice_preview.taxes_not_determined_by_billing_information_tooltip"
-                  })), 1)
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        default: withCtx(() => [
-          createVNode(_sfc_main$y, {
-            "width-class": __props.widthClass,
-            "height-class": __props.heightClass,
-            shade: "darker"
-          }, null, 8, ["width-class", "height-class"])
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
-  __name: "InvoicePreviewGroups",
-  props: {
-    invoice: {},
-    wrapperComponent: {}
-  },
-  setup(__props) {
-    const getInvoiceGroupsByType = (invoicePeriod) => {
-      return invoicePeriod.groups.reduce(
-        (acc, invoiceGroup) => {
-          if (!(invoiceGroup.type in acc)) {
-            return { ...acc, [invoiceGroup.type]: [invoiceGroup] };
-          }
-          return {
-            ...acc,
-            [invoiceGroup.type]: [...acc[invoiceGroup.type], invoiceGroup]
-          };
-        },
-        {}
-      );
-    };
-    const getPricingName = (group) => {
-      var _a, _b, _c;
-      if (((_a = group.pricing) == null ? void 0 : _a.name) && !isEmpty$1((_b = group.pricing) == null ? void 0 : _b.name)) {
-        return group.pricing.name;
-      }
-      return getComposedString(((_c = group.products) == null ? void 0 : _c.map((item) => item.name)) ?? []);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.invoice.periods, (invoicePeriod, invoicePeriodIndex) => {
-        return openBlock(), createElementBlock(Fragment, { key: invoicePeriodIndex }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(Object.entries(getInvoiceGroupsByType(invoicePeriod)), ([groupType, groups]) => {
-            return openBlock(), createElementBlock(Fragment, { key: groupType }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(groups, (group, groupIndex) => {
-                return openBlock(), createBlock(resolveDynamicComponent(__props.wrapperComponent ?? "div"), { key: groupIndex }, {
-                  default: withCtx(() => [
-                    createVNode(_sfc_main$z, {
-                      "no-spacing": __props.wrapperComponent !== void 0
-                    }, {
-                      label: withCtx(() => [
-                        createTextVNode(toDisplayString(getPricingName(group)), 1)
-                      ]),
-                      value: withCtx(() => [
-                        createVNode(_sfc_main$F, {
-                          value: group.amount_excluding_tax
-                        }, null, 8, ["value"])
-                      ]),
-                      _: 2
-                    }, 1032, ["no-spacing"])
-                  ]),
-                  _: 2
-                }, 1024);
-              }), 128))
-            ], 64);
-          }), 128))
-        ], 64);
-      }), 128);
-    };
-  }
-});
-const _hoisted_1$s = { class: "flex flex-col" };
-const _hoisted_2$h = { key: 0 };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
-  __name: "InvoicePreview",
-  props: {
-    invoice: {},
-    trialInvoice: {},
-    isCustomerFacing: { type: Boolean, default: false },
-    variant: { default: "default" },
-    isPaid: { type: Boolean, default: false },
-    collapsible: { default: void 0 },
-    isPreviewWithoutTaxes: { type: Boolean }
-  },
-  setup(__props) {
-    const props = __props;
-    const { $t } = useIntl();
-    const collapsed = ref(props.collapsible !== void 0 ? props.collapsible !== "expanded" : false);
-    const isCollapsible = computed(() => props.collapsible !== void 0);
-    const hasTrialPeriod = computed(() => !!props.trialInvoice);
-    const dueTodayAmount = computed(
-      () => props.trialInvoice ? props.trialInvoice.tax_summary.total_amount : props.invoice.tax_summary.total_amount
-    );
-    const handleToggle = () => {
-      if (isCollapsible.value) {
-        collapsed.value = !collapsed.value;
-      }
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$s, [
-        createVNode(_sfc_main$G, null, {
-          default: withCtx(() => [
-            !collapsed.value ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
-              hasTrialPeriod.value ? (openBlock(), createBlock(_sfc_main$C, {
-                key: 0,
-                variant: "caps-heading"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref($t)({
-                    id: "invoice_preview.after_trial_heading",
-                    defaultMessage: "After trial",
-                    description: "After trial heading for the invoice preview"
-                  })), 1)
-                ]),
-                _: 1
-              })) : createCommentVNode("", true),
-              __props.variant !== "without-products" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                createVNode(_sfc_main$w, { invoice: __props.invoice }, null, 8, ["invoice"]),
-                createVNode(_sfc_main$H, { spacing: "xxs" })
-              ], 64)) : createCommentVNode("", true),
-              createVNode(_sfc_main$z, null, {
-                label: withCtx(() => [
-                  createTextVNode(toDisplayString(unref($t)({
-                    id: "invoice_preview.total_excluding_taxes_heading",
-                    defaultMessage: "Total excluding taxes",
-                    description: "Total excluding taxes heading for the invoice preview"
-                  })), 1)
-                ]),
-                value: withCtx(() => [
-                  createVNode(_sfc_main$F, {
-                    value: __props.invoice.tax_summary.base_amount
-                  }, null, 8, ["value"])
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$z, null, {
-                label: withCtx(() => [
-                  createTextVNode(toDisplayString(unref($t)({
-                    id: "invoice_preview.taxes_heading",
-                    defaultMessage: "Taxes",
-                    description: "Taxes heading for the invoice preview"
-                  })), 1)
-                ]),
-                value: withCtx(() => [
-                  __props.isPreviewWithoutTaxes ? (openBlock(), createBlock(_sfc_main$x, {
-                    key: 0,
-                    "width-class": "w-10",
-                    "height-class": "h-4"
-                  })) : (openBlock(), createBlock(_sfc_main$F, {
-                    key: 1,
-                    value: __props.invoice.tax_summary.tax_amount
-                  }, null, 8, ["value"]))
-                ]),
-                _: 1
-              }),
-              hasTrialPeriod.value ? (openBlock(), createBlock(_sfc_main$z, { key: 2 }, {
-                label: withCtx(() => [
-                  createTextVNode(toDisplayString(unref($t)({
-                    id: "invoice_preview.total_including_taxes_heading",
-                    defaultMessage: "Total including taxes",
-                    description: "Total including taxes heading for the invoice preview"
-                  })), 1)
-                ]),
-                value: withCtx(() => [
-                  __props.isPreviewWithoutTaxes ? (openBlock(), createBlock(_sfc_main$x, {
-                    key: 0,
-                    "width-class": "w-10",
-                    "height-class": "h-4"
-                  })) : (openBlock(), createBlock(_sfc_main$F, {
-                    key: 1,
-                    value: __props.invoice.tax_summary.total_amount
-                  }, null, 8, ["value"]))
-                ]),
-                _: 1
-              })) : createCommentVNode("", true),
-              createVNode(_sfc_main$H, { spacing: "xxs" })
-            ])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        }),
-        (openBlock(), createBlock(resolveDynamicComponent(isCollapsible.value ? "button" : "div"), {
-          class: normalizeClass({ "hover:cursor-pointer text-left": isCollapsible.value }),
-          onClick: handleToggle
-        }, {
-          default: withCtx(() => [
-            createVNode(_sfc_main$z, {
-              weight: "semibold",
-              variant: "body-sm"
-            }, {
-              label: withCtx(() => [
-                createTextVNode(toDisplayString(__props.isPaid ? unref($t)({
-                  id: "invoice_preview.total_paid_heading",
-                  defaultMessage: "Total paid",
-                  description: "Total paid heading for the invoice preview"
-                }) : unref($t)({
-                  id: "invoice_preview.total_due_today_heading",
-                  defaultMessage: "Total due today",
-                  description: "Total due today heading for the invoice preview"
-                })) + " ", 1),
-                isCollapsible.value ? (openBlock(), createBlock(_sfc_main$I, {
-                  key: 0,
-                  size: "xs",
-                  icon: "keyboard_arrow_down",
-                  class: normalizeClass(["transition ease-in-out text-gray-400", { "rotate-0": collapsed.value, "rotate-180": !collapsed.value }])
-                }, null, 8, ["class"])) : createCommentVNode("", true)
-              ]),
-              value: withCtx(() => [
-                __props.isPreviewWithoutTaxes && (!hasTrialPeriod.value || hasTrialPeriod.value && dueTodayAmount.value.quantity !== "0.00") ? (openBlock(), createBlock(_sfc_main$x, { key: 0 })) : (openBlock(), createBlock(_sfc_main$F, {
-                  key: 1,
-                  value: dueTodayAmount.value
-                }, null, 8, ["value"]))
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["class"]))
-      ]);
-    };
-  }
-});
-const _hoisted_1$r = ["disabled"];
-const _hoisted_2$g = ["aria-label"];
-const _hoisted_3$9 = ["id", "disabled", "value", "aria-checked", "aria-describedby"];
-const _hoisted_4$7 = ["tabindex", "data-testid", "for", "aria-label", "onKeydown"];
-const _hoisted_5$5 = { class: "text-xs" };
-const _hoisted_6$4 = {
-  key: 1,
-  class: "mt-2 text-sm text-gray-500"
-};
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
-  __name: "RadioGroupExtended",
-  props: {
-    options: {},
-    direction: { default: "row" },
-    showRadio: { type: Boolean, default: true },
-    disabled: { type: Boolean },
-    label: {},
-    modelValue: { type: [String, Boolean] },
-    name: {},
-    required: { type: Boolean },
-    rootClass: {},
-    error: {},
-    variant: {}
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const model = useVModel(props, "modelValue", emit);
-    const idPrefix = uniqueId$1(props.name ? `radio_${props.name}_` : "radio_");
-    const handleKeyDown = (event, optionValue) => {
-      if (props.disabled) {
-        return;
-      }
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        event.stopPropagation();
-        model.value = optionValue;
-      }
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("fieldset", {
-        class: normalizeClass(__props.rootClass),
-        disabled: __props.disabled
-      }, [
-        __props.label ? (openBlock(), createBlock(unref(_sfc_main$J), {
-          key: 0,
-          tag: "legend",
-          required: __props.required
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(__props.label), 1)
-          ]),
-          _: 1
-        }, 8, ["required"])) : createCommentVNode("", true),
-        createElementVNode("div", {
-          role: "group",
-          "aria-label": __props.label,
-          class: normalizeClass([[__props.direction === "column" ? "flex-col" : "flex-row"], "rounded flex gap-1"])
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
-            return openBlock(), createElementBlock("div", {
-              key: option.value.toString(),
-              class: "flex-1"
-            }, [
-              withDirectives(createElementVNode("input", mergeProps({ ref_for: true }, _ctx.$attrs, {
-                id: `${unref(idPrefix)}${option.value}`,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null),
-                disabled: __props.disabled,
-                value: option.value,
-                type: "radio",
-                "aria-checked": unref(model) === option.value,
-                "aria-describedby": option.warning ? `${unref(idPrefix)}${option.value}-warning` : void 0,
-                tabindex: "-1",
-                class: "sr-only"
-              }), null, 16, _hoisted_3$9), [
-                [vModelRadio, unref(model)]
-              ]),
-              createElementVNode("label", {
-                tabindex: __props.disabled ? void 0 : 0,
-                "data-testid": `radio-group-item-${option.value}`,
-                for: `${unref(idPrefix)}${option.value}`,
-                "aria-label": option.label + (option.description ? `: ${option.description}` : ""),
-                class: normalizeClass(["relative label px-4 py-3 h-full flex gap-3 border bg-gray-50/50 border-gray-100 rounded outline-none hover:bg-primary-50/50 focus-visible:bg-primary-50 focus-visible:border-primary-600 focus-visible:ring-1 focus-visible:ring-primary-600 focus:bg-primary-50", {
-                  "cursor-pointer": !__props.disabled,
-                  "cursor-not-allowed": __props.disabled,
-                  "bg-white border border-primary-600 ring-1 ring-primary-600": unref(model) === option.value && !__props.disabled,
-                  "opacity-60": __props.disabled
-                }]),
-                onKeydown: ($event) => handleKeyDown($event, option.value)
-              }, [
-                __props.showRadio ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  class: normalizeClass(["material-symbols-outlined leading-4 h-4 w-4 min-w-4 inline-block mt-px rounded-full", {
-                    "border-4 border-primary-800": unref(model) === option.value,
-                    "border border-gray-300": unref(model) !== option.value
-                  }])
-                }, null, 2)) : createCommentVNode("", true),
-                createElementVNode("div", {
-                  class: normalizeClass(["flex flex-col", { "opacity-50": __props.disabled }])
-                }, [
-                  createVNode(unref(_sfc_main$C), {
-                    tag: "div",
-                    weight: "semibold",
-                    "no-spacing": "",
-                    variant: "body-sm",
-                    class: "flex justify-between align-center"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(option.label), 1)
-                    ]),
-                    _: 2
-                  }, 1024),
-                  option.description ? (openBlock(), createBlock(unref(_sfc_main$C), {
-                    key: 0,
-                    tag: "div",
-                    variant: "body-xs",
-                    "no-spacing": "",
-                    shade: "lighter"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(option.description), 1)
-                    ]),
-                    _: 2
-                  }, 1024)) : createCommentVNode("", true),
-                  !option.description ? renderSlot(_ctx.$slots, "description", {
-                    key: 1,
-                    optionValue: option.value
-                  }) : createCommentVNode("", true)
-                ], 2)
-              ], 42, _hoisted_4$7),
-              option.warning ? (openBlock(), createBlock(unref(_sfc_main$K), {
-                key: 0,
-                id: `${unref(idPrefix)}${option.value}-warning`,
-                class: "mt-1",
-                type: unref(model) === option.value ? "danger" : "dark",
-                role: "alert"
-              }, {
-                default: withCtx(() => [
-                  createElementVNode("span", _hoisted_5$5, toDisplayString(option.warning), 1)
-                ]),
-                _: 2
-              }, 1032, ["id", "type"])) : createCommentVNode("", true)
-            ]);
-          }), 128))
-        ], 10, _hoisted_2$g),
-        __props.error || _ctx.$slots.helper ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
-          __props.error ? (openBlock(), createBlock(unref(_sfc_main$L), {
-            key: 0,
-            message: __props.error
-          }, null, 8, ["message"])) : _ctx.$slots.helper ? renderSlot(_ctx.$slots, "helper", { key: 1 }) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$r);
-    };
-  }
-});
-const getOptionName = (value) => {
-  return `checkbox-item-${value}`;
-};
-const DONE_BUTTON_TEST_ID = "select-search-done-button";
-const _sfc_main$t = {};
-const _hoisted_1$q = { class: "flex items-center pt-1" };
-const _hoisted_2$f = { class: "px-1.5 text-gray-500 text-xs font-semibold" };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$q, [
-    _cache[0] || (_cache[0] = createElementVNode("div", { class: "border-t w-2" }, null, -1)),
-    createElementVNode("span", _hoisted_2$f, [
-      renderSlot(_ctx.$slots, "default")
-    ]),
-    _cache[1] || (_cache[1] = createElementVNode("div", { class: "border-t grow" }, null, -1))
-  ]);
-}
-const SelectExtendedOptionsDivider = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render]]);
-const _hoisted_1$p = ["aria-selected", "aria-disabled", "data-testid"];
-const _hoisted_2$e = ["id", "value", "checked", "disabled"];
-const _hoisted_3$8 = ["for"];
-const _hoisted_4$6 = { class: "flex items-center gap-1" };
-const _hoisted_5$4 = { class: "flex flex-grow flex-col" };
-const _hoisted_6$3 = { class: "flex flex-grow gap-2" };
-const _hoisted_7$3 = { class: "flex flex-grow flex-col" };
-const _hoisted_8$2 = { class: "flex flex-grow items-start justify-between gap-2" };
-const _hoisted_9 = { class: "flex items-center gap-2" };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
-  __name: "SelectExtendedOption",
-  props: {
-    multiple: { type: Boolean },
-    inputValue: {},
-    condensed: { type: Boolean },
-    label: {},
-    checked: { type: Boolean },
-    disabled: { type: Boolean },
-    subLabel: {},
-    labelPrefixComponent: {},
-    labelSuffixComponent: {},
-    labelInlineComponent: {},
-    value: {},
-    labelSrOnly: { type: Boolean }
-  },
-  emits: ["value-changed"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const props = __props;
-    const handleChange = (event) => {
-      const target = event.target;
-      emit("value-changed", {
-        value: target.value,
-        checked: target.checked
-      });
-    };
-    const handleClick = () => {
-      if (props.multiple || props.disabled) return;
-      emit("value-changed", { value: props.value });
-    };
-    const name = computed(() => getOptionName(props.value));
-    const escapedUserInput = computed(() => escapeUserInput(props.inputValue ?? ""));
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", {
-        role: "option",
-        "aria-selected": __props.checked,
-        "aria-disabled": __props.disabled,
-        class: normalizeClass([{ "hover:bg-gray-50": !__props.disabled }, "flex relative"]),
-        "data-testid": name.value,
-        tabindex: "0",
-        onClick: handleClick,
-        onKeydown: withKeys(handleClick, ["enter"])
-      }, [
-        __props.multiple ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createElementVNode("input", mergeProps(_ctx.$attrs, {
-            id: name.value,
-            ref: "inputRef",
-            value: __props.value,
-            checked: __props.checked,
-            disabled: __props.disabled,
-            type: "checkbox",
-            class: ["absolute top-[50%] -translate-y-2 left-3.5 w-4 h-4 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 focus:ring-2", __props.disabled ? "text-gray-400 placeholder-gray-500" : "text-primary-600"],
-            tabindex: "-1",
-            onChange: handleChange
-          }), null, 16, _hoisted_2$e),
-          createElementVNode("label", {
-            for: name.value,
-            class: normalizeClass([__props.disabled ? `text-gray-400` : "text-gray-900 rounded", "w-full px-4 py-3 pl-10 text-sm font-medium"])
-          }, [
-            createElementVNode("div", _hoisted_4$6, [
-              __props.labelPrefixComponent ? (openBlock(), createBlock(resolveDynamicComponent(__props.labelPrefixComponent.component), { key: 0 })) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_5$4, [
-                createElementVNode("div", _hoisted_6$3, [
-                  createVNode(_sfc_main$M, {
-                    text: __props.label,
-                    search: escapedUserInput.value,
-                    class: normalizeClass(["font-semibold", { "sr-only": __props.labelSrOnly }])
-                  }, null, 8, ["text", "search", "class"]),
-                  __props.labelInlineComponent ? (openBlock(), createBlock(resolveDynamicComponent(__props.labelInlineComponent.component), normalizeProps(mergeProps({ key: 0 }, __props.labelInlineComponent.props)), null, 16)) : createCommentVNode("", true),
-                  __props.subLabel && __props.condensed ? (openBlock(), createBlock(_sfc_main$M, {
-                    key: 1,
-                    class: "text-xs text-slate-500",
-                    text: __props.subLabel,
-                    search: escapedUserInput.value
-                  }, null, 8, ["text", "search"])) : createCommentVNode("", true)
-                ]),
-                __props.subLabel && !__props.condensed ? (openBlock(), createBlock(_sfc_main$M, {
-                  key: 0,
-                  class: "text-xs text-slate-500",
-                  text: __props.subLabel,
-                  search: escapedUserInput.value
-                }, null, 8, ["text", "search"])) : createCommentVNode("", true)
-              ]),
-              __props.labelSuffixComponent ? (openBlock(), createBlock(resolveDynamicComponent(__props.labelSuffixComponent.component), normalizeProps(mergeProps({ key: 1 }, __props.labelSuffixComponent.props)), null, 16)) : createCommentVNode("", true)
-            ])
-          ], 10, _hoisted_3$8)
-        ], 64)) : (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: normalizeClass(["w-full px-4 text-sm font-medium flex items-start gap-3", [
-            __props.condensed ? "p-2" : "py-3",
-            __props.disabled ?? "cursor-not-allowed",
-            !__props.disabled && "cursor-pointer"
-          ]])
-        }, [
-          __props.labelPrefixComponent ? (openBlock(), createBlock(resolveDynamicComponent(__props.labelPrefixComponent.component), normalizeProps(mergeProps({ key: 0 }, __props.labelPrefixComponent.props)), null, 16)) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_7$3, [
-            createElementVNode("div", _hoisted_8$2, [
-              createVNode(_sfc_main$M, {
-                text: __props.label,
-                search: escapedUserInput.value,
-                class: normalizeClass(["font-semibold", { "text-gray-400": __props.disabled }])
-              }, null, 8, ["text", "search", "class"]),
-              createElementVNode("div", _hoisted_9, [
-                __props.labelInlineComponent ? (openBlock(), createBlock(resolveDynamicComponent(__props.labelInlineComponent.component), normalizeProps(mergeProps({ key: 0 }, __props.labelInlineComponent.props)), null, 16)) : createCommentVNode("", true),
-                __props.labelSuffixComponent ? (openBlock(), createBlock(resolveDynamicComponent(__props.labelSuffixComponent.component), normalizeProps(mergeProps({ key: 1 }, __props.labelSuffixComponent.props)), null, 16)) : createCommentVNode("", true)
-              ])
-            ]),
-            __props.subLabel && __props.condensed ? (openBlock(), createBlock(_sfc_main$M, {
-              key: 0,
-              class: "text-xs text-slate-500",
-              text: __props.subLabel,
-              search: escapedUserInput.value
-            }, null, 8, ["text", "search"])) : createCommentVNode("", true),
-            __props.subLabel && !__props.condensed ? (openBlock(), createBlock(_sfc_main$M, {
-              key: 1,
-              class: "text-xs text-slate-500",
-              text: __props.subLabel,
-              search: escapedUserInput.value
-            }, null, 8, ["text", "search"])) : createCommentVNode("", true)
-          ])
-        ], 2))
-      ], 42, _hoisted_1$p);
-    };
-  }
-});
-const _hoisted_1$o = { class: "flex flex-col rounded-bl rounded-br" };
-const _hoisted_2$d = { key: 0 };
-const _hoisted_3$7 = {
-  key: 2,
-  class: "border-t border-gray-200"
-};
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  __name: "SelectExtendedOptions",
-  props: {
-    model: {},
-    multiple: { type: Boolean },
-    condensed: { type: Boolean },
-    hasLargeDropdown: { type: Boolean },
-    inputValue: {},
-    addOnly: { type: Boolean },
-    options: {}
-  },
-  emits: ["value-changed"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const handleChange = (payload) => emit("value-changed", payload);
-    const groups = computed(
-      () => sortedUniqBy(props.options, "group").reduce((acc, option) => option.value === "" ? acc : { ...acc, [option.value]: option.group }, {})
-    );
-    const hasNoResults = computed(() => props.options.length === 0);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
-        hasNoResults.value ? (openBlock(), createBlock(_sfc_main$C, {
-          key: 0,
-          tag: "div",
-          "no-spacing": "",
-          variant: "body-sm",
-          shade: "lighter",
-          class: "px-5 py-5"
-        }, {
-          default: withCtx(() => [..._cache[0] || (_cache[0] = [
-            createTextVNode("No results", -1)
-          ])]),
-          _: 1
-        })) : (openBlock(), createElementBlock("ul", {
-          key: 1,
-          class: normalizeClass(["list-none overflow-y-auto text-gray-700", [__props.hasLargeDropdown ? "max-h-76" : "max-h-48"]])
-        }, [
-          __props.addOnly ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
-            createVNode(_sfc_main$C, {
-              tag: "p",
-              "no-spacing": "",
-              variant: "body-sm",
-              shade: "lighter",
-              class: "px-3 py-2 mt-1"
-            }, {
-              default: withCtx(() => [..._cache[1] || (_cache[1] = [
-                createTextVNode(toDisplayString("You can only select currently unselected options."), -1)
-              ])]),
-              _: 1
-            })
-          ])) : createCommentVNode("", true),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, ({
-            label,
-            subLabel,
-            value,
-            checked,
-            disabled,
-            labelInlineComponent,
-            labelSuffixComponent,
-            labelSrOnly,
-            labelPrefixComponent,
-            hidden
-          }) => {
-            return openBlock(), createElementBlock(Fragment, { key: value }, [
-              groups.value[value] ? (openBlock(), createBlock(SelectExtendedOptionsDivider, { key: 0 }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(groups.value[value]), 1)
-                ]),
-                _: 2
-              }, 1024)) : createCommentVNode("", true),
-              !hidden ? (openBlock(), createBlock(_sfc_main$s, {
-                key: 1,
-                label,
-                "sub-label": subLabel,
-                value,
-                checked,
-                disabled,
-                multiple: __props.multiple,
-                condensed: __props.condensed,
-                "label-suffix-component": labelSuffixComponent,
-                "label-prefix-component": labelPrefixComponent,
-                "label-inline-component": labelInlineComponent,
-                "label-sr-only": labelSrOnly,
-                "input-value": __props.inputValue,
-                onValueChanged: handleChange
-              }, null, 8, ["label", "sub-label", "value", "checked", "disabled", "multiple", "condensed", "label-suffix-component", "label-prefix-component", "label-inline-component", "label-sr-only", "input-value"])) : createCommentVNode("", true)
-            ], 64);
-          }), 128))
-        ], 2)),
-        _ctx.$slots["list-footer-content"] ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
-          renderSlot(_ctx.$slots, "list-footer-content")
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-const _hoisted_1$n = ["aria-expanded", "aria-controls"];
-const _hoisted_2$c = { class: "flex gap-2 items-center" };
-const _hoisted_3$6 = { key: 1 };
-const _hoisted_4$5 = { class: "flex items-center gap-2" };
-const _hoisted_5$3 = {
-  key: 0,
-  class: "flex flex-wrap gap-2 mt-2"
-};
-const _hoisted_6$2 = ["innerHTML"];
-const _hoisted_7$2 = ["id"];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  __name: "SelectExtended",
-  props: {
-    addOnly: { type: Boolean, default: false },
-    disabled: { type: Boolean },
-    label: {},
-    labelScreenReaderOnly: { type: Boolean },
-    inputModel: {},
-    singleModelValue: {},
-    multiModelValue: {},
-    options: { default: () => [] },
-    optionsOrder: { default: () => ["asc", "asc"] },
-    optionsOrderProperties: { default: () => ["group", "label"] },
-    required: { type: Boolean, default: false },
-    rootClass: {},
-    size: { default: "md" },
-    withChips: { type: Boolean, default: false },
-    chipColor: {},
-    error: {},
-    hasReset: { type: Boolean },
-    name: {},
-    hasLargeDropdown: { type: Boolean, default: false },
-    showSuffixInClosedInput: { type: Boolean },
-    showSuffixLabelInInput: { type: Boolean },
-    showSubLabelInInput: { type: Boolean, default: false },
-    condensed: { type: Boolean },
-    form: {},
-    isInputReadOnly: { type: Boolean, default: true },
-    textContent: { default: () => ({
-      placeholderSingleOpen: "Search",
-      placeholderSingleEmpty: "Select an option",
-      placeholderMultipleOpen: "Search",
-      placeholderMultipleEmpty: "Select one or more options",
-      buttonAddLabel: "Add",
-      buttonClearLabel: "Reset",
-      buttonDoneLabel: "Done"
-    }) }
-  },
-  emits: ["update:inputModel", "update:singleModelValue", "update:multiModelValue", "blur", "change", "focus", "add-option"],
-  setup(__props, { emit: __emit }) {
-    var _a;
-    const props = __props;
-    const emit = __emit;
-    const instanceProps = (_a = getCurrentInstance()) == null ? void 0 : _a.vnode.props;
-    const inputModel = useVModel(props, "inputModel", emit);
-    const singleModel = useVModel(props, "singleModelValue", emit);
-    const multiModel = useVModel(props, "multiModelValue", emit);
-    const initialValues = computed(() => {
-      if (allowsMultipleValues.value) {
-        return multiModel.value ?? [];
-      }
-      return singleModel.value ? [singleModel.value] : [];
-    });
-    const unappliedMultiModel = ref(props.multiModelValue ?? []);
-    const allowsMultipleValues = computed(() => Array.isArray(props.multiModelValue));
-    const derivedModel = computed({
-      get: () => {
-        if (allowsMultipleValues.value) {
-          return unappliedMultiModel.value ?? [];
-        }
-        if (typeof singleModel.value === "string") {
-          return [singleModel.value];
-        }
-        return [];
-      },
-      set(value) {
-        if (allowsMultipleValues.value) {
-          unappliedMultiModel.value = value;
-        } else {
-          singleModel.value = (value == null ? void 0 : value[0]) ?? "";
-        }
-      }
-    });
-    const isOpen = ref(false);
-    const isMounted = useIsMounted();
-    const optionsRef = ref();
-    const wrapperRef = ref();
-    const teleportTarget = inject(SEARCH_SELECT_TELEPORT_TARGET);
-    const getSelectedItems = (selectedValue) => props.options.filter((option) => selectedValue.some((value) => option.value === value));
-    const selectedItems = computed(() => getSelectedItems(derivedModel.value));
-    const firstSelectedItem = computed(() => selectedItems.value[0]);
-    const firstSelectedOption = computed(() => selectedOptions.value[0]);
-    const hasPrefixComponent = computed(
-      () => {
-        var _a2;
-        return !isOpen.value && !allowsMultipleValues.value && ((_a2 = firstSelectedItem.value) == null ? void 0 : _a2.labelPrefixComponent);
-      }
-    );
-    const hasAddOptionListener = !!(instanceProps == null ? void 0 : instanceProps["onAddOption"]);
-    const handleAddOption = () => {
-      emit("add-option");
-      handleClose();
-    };
-    const placeholder = computed(() => {
-      var _a2, _b, _c, _d;
-      if (!allowsMultipleValues.value) {
-        if (firstSelectedItem.value) {
-          return (_a2 = firstSelectedItem.value) == null ? void 0 : _a2.label;
-        } else if (selectedItems.value.length === 0) {
-          return props.textContent.placeholderSingleEmpty;
-        }
-      }
-      if (allowsMultipleValues.value) {
-        if (selectedItems.value.length === 1) {
-          return (_b = firstSelectedItem.value) == null ? void 0 : _b.label;
-        }
-        if (selectedItems.value.length >= 2) {
-          return `${(_c = firstSelectedItem.value) == null ? void 0 : _c.label} +${selectedItems.value.length - 1}`;
-        }
-        if (selectedItems.value.length === 0) {
-          return props.textContent.placeholderMultipleEmpty;
-        }
-      }
-      return (_d = firstSelectedOption.value) == null ? void 0 : _d.label;
-    });
-    const handleClose = () => {
-      if (allowsMultipleValues.value) ;
-      isOpen.value = false;
-    };
-    const handleChange = ({
-      value,
-      checked
-    }) => {
-      let updatedValue;
-      if (allowsMultipleValues.value) {
-        updatedValue = checked ? [...derivedModel.value, value] : derivedModel.value.filter((selectedValue) => selectedValue !== value);
-      } else {
-        updatedValue = [value];
-        isOpen.value = false;
-      }
-      derivedModel.value = updatedValue;
-      emit("change");
-    };
-    const canReset = computed(() => {
-      if (props.addOnly && !isEqual(unappliedMultiModel.value, props.multiModelValue)) {
-        return true;
-      }
-      if (!props.addOnly && derivedModel.value.length > 0 && !props.disabled && !(derivedModel.value.length === 1 && derivedModel.value[0] === "")) {
-        return true;
-      }
-      return false;
-    });
-    const handleReset = () => {
-      if (props.addOnly) {
-        unappliedMultiModel.value = initialValues.value;
-        inputModel.value = "";
-        handleClose();
-        return;
-      }
-      derivedModel.value = [];
-      unappliedMultiModel.value = [];
-      if (inputModel.value) {
-        inputModel.value = "";
-      }
-      handleClose();
-    };
-    const getFocusableElements = () => {
-      if (!optionsRef.value) return [];
-      return Array.from(
-        optionsRef.value.querySelectorAll('li[tabindex="0"], button:not([disabled])')
-      );
-    };
-    const getDeepActiveElement = () => {
-      var _a2;
-      let active = document.activeElement;
-      while ((_a2 = active == null ? void 0 : active.shadowRoot) == null ? void 0 : _a2.activeElement) {
-        active = active.shadowRoot.activeElement;
-      }
-      return active;
-    };
-    const getInputElement = () => {
-      if (!wrapperRef.value) return null;
-      let input = wrapperRef.value.querySelector("input");
-      if (input) return input;
-      const shadowRoots = wrapperRef.value.querySelectorAll("*");
-      for (const el of shadowRoots) {
-        if (el.shadowRoot) {
-          input = el.shadowRoot.querySelector("input");
-          if (input) return input;
-        }
-      }
-      return null;
-    };
-    const handleWrapperKeyDown = (event) => {
-      var _a2, _b;
-      if (!isOpen.value) return;
-      const focusableElements = getFocusableElements();
-      const input = getInputElement();
-      const activeElement = getDeepActiveElement();
-      const isInputFocused = activeElement === input;
-      if (!isInputFocused) return;
-      switch (event.key) {
-        case "ArrowDown":
-          if (focusableElements.length > 0) {
-            event.preventDefault();
-            (_a2 = focusableElements[0]) == null ? void 0 : _a2.focus();
-          }
-          break;
-        case "Tab":
-          if (!event.shiftKey && focusableElements.length > 0) {
-            event.preventDefault();
-            (_b = focusableElements[0]) == null ? void 0 : _b.focus();
-          }
-          break;
-        case "Escape":
-          event.preventDefault();
-          handleClose();
-          break;
-      }
-    };
-    const handleOptionsKeyDown = (event) => {
-      var _a2, _b, _c, _d;
-      const focusableElements = getFocusableElements();
-      const activeElement = getDeepActiveElement();
-      const currentIndex = focusableElements.indexOf(activeElement);
-      const input = getInputElement();
-      switch (event.key) {
-        case "ArrowDown":
-          if (currentIndex < focusableElements.length - 1) {
-            event.preventDefault();
-            (_a2 = focusableElements[currentIndex + 1]) == null ? void 0 : _a2.focus();
-          }
-          break;
-        case "ArrowUp":
-          event.preventDefault();
-          if (currentIndex <= 0) {
-            input == null ? void 0 : input.focus();
-          } else {
-            (_b = focusableElements[currentIndex - 1]) == null ? void 0 : _b.focus();
-          }
-          break;
-        case "Tab":
-          if (event.shiftKey) {
-            if (currentIndex <= 0) {
-              event.preventDefault();
-              input == null ? void 0 : input.focus();
-            } else {
-              event.preventDefault();
-              (_c = focusableElements[currentIndex - 1]) == null ? void 0 : _c.focus();
-            }
-          } else {
-            if (currentIndex >= focusableElements.length - 1) {
-              event.preventDefault();
-              handleClose();
-              input == null ? void 0 : input.focus();
-            } else {
-              event.preventDefault();
-              (_d = focusableElements[currentIndex + 1]) == null ? void 0 : _d.focus();
-            }
-          }
-          break;
-        case "Escape":
-          event.preventDefault();
-          handleClose();
-          nextTick(() => {
-            input == null ? void 0 : input.focus();
-          });
-          break;
-      }
-    };
-    const handleClickOutside = (event) => {
-      const path = event.composedPath();
-      if (optionsRef.value && path.includes(optionsRef.value) || wrapperRef.value && path.includes(wrapperRef.value)) {
-        return;
-      }
-      if (isOpen.value) {
-        handleClose();
-      }
-    };
-    useEventListener("mousedown", handleClickOutside);
-    const { floatingStyles } = useFloating(wrapperRef, optionsRef, {
-      whileElementsMounted: autoUpdate,
-      placement: "bottom",
-      middleware: [
-        offset(4),
-        flip({
-          mainAxis: true
-        })
-      ]
-    });
-    const optionsId = uniqueId$1(`search-select-options-`);
-    const { width } = useElementSize(wrapperRef);
-    const focusInput = () => {
-      const input = getInputElement();
-      if (input) {
-        input.focus();
-      }
-    };
-    const processedOptions = computed(() => {
-      return props.options.map((item) => {
-        return {
-          ...item,
-          checked: selectedItems.value.some((selectedItem) => selectedItem.value === item.value),
-          disabled: props.disabled || !props.disabled && props.addOnly && !!initialValues.value.includes(item.value)
-        };
-      });
-    });
-    const selectedOptions = computed(
-      () => processedOptions.value.filter((option) => {
-        var _a2;
-        return (_a2 = derivedModel.value) == null ? void 0 : _a2.includes(option.value);
-      })
-    );
-    return (_ctx, _cache) => {
-      var _a2;
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", {
-          ref_key: "wrapperRef",
-          ref: wrapperRef,
-          class: normalizeClass(["relative flex items-end", {
-            rootClass: __props.rootClass,
-            "z-30": isOpen.value,
-            "cursor-text": !__props.disabled
-          }]),
-          role: "combobox",
-          "aria-expanded": isOpen.value,
-          "aria-haspopup": true,
-          "aria-controls": unref(optionsId),
-          onKeydown: handleWrapperKeyDown,
-          onClick: focusInput
-        }, [
-          createVNode(unref(_sfc_main$N), {
-            modelValue: unref(inputModel),
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(inputModel) ? inputModel.value = $event : null),
-            readonly: __props.isInputReadOnly,
-            required: __props.required,
-            label: __props.label,
-            name: __props.name,
-            form: __props.form,
-            "label-screen-reader-only": __props.labelScreenReaderOnly,
-            placeholder: placeholder.value,
-            class: normalizeClass(["grow !outline-none", {
-              "placeholder:text-gray-900": !isOpen.value && (!allowsMultipleValues.value && unref(singleModel) || allowsMultipleValues.value && !unref(isEmpty$1)(__props.multiModelValue)),
-              "cursor-default": __props.isInputReadOnly
-            }]),
-            "wrapper-class": {
-              "border-transparent border-b-gray-200 focus-within:border-b relative z-10": isOpen.value
-            },
-            "suffix-class": "border-l-0 pl-0",
-            disabled: __props.disabled,
-            size: __props.size,
-            error: __props.error,
-            "prefix-has-border": false,
-            "aria-autocomplete": "list",
-            onFocus: _cache[1] || (_cache[1] = () => isOpen.value = true),
-            onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("blur"))
-          }, createSlots({
-            "label-suffix": withCtx(() => [
-              renderSlot(_ctx.$slots, "label-suffix")
-            ]),
-            suffix: withCtx(() => {
-              var _a3, _b;
-              return [
-                createElementVNode("div", _hoisted_4$5, [
-                  !isOpen.value && !allowsMultipleValues.value && ((_a3 = firstSelectedItem.value) == null ? void 0 : _a3.labelInlineComponent) && (!__props.showSuffixInClosedInput || __props.showSuffixLabelInInput) ? (openBlock(), createBlock(resolveDynamicComponent(firstSelectedItem.value.labelInlineComponent.component), normalizeProps(mergeProps({ key: 0 }, firstSelectedItem.value.labelInlineComponent.props)), null, 16)) : createCommentVNode("", true),
-                  !isOpen.value && !allowsMultipleValues.value && ((_b = firstSelectedItem.value) == null ? void 0 : _b.labelSuffixComponent) && __props.showSuffixInClosedInput ? (openBlock(), createBlock(resolveDynamicComponent(firstSelectedItem.value.labelSuffixComponent.component), normalizeProps(mergeProps({ key: 1 }, firstSelectedItem.value.labelSuffixComponent.props)), null, 16)) : createCommentVNode("", true),
-                  !!unref(inputModel) || canReset.value && __props.hasReset ? (openBlock(), createBlock(_sfc_main$O, {
-                    key: 2,
-                    icon: "close",
-                    size: "xs",
-                    variant: "ghost",
-                    color: "gray",
-                    type: "button",
-                    onClick: handleReset
-                  })) : createCommentVNode("", true),
-                  createVNode(_sfc_main$I, {
-                    icon: "keyboard_arrow_down",
-                    size: "xs",
-                    class: normalizeClass(["transition-transform", { "rotate-180": isOpen.value }])
-                  }, null, 8, ["class"])
-                ])
-              ];
-            }),
-            _: 2
-          }, [
-            __props.showSubLabelInInput && ((_a2 = firstSelectedItem.value) == null ? void 0 : _a2.subLabel) ? {
-              name: "input",
-              fn: withCtx(() => [
-                createElementVNode("div", {
-                  class: normalizeClass(["pointer-events-none absolute inset-0 bg-white", { "px-4 py-3": __props.size === "xl" }])
-                }, [
-                  createVNode(_sfc_main$C, {
-                    tag: "span",
-                    class: "block",
-                    variant: "body-sm",
-                    weight: "semibold"
-                  }, {
-                    default: withCtx(() => {
-                      var _a3;
-                      return [
-                        createTextVNode(toDisplayString((_a3 = firstSelectedItem.value) == null ? void 0 : _a3.label), 1)
-                      ];
-                    }),
-                    _: 1
-                  }),
-                  createVNode(_sfc_main$C, {
-                    tag: "span",
-                    class: "block",
-                    variant: "body-xs",
-                    shade: "lighter"
-                  }, {
-                    default: withCtx(() => {
-                      var _a3;
-                      return [
-                        createTextVNode(toDisplayString((_a3 = firstSelectedItem.value) == null ? void 0 : _a3.subLabel), 1)
-                      ];
-                    }),
-                    _: 1
-                  })
-                ], 2)
-              ]),
-              key: "0"
-            } : void 0,
-            _ctx.$slots.tooltip ? {
-              name: "tooltip",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "tooltip")
-              ]),
-              key: "1"
-            } : void 0,
-            hasPrefixComponent.value || _ctx.$slots.prefix ? {
-              name: "prefix",
-              fn: withCtx(() => {
-                var _a3;
-                return [
-                  createElementVNode("div", _hoisted_2$c, [
-                    _ctx.$slots.prefix ? renderSlot(_ctx.$slots, "prefix", { key: 0 }) : hasPrefixComponent.value && ((_a3 = firstSelectedItem.value) == null ? void 0 : _a3.labelPrefixComponent) ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
-                      (openBlock(), createBlock(resolveDynamicComponent(firstSelectedItem.value.labelPrefixComponent.component), normalizeProps(guardReactiveProps(firstSelectedItem.value.labelPrefixComponent.props)), null, 16))
-                    ])) : createCommentVNode("", true)
-                  ])
-                ];
-              }),
-              key: "2"
-            } : void 0,
-            _ctx.$slots.helper ? {
-              name: "helper",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "helper")
-              ]),
-              key: "3"
-            } : void 0
-          ]), 1032, ["modelValue", "readonly", "required", "label", "name", "form", "label-screen-reader-only", "placeholder", "wrapper-class", "class", "disabled", "size", "error"])
-        ], 42, _hoisted_1$n),
-        __props.withChips ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(selectedOptions.value, ({ value, label, disabled }) => {
-            return openBlock(), createBlock(_sfc_main$B, {
-              key: value,
-              removable: !disabled,
-              color: disabled ? "dark" : __props.chipColor,
-              onRemoved: ($event) => handleChange({ value, checked: false })
-            }, {
-              default: withCtx(() => [
-                createElementVNode("span", { innerHTML: label }, null, 8, _hoisted_6$2)
-              ]),
-              _: 2
-            }, 1032, ["removable", "color", "onRemoved"]);
-          }), 128))
-        ])) : createCommentVNode("", true),
-        unref(isMounted) && unref(teleportTarget) ? (openBlock(), createBlock(Teleport, {
-          key: 1,
-          to: unref(teleportTarget)
-        }, [
-          isOpen.value && !__props.disabled ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            id: unref(optionsId),
-            ref_key: "optionsRef",
-            ref: optionsRef,
-            role: "listbox",
-            style: normalizeStyle(unref(floatingStyles)),
-            class: "drop-shadow-md bg-white rounded z-70",
-            onMouseenter: _cache[3] || (_cache[3] = ($event) => isOpen.value = true),
-            onKeydown: handleOptionsKeyDown
-          }, [
-            createElementVNode("div", {
-              class: "rounded pt-0",
-              style: normalizeStyle({ width: `${unref(width)}px` })
-            }, [
-              createVNode(_sfc_main$r, {
-                options: processedOptions.value,
-                multiple: allowsMultipleValues.value,
-                model: derivedModel.value,
-                "add-only": __props.addOnly,
-                "allows-multiple-values": !!allowsMultipleValues.value,
-                condensed: __props.condensed,
-                "has-large-dropdown": __props.hasLargeDropdown,
-                "input-value": unref(inputModel),
-                onValueChanged: handleChange
-              }, {
-                "list-footer-content": withCtx(() => [
-                  hasAddOptionListener ? (openBlock(), createBlock(_sfc_main$P, {
-                    key: 0,
-                    variant: "ghost",
-                    class: "w-full",
-                    type: "button",
-                    "icon-prefix": "add",
-                    onClick: handleAddOption
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(__props.textContent.buttonAddLabel), 1)
-                    ]),
-                    _: 1
-                  })) : createCommentVNode("", true),
-                  allowsMultipleValues.value ? (openBlock(), createElementBlock("div", {
-                    key: 1,
-                    class: normalizeClass(["flex justify-between items-center", { "py-2": !_ctx.$slots["list-footer-content"] }])
-                  }, [
-                    canReset.value ? (openBlock(), createBlock(_sfc_main$P, {
-                      key: 0,
-                      type: "button",
-                      color: "gray",
-                      variant: "ghost",
-                      size: "sm",
-                      class: "ml-2",
-                      onClick: handleReset
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString(__props.textContent.buttonClearLabel), 1)
-                      ]),
-                      _: 1
-                    })) : createCommentVNode("", true),
-                    createElementVNode("div", null, [
-                      renderSlot(_ctx.$slots, "list-footer-content")
-                    ]),
-                    createVNode(_sfc_main$P, {
-                      type: "button",
-                      size: "sm",
-                      class: "mr-2",
-                      "data-testid": unref(DONE_BUTTON_TEST_ID),
-                      onClick: handleClose
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString(__props.textContent.buttonDoneLabel), 1)
-                      ]),
-                      _: 1
-                    }, 8, ["data-testid"])
-                  ], 2)) : renderSlot(_ctx.$slots, "list-footer-content", { key: 2 })
-                ]),
-                _: 3
-              }, 8, ["options", "multiple", "model", "add-only", "allows-multiple-values", "condensed", "has-large-dropdown", "input-value"])
-            ], 4)
-          ], 44, _hoisted_7$2)) : createCommentVNode("", true)
-        ], 8, ["to"])) : createCommentVNode("", true)
-      ], 64);
-    };
-  }
-});
-const _hoisted_1$m = { class: "flex items-center gap-1.5 text-gray-800" };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  __name: "StepInput",
-  props: /* @__PURE__ */ mergeModels({
-    step: { default: 1 },
-    min: { default: 0 },
-    max: {},
-    initialValue: { default: 1 },
-    unitName: {},
-    showDelta: { type: Boolean, default: false },
-    size: { default: "md" },
-    name: {},
-    required: { type: Boolean },
-    label: {},
-    error: {},
-    disabled: { type: Boolean, default: false }
-  }, {
-    "modelValue": { required: true },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = __props;
-    const model = useModel(__props, "modelValue");
-    const contentEditableRef = ref(null);
-    const computedUnitName = computed(() => {
-      if (!props.unitName) return void 0;
-      return props.unitName[model.value === 1 ? "singular" : "plural"];
-    });
-    const handleAdd = () => {
-      if (props.max && model.value + props.step > props.max) {
-        return;
-      }
-      model.value += props.step;
-    };
-    const handleSubstract = () => {
-      if (model.value - props.step < props.min) {
-        return;
-      }
-      model.value -= props.step;
-    };
-    function setContentAndMoveCaretToEnd(content) {
-      var _a;
-      const el = (_a = contentEditableRef.value) == null ? void 0 : _a.el;
-      if (!el) return;
-      const value = parseInt(`${content}`);
-      model.value = value;
-      el.innerText = `${value}`;
-      el.focus();
-      const range = document.createRange();
-      range.selectNodeContents(el);
-      range.collapse(false);
-      const selection = window.getSelection();
-      selection == null ? void 0 : selection.removeAllRanges();
-      selection == null ? void 0 : selection.addRange(range);
-    }
-    const handleInputUpdate = (event) => {
-      const target = event.target;
-      if (target instanceof HTMLElement) {
-        setContentAndMoveCaretToEnd(target.innerText);
-      }
-    };
-    const isIncreaseButtonEnabled = computed(() => {
-      if (props.disabled) {
-        return false;
-      }
-      if (props.max) {
-        return model.value + props.step < props.max;
-      }
-      return true;
-    });
-    const isDecreaseButtonEnabled = computed(() => {
-      return props.disabled ? false : model.value - props.step >= props.min;
-    });
-    function handleFocusContentEditable() {
-      var _a;
-      const el = (_a = contentEditableRef.value) == null ? void 0 : _a.el;
-      if (!el) return;
-      el.focus();
-      const range = document.createRange();
-      range.selectNodeContents(el);
-      const selection = window.getSelection();
-      selection == null ? void 0 : selection.removeAllRanges();
-      selection == null ? void 0 : selection.addRange(range);
-    }
-    onMounted(() => {
-      var _a;
-      const el = (_a = contentEditableRef.value) == null ? void 0 : _a.el;
-      if (!el) return;
-      el.innerText = `${model.value}`;
-    });
-    watch(
-      () => model.value,
-      (value) => {
-        setContentAndMoveCaretToEnd(value);
-      }
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$N, {
-        modelValue: model.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
-        type: "number",
-        class: "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-transparent",
-        "prefix-class": {
-          "!px-0 w-5": __props.size === "sm",
-          "!px-0 w-6": __props.size === "md",
-          "!px-0 w-7": __props.size === "lg"
-        },
-        "suffix-class": {
-          "!px-0 w-5": __props.size === "sm",
-          "!px-0 w-6": __props.size === "md",
-          "!px-0 w-7": __props.size === "lg"
-        },
-        size: __props.size,
-        label: __props.label,
-        disabled: __props.disabled,
-        name: __props.name,
-        required: __props.required
-      }, createSlots({
-        prefix: withCtx(() => [
-          createElementVNode("div", {
-            class: "absolute inset-0 flex items-center justify-center",
-            onMousedown: handleFocusContentEditable
-          }, [
-            createElementVNode("div", _hoisted_1$m, [
-              createVNode(_sfc_main$C, {
-                ref_key: "contentEditableRef",
-                ref: contentEditableRef,
-                tag: "span",
-                variant: __props.size === "sm" ? "body" : "body-lg",
-                contenteditable: !__props.disabled,
-                class: normalizeClass(["outline-none", { "pointer-events-none select-none": __props.disabled }]),
-                weight: "semibold",
-                onInput: handleInputUpdate
-              }, null, 8, ["variant", "contenteditable", "class"]),
-              computedUnitName.value ? (openBlock(), createBlock(_sfc_main$C, {
-                key: 0,
-                tag: "span",
-                shade: "lighter",
-                class: "pointer-events-none select-none"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(" ") + toDisplayString(computedUnitName.value), 1)
-                ]),
-                _: 1
-              })) : createCommentVNode("", true),
-              __props.showDelta ? (openBlock(), createBlock(_sfc_main$A, {
-                key: 1,
-                "old-value": props.initialValue,
-                "new-value": model.value,
-                class: "ml-0.5 pointer-events-none select-none"
-              }, null, 8, ["old-value", "new-value"])) : createCommentVNode("", true)
-            ])
-          ], 32),
-          createVNode(_sfc_main$O, {
-            disabled: !isDecreaseButtonEnabled.value,
-            type: "button",
-            color: "gray",
-            variant: "ghost",
-            size: "sm",
-            class: normalizeClass(["select-none rounded-tr-none rounded-br-none !h-full", { "!w-7": __props.size === "lg", "!w-5": __props.size === "sm", "!w-6": __props.size === "md" }]),
-            icon: "remove",
-            onMousedown: handleSubstract
-          }, null, 8, ["disabled", "class"])
-        ]),
-        suffix: withCtx(() => [
-          createVNode(_sfc_main$O, {
-            disabled: !isIncreaseButtonEnabled.value,
-            type: "button",
-            color: "gray",
-            variant: "ghost",
-            size: "sm",
-            class: normalizeClass(["select-none rounded-tl-none rounded-bl-none !h-full", { "!w-7": __props.size === "lg", "!w-5": __props.size === "sm", "!w-6": __props.size === "md" }]),
-            icon: "add",
-            onMousedown: handleAdd
-          }, null, 8, ["disabled", "class"])
-        ]),
-        _: 2
-      }, [
-        _ctx.$slots.helper ? {
-          name: "helper",
-          fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "helper")
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["modelValue", "prefix-class", "suffix-class", "size", "label", "disabled", "name", "required"]);
-    };
-  }
-});
-function isValidCountryCode(code) {
-  return !!countryData.find((item) => item.key === code);
-}
-var symbolProto = Symbol$1 ? Symbol$1.prototype : void 0;
-symbolProto ? symbolProto.toString : void 0;
-function baseToString(value) {
-  {
-    return value;
-  }
-}
-function toString(value) {
-  return baseToString(value);
-}
-var mapTag = "[object Map]", setTag = "[object Set]";
-var objectProto = Object.prototype;
-var hasOwnProperty = objectProto.hasOwnProperty;
-function isEmpty(value) {
-  if (value == null) {
-    return true;
-  }
-  if (isArrayLike(value) && (isArray(value) || typeof value == "string" || typeof value.splice == "function" || isBuffer(value) || isTypedArray(value) || isArguments(value))) {
-    return !value.length;
-  }
-  var tag = getTag(value);
-  if (tag == mapTag || tag == setTag) {
-    return !value.size;
-  }
-  if (isPrototype(value)) {
-    return !baseKeys(value).length;
-  }
-  for (var key in value) {
-    if (hasOwnProperty.call(value, key)) {
-      return false;
-    }
-  }
-  return true;
-}
-var idCounter = 0;
-function uniqueId(prefix) {
-  var id = ++idCounter;
-  return toString(prefix) + id;
-}
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-  return target;
-}
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function isFunction(val) {
-  return typeof val === "function";
-}
-function isObject(o) {
-  return o !== null && typeof o === "object" && !Array.isArray(o);
-}
-function normalizeValidatorObject(validator) {
-  return isFunction(validator.$validator) ? _objectSpread2({}, validator) : {
-    $validator: validator
-  };
-}
-function unwrapValidatorResponse(result) {
-  if (typeof result === "object") return result.$valid;
-  return result;
-}
-function unwrapNormalizedValidator(validator) {
-  return validator.$validator || validator;
-}
-function withParams($params, $validator) {
-  if (!isObject($params)) throw new Error(`[@vuelidate/validators]: First parameter to "withParams" should be an object, provided ${typeof $params}`);
-  if (!isObject($validator) && !isFunction($validator)) throw new Error(`[@vuelidate/validators]: Validator must be a function or object with $validator parameter`);
-  const validatorObj = normalizeValidatorObject($validator);
-  validatorObj.$params = _objectSpread2(_objectSpread2({}, validatorObj.$params || {}), $params);
-  return validatorObj;
-}
-function withMessage($message, $validator) {
-  if (!isFunction($message) && typeof unref($message) !== "string") throw new Error(`[@vuelidate/validators]: First parameter to "withMessage" should be string or a function returning a string, provided ${typeof $message}`);
-  if (!isObject($validator) && !isFunction($validator)) throw new Error(`[@vuelidate/validators]: Validator must be a function or object with $validator parameter`);
-  const validatorObj = normalizeValidatorObject($validator);
-  validatorObj.$message = $message;
-  return validatorObj;
-}
-function withAsync($validator) {
-  let $watchTargets = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
-  const validatorObj = normalizeValidatorObject($validator);
-  return _objectSpread2(_objectSpread2({}, validatorObj), {}, {
-    $async: true,
-    $watchTargets
-  });
-}
-function forEach(validators) {
-  return {
-    $validator(collection) {
-      for (var _len = arguments.length, others = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        others[_key - 1] = arguments[_key];
-      }
-      return unref(collection).reduce((previous, collectionItem, index) => {
-        const collectionEntryResult = Object.entries(collectionItem).reduce((all, _ref) => {
-          let [property, $model] = _ref;
-          const innerValidators = validators[property] || {};
-          const propertyResult = Object.entries(innerValidators).reduce((all2, _ref2) => {
-            let [validatorName, currentValidator] = _ref2;
-            const validatorFunction = unwrapNormalizedValidator(currentValidator);
-            const $response = validatorFunction.call(this, $model, collectionItem, index, ...others);
-            const $valid = unwrapValidatorResponse($response);
-            all2.$data[validatorName] = $response;
-            all2.$data.$invalid = !$valid || !!all2.$data.$invalid;
-            all2.$data.$error = all2.$data.$invalid;
-            if (!$valid) {
-              let $message = currentValidator.$message || "";
-              const $params = currentValidator.$params || {};
-              if (typeof $message === "function") {
-                $message = $message({
-                  $pending: false,
-                  $invalid: !$valid,
-                  $params,
-                  $model,
-                  $response
-                });
-              }
-              all2.$errors.push({
-                $property: property,
-                $message,
-                $params,
-                $response,
-                $model,
-                $pending: false,
-                $validator: validatorName
-              });
-            }
-            return {
-              $valid: all2.$valid && $valid,
-              $data: all2.$data,
-              $errors: all2.$errors
-            };
-          }, {
-            $valid: true,
-            $data: {},
-            $errors: []
-          });
-          all.$data[property] = propertyResult.$data;
-          all.$errors[property] = propertyResult.$errors;
-          return {
-            $valid: all.$valid && propertyResult.$valid,
-            $data: all.$data,
-            $errors: all.$errors
-          };
-        }, {
-          $valid: true,
-          $data: {},
-          $errors: {}
-        });
-        return {
-          $valid: previous.$valid && collectionEntryResult.$valid,
-          $data: previous.$data.concat(collectionEntryResult.$data),
-          $errors: previous.$errors.concat(collectionEntryResult.$errors)
-        };
-      }, {
-        $valid: true,
-        $data: [],
-        $errors: []
-      });
-    },
-    $message: (_ref3) => {
-      let {
-        $response
-      } = _ref3;
-      return $response ? $response.$errors.map((context) => {
-        return Object.values(context).map((errors) => errors.map((error) => error.$message)).reduce((a, b) => a.concat(b), []);
-      }) : [];
-    }
-  };
-}
-const req = (value) => {
-  value = unref(value);
-  if (Array.isArray(value)) return !!value.length;
-  if (value === void 0 || value === null) {
-    return false;
-  }
-  if (value === false) {
-    return true;
-  }
-  if (value instanceof Date) {
-    return !isNaN(value.getTime());
-  }
-  if (typeof value === "object") {
-    for (let _ in value) return true;
-    return false;
-  }
-  return !!String(value).length;
-};
-const len = (value) => {
-  value = unref(value);
-  if (Array.isArray(value)) return value.length;
-  if (typeof value === "object") {
-    return Object.keys(value).length;
-  }
-  return String(value).length;
-};
-function regex() {
-  for (var _len = arguments.length, expr = new Array(_len), _key = 0; _key < _len; _key++) {
-    expr[_key] = arguments[_key];
-  }
-  return (value) => {
-    value = unref(value);
-    return !req(value) || expr.every((reg) => {
-      reg.lastIndex = 0;
-      return reg.test(value);
-    });
-  };
-}
-var common = /* @__PURE__ */ Object.freeze({
-  __proto__: null,
-  forEach,
-  len,
-  normalizeValidatorObject,
-  regex,
-  req,
-  unwrap: unref,
-  unwrapNormalizedValidator,
-  unwrapValidatorResponse,
-  withAsync,
-  withMessage,
-  withParams
-});
-regex(/^[a-zA-Z]*$/);
-regex(/^[a-zA-Z0-9]*$/);
-regex(/^\d*(\.\d+)?$/);
-const emailRegex = /^(?:[A-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i;
-regex(emailRegex);
-const urlRegex = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)+(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/i;
-regex(urlRegex);
-regex(/(^[0-9]*$)|(^-[0-9]+$)/);
-regex(/^[-]?\d*(\.\d+)?$/);
-const taxIdMap = {
-  AT: {
-    regex: /^ATU\d{8}$/,
-    prefix: "AT",
-    example: "ATU12345678"
-  },
-  BE: {
-    regex: /^BE0?\d{9}$/,
-    prefix: "BE",
-    example: "BE0123456789"
-  },
-  BG: {
-    regex: /^BG\d{9,10}$/,
-    prefix: "BG",
-    example: "BG123456789"
-  },
-  HR: {
-    regex: /^HR\d{11}$/,
-    prefix: "HR",
-    example: "HR12345678901"
-  },
-  CY: {
-    regex: /^CY\d{8}[A-Z]$/,
-    prefix: "CY",
-    example: "CY12345678X"
-  },
-  CZ: {
-    regex: /^CZ\d{8,10}$/,
-    prefix: "CZ",
-    example: "CZ12345678"
-  },
-  DE: {
-    regex: /^DE\d{9}$/,
-    prefix: "DE",
-    example: "DE123456789"
-  },
-  DK: {
-    regex: /^DK\d{8}$/,
-    prefix: "DK",
-    example: "DK12345678"
-  },
-  EE: {
-    regex: /^EE\d{9}$/,
-    prefix: "EE",
-    example: "EE123456789"
-  },
-  GR: {
-    regex: /^(EL|GR)\d{9}$/,
-    prefix: "GR",
-    example: "GR123456789"
-  },
-  ES: {
-    regex: /^ES[A-Z0-9]\d{7}[A-Z0-9]$/,
-    prefix: "ES",
-    example: "ESX1234567X"
-  },
-  FI: {
-    regex: /^FI\d{8}$/,
-    prefix: "FI",
-    example: "FI12345678"
-  },
-  FR: {
-    regex: /^FR[0-9A-Z]{2}\d{9}$/,
-    prefix: "FR",
-    example: "FRXX123456789"
-  },
-  HU: {
-    regex: /^HU\d{8}$/,
-    prefix: "HU",
-    example: "HU12345678"
-  },
-  IE: {
-    regex: /^IE[0-9A-Z]{8,9}$/,
-    prefix: "IE",
-    example: "IE1234567A"
-  },
-  IS: {
-    regex: /^IS\d{5}$/,
-    prefix: "IS",
-    example: "IS12345"
-  },
-  IT: {
-    regex: /^IT\d{11}$/,
-    prefix: "IT",
-    example: "IT12345678901"
-  },
-  LT: {
-    regex: /^LT(\d{9}|\d{12})$/,
-    prefix: "LT",
-    example: "LT123456789 or LT123456789012"
-  },
-  LU: {
-    regex: /^LU\d{8}$/,
-    prefix: "LU",
-    example: "LU12345678"
-  },
-  LV: {
-    regex: /^LV\d{11}$/,
-    prefix: "LV",
-    example: "LV12345678901"
-  },
-  ME: {
-    regex: /^ME\d{9}$/,
-    prefix: "ME",
-    example: "ME123456789"
-  },
-  MT: {
-    regex: /^MT\d{8}$/,
-    prefix: "MT",
-    example: "MT12345678"
-  },
-  NL: {
-    regex: /^NL\d{9}B\d{2}$/,
-    prefix: "NL",
-    example: "NL123456789B01"
-  },
-  PL: {
-    regex: /^PL\d{10}$/,
-    prefix: "PL",
-    example: "PL1234567890"
-  },
-  PT: {
-    regex: /^PT\d{9}$/,
-    prefix: "PT",
-    example: "PT123456789"
-  },
-  RO: {
-    regex: /^RO\d{2,10}$/,
-    prefix: "RO",
-    example: "RO1234567890"
-  },
-  RU: {
-    regex: /^RU(\d{9}|\d{10}|\d{12})$/,
-    prefix: "RU",
-    example: "RU123456789 or RU1234567890 or RU123456789012"
-  },
-  SE: {
-    regex: /^SE\d{10}01$/,
-    prefix: "SE",
-    example: "SE123456789001"
-  },
-  SI: {
-    regex: /^SI\d{8}$/,
-    prefix: "SI",
-    example: "SI12345678"
-  },
-  SK: {
-    regex: /^SK\d{10}$/,
-    prefix: "SK",
-    example: "SK1234567890"
-  },
-  CH: {
-    regex: /^CHE\d{9}(MWST|TVA|IVA)?$/,
-    prefix: "CHE",
-    example: "CHE123456789MWST"
-  },
-  NO: {
-    regex: /^NO\d{9}MVA$/,
-    prefix: "NO",
-    example: "NO123456789MVA"
-  },
-  GB: {
-    regex: /^GB(\d{9}|\d{12}|GD\d{3}|HA\d{3})$/,
-    prefix: "GB",
-    example: "GB123456789"
-  },
-  XI: {
-    regex: /^XI(\d{9}|\d{12})$/,
-    prefix: "XI",
-    example: "XI123456789"
-  }
-};
-const taxIdValidator = (value) => {
-  if (!value || typeof value !== "string" || value.trim() === "") {
-    return true;
-  }
-  return Object.values(taxIdMap).some((entry) => entry.regex.test(value));
-};
-const getTaxIdMessage = ({ $model }) => {
-  if (!$model || typeof $model !== "string" || $model.trim() === "") {
-    return "";
-  }
-  const intl = inject(I18N_INJECTION_KEY, null);
-  if (!intl) {
-    return "Invalid tax ID";
-  }
-  const { formatMessage } = intl;
-  const matchingEntry = Object.values(taxIdMap).find(
-    (entry) => $model.toUpperCase().startsWith(entry.prefix.toUpperCase())
-  );
-  if (matchingEntry) {
-    return formatMessage(
-      {
-        defaultMessage: "Invalid tax ID format. Example: {example}",
-        id: "form_validation.tax_id.invalid_format",
-        description: "Error message when tax ID format is invalid but prefix matches"
-      },
-      { example: matchingEntry.example }
-    );
-  }
-  return formatMessage({
-    defaultMessage: "Invalid tax ID",
-    id: "taxId.invalid",
-    description: "Error message when tax ID is invalid"
-  });
-};
-const taxId = common.withMessage(getTaxIdMessage, taxIdValidator);
+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 { 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-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-DGMxHc20.mjs";
+import { c as createPaymentsService } from "../../payments-Dq6R37Fz.mjs";
+import { C as ContentWithAsideLayout } from "../../ContentWithAsideLayout-DhfUkZZg.mjs";
 function getFirstPricingPlanScheduleOfType({
   pricingPlanScheduleInfos,
   type
@@ -2056,12 +38,12 @@ function getPricingItemConfigMetaById({
         (_a3 = item.billing_period_configs) == null ? void 0 : _a3.forEach((billingConfig) => {
           var _a4;
           (_a4 = billingConfig.configs) == null ? void 0 : _a4.forEach((config) => {
-            var _a5, _b2, _c2;
+            var _a5, _b2, _c2, _d;
             if (config.id) {
-              const currency = (_c2 = (_b2 = (_a5 = config.bands) == null ? void 0 : _a5.find((band) => {
+              const currency = (_d = (_c2 = (_b2 = (_a5 = config.details) == null ? void 0 : _a5.bands) == null ? void 0 : _b2.find((band) => {
                 var _a6;
                 return (_a6 = band.amount) == null ? void 0 : _a6.currency;
-              })) == null ? void 0 : _b2.amount) == null ? void 0 : _c2.currency;
+              })) == null ? void 0 : _c2.amount) == null ? void 0 : _d.currency;
               metaById.set(config.id, {
                 ...currency && { currency },
                 billingPeriod: billingConfig.billing_period
@@ -2070,12 +52,12 @@ function getPricingItemConfigMetaById({
           });
         });
         (_b = item.configs) == null ? void 0 : _b.forEach((config) => {
-          var _a4, _b2, _c2;
+          var _a4, _b2, _c2, _d;
           if (config.id) {
-            const currency = (_c2 = (_b2 = (_a4 = config.bands) == null ? void 0 : _a4.find((band) => {
+            const currency = (_d = (_c2 = (_b2 = (_a4 = config.details) == null ? void 0 : _a4.bands) == null ? void 0 : _b2.find((band) => {
               var _a5;
               return (_a5 = band.amount) == null ? void 0 : _a5.currency;
-            })) == null ? void 0 : _b2.amount) == null ? void 0 : _c2.currency;
+            })) == null ? void 0 : _c2.amount) == null ? void 0 : _d.currency;
             metaById.set(config.id, {
               ...currency && { currency }
             });
@@ -2404,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();
@@ -2501,7 +484,7 @@ const useInvoicePreview = () => {
         }
       };
       const cachedPayload = cachedPreviewPayloads.value[periodKey];
-      if (cachedPayload && isEqual$1(payload, cachedPayload)) {
+      if (cachedPayload && isEqual(payload, cachedPayload)) {
         return { periodKey, response: void 0 };
       }
       cachedPreviewPayloads.value = {
@@ -2547,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;
@@ -2592,7 +576,7 @@ function useCheckoutForm({
   const updateInitialState = (state) => {
     const newState = getInitialState({ ...form.value, ...state });
     form.value = newState;
-    initialFormState.value = cloneDeep(newState);
+    initialFormState.value = structuredClone(toRaw(newState));
   };
   const requiredFields = computed(
     () => getRequiredFieldsForCountry(form.value.country)
@@ -2643,7 +627,7 @@ function useCheckoutForm({
   onMounted(async () => {
     await getCountryFromGeoLocationService(initialState == null ? void 0 : initialState.country);
   });
-  watchDebounced(() => cloneDeep(form.value), handleFormChange, {
+  useWatchDebounced(() => structuredClone(toRaw(form.value)), handleFormChange, {
     debounce: 200
   });
   return {
@@ -2681,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
   });
@@ -2695,7 +683,7 @@ const usePaymentMethodOptions = () => {
       country,
       amount
     };
-    if (isEqual$1(payload, cachedPayload.value)) {
+    if (isEqual(payload, cachedPayload.value)) {
       return;
     }
     cachedPayload.value = payload;
@@ -3023,7 +1011,7 @@ function useCheckoutView({
     } catch {
     }
   });
-  watchOnce(shouldLoadPaymentMethodOptions, (shouldLoad) => {
+  watch(shouldLoadPaymentMethodOptions, (shouldLoad) => {
     if (shouldLoad) {
       void loadPaymentMethodOptions({
         subscriptionId: subscription.value.id,
@@ -3031,7 +1019,7 @@ function useCheckoutView({
         amount: amount.value
       });
     }
-  });
+  }, { once: true });
   return {
     invoicePreview: invoicePreview.invoicePreview,
     invoicePreviewByBillingPeriod: invoicePreview.invoicePreviewByBillingPeriod,
@@ -3053,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) => {
@@ -3079,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"
       });
@@ -3105,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"
       });
@@ -3126,8 +1114,8 @@ function usePromotionCode({
 function isFieldError(error) {
   return typeof error === "object" && error !== null && "field" in error;
 }
-const _hoisted_1$l = { class: "flex items-center gap-2" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _hoisted_1$m = { class: "flex items-center gap-2" };
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "TaxIDCheckNotice",
   props: {
     taxIdValidationResult: { type: Object }
@@ -3141,22 +1129,22 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     const taxIdValidationMessage = computed(() => {
       return isTaxIdValid.value ? formatMessage({
         defaultMessage: "VAT number is valid.",
-        id: "damFt1",
+        id: "tax_check.valid_vat_number",
         description: "The message shown when the VAT number is valid"
       }) : formatMessage({
         defaultMessage: "VAT number is invalid.",
-        id: "gR9xe+",
+        id: "tax_check.invalid_vat_number",
         description: "The message shown when the VAT number is invalid"
       });
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$K), {
+      return openBlock(), createBlock(unref(_sfc_main$q), {
         type: isTaxIdValid.value ? "success" : "danger",
         icon: false
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$l, [
-            createVNode(unref(_sfc_main$C), { variant: "body-xs" }, {
+          createElementVNode("div", _hoisted_1$m, [
+            createVNode(unref(_sfc_main$r), { variant: "body-xs" }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(taxIdValidationMessage.value), 1)
               ]),
@@ -3221,16 +1209,16 @@ function useTaxIDValidationCheck(form) {
     isSelectedCountryEU
   };
 }
-const _hoisted_1$k = { class: "grid grid-cols-1 gap-1" };
-const _hoisted_2$b = { class: "grid grid-cols-1 gap-2" };
-const _hoisted_3$5 = { 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_1$l = { class: "grid grid-cols-1 gap-1" };
+const _hoisted_2$d = { class: "grid grid-cols-1 gap-2" };
+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";
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "CheckoutForm",
   props: /* @__PURE__ */ mergeModels({
     validation: { type: null },
@@ -3283,8 +1271,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         id: FORM_ID,
         onSubmit: _cache[12] || (_cache[12] = withModifiers(($event) => _ctx.$emit("submit", model.value), ["prevent"]))
       }, [
-        createElementVNode("div", _hoisted_1$k, [
-          createVNode(unref(_sfc_main$Q), {
+        createElementVNode("div", _hoisted_1$l, [
+          createVNode(unref(_sfc_main$s), {
             title: unref($t)({
               defaultMessage: "Customer information",
               id: "checkout.contact_information_block.title",
@@ -3292,9 +1280,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             })
           }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_2$b, [
+              createElementVNode("div", _hoisted_2$d, [
                 __props.readOnly ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  createVNode(unref(_sfc_main$C), {
+                  createVNode(unref(_sfc_main$r), {
                     variant: "body",
                     tag: "span",
                     weight: "semibold",
@@ -3305,7 +1293,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 1
                   }),
-                  createVNode(unref(_sfc_main$C), {
+                  createVNode(unref(_sfc_main$r), {
                     variant: "body-sm",
                     tag: "span",
                     shade: "lighter",
@@ -3317,7 +1305,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  createVNode(unref(_sfc_main$N), {
+                  createVNode(unref(_sfc_main$t), {
                     modelValue: model.value.email,
                     "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value.email = $event),
                     required: "",
@@ -3336,7 +1324,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     }) + getOptionalSuffix("email"),
                     error: __props.validation.value.email.$errors
                   }, null, 8, ["modelValue", "disabled", "label", "placeholder", "error"]),
-                  createVNode(unref(_sfc_main$R), {
+                  createVNode(unref(_sfc_main$u), {
                     "single-model-value": country.value,
                     "onUpdate:singleModelValue": _cache[3] || (_cache[3] = ($event) => country.value = $event),
                     required: "",
@@ -3349,7 +1337,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     error: __props.validation.value.country.$errors
                   }, {
                     "label-suffix": withCtx(() => [
-                      !showBillingDetails.value && !__props.isBillingInformationMandatory ? (openBlock(), createBlock(unref(_sfc_main$P), {
+                      !showBillingDetails.value && !__props.isBillingInformationMandatory ? (openBlock(), createBlock(unref(_sfc_main$v), {
                         key: 0,
                         size: "xs",
                         variant: "ghost",
@@ -3366,7 +1354,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                         ]),
                         _: 1
                       })) : createCommentVNode("", true),
-                      showBillingDetails.value && !__props.isBillingInformationMandatory ? (openBlock(), createBlock(unref(_sfc_main$P), {
+                      showBillingDetails.value && !__props.isBillingInformationMandatory ? (openBlock(), createBlock(unref(_sfc_main$v), {
                         key: 1,
                         size: "sm",
                         variant: "ghost",
@@ -3388,11 +1376,11 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   }, 8, ["single-model-value", "label", "error"])
                 ], 64))
               ]),
-              createVNode(unref(_sfc_main$G), null, {
+              createVNode(unref(_sfc_main$w), null, {
                 default: withCtx(() => [
-                  showBillingDetails.value || __props.isBillingInformationMandatory ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
-                    createElementVNode("div", _hoisted_4$4, [
-                      createVNode(unref(_sfc_main$N), {
+                  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),
                         name: "address_line_1",
@@ -3409,7 +1397,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                         required: "",
                         error: __props.validation.value.addressLine1.$errors
                       }, null, 8, ["modelValue", "label", "placeholder", "error"]),
-                      createVNode(unref(_sfc_main$N), {
+                      createVNode(unref(_sfc_main$t), {
                         modelValue: model.value.addressLine2,
                         "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => model.value.addressLine2 = $event),
                         name: "address_line_2",
@@ -3419,8 +1407,8 @@ const _sfc_main$n = /* @__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, [
-                        createVNode(unref(_sfc_main$N), {
+                      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),
                           name: "postal_code",
@@ -3431,7 +1419,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                           }) + getOptionalSuffix("postalCode"),
                           error: __props.validation.value.addressLine1.$errors
                         }, null, 8, ["modelValue", "placeholder", "error"]),
-                        createVNode(unref(_sfc_main$N), {
+                        createVNode(unref(_sfc_main$t), {
                           modelValue: model.value.city,
                           "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => model.value.city = $event),
                           name: "city",
@@ -3441,7 +1429,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                             description: "City of the customer address in the checkout form"
                           }) + getOptionalSuffix("city")
                         }, null, 8, ["modelValue", "placeholder"]),
-                        createVNode(unref(_sfc_main$N), {
+                        createVNode(unref(_sfc_main$t), {
                           modelValue: model.value.state,
                           "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => model.value.state = $event),
                           name: "state",
@@ -3461,9 +1449,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["title"]),
-          !__props.readOnly ? (openBlock(), createBlock(unref(_sfc_main$Q), { key: 0 }, {
+          !__props.readOnly ? (openBlock(), createBlock(unref(_sfc_main$s), { key: 0 }, {
             default: withCtx(() => [
-              createVNode(unref(_sfc_main$S), {
+              createVNode(unref(_sfc_main$x), {
                 modelValue: companyPurchaseModel.value,
                 "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => companyPurchaseModel.value = $event),
                 "no-spacing": "",
@@ -3471,8 +1459,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 class: "!flex"
               }, {
                 "inline-label": withCtx(() => [
-                  createElementVNode("div", _hoisted_6$1, [
-                    createVNode(unref(_sfc_main$C), { tag: "span" }, {
+                  createElementVNode("div", _hoisted_6$2, [
+                    createVNode(unref(_sfc_main$r), { tag: "span" }, {
                       default: withCtx(() => [
                         createTextVNode(toDisplayString(unref($t)({
                           defaultMessage: "Company purchase",
@@ -3482,7 +1470,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 1
                     }),
-                    createVNode(unref(_sfc_main$C), {
+                    createVNode(unref(_sfc_main$r), {
                       tag: "span",
                       variant: "body-xs",
                       shade: "lighter"
@@ -3500,11 +1488,11 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }, 8, ["modelValue"]),
-              createVNode(unref(_sfc_main$G), null, {
+              createVNode(unref(_sfc_main$w), null, {
                 default: withCtx(() => [
                   isCompanyPurchase.value ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
                     createElementVNode("div", _hoisted_8$1, [
-                      createVNode(unref(_sfc_main$N), {
+                      createVNode(unref(_sfc_main$t), {
                         modelValue: model.value.companyLegalName,
                         "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => model.value.companyLegalName = $event),
                         required: "",
@@ -3520,7 +1508,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                           description: "The legal name of the organization customer in the checkout form"
                         })
                       }, null, 8, ["modelValue", "label", "placeholder"]),
-                      showVatIdInput.value ? (openBlock(), createBlock(unref(_sfc_main$N), {
+                      showVatIdInput.value ? (openBlock(), createBlock(unref(_sfc_main$t), {
                         key: 0,
                         modelValue: model.value.companyVatNumber,
                         "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => model.value.companyVatNumber = $event),
@@ -3542,7 +1530,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                         unref(isEUCountry)(model.value.country ?? "") ? {
                           name: "suffix",
                           fn: withCtx(() => [
-                            createVNode(unref(_sfc_main$P), {
+                            createVNode(unref(_sfc_main$v), {
                               type: "button",
                               size: "sm",
                               color: "green",
@@ -3566,7 +1554,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                         key: 1,
                         class: normalizeClass({ "opacity-75": unref(isTaxIDCheckPending) })
                       }, [
-                        createVNode(_sfc_main$o, { "tax-id-validation-result": unref(taxIdValidationData) }, null, 8, ["tax-id-validation-result"])
+                        createVNode(_sfc_main$p, { "tax-id-validation-result": unref(taxIdValidationData) }, null, 8, ["tax-id-validation-result"])
                       ], 2)) : createCommentVNode("", true)
                     ])
                   ])) : createCommentVNode("", true)
@@ -3581,13 +1569,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$j = {
+const _hoisted_1$k = {
   key: 0,
   class: "flex items-center"
 };
-const _hoisted_2$a = ["innerHTML"];
-const _hoisted_3$4 = ["innerHTML"];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_2$c = ["innerHTML"];
+const _hoisted_3$6 = ["innerHTML"];
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "CheckoutTitle",
   props: {
     trialPeriod: { type: Object },
@@ -3601,9 +1589,9 @@ const _sfc_main$m = /* @__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$C), {
+          createVNode(unref(_sfc_main$r), {
             variant: "heading-1",
             class: "inline-block"
           }, {
@@ -3613,7 +1601,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 id: "checkout.page_title",
                 description: "The title of the checkout page"
               })) + toDisplayString(" "), 1),
-              __props.trialPeriod ? (openBlock(), createBlock(unref(_sfc_main$T), {
+              __props.trialPeriod ? (openBlock(), createBlock(unref(_sfc_main$y), {
                 key: 0,
                 "trial-period": __props.trialPeriod,
                 size: "lg",
@@ -3623,18 +1611,18 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             _: 1
           })
         ]),
-        createVNode(unref(_sfc_main$C), {
+        createVNode(unref(_sfc_main$r), {
           variant: "body-sm",
           shade: "lighter",
           "no-spacing": ""
         }, {
           default: withCtx(() => [
-            !__props.countryCode ? (openBlock(), createElementBlock("span", _hoisted_1$j, [
-              createVNode(unref(_sfc_main$D), { "is-dark-mode": "" }, {
+            !__props.countryCode ? (openBlock(), createElementBlock("span", _hoisted_1$k, [
+              createVNode(unref(_sfc_main$z), { "is-dark-mode": "" }, {
                 tooltip: withCtx(() => [
                   createVNode(unref(TooltipContent), null, {
                     default: withCtx(() => [
-                      createVNode(unref(_sfc_main$E), null, {
+                      createVNode(unref(_sfc_main$B), null, {
                         default: withCtx(() => [
                           createTextVNode(toDisplayString(unref($t)({
                             defaultMessage: "Will be determined by billing information",
@@ -3649,7 +1637,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                   })
                 ]),
                 default: withCtx(() => [
-                  createVNode(unref(_sfc_main$y), {
+                  createVNode(unref(_sfc_main$A), {
                     "width-class": "w-10",
                     "height-class": "h-4",
                     shade: "darker",
@@ -3686,7 +1674,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                     })
                   }
                 )
-              }, null, 8, _hoisted_2$a)
+              }, null, 8, _hoisted_2$c)
             ])) : (openBlock(), createElementBlock("span", {
               key: 1,
               innerHTML: __props.trialStartDate ? unref($t)(
@@ -3722,11 +1710,11 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                   strong: (text) => `<strong>${text}</strong>`
                 }
               )
-            }, null, 8, _hoisted_3$4))
+            }, null, 8, _hoisted_3$6))
           ]),
           _: 1
         })
-      ], 64);
+      ]);
     };
   }
 });
@@ -3745,9 +1733,9 @@ const isInvoiceUsageBased = (invoice) => {
     )
   )) ?? false;
 };
-const _hoisted_1$i = { class: "flex w-full min-h-96 justify-center items-center" };
-const _hoisted_2$9 = { class: "max-w-sm" };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$j = { class: "flex w-full min-h-96 justify-center items-center" };
+const _hoisted_2$b = { class: "max-w-sm" };
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "CheckoutNotAvailable",
   setup(__props) {
     const { $t } = useIntl();
@@ -3755,9 +1743,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       window.location.reload();
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
-        createElementVNode("div", _hoisted_2$9, [
-          createVNode(unref(_sfc_main$C), { variant: "heading-1" }, {
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+        createElementVNode("div", _hoisted_2$b, [
+          createVNode(unref(_sfc_main$r), { variant: "heading-1" }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref($t)({
                 defaultMessage: "Checkout not available",
@@ -3767,7 +1755,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          createVNode(unref(_sfc_main$C), {
+          createVNode(unref(_sfc_main$r), {
             variant: "body-sm",
             shade: "lighter"
           }, {
@@ -3799,22 +1787,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "SubscriptionPaymentCompletedCard",
-  props: {
-    redirectUrl: { type: String }
-  },
+  emits: ["continue-to-merchant"],
   setup(__props) {
-    const props = __props;
     const { $t } = useIntl();
-    onMounted(() => {
-      if (!props.redirectUrl) {
-        return;
-      }
-      window.location.replace(props.redirectUrl);
-    });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$U, {
+      return openBlock(), createBlock(_sfc_main$C, {
         status: "success",
         title: unref($t)({
           defaultMessage: "Payment successful",
@@ -3823,7 +1802,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         })
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$C), {
+          createVNode(unref(_sfc_main$r), {
             variant: "body-xs",
             shade: "lighter",
             tag: "span"
@@ -3837,14 +1816,12 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          __props.redirectUrl ? (openBlock(), createBlock(unref(_sfc_main$P), {
-            key: 0,
-            tag: "a",
-            href: __props.redirectUrl,
+          createVNode(unref(_sfc_main$v), {
             color: "gray",
             variant: "outline",
             size: "xs",
-            class: "align-center"
+            class: "align-center",
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("continue-to-merchant"))
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref($t)({
@@ -3854,16 +1831,16 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               })), 1)
             ]),
             _: 1
-          }, 8, ["href"])) : createCommentVNode("", true)
+          })
         ]),
         _: 1
       }, 8, ["title"]);
     };
   }
 });
-const _hoisted_1$h = { class: "flex flex-row gap-3 px-3 py-2" };
-const _hoisted_2$8 = { class: "grow" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _hoisted_1$i = { class: "flex flex-row gap-3 px-3 py-2" };
+const _hoisted_2$a = { class: "grow" };
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "SubscriptionSummary",
   props: {
     subscription: { type: Object },
@@ -3910,15 +1887,15 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return names;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        __props.avatar ? (openBlock(), createBlock(unref(_sfc_main$V), {
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+        __props.avatar ? (openBlock(), createBlock(unref(_sfc_main$D), {
           key: 0,
           "image-src": __props.avatar,
           size: "lg",
           class: "my-1"
         }, null, 8, ["image-src"])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$8, [
-          createVNode(unref(_sfc_main$C), {
+        createElementVNode("div", _hoisted_2$a, [
+          createVNode(unref(_sfc_main$r), {
             variant: "body",
             weight: "semibold",
             "no-spacing": ""
@@ -3928,7 +1905,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          selectedPricings.value ? (openBlock(), createBlock(unref(_sfc_main$C), {
+          selectedPricings.value ? (openBlock(), createBlock(unref(_sfc_main$r), {
             key: 0,
             variant: "body-xs",
             shade: "lighter",
@@ -3939,7 +1916,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           })) : createCommentVNode("", true),
-          description.value ? (openBlock(), createBlock(unref(_sfc_main$C), {
+          description.value ? (openBlock(), createBlock(unref(_sfc_main$r), {
             key: 1,
             variant: "body-xs",
             shade: "lighter",
@@ -3958,11 +1935,15 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$g = { class: "grid grid-cols-1 gap-1" };
-const _hoisted_2$7 = { class: "px-3 py-2" };
-const _hoisted_3$3 = { class: "flex flex-col gap-3" };
-const _hoisted_4$3 = { class: "px-3 py-2" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+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$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: {
     subscription: { type: Object },
@@ -3986,9 +1967,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const { $t } = useIntl();
     const { map, formatTimePeriod } = useTimePeriod();
-    const breakpoints = useBreakpoints(breakpointsTailwind);
-    const isMobile = breakpoints.smaller("md");
-    const saveBadgeSize = computed(() => isMobile.value ? "sm" : "xs");
+    const { isMobileViewport } = useViewport();
+    const saveBadgeSize = computed(() => isMobileViewport.value ? "sm" : "xs");
     const getBillingPeriodKey = (period) => `${period.type}:${period.value}`;
     const BILLING_PERIOD_TYPES = ["DAY", "WEEK", "MONTH", "YEAR"];
     const isBillingPeriodType = (value) => BILLING_PERIOD_TYPES.includes(value);
@@ -4185,7 +2165,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           label,
           subLabel: getSelectedPeriodAmountLabel(period),
           labelSuffixComponent: saveText ? {
-            component: _sfc_main$B,
+            component: _sfc_main$E,
             props: {
               color: "primary",
               content: saveText,
@@ -4244,7 +2224,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       selectedBillingPeriodKey.value = checked ? biggestPeriod : smallestPeriod;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$Q), {
+      return openBlock(), createBlock(unref(_sfc_main$s), {
+        class: "sv-order-summary",
         "no-border": "",
         "no-spacing": "",
         "content-background": "none",
@@ -4255,10 +2236,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         })
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$g, [
-            createVNode(unref(_sfc_main$Q), { "no-spacing": "" }, {
+          createElementVNode("div", _hoisted_1$h, [
+            createVNode(unref(_sfc_main$s), {
+              "no-spacing": "",
+              class: "sv-order-summary__subscription"
+            }, {
               default: withCtx(() => [
-                __props.subscription ? (openBlock(), createBlock(_sfc_main$j, {
+                __props.subscription ? (openBlock(), createBlock(_sfc_main$k, {
                   key: 0,
                   avatar: __props.avatar,
                   invoice: __props.invoice,
@@ -4270,7 +2254,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            billingPeriodOptions.value.length === 2 ? (openBlock(), createBlock(unref(_sfc_main$Q), {
+            billingPeriodOptions.value.length === 2 ? (openBlock(), createBlock(unref(_sfc_main$s), {
               key: 0,
               "no-spacing": "",
               "content-classes": selectedBillingPeriodKey.value === periodBounds.value.biggestPeriod ? "border-primary-500" : void 0
@@ -4278,15 +2262,15 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               default: withCtx(() => {
                 var _a;
                 return [
-                  createElementVNode("div", _hoisted_2$7, [
-                    createElementVNode("div", _hoisted_3$3, [
-                      highOption.value ? (openBlock(), createBlock(_sfc_main$W, {
+                  createElementVNode("div", _hoisted_2$9, [
+                    createElementVNode("div", _hoisted_3$5, [
+                      highOption.value ? (openBlock(), createBlock(_sfc_main$F, {
                         key: 0,
                         name: highOption.value.label,
                         description: ((_a = selectedBillingPeriodOption.value) == null ? void 0 : _a.subLabel) ?? ""
                       }, createSlots({
                         default: withCtx(() => [
-                          createVNode(unref(_sfc_main$S), {
+                          createVNode(unref(_sfc_main$x), {
                             "model-value": selectedBillingPeriodKey.value === periodBounds.value.biggestPeriod,
                             "onUpdate:modelValue": handleBinaryBillingToggle
                           }, null, 8, ["model-value"])
@@ -4296,7 +2280,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                         toggleSaveText.value ? {
                           name: "badge",
                           fn: withCtx(() => [
-                            createVNode(unref(_sfc_main$B), {
+                            createVNode(unref(_sfc_main$E), {
                               color: "primary",
                               content: toggleSaveText.value,
                               size: saveBadgeSize.value,
@@ -4311,23 +2295,25 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 ];
               }),
               _: 1
-            }, 8, ["content-classes"])) : billingPeriodOptions.value.length > 2 ? (openBlock(), createBlock(unref(_sfc_main$q), {
+            }, 8, ["content-classes"])) : billingPeriodOptions.value.length > 2 ? (openBlock(), createBlock(unref(_sfc_main$G), {
               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": "",
               "show-sub-label-in-input": "",
               "show-suffix-in-closed-input": ""
             }, null, 8, ["single-model-value", "options"])) : createCommentVNode("", true),
-            __props.isUsageBased ? (openBlock(), createBlock(unref(_sfc_main$Q), {
+            __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, [
-                  createVNode(unref(_sfc_main$C), {
+                createElementVNode("div", _hoisted_4$4, [
+                  createVNode(unref(_sfc_main$r), {
                     "no-spacing": "",
                     variant: "body-sm",
                     shade: "lighter"
@@ -4345,15 +2331,17 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             })) : createCommentVNode("", true),
-            __props.invoice && __props.variant !== "products-inline" ? (openBlock(), createBlock(unref(_sfc_main$w), {
-              key: 3,
-              invoice: __props.invoice,
-              "wrapper-component": unref(_sfc_main$Q)
-            }, null, 8, ["invoice", "wrapper-component"])) : createCommentVNode("", true),
-            createVNode(unref(_sfc_main$Q), 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$v), {
+                __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,
@@ -4361,10 +2349,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   collapsible: __props.collapsible,
                   "is-preview-without-taxes": !__props.countryCode,
                   "is-customer-facing": ""
-                }, null, 8, ["variant", "invoice", "trial-invoice", "is-paid", "collapsible", "is-preview-without-taxes"])) : (openBlock(), createBlock(unref(_sfc_main$C), {
+                }, 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)({
@@ -4385,41 +2374,41 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = { class: "py-4 flex flex-col items-center justify-center" };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+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: {
     icon: { type: null }
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$Q), null, {
+      return openBlock(), createBlock(unref(_sfc_main$s), { class: "sv-empty-state" }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$f, [
-            createVNode(unref(_sfc_main$I), {
+          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$C), {
+            createVNode(unref(_sfc_main$r), {
               center: "",
               tag: "span",
               variant: "body-sm",
               weight: "semibold",
               shade: "lighter",
-              class: "mt-2"
+              class: "sv-empty-state__title mt-2"
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "title")
               ]),
               _: 3
             }),
-            createVNode(unref(_sfc_main$C), {
+            createVNode(unref(_sfc_main$r), {
               center: "",
               tag: "span",
               variant: "body-xs",
               shade: "lightest",
-              class: "mt-1"
+              class: "sv-empty-state__message mt-1"
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "message")
@@ -4433,19 +2422,19 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$e = {
+const _hoisted_1$f = {
   key: 0,
   id: "svg-logo",
   viewBox: "0 0 35 15",
   class: "h-[44px]"
 };
-const _hoisted_2$6 = {
+const _hoisted_2$8 = {
   key: 1,
   src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAxcHgiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAxMDEgMzIiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHhtbG5zPSJodHRwOiYjeDJGOyYjeDJGO3d3dy53My5vcmcmI3gyRjsyMDAwJiN4MkY7c3ZnIj48cGF0aCBmaWxsPSIjMDAzMDg3IiBkPSJNIDEyLjIzNyAyLjggTCA0LjQzNyAyLjggQyAzLjkzNyAyLjggMy40MzcgMy4yIDMuMzM3IDMuNyBMIDAuMjM3IDIzLjcgQyAwLjEzNyAyNC4xIDAuNDM3IDI0LjQgMC44MzcgMjQuNCBMIDQuNTM3IDI0LjQgQyA1LjAzNyAyNC40IDUuNTM3IDI0IDUuNjM3IDIzLjUgTCA2LjQzNyAxOC4xIEMgNi41MzcgMTcuNiA2LjkzNyAxNy4yIDcuNTM3IDE3LjIgTCAxMC4wMzcgMTcuMiBDIDE1LjEzNyAxNy4yIDE4LjEzNyAxNC43IDE4LjkzNyA5LjggQyAxOS4yMzcgNy43IDE4LjkzNyA2IDE3LjkzNyA0LjggQyAxNi44MzcgMy41IDE0LjgzNyAyLjggMTIuMjM3IDIuOCBaIE0gMTMuMTM3IDEwLjEgQyAxMi43MzcgMTIuOSAxMC41MzcgMTIuOSA4LjUzNyAxMi45IEwgNy4zMzcgMTIuOSBMIDguMTM3IDcuNyBDIDguMTM3IDcuNCA4LjQzNyA3LjIgOC43MzcgNy4yIEwgOS4yMzcgNy4yIEMgMTAuNjM3IDcuMiAxMS45MzcgNy4yIDEyLjYzNyA4IEMgMTMuMTM3IDguNCAxMy4zMzcgOS4xIDEzLjEzNyAxMC4xIFoiPjwvcGF0aD48cGF0aCBmaWxsPSIjMDAzMDg3IiBkPSJNIDM1LjQzNyAxMCBMIDMxLjczNyAxMCBDIDMxLjQzNyAxMCAzMS4xMzcgMTAuMiAzMS4xMzcgMTAuNSBMIDMwLjkzNyAxMS41IEwgMzAuNjM3IDExLjEgQyAyOS44MzcgOS45IDI4LjAzNyA5LjUgMjYuMjM3IDkuNSBDIDIyLjEzNyA5LjUgMTguNjM3IDEyLjYgMTcuOTM3IDE3IEMgMTcuNTM3IDE5LjIgMTguMDM3IDIxLjMgMTkuMzM3IDIyLjcgQyAyMC40MzcgMjQgMjIuMTM3IDI0LjYgMjQuMDM3IDI0LjYgQyAyNy4zMzcgMjQuNiAyOS4yMzcgMjIuNSAyOS4yMzcgMjIuNSBMIDI5LjAzNyAyMy41IEMgMjguOTM3IDIzLjkgMjkuMjM3IDI0LjMgMjkuNjM3IDI0LjMgTCAzMy4wMzcgMjQuMyBDIDMzLjUzNyAyNC4zIDM0LjAzNyAyMy45IDM0LjEzNyAyMy40IEwgMzYuMTM3IDEwLjYgQyAzNi4yMzcgMTAuNCAzNS44MzcgMTAgMzUuNDM3IDEwIFogTSAzMC4zMzcgMTcuMiBDIDI5LjkzNyAxOS4zIDI4LjMzNyAyMC44IDI2LjEzNyAyMC44IEMgMjUuMDM3IDIwLjggMjQuMjM3IDIwLjUgMjMuNjM3IDE5LjggQyAyMy4wMzcgMTkuMSAyMi44MzcgMTguMiAyMy4wMzcgMTcuMiBDIDIzLjMzNyAxNS4xIDI1LjEzNyAxMy42IDI3LjIzNyAxMy42IEMgMjguMzM3IDEzLjYgMjkuMTM3IDE0IDI5LjczNyAxNC42IEMgMzAuMjM3IDE1LjMgMzAuNDM3IDE2LjIgMzAuMzM3IDE3LjIgWiI+PC9wYXRoPjxwYXRoIGZpbGw9IiMwMDMwODciIGQ9Ik0gNTUuMzM3IDEwIEwgNTEuNjM3IDEwIEMgNTEuMjM3IDEwIDUwLjkzNyAxMC4yIDUwLjczNyAxMC41IEwgNDUuNTM3IDE4LjEgTCA0My4zMzcgMTAuOCBDIDQzLjIzNyAxMC4zIDQyLjczNyAxMCA0Mi4zMzcgMTAgTCAzOC42MzcgMTAgQyAzOC4yMzcgMTAgMzcuODM3IDEwLjQgMzguMDM3IDEwLjkgTCA0Mi4xMzcgMjMgTCAzOC4yMzcgMjguNCBDIDM3LjkzNyAyOC44IDM4LjIzNyAyOS40IDM4LjczNyAyOS40IEwgNDIuNDM3IDI5LjQgQyA0Mi44MzcgMjkuNCA0My4xMzcgMjkuMiA0My4zMzcgMjguOSBMIDU1LjgzNyAxMC45IEMgNTYuMTM3IDEwLjYgNTUuODM3IDEwIDU1LjMzNyAxMCBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA2Ny43MzcgMi44IEwgNTkuOTM3IDIuOCBDIDU5LjQzNyAyLjggNTguOTM3IDMuMiA1OC44MzcgMy43IEwgNTUuNzM3IDIzLjYgQyA1NS42MzcgMjQgNTUuOTM3IDI0LjMgNTYuMzM3IDI0LjMgTCA2MC4zMzcgMjQuMyBDIDYwLjczNyAyNC4zIDYxLjAzNyAyNCA2MS4wMzcgMjMuNyBMIDYxLjkzNyAxOCBDIDYyLjAzNyAxNy41IDYyLjQzNyAxNy4xIDYzLjAzNyAxNy4xIEwgNjUuNTM3IDE3LjEgQyA3MC42MzcgMTcuMSA3My42MzcgMTQuNiA3NC40MzcgOS43IEMgNzQuNzM3IDcuNiA3NC40MzcgNS45IDczLjQzNyA0LjcgQyA3Mi4yMzcgMy41IDcwLjMzNyAyLjggNjcuNzM3IDIuOCBaIE0gNjguNjM3IDEwLjEgQyA2OC4yMzcgMTIuOSA2Ni4wMzcgMTIuOSA2NC4wMzcgMTIuOSBMIDYyLjgzNyAxMi45IEwgNjMuNjM3IDcuNyBDIDYzLjYzNyA3LjQgNjMuOTM3IDcuMiA2NC4yMzcgNy4yIEwgNjQuNzM3IDcuMiBDIDY2LjEzNyA3LjIgNjcuNDM3IDcuMiA2OC4xMzcgOCBDIDY4LjYzNyA4LjQgNjguNzM3IDkuMSA2OC42MzcgMTAuMSBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA5MC45MzcgMTAgTCA4Ny4yMzcgMTAgQyA4Ni45MzcgMTAgODYuNjM3IDEwLjIgODYuNjM3IDEwLjUgTCA4Ni40MzcgMTEuNSBMIDg2LjEzNyAxMS4xIEMgODUuMzM3IDkuOSA4My41MzcgOS41IDgxLjczNyA5LjUgQyA3Ny42MzcgOS41IDc0LjEzNyAxMi42IDczLjQzNyAxNyBDIDczLjAzNyAxOS4yIDczLjUzNyAyMS4zIDc0LjgzNyAyMi43IEMgNzUuOTM3IDI0IDc3LjYzNyAyNC42IDc5LjUzNyAyNC42IEMgODIuODM3IDI0LjYgODQuNzM3IDIyLjUgODQuNzM3IDIyLjUgTCA4NC41MzcgMjMuNSBDIDg0LjQzNyAyMy45IDg0LjczNyAyNC4zIDg1LjEzNyAyNC4zIEwgODguNTM3IDI0LjMgQyA4OS4wMzcgMjQuMyA4OS41MzcgMjMuOSA4OS42MzcgMjMuNCBMIDkxLjYzNyAxMC42IEMgOTEuNjM3IDEwLjQgOTEuMzM3IDEwIDkwLjkzNyAxMCBaIE0gODUuNzM3IDE3LjIgQyA4NS4zMzcgMTkuMyA4My43MzcgMjAuOCA4MS41MzcgMjAuOCBDIDgwLjQzNyAyMC44IDc5LjYzNyAyMC41IDc5LjAzNyAxOS44IEMgNzguNDM3IDE5LjEgNzguMjM3IDE4LjIgNzguNDM3IDE3LjIgQyA3OC43MzcgMTUuMSA4MC41MzcgMTMuNiA4Mi42MzcgMTMuNiBDIDgzLjczNyAxMy42IDg0LjUzNyAxNCA4NS4xMzcgMTQuNiBDIDg1LjczNyAxNS4zIDg1LjkzNyAxNi4yIDg1LjczNyAxNy4yIFoiPjwvcGF0aD48cGF0aCBmaWxsPSIjMDA5Y2RlIiBkPSJNIDk1LjMzNyAzLjMgTCA5Mi4xMzcgMjMuNiBDIDkyLjAzNyAyNCA5Mi4zMzcgMjQuMyA5Mi43MzcgMjQuMyBMIDk1LjkzNyAyNC4zIEMgOTYuNDM3IDI0LjMgOTYuOTM3IDIzLjkgOTcuMDM3IDIzLjQgTCAxMDAuMjM3IDMuNSBDIDEwMC4zMzcgMy4xIDEwMC4wMzcgMi44IDk5LjYzNyAyLjggTCA5Ni4wMzcgMi44IEMgOTUuNjM3IDIuOCA5NS40MzcgMyA5NS4zMzcgMy4zIFoiPjwvcGF0aD48L3N2Zz4",
   role: "presentation",
   class: "h-[22px]"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "ExpressPaymentMethodButton",
   props: {
     type: { type: String }
@@ -4482,14 +2471,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       emit("click");
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$P), {
+      return openBlock(), createBlock(unref(_sfc_main$v), {
         size: "lg",
         "aria-label": ariaLabel.value,
         class: normalizeClass([buttonClasses.value, "!block w-full h-11 bg-center bg-no-repeat"]),
         onClick: handleClick
       }, {
         default: withCtx(() => [
-          props.type === "applepay" ? (openBlock(), createElementBlock("svg", _hoisted_1$e, [..._cache[0] || (_cache[0] = [
+          props.type === "applepay" ? (openBlock(), createElementBlock("svg", _hoisted_1$f, [..._cache[0] || (_cache[0] = [
             createElementVNode("svg", {
               id: "svg-logo",
               x: "0",
@@ -4517,16 +2506,16 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 ])
               ])
             ], -1)
-          ])])) : props.type === "paypal" ? (openBlock(), createElementBlock("img", _hoisted_2$6)) : createCommentVNode("", true)
+          ])])) : props.type === "paypal" ? (openBlock(), createElementBlock("img", _hoisted_2$8)) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["aria-label", "class"]);
     };
   }
 });
-const _hoisted_1$d = { class: "absolute h-[1px] w-[1px] overflow-hidden opacity-0" };
+const _hoisted_1$e = { class: "absolute h-[1px] w-[1px] overflow-hidden opacity-0" };
 const PAYMENT_GATEWAY_VARIANT_ADYEN = "ADYEN";
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "ExpressPaymentMethodApplePay",
   props: {
     onBillingInformationChange: { type: Function },
@@ -4546,13 +2535,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const { authorizePayment } = createPaymentsService();
     const paymentAcceptorId = props.paymentMethodOptionsResponse.payment_acceptor.id;
     const initApplePay = async () => {
-      const { AdyenCheckout, ApplePay } = await import("../../auto-DzZuCneB.mjs");
+      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, {
@@ -4698,7 +2688,7 @@ const _sfc_main$f = /* @__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 {
@@ -4706,7 +2696,7 @@ const _sfc_main$f = /* @__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) => {
@@ -4760,12 +2750,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        __props.isVisible ? (openBlock(), createBlock(_sfc_main$g, {
+        __props.isVisible ? (openBlock(), createBlock(_sfc_main$h, {
           key: 0,
           type: "applepay",
           onClick: handleClick
         })) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_1$d, [
+        createElementVNode("div", _hoisted_1$e, [
           createElementVNode("div", {
             ref_key: "applePayButtonRef",
             ref: applePayButtonRef
@@ -4775,8 +2765,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = { class: "relative overflow-hidden" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = { class: "relative overflow-hidden" };
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "ExpressPaymentMethodPaypal",
   props: {
     amount: { type: Object },
@@ -4793,13 +2783,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const paypalButtonRef = ref();
     const logger = useLogger();
     const initPaypal = async () => {
-      const { AdyenCheckout, PayPal } = await import("../../auto-DzZuCneB.mjs");
+      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, {
@@ -4834,8 +2825,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       void initPaypal();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        __props.isVisible ? (openBlock(), createBlock(_sfc_main$g, {
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+        __props.isVisible ? (openBlock(), createBlock(_sfc_main$h, {
           key: 0,
           type: "paypal",
           class: "w-full"
@@ -4849,8 +2840,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$b = { class: "w-[1px] h-[1px] overflow-hidden opacity-0 absolute" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _hoisted_1$c = { class: "absolute h-[1px] w-[1px] overflow-hidden opacity-0" };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "ExpressPaymentMethodGooglePay",
   props: {
     amount: { type: Object },
@@ -4867,13 +2858,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const googlePayButtonRef = ref();
     const logger = useLogger();
     const initGooglePay = async () => {
-      const { AdyenCheckout, GooglePay } = await import("../../auto-DzZuCneB.mjs");
+      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 });
@@ -4913,12 +2905,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        __props.isVisible ? (openBlock(), createBlock(_sfc_main$g, {
+        __props.isVisible ? (openBlock(), createBlock(_sfc_main$h, {
           key: 0,
           type: "googlepay",
           onClick: handleClick
         })) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_1$b, [
+        createElementVNode("div", _hoisted_1$c, [
           createElementVNode("div", {
             ref_key: "googlePayButtonRef",
             ref: googlePayButtonRef
@@ -4928,15 +2920,15 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   key: 0,
   class: "mt-4n"
 };
-const _hoisted_2$5 = { class: "mb-2" };
-const _hoisted_3$2 = { class: "grid grid-cols-6 gap-1 md:gap-2" };
-const _hoisted_4$2 = { class: "h-4 mt-4" };
+const _hoisted_2$7 = { class: "mb-2" };
+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$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "ExpressPaymentMethods",
   props: {
     amount: { type: Object },
@@ -5010,12 +3002,12 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       return (paymentMethodOptionsResponseEntryIncludingApplePay.value ? 1 : 0) + (paymentMethodOptionsResponseEntryIncludingGooglePay.value ? 1 : 0) + (paymentMethodOptionsResponseEntryIncludingPayPal.value ? 1 : 0);
     });
     return (_ctx, _cache) => {
-      return hasPaymentMethodOptions.value ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
-        createElementVNode("div", _hoisted_2$5, [
-          !isReady.value ? (openBlock(), createBlock(_sfc_main$X, {
+      return hasPaymentMethodOptions.value ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+        createElementVNode("div", _hoisted_2$7, [
+          !isReady.value ? (openBlock(), createBlock(_sfc_main$K, {
             key: 0,
             variant: "title"
-          })) : (openBlock(), createBlock(unref(_sfc_main$C), {
+          })) : (openBlock(), createBlock(unref(_sfc_main$r), {
             key: 1,
             variant: "heading-3",
             tag: "h2"
@@ -5030,10 +3022,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             _: 1
           }))
         ]),
-        createElementVNode("div", _hoisted_3$2, [
+        createElementVNode("div", _hoisted_3$4, [
           !isReady.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            createVNode(_sfc_main$X, { class: "h-11 col-span-3" }),
-            createVNode(_sfc_main$X, { class: "h-11 col-span-3" })
+            createVNode(_sfc_main$K, { class: "h-11 col-span-3" }),
+            createVNode(_sfc_main$K, { class: "h-11 col-span-3" })
           ], 64)) : createCommentVNode("", true),
           createElementVNode("div", {
             class: normalizeClass(["col-span-3 md:col-span-2", {
@@ -5043,7 +3035,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               "!col-span-6 md:!col-span-2": expressPaymentButtonCount.value === 3
             }])
           }, [
-            paymentMethodOptionsResponseEntryIncludingApplePay.value ? (openBlock(), createBlock(_sfc_main$f, {
+            paymentMethodOptionsResponseEntryIncludingApplePay.value ? (openBlock(), createBlock(_sfc_main$g, {
               key: 0,
               amount: __props.amount,
               "billing-information": __props.billingInformation,
@@ -5063,7 +3055,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               "md:!col-span-3": expressPaymentButtonCount.value === 2
             }])
           }, [
-            paymentMethodOptionsResponseEntryIncludingGooglePay.value ? (openBlock(), createBlock(_sfc_main$d, {
+            paymentMethodOptionsResponseEntryIncludingGooglePay.value ? (openBlock(), createBlock(_sfc_main$e, {
               key: 0,
               amount: __props.amount,
               "billing-information": __props.billingInformation,
@@ -5081,7 +3073,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               "md:!col-span-3": expressPaymentButtonCount.value === 2
             }])
           }, [
-            paymentMethodOptionsResponseEntryIncludingPayPal.value ? (openBlock(), createBlock(_sfc_main$e, {
+            paymentMethodOptionsResponseEntryIncludingPayPal.value ? (openBlock(), createBlock(_sfc_main$f, {
               key: 0,
               amount: __props.amount,
               "billing-information": __props.billingInformation,
@@ -5093,11 +3085,11 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             }, null, 8, ["amount", "billing-information", "country-code", "locale", "is-visible", "payment-method-options-response"])) : createCommentVNode("", true)
           ], 2)
         ]),
-        createElementVNode("div", _hoisted_4$2, [
-          !isReady.value ? (openBlock(), createBlock(_sfc_main$X, {
+        createElementVNode("div", _hoisted_4$3, [
+          !isReady.value ? (openBlock(), createBlock(_sfc_main$K, {
             key: 0,
             variant: "divider-text"
-          })) : (openBlock(), createBlock(unref(_sfc_main$Y), {
+          })) : (openBlock(), createBlock(unref(_sfc_main$L), {
             key: 1,
             text: unref($t)({
               defaultMessage: "Or",
@@ -5111,8 +3103,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = { class: "grid grid-cols-2 gap-2" };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = { class: "grid grid-cols-2 gap-2" };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "TieredTableRow",
   props: {
     band: { type: Object },
@@ -5141,8 +3133,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       return props.band.tier_top_bound.number;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
-        createVNode(unref(_sfc_main$C), {
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+        createVNode(unref(_sfc_main$r), {
           variant: "body-xs",
           shade: "lighter",
           tag: "div"
@@ -5175,7 +3167,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }),
-        createVNode(unref(_sfc_main$C), {
+        createVNode(unref(_sfc_main$r), {
           variant: "body-xs",
           shade: "lighter",
           tag: "div",
@@ -5203,8 +3195,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = { class: "grid grid-cols-1 gap-0.5 pt-1.5" };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9 = { class: "grid grid-cols-1 gap-0.5 pt-1.5" };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "TieredTable",
   props: {
     bands: { type: Array },
@@ -5212,9 +3204,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.bands, (band, index) => {
-          return openBlock(), createBlock(_sfc_main$b, {
+          return openBlock(), createBlock(_sfc_main$c, {
             key: index,
             band,
             "is-first": index === 0,
@@ -5247,7 +3239,7 @@ function useSeatBasedPricing({
   pricingItemConfigId
 }) {
   return computed(() => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const { config, productItem } = getPricingItemByPricingConfigId({
       pricings,
       pricingItemConfigId
@@ -5262,18 +3254,18 @@ function useSeatBasedPricing({
         description: productItem == null ? void 0 : productItem.description
       },
       pricing: {
-        ...(config == null ? void 0 : config.type) === "FLAT" && { amount: (_b = (_a = config.bands) == null ? void 0 : _a[0]) == null ? void 0 : _b.amount },
-        ...(config == null ? void 0 : config.type) === "TIERED" && { tiered: { bands: config.bands } }
+        ...((_a = config == null ? void 0 : config.details) == null ? void 0 : _a.pricing_type) === "FLAT" && { amount: (_d = (_c = (_b = config.details) == null ? void 0 : _b.bands) == null ? void 0 : _c[0]) == null ? void 0 : _d.amount },
+        ...((_e = config == null ? void 0 : config.details) == null ? void 0 : _e.pricing_type) === "TIERED" && { tiered: { bands: (_f = config.details) == null ? void 0 : _f.bands } }
       }
     };
   });
 }
-const _hoisted_1$7 = { class: "flex flex-row-reverse md:flex-row gap-4" };
-const _hoisted_2$4 = { class: "w-24 md:w-32 shrink-0 justify-start" };
-const _hoisted_3$1 = ["tabindex"];
-const _hoisted_4$1 = { key: 0 };
-const _hoisted_5$1 = { key: 0 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+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$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({
     modelValue: { type: Object },
@@ -5310,9 +3302,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a, _b, _c;
       return openBlock(), createElementBlock("div", null, [
-        createElementVNode("div", _hoisted_1$7, [
-          createElementVNode("div", _hoisted_2$4, [
-            createVNode(unref(_sfc_main$p), {
+        createElementVNode("div", _hoisted_1$8, [
+          createElementVNode("div", _hoisted_2$6, [
+            createVNode(unref(_sfc_main$M), {
               modelValue: seatsNumber.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => seatsNumber.value = $event),
               size: "sm",
@@ -5324,7 +3316,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             tabindex: isCollapsible.value ? 0 : void 0,
             onClick: _cache[1] || (_cache[1] = ($event) => isCollapsible.value ? isExpanded.value = !isExpanded.value : void 0)
           }, [
-            createVNode(unref(_sfc_main$C), {
+            createVNode(unref(_sfc_main$r), {
               tag: "span",
               variant: "body-sm",
               weight: "semibold"
@@ -5338,7 +3330,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            unref(seats).pricing.amount ? (openBlock(), createBlock(unref(_sfc_main$C), {
+            unref(seats).pricing.amount ? (openBlock(), createBlock(unref(_sfc_main$r), {
               key: 0,
               tag: "span",
               variant: "body-xs",
@@ -5361,7 +3353,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 )), 1)
               ]),
               _: 1
-            })) : unref(seats).pricing.tiered ? (openBlock(), createBlock(unref(_sfc_main$C), {
+            })) : unref(seats).pricing.tiered ? (openBlock(), createBlock(unref(_sfc_main$r), {
               key: 1,
               tag: "span",
               variant: "body-xs",
@@ -5373,7 +3365,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                   id: "seats.tiered_pricing_label",
                   description: "The label indicating tiered pricing structure for seats"
                 })) + " ", 1),
-                createVNode(unref(_sfc_main$I), {
+                createVNode(unref(_sfc_main$J), {
                   icon: "keyboard_arrow_down",
                   size: "xs",
                   class: normalizeClass(["absolute transition ease-in-out text-gray-400", { "rotate-0": !isExpanded.value, "rotate-180": isExpanded.value }])
@@ -5381,13 +3373,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             })) : createCommentVNode("", true)
-          ], 10, _hoisted_3$1)
+          ], 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, [
-          createVNode(unref(_sfc_main$G), null, {
+        ((_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, [
-                createVNode(_sfc_main$a, {
+              isExpanded.value ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
+                createVNode(_sfc_main$b, {
                   bands: unref(seats).pricing.tiered.bands,
                   period: unref(seats).billing.period
                 }, null, 8, ["bands", "period"])
@@ -5400,7 +3392,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "SeatsEditor",
   props: /* @__PURE__ */ mergeModels({
     modelValue: { type: Array },
@@ -5423,11 +3415,11 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(__props.modelValue, (item, index) => {
-        return openBlock(), createBlock(unref(_sfc_main$Q), { key: index }, {
+        return openBlock(), createBlock(unref(_sfc_main$s), { key: index }, {
           default: withCtx(() => {
             var _a;
             return [
-              item.pricing_item_config_id ? (openBlock(), createBlock(_sfc_main$9, {
+              item.pricing_item_config_id ? (openBlock(), createBlock(_sfc_main$a, {
                 key: item.pricing_item_config_id,
                 modelValue: itemModel(index).value,
                 "onUpdate:modelValue": ($event) => itemModel(index).value = $event,
@@ -5442,15 +3434,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = { class: "flex gap-4 border-l-2 border-primary-600 px-2" };
-const _hoisted_2$3 = { class: "grow" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { class: "flex gap-4 border-l-2 border-primary-600 px-2" };
+const _hoisted_2$5 = { class: "grow" };
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "PricingGroupTitle",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
-        createElementVNode("div", _hoisted_2$3, [
-          createVNode(unref(_sfc_main$C), {
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+        createElementVNode("div", _hoisted_2$5, [
+          createVNode(unref(_sfc_main$r), {
             tag: "span",
             variant: "body-sm",
             weight: "semibold"
@@ -5462,7 +3454,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           })
         ]),
         createElementVNode("div", null, [
-          createVNode(unref(_sfc_main$C), {
+          createVNode(unref(_sfc_main$r), {
             tag: "span",
             variant: "body-xs",
             shade: "lighter"
@@ -5477,9 +3469,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = { class: "p-1" };
-const _hoisted_2$2 = { class: "grid grid-cols-1 gap-1 pt-1" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$6 = { class: "p-1" };
+const _hoisted_2$4 = { class: "grid grid-cols-1 gap-1 pt-1" };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "AddonSingleEditor",
   props: /* @__PURE__ */ mergeModels({
     constraint: { type: String },
@@ -5538,10 +3530,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$Q), { "no-spacing": "" }, {
+      return openBlock(), createBlock(unref(_sfc_main$s), { "no-spacing": "" }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$5, [
-            createVNode(_sfc_main$7, null, {
+          createElementVNode("div", _hoisted_1$6, [
+            createVNode(_sfc_main$8, null, {
               title: withCtx(() => [
                 createTextVNode(toDisplayString(__props.groupName), 1)
               ]),
@@ -5550,9 +3542,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            createElementVNode("div", _hoisted_2$2, [
+            createElementVNode("div", _hoisted_2$4, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(__props.pricings, (pricing) => {
-                return openBlock(), createBlock(unref(_sfc_main$Q), {
+                return openBlock(), createBlock(unref(_sfc_main$s), {
                   key: pricing.id,
                   "content-background": "none",
                   class: normalizeClass({ "!bg-white": isSelected(pricing.id) })
@@ -5560,7 +3552,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   default: withCtx(() => {
                     var _a, _b;
                     return [
-                      createVNode(_sfc_main$W, {
+                      createVNode(_sfc_main$F, {
                         name: unref(getNameFromPricing)(pricing) ?? "",
                         description: ((_a = pricing.items) == null ? void 0 : _a[0]) ? unref(renderPricingForPricingItem)({
                           pricingItem: (_b = pricing.items) == null ? void 0 : _b[0]
@@ -5571,7 +3563,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                         })
                       }, {
                         default: withCtx(() => [
-                          createVNode(unref(_sfc_main$S), {
+                          createVNode(unref(_sfc_main$x), {
                             "model-value": isSelected(pricing.id),
                             "onUpdate:modelValue": ($event) => handleToggle(pricing.id)
                           }, null, 8, ["model-value", "onUpdate:modelValue"])
@@ -5591,8 +3583,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = { class: "grid grid-cols-1 gap-1" };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = { class: "grid grid-cols-1 gap-1" };
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "AddonMultipleEditor",
   props: /* @__PURE__ */ mergeModels({
     modelValue: { type: Array },
@@ -5624,7 +3616,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$Q), {
+      return openBlock(), createBlock(unref(_sfc_main$s), {
         "no-spacing": "",
         "no-border": !__props.groupName,
         "content-background": __props.groupName ? "gray" : "none"
@@ -5633,7 +3625,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(["grid grid-cols-1 gap-1", { "p-1": __props.groupName }])
           }, [
-            __props.groupName ? (openBlock(), createBlock(_sfc_main$7, { key: 0 }, {
+            __props.groupName ? (openBlock(), createBlock(_sfc_main$8, { key: 0 }, {
               title: withCtx(() => [
                 createTextVNode(toDisplayString(__props.groupName), 1)
               ]),
@@ -5646,9 +3638,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             })) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_1$4, [
+            createElementVNode("div", _hoisted_1$5, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(__props.pricings, (pricing) => {
-                return openBlock(), createBlock(unref(_sfc_main$Q), {
+                return openBlock(), createBlock(unref(_sfc_main$s), {
                   key: pricing.id,
                   "content-background": __props.groupName || isSelected(pricing.id) ? "none" : "gray",
                   class: normalizeClass({ "!bg-white": isSelected(pricing.id) })
@@ -5656,7 +3648,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   default: withCtx(() => {
                     var _a, _b;
                     return [
-                      createVNode(_sfc_main$W, {
+                      createVNode(_sfc_main$F, {
                         name: unref(getNameFromPricing)(pricing) ?? "",
                         description: ((_a = pricing.items) == null ? void 0 : _a[0]) ? unref(renderPricingForPricingItem)({
                           pricingItem: (_b = pricing.items) == null ? void 0 : _b[0]
@@ -5667,7 +3659,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                         })
                       }, {
                         default: withCtx(() => [
-                          isSelected(pricing.id) ? (openBlock(), createBlock(unref(_sfc_main$P), {
+                          isSelected(pricing.id) ? (openBlock(), createBlock(unref(_sfc_main$v), {
                             key: 0,
                             color: "gray",
                             variant: "outline",
@@ -5675,7 +3667,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                             size: "sm",
                             "icon-prefix": "remove_shopping_cart",
                             onClick: ($event) => handleToggle(pricing.id)
-                          }, null, 8, ["onClick"])) : (openBlock(), createBlock(unref(_sfc_main$P), {
+                          }, null, 8, ["onClick"])) : (openBlock(), createBlock(unref(_sfc_main$v), {
                             key: 1,
                             color: "primary",
                             "icon-prefix": "add",
@@ -5707,16 +3699,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function useViewport() {
-  const breakpoints = useBreakpoints(breakpointsTailwind);
-  const isMobileViewport = breakpoints.smallerOrEqual("sm");
-  return { isMobileViewport };
-}
-const _hoisted_1$3 = { class: "p-1" };
-const _hoisted_2$1 = { class: "pt-1" };
+const _hoisted_1$4 = { class: "p-1" };
+const _hoisted_2$3 = { class: "pt-1" };
 const SHOW_RADIO_GROUP_MAX_OPTIONS = 3;
 const SHOW_SELECT_MAX_OPTIONS = 6;
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "PricingGroupSingleEditor",
   props: /* @__PURE__ */ mergeModels({
     modelValue: { type: Array },
@@ -5776,31 +3763,31 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }));
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$Q), { "no-spacing": "" }, {
+      return openBlock(), createBlock(unref(_sfc_main$s), { "no-spacing": "" }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$3, [
-            createVNode(_sfc_main$7, null, {
+          createElementVNode("div", _hoisted_1$4, [
+            createVNode(_sfc_main$8, null, {
               title: withCtx(() => [
                 createTextVNode(toDisplayString(__props.groupName), 1)
               ]),
               _: 1
             }),
-            createElementVNode("div", _hoisted_2$1, [
-              options.value.length <= SHOW_RADIO_GROUP_MAX_OPTIONS ? (openBlock(), createBlock(unref(_sfc_main$u), {
+            createElementVNode("div", _hoisted_2$3, [
+              options.value.length <= SHOW_RADIO_GROUP_MAX_OPTIONS ? (openBlock(), createBlock(unref(_sfc_main$N), {
                 key: 0,
                 modelValue: singleModelValue.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => singleModelValue.value = $event),
                 options: getRadioGroupOptions(),
                 direction: unref(isMobileViewport) ? "column" : "row",
                 "show-radio": false
-              }, null, 8, ["modelValue", "options", "direction"])) : options.value.length <= SHOW_SELECT_MAX_OPTIONS ? (openBlock(), createBlock(unref(_sfc_main$q), {
+              }, null, 8, ["modelValue", "options", "direction"])) : options.value.length <= SHOW_SELECT_MAX_OPTIONS ? (openBlock(), createBlock(unref(_sfc_main$G), {
                 key: 1,
                 "single-model-value": singleModelValue.value,
                 "onUpdate:singleModelValue": _cache[1] || (_cache[1] = ($event) => singleModelValue.value = $event),
                 options: getSelectOptions(),
                 size: "xl",
                 "show-sub-label-in-input": ""
-              }, null, 8, ["single-model-value", "options"])) : (openBlock(), createBlock(unref(_sfc_main$Z), {
+              }, null, 8, ["single-model-value", "options"])) : (openBlock(), createBlock(unref(_sfc_main$O), {
                 key: 2,
                 modelValue: singleModelValue.value,
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => singleModelValue.value = $event),
@@ -5820,8 +3807,8 @@ 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$2 = { class: "grid grid-cols-1 gap-1" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+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({
     subscription: { type: Object },
@@ -5861,7 +3848,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       () => getPricingGroupsFromExtendedPricingPlanSubscription(props.subscription)
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$Q), {
+      return openBlock(), createBlock(unref(_sfc_main$s), {
+        class: "sv-plan-customization",
         title: unref($t)({
           defaultMessage: "Customize plan",
           id: "checkout.customize_plan_block.title",
@@ -5872,10 +3860,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         "content-background": "none"
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$2, [
-            createVNode(_sfc_main$8, {
+          createElementVNode("div", _hoisted_1$3, [
+            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"]),
@@ -5883,27 +3872,30 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               return openBlock(), createElementBlock(Fragment, {
                 key: pricingGroup.id
               }, [
-                pricingGroup.product_type === "DEFAULT" && pricingGroup.selection_constraint === "EXACTLY_ONE" ? (openBlock(), createBlock(_sfc_main$4, {
+                pricingGroup.product_type === "DEFAULT" && pricingGroup.selection_constraint === "EXACTLY_ONE" ? (openBlock(), createBlock(_sfc_main$5, {
                   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,
                   currency: __props.currency
-                }, null, 8, ["modelValue", "group-name", "pricings", "billing-period", "currency"])) : pricingGroup.product_type === "ADDON" && pricingGroup.selection_constraint === "AT_MOST_ONE" ? (openBlock(), createBlock(_sfc_main$6, {
+                }, null, 8, ["modelValue", "group-name", "pricings", "billing-period", "currency"])) : pricingGroup.product_type === "ADDON" && pricingGroup.selection_constraint === "AT_MOST_ONE" ? (openBlock(), createBlock(_sfc_main$7, {
                   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,
                   "billing-period": __props.billingPeriod,
                   currency: __props.currency
-                }, null, 8, ["modelValue", "group-name", "pricings", "constraint", "billing-period", "currency"])) : pricingGroup.product_type === "ADDON" && pricingGroup.selection_constraint === "ANY" ? (openBlock(), createBlock(_sfc_main$5, {
+                }, null, 8, ["modelValue", "group-name", "pricings", "constraint", "billing-period", "currency"])) : pricingGroup.product_type === "ADDON" && pricingGroup.selection_constraint === "ANY" ? (openBlock(), createBlock(_sfc_main$6, {
                   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,
@@ -5911,9 +3903,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["modelValue", "pricings", "group-name", "billing-period", "currency"])) : createCommentVNode("", true)
               ], 64);
             }), 128)),
-            createVNode(_sfc_main$5, {
+            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
@@ -5925,18 +3918,18 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = ["aria-expanded", "aria-label"];
-const _hoisted_2 = { class: "flex flex-row items-center justify-between w-full gap-3 px-3 py-2 cursor-pointer" };
-const _hoisted_3 = { class: "flex flex-row gap-2 items-center" };
-const _hoisted_4 = ["onKeydown"];
-const _hoisted_5 = ["aria-label"];
-const _hoisted_6 = { class: "flex flex-row items-center justify-between w-full gap-3 px-3 py-2 cursor-pointer" };
-const _hoisted_7 = { class: "flex flex-row gap-2 items-center" };
+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$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",
   "aria-live": "polite"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "PromotionCodeSection",
   props: {
     promotionCode: { default: null, type: [String, null] }
@@ -6057,10 +4050,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        !isApplied.value ? (openBlock(), createBlock(unref(_sfc_main$Q), {
+        !isApplied.value ? (openBlock(), createBlock(unref(_sfc_main$s), {
           key: 0,
           "no-spacing": "",
-          class: "w-full relative"
+          class: "relative w-full"
         }, {
           default: withCtx(() => [
             createElementVNode("button", {
@@ -6073,10 +4066,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               "aria-label": toggleAriaLabel.value,
               onClick: toggleExpanded
             }, [
-              createElementVNode("div", _hoisted_2, [
-                createElementVNode("div", _hoisted_3, [
-                  createVNode(unref(_sfc_main$I), { icon: "local_activity" }),
-                  createVNode(unref(_sfc_main$C), {
+              createElementVNode("div", _hoisted_2$2, [
+                createElementVNode("div", _hoisted_3$2, [
+                  createVNode(unref(_sfc_main$J), { icon: "local_activity" }),
+                  createVNode(unref(_sfc_main$r), {
                     id: labelId,
                     variant: "body-sm"
                   }, {
@@ -6090,21 +4083,21 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ]),
-                createVNode(unref(_sfc_main$I), {
+                createVNode(unref(_sfc_main$J), {
                   icon: isExpanded.value ? "remove" : "add"
                 }, null, 8, ["icon"])
               ])
-            ], 8, _hoisted_1$1),
+            ], 8, _hoisted_1$2),
             withDirectives(createElementVNode("div", {
               id: panelId,
               ref_key: "panelRef",
               ref: panelRef,
               role: "region",
               "aria-labelledby": labelId,
-              class: "w-full border-t px-3 py-2 flex flex-row gap-2 items-center overflow-hidden",
+              class: "flex w-full flex-row items-center gap-2 overflow-hidden border-t px-3 py-2",
               onKeydown: withKeys(withModifiers(collapseExpanded, ["prevent"]), ["esc"])
             }, [
-              createVNode(unref(_sfc_main$N), {
+              createVNode(unref(_sfc_main$t), {
                 modelValue: inputValue.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
                 placeholder: unref($t)({
@@ -6120,7 +4113,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 class: "w-full",
                 onKeydown: withKeys(withModifiers(applyCode, ["prevent"]), ["enter"])
               }, null, 8, ["modelValue", "placeholder", "aria-label", "onKeydown"]),
-              createVNode(unref(_sfc_main$P), {
+              createVNode(unref(_sfc_main$v), {
                 type: "button",
                 disabled: !canApply.value,
                 "aria-label": applyAriaLabel.value,
@@ -6136,29 +4129,29 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }, 8, ["disabled", "aria-label", "aria-disabled"])
-            ], 40, _hoisted_4), [
+            ], 40, _hoisted_4$1), [
               [vShow, isExpanded.value]
             ])
           ]),
           _: 1
-        })) : (openBlock(), createBlock(unref(_sfc_main$Q), {
+        })) : (openBlock(), createBlock(unref(_sfc_main$s), {
           key: 1,
           "no-border": "",
           "no-spacing": "",
           "content-background": "none",
-          class: "w-full relative"
+          class: "relative w-full"
         }, {
           default: withCtx(() => [
             createElementVNode("button", {
               type: "button",
-              class: "w-full bg-white border border-primary-900 rounded",
+              class: "w-full rounded border border-primary-900 bg-white",
               "aria-label": removeAriaLabel.value,
               onClick: removeCode
             }, [
-              createElementVNode("div", _hoisted_6, [
+              createElementVNode("div", _hoisted_6$1, [
                 createElementVNode("div", _hoisted_7, [
-                  createVNode(unref(_sfc_main$I), { icon: "local_activity" }),
-                  createVNode(unref(_sfc_main$C), {
+                  createVNode(unref(_sfc_main$J), { icon: "local_activity" }),
+                  createVNode(unref(_sfc_main$r), {
                     variant: "body-sm",
                     class: "font-semibold"
                   }, {
@@ -6168,9 +4161,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ]),
-                createVNode(unref(_sfc_main$I), { icon: "close" })
+                createVNode(unref(_sfc_main$J), { icon: "close" })
               ])
-            ], 8, _hoisted_5)
+            ], 8, _hoisted_5$1)
           ]),
           _: 1
         })),
@@ -6179,7 +4172,90 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { key: 0 };
+const _hoisted_1$1 = { class: "flex justify-around" };
+const _hoisted_2$1 = { class: "flex items-center gap-0.5" };
+const _hoisted_3$1 = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "40",
+  height: "15",
+  fill: "none",
+  viewBox: "0 0 40 15",
+  class: "inline-block translate-y-[1px]"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "SecurePaymentsKPI",
+  props: {
+    paymentMethodOptions: { type: Array }
+  },
+  setup(__props) {
+    const props = __props;
+    const { $t } = useIntl();
+    const showAdyen = computed(
+      () => props.paymentMethodOptions.find(
+        ({ integration }) => {
+          var _a;
+          return ((_a = integration.payment_gateway) == null ? void 0 : _a.variant) === "ADYEN";
+        }
+      )
+    );
+    const securePaymentsText = computed(() => {
+      if (showAdyen.value) {
+        return $t({
+          defaultMessage: "Secure and encrypted payments by",
+          description: "Secure encrypted payments KPI for a specific vendor, followed by a vendor logo",
+          id: "secure_payments_kpi.specific_vendor"
+        });
+      }
+      return $t({
+        defaultMessage: "Secure and encrypted payments",
+        description: "Secure encrypted payments KPI",
+        id: "secure_payments_kpi.generic"
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_2$1, [
+          createVNode(unref(_sfc_main$J), {
+            icon: "lock",
+            size: "xs"
+          }),
+          createVNode(unref(_sfc_main$r), {
+            tag: "span",
+            variant: "body-xs",
+            shade: "lighter"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(securePaymentsText.value) + " ", 1),
+              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"
+                }, null, -1)
+              ])])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+});
+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: {
@@ -6188,6 +4264,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   emits: ["error", "ready"],
   setup(__props, { emit: __emit }) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
+    const PaymentIntegrationForm = defineAsyncComponent(
+      () => import("../../PaymentIntegrationForm-DNkjhqMF.mjs")
+    );
     const props = __props;
     const emit = __emit;
     const configuration = computed(() => props.configuration);
@@ -6453,18 +4532,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     } = usePromotionCode({
       checkoutForm,
       updateInvoicePreviewOnBillingInformationChange,
-      logger,
-      formatErrorMessage: ({ action }) => $t(
-        action === "apply" ? {
-          defaultMessage: "Promotion code could not be applied. Please try again.",
-          id: "checkout.promotion_code.apply_failed",
-          description: "Error message when applying a promotion code in checkout failed"
-        } : {
-          defaultMessage: "Promotion code could not be removed. Please try again.",
-          id: "checkout.promotion_code.remove_failed",
-          description: "Error message when removing a promotion code in checkout failed"
-        }
-      ),
+      formatErrorMessage: ({ action }) => action === "apply" ? $t({
+        defaultMessage: "Promotion code could not be applied. Please try again.",
+        id: "checkout.promotion_code.apply_failed",
+        description: "Error message when applying a promotion code in checkout failed"
+      }) : $t({
+        defaultMessage: "Promotion code could not be removed. Please try again.",
+        id: "checkout.promotion_code.remove_failed",
+        description: "Error message when removing a promotion code in checkout failed"
+      }),
       onInvalidPromotionCode: () => {
         promotionCode.value = null;
       },
@@ -6472,9 +4548,22 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         promotionCode.value = null;
       }
     });
+    const handleRedirect = () => {
+      if (!successRedirectUrl) return;
+      safeUrlRedirect(successRedirectUrl);
+    };
     const handlePaymentSuccess = () => {
+      var _a2;
       isPaid.value = true;
       promotionCodeErrorMessage.value = null;
+      if ((_a2 = props.configuration) == null ? void 0 : _a2.onPaymentSuccess) {
+        props.configuration.onPaymentSuccess();
+        return;
+      }
+      if (successRedirectUrl) {
+        handleRedirect();
+        return;
+      }
     };
     const handleBillingPeriodChange = (billingPeriod) => {
       if (!subscription.value) {
@@ -6490,32 +4579,42 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       emit("ready");
     });
     return (_ctx, _cache) => {
-      return criticalError.value ? (openBlock(), createBlock(_sfc_main$l, { 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$X, { class: "min-h-[52px] w-96" }, {
-            default: withCtx(() => {
-              var _a2, _b2, _c2;
-              return [
-                unref(invoicePreview) && unref(subscription) && subscriptionStartDate.value ? (openBlock(), createBlock(_sfc_main$m, {
-                  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$i, {
+            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),
@@ -6531,19 +4630,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               variant: "products-inline",
               onBillingPeriodChange: handleBillingPeriodChange
             }, null, 8, ["subscription", "invoice", "invoice-preview-by-billing-period", "trial-invoice", "enabled-pricing-ids", "trial-period", "avatar", "is-paid", "is-usage-based", "is-preview-and-payment-methods-pending", "country-code"])) : createCommentVNode("", true),
-            showPlanCustomizationEditor.value && unref(subscription) ? (openBlock(), createBlock(_sfc_main$3, {
+            showPlanCustomizationEditor.value && unref(subscription) ? (openBlock(), createBlock(_sfc_main$4, {
               key: 1,
               "seats-values": seatsValuesModel.value,
               "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,
               currency: activePricingCurrency.value
             }, 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$c, {
+            !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),
@@ -6552,14 +4653,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               "on-billing-information-change": unref(updateInvoicePreviewOnBillingInformationChange),
               onUpdateBillingInformation: handleUpdateBillingInformation
             }, null, 8, ["amount", "country-code", "locale", "payment-methods-options-response", "billing-information", "on-billing-information-change"])) : createCommentVNode("", true),
-            unref(isPaid) ? (openBlock(), createBlock(_sfc_main$k, {
+            unref(isPaid) ? (openBlock(), createBlock(_sfc_main$l, {
               key: 3,
-              "redirect-url": unref(successRedirectUrl)
-            }, null, 8, ["redirect-url"])) : createCommentVNode("", true),
-            !unref(isPaid) ? (openBlock(), createBlock(_sfc_main$n, {
+              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),
@@ -6567,175 +4670,166 @@ 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$X, {
-              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$C), {
-                    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$h, {
+              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$h, {
-                    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(_sfc_main$10, {
-                    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) ?? [],
-                    "success-redirect-url": unref(successRedirectUrl),
-                    "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", "success-redirect-url"])) : 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$X, {
-            variant: "section",
-            class: "min-h-[220px]"
-          }, {
-            default: withCtx(() => {
-              var _a2;
-              return [
-                unref(subscription) && unref(invoicePreview) ? (openBlock(), createBlock(_sfc_main$i, {
-                  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$2, {
+            })
+          ]),
+          !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),
             onApply: unref(applyPromotionCode)
           }, null, 8, ["promotion-code", "onRemove", "onApply"])) : createCommentVNode("", true),
-          unref(promotionCodeErrorMessage) ? (openBlock(), createBlock(unref(_sfc_main$_), {
+          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),
-          !unref(isPaid) ? (openBlock(), createBlock(_sfc_main$X, {
-            key: 2,
-            class: "min-h-[44px]"
-          }, {
-            default: withCtx(() => [
-              unref(invoicePreview) ? (openBlock(), createBlock(unref(_sfc_main$P), {
-                key: 0,
-                type: "button",
-                size: "lg",
-                class: "full-width",
-                disabled: unref(isPromotionCodePending) || unref(paymentMethodOptions).length === 0,
-                onClick: handleSubmit
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(hasTrialPeriod.value ? unref($t)({
-                    defaultMessage: "Start trial",
-                    id: "checkout.pay_and_subscribe_button_trial.label",
-                    description: "The label of the start trial button in the checkout form"
-                  }) : unref($t)({
-                    defaultMessage: "Pay and subscribe",
-                    id: "checkout.pay_and_subscribe_button.label",
-                    description: "The label of the pay and subscribe button in the checkout form"
-                  })), 1)
-                ]),
-                _: 1
-              }, 8, ["disabled"])) : createCommentVNode("", true)
-            ]),
-            _: 1
-          })) : createCommentVNode("", true),
-          createVNode(unref(_sfc_main$C), {
-            tag: "div",
-            variant: "body-sm",
-            shade: "lighter",
-            class: "flex grow justify-center"
-          }, {
-            default: withCtx(() => [
-              createVNode(_sfc_main$$, {
-                icon: "lock",
-                kpi: unref($t)({
-                  defaultMessage: "Secure and encrypted payments",
-                  id: "checkout.kpi.encrypted_payments.label",
-                  description: "The encrypted payments KPI shown in the checkout"
-                })
-              }, null, 8, ["kpi"])
-            ]),
-            _: 1
-          })
+          createElementVNode("div", _hoisted_6, [
+            !unref(isPaid) ? (openBlock(), createBlock(_sfc_main$K, {
+              key: 0,
+              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: "sv-action sv-action--primary sv-action--full-width sv-checkout__submit w-full",
+                  disabled: unref(isPromotionCodePending) || unref(paymentMethodOptions).length === 0,
+                  onClick: handleSubmit
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(hasTrialPeriod.value ? unref($t)({
+                      defaultMessage: "Start trial",
+                      id: "checkout.pay_and_subscribe_button_trial.label",
+                      description: "The label of the start trial button in the checkout form"
+                    }) : unref($t)({
+                      defaultMessage: "Pay and subscribe",
+                      id: "checkout.pay_and_subscribe_button.label",
+                      description: "The label of the pay and subscribe button in the checkout form"
+                    })), 1)
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])) : createCommentVNode("", true)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            createVNode(_sfc_main$2, { "payment-method-options": unref(paymentMethodOptions) }, null, 8, ["payment-method-options"])
+          ])
         ]),
         _: 1
-      }));
+      }, 8, ["class"]));
     };
   }
 });
@@ -6746,7 +4840,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     locale: { type: String },
     dateLocale: { type: String },
     messages: { type: Object },
-    showTimezones: { type: Boolean },
     primaryColor: { type: String },
     secondaryColor: { type: String },
     isShadowRoot: { type: Boolean },
@@ -6755,7 +4848,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onLog: { type: Function },
     allowedPortalTypes: { type: Array },
     portalObject: { type: Object },
-    customElementName: { type: String },
+    cssOverrides: { type: [String, Array] },
     branding: { type: Object },
     configuration: { type: Object }
   },
@@ -6789,7 +4882,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const validEmail = getValidEmail((_b = props.configuration) == null ? void 0 : _b.email);
     return (_ctx, _cache) => {
       var _a2, _b2, _c, _d;
-      return openBlock(), createBlock(_sfc_main$11, {
+      return openBlock(), createBlock(_sfc_main$Q, {
         "custom-element-name": unref(COMPONENT_NAME),
         environment: __props.environment,
         locale: __props.locale,
@@ -6800,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(() => {
@@ -6825,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"]);
     };
   }
 });