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

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

@@ -1,19 +1,1575 @@
-import { unref, inject, ref, computed, onMounted, watch, defineComponent, useModel, openBlock, createElementBlock, withModifiers, createElementVNode, createVNode, withCtx, Fragment, createTextVNode, toDisplayString, createBlock, createCommentVNode, mergeModels, createSlots, renderSlot, normalizeClass, renderList, toRef, nextTick, withDirectives, withKeys, vShow } from "vue";
-import { a3 as I18N_INJECTION_KEY, a4 as convertDateRangeToTimePeriod, G as useValidation, H as objectDiff, b as useIntl, a5 as getCountryNameByCode, d as _sfc_main$1g, _ as _sfc_main$2$1, K as _sfc_main$2a, L as _sfc_main$1$, m as _sfc_main$2H, a6 as _sfc_main$2j, M as _sfc_main$20, a7 as _sfc_main$15, a8 as _sfc_main$2e, k as _sfc_main$14, a9 as TooltipContent, aa as _sfc_main$1s, ab as formatBillingPeriod, O as formatAmount, ac as _sfc_main$2K, ad as useTimePeriod, e as _sfc_main$3$1, ae as _sfc_main$1T, af as _sfc_main$a$1, ag as _sfc_main$9$1, n as _sfc_main$4$1, ah as isValidCountryCode, S as _sfc_main$2q, ai as _sfc_main$1Y, aj as usePricingItem, ak as _sfc_main$1X, al as _sfc_main$1L, D as _sfc_main$16, p as _sfc_main$t, q as defineCustomElement, o as getComponentName } from "../../component-B0RYS5uK.mjs";
-import { c as createSubscriptionsService } from "../../subscriptions-BepBTXR5.mjs";
+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 { l as lodashExports, a as _sfc_main$o, u as useLogger, g as getAdyenExpressCheckoutConfiguration, t as transformObjectToAdyenObject, c as createReturnUrl, _ as _sfc_main$s } from "../../PaymentIntegrationForm.vue_vue_type_script_setup_true_lang-DFCX2tcj.mjs";
-import { c as createInvoicesService } from "../../invoices-CoEBP5UT.mjs";
-import { a as requiredIf, r as required, e as email } from "../../index-CzL1ZcGi.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-C2gWIbEr.mjs";
-import { u as useService } from "../../useService-B4qv5N2D.mjs";
-import { u as usePortal, C as ContentWithAsideLayout } from "../../ContentWithAsideLayout-CKbnuXMU.mjs";
-import { _ as _sfc_main$p, a as _sfc_main$r } from "../../PricingGroupContent.vue_vue_type_script_setup_true_lang-DAwMy1l8.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$q } from "../../Skeleton.vue_vue_type_script_setup_true_lang-C-taYlG4.mjs";
-import { c as createPaymentsService } from "../../payments-DLjkq_hN.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) {
@@ -478,23 +2034,6 @@ const getTaxIdMessage = ({ $model }) => {
   });
 };
 const taxId = common.withMessage(getTaxIdMessage, taxIdValidator);
-const everythingButWhitespaceOrEmptyValidator = (value) => {
-  if (value === null || value === void 0) return false;
-  const str = String(value);
-  return /^\S+$/.test(str);
-};
-common.withMessage(
-  "Everything but whitespace",
-  everythingButWhitespaceOrEmptyValidator
-);
-const everythingButWhitespaceValidator = (value) => {
-  if (!common.req(value)) return true;
-  return everythingButWhitespaceOrEmptyValidator(String(value));
-};
-common.withMessage(
-  "Everything but whitespace",
-  everythingButWhitespaceValidator
-);
 function getFirstPricingPlanScheduleOfType({
   pricingPlanScheduleInfos,
   type
@@ -513,9 +2052,37 @@ function getPricingItemConfigMetaById({
     (_a = category.pricings) == null ? void 0 : _a.forEach((pricing) => {
       var _a2;
       (_a2 = pricing.items) == null ? void 0 : _a2.forEach((item) => {
-        var _a3;
-        (_a3 = item.pricing_currency_configs) == null ? void 0 : _a3.forEach((currencyConfig) => {
-          var _a4, _b;
+        var _a3, _b, _c;
+        (_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;
+            if (config.id) {
+              const currency = (_c2 = (_b2 = (_a5 = config.bands) == null ? void 0 : _a5.find((band) => {
+                var _a6;
+                return (_a6 = band.amount) == null ? void 0 : _a6.currency;
+              })) == null ? void 0 : _b2.amount) == null ? void 0 : _c2.currency;
+              metaById.set(config.id, {
+                ...currency && { currency },
+                billingPeriod: billingConfig.billing_period
+              });
+            }
+          });
+        });
+        (_b = item.configs) == null ? void 0 : _b.forEach((config) => {
+          var _a4, _b2, _c2;
+          if (config.id) {
+            const currency = (_c2 = (_b2 = (_a4 = config.bands) == null ? void 0 : _a4.find((band) => {
+              var _a5;
+              return (_a5 = band.amount) == null ? void 0 : _a5.currency;
+            })) == null ? void 0 : _b2.amount) == null ? void 0 : _c2.currency;
+            metaById.set(config.id, {
+              ...currency && { currency }
+            });
+          }
+        });
+        (_c = item.pricing_currency_configs) == null ? void 0 : _c.forEach((currencyConfig) => {
+          var _a4, _b2;
           const currency = currencyConfig.currency;
           (_a4 = currencyConfig.billing_period_configs) == null ? void 0 : _a4.forEach((billingConfig) => {
             var _a5;
@@ -528,7 +2095,7 @@ function getPricingItemConfigMetaById({
               }
             });
           });
-          (_b = currencyConfig.configs) == null ? void 0 : _b.forEach((config) => {
+          (_b2 = currencyConfig.configs) == null ? void 0 : _b2.forEach((config) => {
             if (config.id) {
               metaById.set(config.id, { currency });
             }
@@ -934,7 +2501,7 @@ const useInvoicePreview = () => {
         }
       };
       const cachedPayload = cachedPreviewPayloads.value[periodKey];
-      if (cachedPayload && lodashExports.isEqual(payload, cachedPayload)) {
+      if (cachedPayload && isEqual$1(payload, cachedPayload)) {
         return { periodKey, response: void 0 };
       }
       cachedPreviewPayloads.value = {
@@ -1128,7 +2695,7 @@ const usePaymentMethodOptions = () => {
       country,
       amount
     };
-    if (lodashExports.isEqual(payload, cachedPayload.value)) {
+    if (isEqual$1(payload, cachedPayload.value)) {
       return;
     }
     cachedPayload.value = payload;
@@ -1559,6 +3126,101 @@ 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({
+  __name: "TaxIDCheckNotice",
+  props: {
+    taxIdValidationResult: { type: Object }
+  },
+  setup(__props) {
+    const props = __props;
+    const { formatMessage } = useIntl();
+    const isTaxIdValid = computed(() => {
+      return props.taxIdValidationResult.valid === "VALID";
+    });
+    const taxIdValidationMessage = computed(() => {
+      return isTaxIdValid.value ? formatMessage({
+        defaultMessage: "VAT number is valid.",
+        id: "damFt1",
+        description: "The message shown when the VAT number is valid"
+      }) : formatMessage({
+        defaultMessage: "VAT number is invalid.",
+        id: "gR9xe+",
+        description: "The message shown when the VAT number is invalid"
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$K), {
+        type: isTaxIdValid.value ? "success" : "danger",
+        icon: false
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$l, [
+            createVNode(unref(_sfc_main$C), { variant: "body-xs" }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(taxIdValidationMessage.value), 1)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["type"]);
+    };
+  }
+});
+function useTaxIDValidationCheck(form) {
+  const { checkTaxID } = createCustomerService();
+  const taxIdValidationData = ref(void 0);
+  const taxId2 = computed(() => {
+    var _a;
+    return ((_a = form.value.companyVatNumber) == null ? void 0 : _a.trim()) ?? "";
+  });
+  const legalName = computed(() => form.value.companyLegalName ?? "");
+  const countryCode = computed(() => form.value.country);
+  const isTaxIDCheckPending = ref(false);
+  const isSelectedCountryEU = computed(() => {
+    return isEUCountry(countryCode.value ?? "");
+  });
+  const isTaxIDCheckEnabled = computed(() => !!(taxId2.value && legalName.value && countryCode.value));
+  const showViesCheckNotice = computed(() => {
+    return isSelectedCountryEU.value && taxId2.value;
+  });
+  async function runTaxIDCheck() {
+    var _a;
+    if (!isTaxIDCheckEnabled.value || !isSelectedCountryEU.value || !countryCode.value) {
+      return;
+    }
+    isTaxIDCheckPending.value = true;
+    try {
+      const result = await checkTaxID({
+        type: "ORGANIZATION",
+        organization: {
+          legal_name: legalName.value,
+          tax_ids: [{ id: taxId2.value, type: "GENERIC_TAX_ID" }],
+          registered_address: {
+            country: countryCode.value
+          }
+        }
+      });
+      if ((_a = result == null ? void 0 : result.data) == null ? void 0 : _a.length) {
+        taxIdValidationData.value = result.data[0];
+      } else {
+        taxIdValidationData.value = void 0;
+      }
+    } finally {
+      isTaxIDCheckPending.value = false;
+    }
+  }
+  return {
+    runTaxIDCheck,
+    taxIdValidationData,
+    isTaxIDCheckPending,
+    isTaxIDCheckEnabled,
+    showViesCheckNotice,
+    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 };
@@ -1594,7 +3256,14 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       }
     });
     const isCompanyPurchase = computed(() => model.value.type === "ORGANIZATION");
+    const country = computed({
+      get: () => model.value.country,
+      set: (value) => {
+        model.value.country = value && isValidCountryCode(value) ? value : void 0;
+      }
+    });
     const showVatIdInput = computed(() => model.value.country !== "US");
+    const { isTaxIDCheckEnabled, isTaxIDCheckPending, taxIdValidationData, runTaxIDCheck } = useTaxIDValidationCheck(model);
     const { $t } = useIntl();
     const getOptionalSuffix = (field) => {
       if (props.getIsFieldRequired(field)) {
@@ -1615,7 +3284,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         onSubmit: _cache[12] || (_cache[12] = withModifiers(($event) => _ctx.$emit("submit", model.value), ["prevent"]))
       }, [
         createElementVNode("div", _hoisted_1$k, [
-          createVNode(unref(_sfc_main$1g), {
+          createVNode(unref(_sfc_main$Q), {
             title: unref($t)({
               defaultMessage: "Customer information",
               id: "checkout.contact_information_block.title",
@@ -1625,7 +3294,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createElementVNode("div", _hoisted_2$b, [
                 __props.readOnly ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  createVNode(unref(_sfc_main$2$1), {
+                  createVNode(unref(_sfc_main$C), {
                     variant: "body",
                     tag: "span",
                     weight: "semibold",
@@ -1636,7 +3305,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 1
                   }),
-                  createVNode(unref(_sfc_main$2$1), {
+                  createVNode(unref(_sfc_main$C), {
                     variant: "body-sm",
                     tag: "span",
                     shade: "lighter",
@@ -1648,7 +3317,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  createVNode(unref(_sfc_main$2a), {
+                  createVNode(unref(_sfc_main$N), {
                     modelValue: model.value.email,
                     "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value.email = $event),
                     required: "",
@@ -1667,9 +3336,9 @@ 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$1$), {
-                    "single-model-value": model.value.country,
-                    "onUpdate:singleModelValue": _cache[3] || (_cache[3] = ($event) => model.value.country = $event),
+                  createVNode(unref(_sfc_main$R), {
+                    "single-model-value": country.value,
+                    "onUpdate:singleModelValue": _cache[3] || (_cache[3] = ($event) => country.value = $event),
                     required: "",
                     name: "country",
                     label: unref($t)({
@@ -1680,7 +3349,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$2H), {
+                      !showBillingDetails.value && !__props.isBillingInformationMandatory ? (openBlock(), createBlock(unref(_sfc_main$P), {
                         key: 0,
                         size: "xs",
                         variant: "ghost",
@@ -1697,7 +3366,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                         ]),
                         _: 1
                       })) : createCommentVNode("", true),
-                      showBillingDetails.value && !__props.isBillingInformationMandatory ? (openBlock(), createBlock(unref(_sfc_main$2H), {
+                      showBillingDetails.value && !__props.isBillingInformationMandatory ? (openBlock(), createBlock(unref(_sfc_main$P), {
                         key: 1,
                         size: "sm",
                         variant: "ghost",
@@ -1719,11 +3388,11 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   }, 8, ["single-model-value", "label", "error"])
                 ], 64))
               ]),
-              createVNode(unref(_sfc_main$2j), null, {
+              createVNode(unref(_sfc_main$G), null, {
                 default: withCtx(() => [
                   showBillingDetails.value || __props.isBillingInformationMandatory ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
                     createElementVNode("div", _hoisted_4$4, [
-                      createVNode(unref(_sfc_main$2a), {
+                      createVNode(unref(_sfc_main$N), {
                         modelValue: model.value.addressLine1,
                         "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => model.value.addressLine1 = $event),
                         name: "address_line_1",
@@ -1740,7 +3409,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                         required: "",
                         error: __props.validation.value.addressLine1.$errors
                       }, null, 8, ["modelValue", "label", "placeholder", "error"]),
-                      createVNode(unref(_sfc_main$2a), {
+                      createVNode(unref(_sfc_main$N), {
                         modelValue: model.value.addressLine2,
                         "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => model.value.addressLine2 = $event),
                         name: "address_line_2",
@@ -1751,7 +3420,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                         }) + getOptionalSuffix("addressLine2")
                       }, null, 8, ["modelValue", "placeholder"]),
                       createElementVNode("div", _hoisted_5$2, [
-                        createVNode(unref(_sfc_main$2a), {
+                        createVNode(unref(_sfc_main$N), {
                           modelValue: model.value.postalCode,
                           "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => model.value.postalCode = $event),
                           name: "postal_code",
@@ -1762,7 +3431,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                           }) + getOptionalSuffix("postalCode"),
                           error: __props.validation.value.addressLine1.$errors
                         }, null, 8, ["modelValue", "placeholder", "error"]),
-                        createVNode(unref(_sfc_main$2a), {
+                        createVNode(unref(_sfc_main$N), {
                           modelValue: model.value.city,
                           "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => model.value.city = $event),
                           name: "city",
@@ -1772,7 +3441,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$2a), {
+                        createVNode(unref(_sfc_main$N), {
                           modelValue: model.value.state,
                           "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => model.value.state = $event),
                           name: "state",
@@ -1792,9 +3461,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["title"]),
-          !__props.readOnly ? (openBlock(), createBlock(unref(_sfc_main$1g), { key: 0 }, {
+          !__props.readOnly ? (openBlock(), createBlock(unref(_sfc_main$Q), { key: 0 }, {
             default: withCtx(() => [
-              createVNode(unref(_sfc_main$20), {
+              createVNode(unref(_sfc_main$S), {
                 modelValue: companyPurchaseModel.value,
                 "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => companyPurchaseModel.value = $event),
                 "no-spacing": "",
@@ -1803,7 +3472,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
               }, {
                 "inline-label": withCtx(() => [
                   createElementVNode("div", _hoisted_6$1, [
-                    createVNode(unref(_sfc_main$2$1), { tag: "span" }, {
+                    createVNode(unref(_sfc_main$C), { tag: "span" }, {
                       default: withCtx(() => [
                         createTextVNode(toDisplayString(unref($t)({
                           defaultMessage: "Company purchase",
@@ -1813,7 +3482,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 1
                     }),
-                    createVNode(unref(_sfc_main$2$1), {
+                    createVNode(unref(_sfc_main$C), {
                       tag: "span",
                       variant: "body-xs",
                       shade: "lighter"
@@ -1831,30 +3500,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }, 8, ["modelValue"]),
-              createVNode(unref(_sfc_main$2j), null, {
+              createVNode(unref(_sfc_main$G), null, {
                 default: withCtx(() => [
                   isCompanyPurchase.value ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
                     createElementVNode("div", _hoisted_8$1, [
-                      showVatIdInput.value ? (openBlock(), createBlock(unref(_sfc_main$2a), {
-                        key: 0,
-                        modelValue: model.value.companyVatNumber,
-                        "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => model.value.companyVatNumber = $event),
-                        name: "vat_number",
-                        label: unref($t)({
-                          defaultMessage: "VAT number",
-                          id: "checkout.vat_number.label",
-                          description: "The label for the vat number in the checkout form"
-                        }),
-                        placeholder: unref($t)({
-                          defaultMessage: "VAT number...",
-                          id: "checkout.vat_number.placeholder",
-                          description: "The label for the vat number in the checkout form"
-                        }),
-                        error: __props.validation.value.companyVatNumber.$errors
-                      }, null, 8, ["modelValue", "label", "placeholder", "error"])) : createCommentVNode("", true),
-                      createVNode(unref(_sfc_main$2a), {
+                      createVNode(unref(_sfc_main$N), {
                         modelValue: model.value.companyLegalName,
-                        "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => model.value.companyLegalName = $event),
+                        "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => model.value.companyLegalName = $event),
                         required: "",
                         name: "legal_name",
                         label: unref($t)({
@@ -1867,7 +3519,55 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                           id: "checkout.legal_name.placeholder",
                           description: "The legal name of the organization customer in the checkout form"
                         })
-                      }, null, 8, ["modelValue", "label", "placeholder"])
+                      }, null, 8, ["modelValue", "label", "placeholder"]),
+                      showVatIdInput.value ? (openBlock(), createBlock(unref(_sfc_main$N), {
+                        key: 0,
+                        modelValue: model.value.companyVatNumber,
+                        "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => model.value.companyVatNumber = $event),
+                        name: "vat_number",
+                        "input-class": "focus:outline-none focus:ring-0",
+                        label: unref($t)({
+                          defaultMessage: "VAT number",
+                          id: "checkout.vat_number.label",
+                          description: "The label for the vat number in the checkout form"
+                        }),
+                        placeholder: unref($t)({
+                          defaultMessage: "VAT number...",
+                          id: "checkout.vat_number.placeholder",
+                          description: "The label for the vat number in the checkout form"
+                        }),
+                        error: __props.validation.value.companyVatNumber.$errors,
+                        "suffix-class": "px-2 border-l-0"
+                      }, createSlots({ _: 2 }, [
+                        unref(isEUCountry)(model.value.country ?? "") ? {
+                          name: "suffix",
+                          fn: withCtx(() => [
+                            createVNode(unref(_sfc_main$P), {
+                              type: "button",
+                              size: "sm",
+                              color: "green",
+                              disabled: !unref(isTaxIDCheckEnabled) || unref(isTaxIDCheckPending) || __props.validation.value.companyVatNumber.$invalid,
+                              onClick: unref(runTaxIDCheck)
+                            }, {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(unref($t)({
+                                  defaultMessage: "Check",
+                                  id: "checkout.vat_number.check_button.label",
+                                  description: "The label for the check button in the checkout form"
+                                })), 1)
+                              ]),
+                              _: 1
+                            }, 8, ["disabled", "onClick"])
+                          ]),
+                          key: "0"
+                        } : void 0
+                      ]), 1032, ["modelValue", "label", "placeholder", "error"])) : createCommentVNode("", true),
+                      unref(taxIdValidationData) ? (openBlock(), createElementBlock("div", {
+                        key: 1,
+                        class: normalizeClass({ "opacity-75": unref(isTaxIDCheckPending) })
+                      }, [
+                        createVNode(_sfc_main$o, { "tax-id-validation-result": unref(taxIdValidationData) }, null, 8, ["tax-id-validation-result"])
+                      ], 2)) : createCommentVNode("", true)
                     ])
                   ])) : createCommentVNode("", true)
                 ]),
@@ -1903,7 +3603,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("div", null, [
-          createVNode(unref(_sfc_main$2$1), {
+          createVNode(unref(_sfc_main$C), {
             variant: "heading-1",
             class: "inline-block"
           }, {
@@ -1913,7 +3613,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$15), {
+              __props.trialPeriod ? (openBlock(), createBlock(unref(_sfc_main$T), {
                 key: 0,
                 "trial-period": __props.trialPeriod,
                 size: "lg",
@@ -1923,18 +3623,18 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             _: 1
           })
         ]),
-        createVNode(unref(_sfc_main$2$1), {
+        createVNode(unref(_sfc_main$C), {
           variant: "body-sm",
           shade: "lighter",
           "no-spacing": ""
         }, {
           default: withCtx(() => [
             !__props.countryCode ? (openBlock(), createElementBlock("span", _hoisted_1$j, [
-              createVNode(unref(_sfc_main$2e), { "is-dark-mode": "" }, {
+              createVNode(unref(_sfc_main$D), { "is-dark-mode": "" }, {
                 tooltip: withCtx(() => [
                   createVNode(unref(TooltipContent), null, {
                     default: withCtx(() => [
-                      createVNode(unref(_sfc_main$1s), null, {
+                      createVNode(unref(_sfc_main$E), null, {
                         default: withCtx(() => [
                           createTextVNode(toDisplayString(unref($t)({
                             defaultMessage: "Will be determined by billing information",
@@ -1949,7 +3649,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                   })
                 ]),
                 default: withCtx(() => [
-                  createVNode(unref(_sfc_main$14), {
+                  createVNode(unref(_sfc_main$y), {
                     "width-class": "w-10",
                     "height-class": "h-4",
                     shade: "darker",
@@ -2057,7 +3757,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$i, [
         createElementVNode("div", _hoisted_2$9, [
-          createVNode(unref(_sfc_main$2$1), { variant: "heading-1" }, {
+          createVNode(unref(_sfc_main$C), { variant: "heading-1" }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref($t)({
                 defaultMessage: "Checkout not available",
@@ -2067,7 +3767,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          createVNode(unref(_sfc_main$2$1), {
+          createVNode(unref(_sfc_main$C), {
             variant: "body-sm",
             shade: "lighter"
           }, {
@@ -2114,7 +3814,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       window.location.replace(props.redirectUrl);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$o, {
+      return openBlock(), createBlock(_sfc_main$U, {
         status: "success",
         title: unref($t)({
           defaultMessage: "Payment successful",
@@ -2123,7 +3823,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         })
       }, {
         default: withCtx(() => [
-          createVNode(unref(_sfc_main$2$1), {
+          createVNode(unref(_sfc_main$C), {
             variant: "body-xs",
             shade: "lighter",
             tag: "span"
@@ -2137,9 +3837,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          __props.redirectUrl ? (openBlock(), createBlock(unref(_sfc_main$2H), {
+          __props.redirectUrl ? (openBlock(), createBlock(unref(_sfc_main$P), {
             key: 0,
-            to: __props.redirectUrl,
+            tag: "a",
+            href: __props.redirectUrl,
             color: "gray",
             variant: "outline",
             size: "xs",
@@ -2153,7 +3854,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               })), 1)
             ]),
             _: 1
-          }, 8, ["to"])) : createCommentVNode("", true)
+          }, 8, ["href"])) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["title"]);
@@ -2210,14 +3911,14 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        __props.avatar ? (openBlock(), createBlock(unref(_sfc_main$2K), {
+        __props.avatar ? (openBlock(), createBlock(unref(_sfc_main$V), {
           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$2$1), {
+          createVNode(unref(_sfc_main$C), {
             variant: "body",
             weight: "semibold",
             "no-spacing": ""
@@ -2227,7 +3928,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          selectedPricings.value ? (openBlock(), createBlock(unref(_sfc_main$2$1), {
+          selectedPricings.value ? (openBlock(), createBlock(unref(_sfc_main$C), {
             key: 0,
             variant: "body-xs",
             shade: "lighter",
@@ -2238,7 +3939,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           })) : createCommentVNode("", true),
-          description.value ? (openBlock(), createBlock(unref(_sfc_main$2$1), {
+          description.value ? (openBlock(), createBlock(unref(_sfc_main$C), {
             key: 1,
             variant: "body-xs",
             shade: "lighter",
@@ -2484,7 +4185,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           label,
           subLabel: getSelectedPeriodAmountLabel(period),
           labelSuffixComponent: saveText ? {
-            component: _sfc_main$3$1,
+            component: _sfc_main$B,
             props: {
               color: "primary",
               content: saveText,
@@ -2543,7 +4244,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       selectedBillingPeriodKey.value = checked ? biggestPeriod : smallestPeriod;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1g), {
+      return openBlock(), createBlock(unref(_sfc_main$Q), {
         "no-border": "",
         "no-spacing": "",
         "content-background": "none",
@@ -2555,7 +4256,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$g, [
-            createVNode(unref(_sfc_main$1g), { "no-spacing": "" }, {
+            createVNode(unref(_sfc_main$Q), { "no-spacing": "" }, {
               default: withCtx(() => [
                 __props.subscription ? (openBlock(), createBlock(_sfc_main$j, {
                   key: 0,
@@ -2569,7 +4270,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            billingPeriodOptions.value.length === 2 ? (openBlock(), createBlock(unref(_sfc_main$1g), {
+            billingPeriodOptions.value.length === 2 ? (openBlock(), createBlock(unref(_sfc_main$Q), {
               key: 0,
               "no-spacing": "",
               "content-classes": selectedBillingPeriodKey.value === periodBounds.value.biggestPeriod ? "border-primary-500" : void 0
@@ -2579,15 +4280,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 return [
                   createElementVNode("div", _hoisted_2$7, [
                     createElementVNode("div", _hoisted_3$3, [
-                      highOption.value ? (openBlock(), createBlock(_sfc_main$p, {
+                      highOption.value ? (openBlock(), createBlock(_sfc_main$W, {
                         key: 0,
                         name: highOption.value.label,
                         description: ((_a = selectedBillingPeriodOption.value) == null ? void 0 : _a.subLabel) ?? ""
                       }, createSlots({
                         default: withCtx(() => [
-                          createVNode(unref(_sfc_main$20), {
+                          createVNode(unref(_sfc_main$S), {
                             "model-value": selectedBillingPeriodKey.value === periodBounds.value.biggestPeriod,
-                            "show-suffix-label-in-input": "",
                             "onUpdate:modelValue": handleBinaryBillingToggle
                           }, null, 8, ["model-value"])
                         ]),
@@ -2596,7 +4296,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                         toggleSaveText.value ? {
                           name: "badge",
                           fn: withCtx(() => [
-                            createVNode(unref(_sfc_main$3$1), {
+                            createVNode(unref(_sfc_main$B), {
                               color: "primary",
                               content: toggleSaveText.value,
                               size: saveBadgeSize.value,
@@ -2611,7 +4311,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 ];
               }),
               _: 1
-            }, 8, ["content-classes"])) : billingPeriodOptions.value.length > 2 ? (openBlock(), createBlock(unref(_sfc_main$1T), {
+            }, 8, ["content-classes"])) : billingPeriodOptions.value.length > 2 ? (openBlock(), createBlock(unref(_sfc_main$q), {
               key: 1,
               "single-model-value": selectedBillingPeriodKey.value,
               "onUpdate:singleModelValue": _cache[0] || (_cache[0] = ($event) => selectedBillingPeriodKey.value = $event),
@@ -2621,13 +4321,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               "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$1g), {
+            __props.isUsageBased ? (openBlock(), createBlock(unref(_sfc_main$Q), {
               key: 2,
               "no-spacing": ""
             }, {
               default: withCtx(() => [
                 createElementVNode("div", _hoisted_4$3, [
-                  createVNode(unref(_sfc_main$2$1), {
+                  createVNode(unref(_sfc_main$C), {
                     "no-spacing": "",
                     variant: "body-sm",
                     shade: "lighter"
@@ -2645,14 +4345,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             })) : createCommentVNode("", true),
-            __props.invoice && __props.variant !== "products-inline" ? (openBlock(), createBlock(unref(_sfc_main$a$1), {
+            __props.invoice && __props.variant !== "products-inline" ? (openBlock(), createBlock(unref(_sfc_main$w), {
               key: 3,
               invoice: __props.invoice,
-              "wrapper-component": unref(_sfc_main$1g)
+              "wrapper-component": unref(_sfc_main$Q)
             }, null, 8, ["invoice", "wrapper-component"])) : createCommentVNode("", true),
-            createVNode(unref(_sfc_main$1g), null, {
+            createVNode(unref(_sfc_main$Q), null, {
               default: withCtx(() => [
-                __props.invoice ? (openBlock(), createBlock(unref(_sfc_main$9$1), {
+                __props.invoice ? (openBlock(), createBlock(unref(_sfc_main$v), {
                   key: 0,
                   variant: __props.variant === "products-inline" ? "default" : "without-products",
                   invoice: __props.invoice,
@@ -2661,7 +4361,7 @@ 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$2$1), {
+                }, null, 8, ["variant", "invoice", "trial-invoice", "is-paid", "collapsible", "is-preview-without-taxes"])) : (openBlock(), createBlock(unref(_sfc_main$C), {
                   key: 1,
                   variant: "body-sm",
                   shade: "lighter"
@@ -2693,15 +4393,15 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1g), null, {
+      return openBlock(), createBlock(unref(_sfc_main$Q), null, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$f, [
-            createVNode(unref(_sfc_main$4$1), {
+            createVNode(unref(_sfc_main$I), {
               icon: __props.icon,
               size: "lg",
               class: "text-gray-500"
             }, null, 8, ["icon"]),
-            createVNode(unref(_sfc_main$2$1), {
+            createVNode(unref(_sfc_main$C), {
               center: "",
               tag: "span",
               variant: "body-sm",
@@ -2714,7 +4414,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
             }),
-            createVNode(unref(_sfc_main$2$1), {
+            createVNode(unref(_sfc_main$C), {
               center: "",
               tag: "span",
               variant: "body-xs",
@@ -2782,7 +4482,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       emit("click");
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$2H), {
+      return openBlock(), createBlock(unref(_sfc_main$P), {
         size: "lg",
         "aria-label": ariaLabel.value,
         class: normalizeClass([buttonClasses.value, "!block w-full h-11 bg-center bg-no-repeat"]),
@@ -2799,8 +4499,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
               class: "logo",
               viewBox: "0 0 105 43",
               version: "1.1",
-              xmlns: "http://www.w3.org/2000/svg",
-              "xmlns:xlink": "http://www.w3.org/1999/xlink"
+              xmlns: "http://www.w3.org/2000/svg"
             }, [
               createElementVNode("title", null, "Apple Logo"),
               createElementVNode("g", {
@@ -3313,10 +5012,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return hasPaymentMethodOptions.value ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
         createElementVNode("div", _hoisted_2$5, [
-          !isReady.value ? (openBlock(), createBlock(_sfc_main$q, {
+          !isReady.value ? (openBlock(), createBlock(_sfc_main$X, {
             key: 0,
             variant: "title"
-          })) : (openBlock(), createBlock(unref(_sfc_main$2$1), {
+          })) : (openBlock(), createBlock(unref(_sfc_main$C), {
             key: 1,
             variant: "heading-3",
             tag: "h2"
@@ -3333,8 +5032,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         ]),
         createElementVNode("div", _hoisted_3$2, [
           !isReady.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            createVNode(_sfc_main$q, { class: "h-11 col-span-3" }),
-            createVNode(_sfc_main$q, { class: "h-11 col-span-3" })
+            createVNode(_sfc_main$X, { class: "h-11 col-span-3" }),
+            createVNode(_sfc_main$X, { class: "h-11 col-span-3" })
           ], 64)) : createCommentVNode("", true),
           createElementVNode("div", {
             class: normalizeClass(["col-span-3 md:col-span-2", {
@@ -3395,10 +5094,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           ], 2)
         ]),
         createElementVNode("div", _hoisted_4$2, [
-          !isReady.value ? (openBlock(), createBlock(_sfc_main$q, {
+          !isReady.value ? (openBlock(), createBlock(_sfc_main$X, {
             key: 0,
             variant: "divider-text"
-          })) : (openBlock(), createBlock(unref(_sfc_main$2q), {
+          })) : (openBlock(), createBlock(unref(_sfc_main$Y), {
             key: 1,
             text: unref($t)({
               defaultMessage: "Or",
@@ -3443,7 +5142,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$9, [
-        createVNode(unref(_sfc_main$2$1), {
+        createVNode(unref(_sfc_main$C), {
           variant: "body-xs",
           shade: "lighter",
           tag: "div"
@@ -3476,7 +5175,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }),
-        createVNode(unref(_sfc_main$2$1), {
+        createVNode(unref(_sfc_main$C), {
           variant: "body-xs",
           shade: "lighter",
           tag: "div",
@@ -3613,7 +5312,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", null, [
         createElementVNode("div", _hoisted_1$7, [
           createElementVNode("div", _hoisted_2$4, [
-            createVNode(unref(_sfc_main$1Y), {
+            createVNode(unref(_sfc_main$p), {
               modelValue: seatsNumber.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => seatsNumber.value = $event),
               size: "sm",
@@ -3625,7 +5324,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$2$1), {
+            createVNode(unref(_sfc_main$C), {
               tag: "span",
               variant: "body-sm",
               weight: "semibold"
@@ -3639,7 +5338,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            unref(seats).pricing.amount ? (openBlock(), createBlock(unref(_sfc_main$2$1), {
+            unref(seats).pricing.amount ? (openBlock(), createBlock(unref(_sfc_main$C), {
               key: 0,
               tag: "span",
               variant: "body-xs",
@@ -3662,7 +5361,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 )), 1)
               ]),
               _: 1
-            })) : unref(seats).pricing.tiered ? (openBlock(), createBlock(unref(_sfc_main$2$1), {
+            })) : unref(seats).pricing.tiered ? (openBlock(), createBlock(unref(_sfc_main$C), {
               key: 1,
               tag: "span",
               variant: "body-xs",
@@ -3674,7 +5373,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$4$1), {
+                createVNode(unref(_sfc_main$I), {
                   icon: "keyboard_arrow_down",
                   size: "xs",
                   class: normalizeClass(["absolute transition ease-in-out text-gray-400", { "rotate-0": !isExpanded.value, "rotate-180": isExpanded.value }])
@@ -3685,7 +5384,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           ], 10, _hoisted_3$1)
         ]),
         ((_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$2j), null, {
+          createVNode(unref(_sfc_main$G), null, {
             default: withCtx(() => [
               isExpanded.value ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
                 createVNode(_sfc_main$a, {
@@ -3724,7 +5423,7 @@ 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$1g), { key: index }, {
+        return openBlock(), createBlock(unref(_sfc_main$Q), { key: index }, {
           default: withCtx(() => {
             var _a;
             return [
@@ -3751,7 +5450,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$6, [
         createElementVNode("div", _hoisted_2$3, [
-          createVNode(unref(_sfc_main$2$1), {
+          createVNode(unref(_sfc_main$C), {
             tag: "span",
             variant: "body-sm",
             weight: "semibold"
@@ -3763,7 +5462,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           })
         ]),
         createElementVNode("div", null, [
-          createVNode(unref(_sfc_main$2$1), {
+          createVNode(unref(_sfc_main$C), {
             tag: "span",
             variant: "body-xs",
             shade: "lighter"
@@ -3839,7 +5538,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1g), { "no-spacing": "" }, {
+      return openBlock(), createBlock(unref(_sfc_main$Q), { "no-spacing": "" }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$5, [
             createVNode(_sfc_main$7, null, {
@@ -3853,7 +5552,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             }),
             createElementVNode("div", _hoisted_2$2, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(__props.pricings, (pricing) => {
-                return openBlock(), createBlock(unref(_sfc_main$1g), {
+                return openBlock(), createBlock(unref(_sfc_main$Q), {
                   key: pricing.id,
                   "content-background": "none",
                   class: normalizeClass({ "!bg-white": isSelected(pricing.id) })
@@ -3861,7 +5560,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   default: withCtx(() => {
                     var _a, _b;
                     return [
-                      createVNode(_sfc_main$p, {
+                      createVNode(_sfc_main$W, {
                         name: unref(getNameFromPricing)(pricing) ?? "",
                         description: ((_a = pricing.items) == null ? void 0 : _a[0]) ? unref(renderPricingForPricingItem)({
                           pricingItem: (_b = pricing.items) == null ? void 0 : _b[0]
@@ -3872,7 +5571,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                         })
                       }, {
                         default: withCtx(() => [
-                          createVNode(unref(_sfc_main$20), {
+                          createVNode(unref(_sfc_main$S), {
                             "model-value": isSelected(pricing.id),
                             "onUpdate:modelValue": ($event) => handleToggle(pricing.id)
                           }, null, 8, ["model-value", "onUpdate:modelValue"])
@@ -3925,7 +5624,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1g), {
+      return openBlock(), createBlock(unref(_sfc_main$Q), {
         "no-spacing": "",
         "no-border": !__props.groupName,
         "content-background": __props.groupName ? "gray" : "none"
@@ -3949,7 +5648,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true),
             createElementVNode("div", _hoisted_1$4, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(__props.pricings, (pricing) => {
-                return openBlock(), createBlock(unref(_sfc_main$1g), {
+                return openBlock(), createBlock(unref(_sfc_main$Q), {
                   key: pricing.id,
                   "content-background": __props.groupName || isSelected(pricing.id) ? "none" : "gray",
                   class: normalizeClass({ "!bg-white": isSelected(pricing.id) })
@@ -3957,7 +5656,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   default: withCtx(() => {
                     var _a, _b;
                     return [
-                      createVNode(_sfc_main$p, {
+                      createVNode(_sfc_main$W, {
                         name: unref(getNameFromPricing)(pricing) ?? "",
                         description: ((_a = pricing.items) == null ? void 0 : _a[0]) ? unref(renderPricingForPricingItem)({
                           pricingItem: (_b = pricing.items) == null ? void 0 : _b[0]
@@ -3968,7 +5667,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                         })
                       }, {
                         default: withCtx(() => [
-                          isSelected(pricing.id) ? (openBlock(), createBlock(unref(_sfc_main$2H), {
+                          isSelected(pricing.id) ? (openBlock(), createBlock(unref(_sfc_main$P), {
                             key: 0,
                             color: "gray",
                             variant: "outline",
@@ -3976,7 +5675,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$2H), {
+                          }, null, 8, ["onClick"])) : (openBlock(), createBlock(unref(_sfc_main$P), {
                             key: 1,
                             color: "primary",
                             "icon-prefix": "add",
@@ -4077,7 +5776,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }));
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1g), { "no-spacing": "" }, {
+      return openBlock(), createBlock(unref(_sfc_main$Q), { "no-spacing": "" }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$3, [
             createVNode(_sfc_main$7, null, {
@@ -4087,21 +5786,21 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               _: 1
             }),
             createElementVNode("div", _hoisted_2$1, [
-              options.value.length <= SHOW_RADIO_GROUP_MAX_OPTIONS ? (openBlock(), createBlock(unref(_sfc_main$1X), {
+              options.value.length <= SHOW_RADIO_GROUP_MAX_OPTIONS ? (openBlock(), createBlock(unref(_sfc_main$u), {
                 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$1T), {
+              }, null, 8, ["modelValue", "options", "direction"])) : options.value.length <= SHOW_SELECT_MAX_OPTIONS ? (openBlock(), createBlock(unref(_sfc_main$q), {
                 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$1L), {
+              }, null, 8, ["single-model-value", "options"])) : (openBlock(), createBlock(unref(_sfc_main$Z), {
                 key: 2,
                 modelValue: singleModelValue.value,
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => singleModelValue.value = $event),
@@ -4162,7 +5861,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       () => getPricingGroupsFromExtendedPricingPlanSubscription(props.subscription)
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1g), {
+      return openBlock(), createBlock(unref(_sfc_main$Q), {
         title: unref($t)({
           defaultMessage: "Customize plan",
           id: "checkout.customize_plan_block.title",
@@ -4358,7 +6057,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        !isApplied.value ? (openBlock(), createBlock(unref(_sfc_main$1g), {
+        !isApplied.value ? (openBlock(), createBlock(unref(_sfc_main$Q), {
           key: 0,
           "no-spacing": "",
           class: "w-full relative"
@@ -4376,8 +6075,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             }, [
               createElementVNode("div", _hoisted_2, [
                 createElementVNode("div", _hoisted_3, [
-                  createVNode(unref(_sfc_main$4$1), { icon: "local_activity" }),
-                  createVNode(unref(_sfc_main$2$1), {
+                  createVNode(unref(_sfc_main$I), { icon: "local_activity" }),
+                  createVNode(unref(_sfc_main$C), {
                     id: labelId,
                     variant: "body-sm"
                   }, {
@@ -4391,7 +6090,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ]),
-                createVNode(unref(_sfc_main$4$1), {
+                createVNode(unref(_sfc_main$I), {
                   icon: isExpanded.value ? "remove" : "add"
                 }, null, 8, ["icon"])
               ])
@@ -4405,7 +6104,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               class: "w-full border-t px-3 py-2 flex flex-row gap-2 items-center overflow-hidden",
               onKeydown: withKeys(withModifiers(collapseExpanded, ["prevent"]), ["esc"])
             }, [
-              createVNode(unref(_sfc_main$2a), {
+              createVNode(unref(_sfc_main$N), {
                 modelValue: inputValue.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
                 placeholder: unref($t)({
@@ -4421,7 +6120,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$2H), {
+              createVNode(unref(_sfc_main$P), {
                 type: "button",
                 disabled: !canApply.value,
                 "aria-label": applyAriaLabel.value,
@@ -4442,7 +6141,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 1
-        })) : (openBlock(), createBlock(unref(_sfc_main$1g), {
+        })) : (openBlock(), createBlock(unref(_sfc_main$Q), {
           key: 1,
           "no-border": "",
           "no-spacing": "",
@@ -4458,8 +6157,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             }, [
               createElementVNode("div", _hoisted_6, [
                 createElementVNode("div", _hoisted_7, [
-                  createVNode(unref(_sfc_main$4$1), { icon: "local_activity" }),
-                  createVNode(unref(_sfc_main$2$1), {
+                  createVNode(unref(_sfc_main$I), { icon: "local_activity" }),
+                  createVNode(unref(_sfc_main$C), {
                     variant: "body-sm",
                     class: "font-semibold"
                   }, {
@@ -4469,7 +6168,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ]),
-                createVNode(unref(_sfc_main$4$1), { icon: "close" })
+                createVNode(unref(_sfc_main$I), { icon: "close" })
               ])
             ], 8, _hoisted_5)
           ]),
@@ -4793,7 +6492,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return criticalError.value ? (openBlock(), createBlock(_sfc_main$l, { key: 0 })) : (openBlock(), createBlock(unref(ContentWithAsideLayout), { key: 1 }, {
         header: withCtx(() => [
-          createVNode(_sfc_main$q, { class: "min-h-[52px] w-96" }, {
+          createVNode(_sfc_main$X, { class: "min-h-[52px] w-96" }, {
             default: withCtx(() => {
               var _a2, _b2, _c2;
               return [
@@ -4868,14 +6567,14 @@ 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$q, {
+            !unref(isPaid) ? (openBlock(), createBlock(_sfc_main$X, {
               key: 5,
               variant: "section",
               class: "min-h-[130px]"
             }, {
               default: withCtx(() => [
                 !unref(isPaymentMethodsPending) || unref(isPaymentMethodsPending) && unref(paymentMethodOptions).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [
-                  createVNode(unref(_sfc_main$2$1), {
+                  createVNode(unref(_sfc_main$C), {
                     variant: "heading-3",
                     tag: "h2",
                     class: "mb-2"
@@ -4927,7 +6626,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                       })), 1)
                     ]),
                     _: 1
-                  })) : unref(amount) && unref(checkoutForm).form.value.country ? (openBlock(), createBlock(_sfc_main$s, {
+                  })) : unref(amount) && unref(checkoutForm).form.value.country ? (openBlock(), createBlock(_sfc_main$10, {
                     key: 2,
                     ref_key: "paymentIntegrationFormRef",
                     ref: paymentIntegrationFormRef,
@@ -4949,7 +6648,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ];
         }),
         aside: withCtx(() => [
-          createVNode(_sfc_main$q, {
+          createVNode(_sfc_main$X, {
             variant: "section",
             class: "min-h-[220px]"
           }, {
@@ -4982,17 +6681,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             onRemove: unref(removePromotionCode),
             onApply: unref(applyPromotionCode)
           }, null, 8, ["promotion-code", "onRemove", "onApply"])) : createCommentVNode("", true),
-          unref(promotionCodeErrorMessage) ? (openBlock(), createBlock(unref(_sfc_main$16), {
+          unref(promotionCodeErrorMessage) ? (openBlock(), createBlock(unref(_sfc_main$_), {
             key: 1,
             class: "mt-2",
             title: unref(promotionCodeErrorMessage)
           }, null, 8, ["title"])) : createCommentVNode("", true),
-          !unref(isPaid) ? (openBlock(), createBlock(_sfc_main$q, {
+          !unref(isPaid) ? (openBlock(), createBlock(_sfc_main$X, {
             key: 2,
             class: "min-h-[44px]"
           }, {
             default: withCtx(() => [
-              unref(invoicePreview) ? (openBlock(), createBlock(unref(_sfc_main$2H), {
+              unref(invoicePreview) ? (openBlock(), createBlock(unref(_sfc_main$P), {
                 key: 0,
                 type: "button",
                 size: "lg",
@@ -5016,14 +6715,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           })) : createCommentVNode("", true),
-          createVNode(unref(_sfc_main$2$1), {
+          createVNode(unref(_sfc_main$C), {
             tag: "div",
             variant: "body-sm",
             shade: "lighter",
             class: "flex grow justify-center"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$r, {
+              createVNode(_sfc_main$$, {
                 icon: "lock",
                 kpi: unref($t)({
                   defaultMessage: "Secure and encrypted payments",
@@ -5090,7 +6789,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$t, {
+      return openBlock(), createBlock(_sfc_main$11, {
         "custom-element-name": unref(COMPONENT_NAME),
         environment: __props.environment,
         locale: __props.locale,
@@ -5107,10 +6806,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           var _a3, _b3, _c2;
           return [
             createVNode(_sfc_main$1, {
-              avatar: (_b3 = (_a3 = __props.branding) == null ? void 0 : _a3.emblem) == null ? void 0 : _b3.public_url,
-              email: unref(validEmail),
-              "country-code": unref(validCountryCode),
-              "enabled-pricing-ids": (_c2 = __props.configuration) == null ? void 0 : _c2.enabledPricingIds,
+              configuration: {
+                avatar: (_b3 = (_a3 = __props.branding) == null ? void 0 : _a3.emblem) == null ? void 0 : _b3.public_url,
+                email: unref(validEmail),
+                countryCode: unref(validCountryCode),
+                enabledPricingIds: (_c2 = __props.configuration) == null ? void 0 : _c2.enabledPricingIds
+              },
               onReady: _cache[0] || (_cache[0] = ($event) => emit("ready"))
             }, createSlots({ _: 2 }, [
               _ctx.$slots["terms-and-conditions"] ? {
@@ -5120,7 +6821,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1032, ["avatar", "email", "country-code", "enabled-pricing-ids"])
+            ]), 1032, ["configuration"])
           ];
         }),
         _: 3