@schematichq/schematic-components 2.14.1 → 2.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/schematic-components.cjs.js +763 -629
  2. package/dist/schematic-components.d.ts +58 -2
  3. package/dist/schematic-components.esm.js +763 -629
  4. package/package.json +8 -8
package/dist/schematic-components.esm.js CHANGED
@@ -8607,6 +8607,7 @@ function ChangeSubscriptionRequestBodyToJSONTyped(value, ignoreDiscriminator = f
8607
8607
  ),
8608
8608
  new_plan_id: value["newPlanId"],
8609
8609
  new_price_id: value["newPriceId"],
8610
+ opt_in_accepted: value["optInAccepted"],
8610
8611
  pay_in_advance: value["payInAdvance"].map(
8611
8612
  UpdatePayInAdvanceRequestBodyToJSON
8612
8613
  ),
@@ -8914,6 +8915,8 @@ function FeatureEntitlementFromJSONTyped(json, ignoreDiscriminator) {
8914
8915
  allocation: json["allocation"] == null ? void 0 : json["allocation"],
8915
8916
  creditId: json["credit_id"] == null ? void 0 : json["credit_id"],
8916
8917
  creditRemaining: json["credit_remaining"] == null ? void 0 : json["credit_remaining"],
8918
+ creditReserved: json["credit_reserved"] == null ? void 0 : json["credit_reserved"],
8919
+ creditSettled: json["credit_settled"] == null ? void 0 : json["credit_settled"],
8917
8920
  creditTotal: json["credit_total"] == null ? void 0 : json["credit_total"],
8918
8921
  creditUsed: json["credit_used"] == null ? void 0 : json["credit_used"],
8919
8922
  eventName: json["event_name"] == null ? void 0 : json["event_name"],
@@ -10488,6 +10491,9 @@ function PreviewSubscriptionChangeResponseDataFromJSONTyped(json, ignoreDiscrimi
10488
10491
  finance: json["finance"] == null ? void 0 : PreviewSubscriptionFinanceResponseDataFromJSON(json["finance"]),
10489
10492
  isScheduledDowngrade: json["is_scheduled_downgrade"],
10490
10493
  newCharges: json["new_charges"],
10494
+ optInRequired: json["opt_in_required"],
10495
+ optInText: json["opt_in_text"] == null ? void 0 : json["opt_in_text"],
10496
+ optInTitle: json["opt_in_title"] == null ? void 0 : json["opt_in_title"],
10491
10497
  paymentMethodRequired: json["payment_method_required"],
10492
10498
  percentOff: json["percent_off"],
10493
10499
  periodStart: new Date(json["period_start"]),
@@ -12538,6 +12544,17 @@ function getPlanPrice(plan, period = "month", options = { useSelectedPeriod: tru
12538
12544
  return { ...billingPrice, price: getPriceValue(billingPrice) };
12539
12545
  }
12540
12546
  }
12547
+ function planOffersCurrencyForPeriod(plan, period = "month", currency) {
12548
+ if (!currency) return true;
12549
+ const price = getPlanPrice(
12550
+ plan,
12551
+ period,
12552
+ { useSelectedPeriod: true },
12553
+ currency
12554
+ );
12555
+ if (!price) return true;
12556
+ return price.currency.toUpperCase() === currency.toUpperCase();
12557
+ }
12541
12558
  function getAddOnPrice(addOn, period = "month", currency) {
12542
12559
  if (currency && addOn.currencyPrices?.length) {
12543
12560
  const currencyPrice = addOn.currencyPrices.find(
@@ -13868,6 +13885,12 @@ var reducer = (state, action) => {
13868
13885
  bypassAddOnSelection,
13869
13886
  bypassCreditsSelection,
13870
13887
  ...config.addOnIds && { addOnIds: config.addOnIds },
13888
+ ...config.currency && {
13889
+ selectedCurrency: config.currency.toUpperCase()
13890
+ },
13891
+ ...config.showCurrencySelector !== void 0 && {
13892
+ showCurrencySelector: config.showCurrencySelector
13893
+ },
13871
13894
  hideSkippedStages: config.hideSkipped ?? false,
13872
13895
  startTrialIfAvailable: isStringFormat || config.startTrialIfAvailable === void 0 ? true : config.startTrialIfAvailable
13873
13896
  }
@@ -13897,7 +13920,7 @@ var reducer = (state, action) => {
13897
13920
  // src/context/EmbedProvider.tsx
13898
13921
  import { jsx, jsxs } from "react/jsx-runtime";
13899
13922
  var getCustomHeaders = (sessionId) => ({
13900
- "X-Schematic-Components-Version": "2.14.1",
13923
+ "X-Schematic-Components-Version": "2.15.0",
13901
13924
  "X-Schematic-Session-ID": sessionId
13902
13925
  });
13903
13926
  var normalizeCurrencyFilter = (filter2) => {
@@ -17629,11 +17652,16 @@ var CheckoutDialog = ({ top }) => {
17629
17652
  const lockedCurrency = useSubscriptionCurrency();
17630
17653
  const hasCurrencyFilter = !!currencyFilter && currencyFilter.length > 0;
17631
17654
  const filterBlocksSubscriptionCurrency = hasCurrencyFilter && !!lockedCurrency && !currencyFilter.includes(lockedCurrency);
17655
+ const prefilledCurrency = checkoutState?.selectedCurrency?.toUpperCase();
17632
17656
  const [selectedCurrency, setSelectedCurrency] = useState8(
17633
- () => (checkoutState?.selectedCurrency && currencies.includes(checkoutState.selectedCurrency) ? checkoutState.selectedCurrency : void 0) ?? currencies[0] ?? DEFAULT_CURRENCY
17657
+ () => prefilledCurrency ?? currencies[0] ?? DEFAULT_CURRENCY
17634
17658
  );
17659
+ if (currencies.length > 0 && !currencies.includes(selectedCurrency)) {
17660
+ setSelectedCurrency(currencies[0]);
17661
+ }
17635
17662
  const effectiveCurrency = lockedCurrency ?? selectedCurrency;
17636
- const showCurrencySelector = currencies.length > 1 && !lockedCurrency;
17663
+ const currencySelectorEnabled = checkoutState?.showCurrencySelector ?? true;
17664
+ const canSelectCurrency = currencies.length > 1 && !lockedCurrency && currencySelectorEnabled;
17637
17665
  const hasCurrency = !!lockedCurrency || currencies.length > 1 || hasCurrencyFilter;
17638
17666
  const hasNoUsableCurrency = !lockedCurrency && currencies.length === 0;
17639
17667
  useEffect4(() => {
@@ -17968,6 +17996,34 @@ var CheckoutDialog = ({ top }) => {
17968
17996
  return id;
17969
17997
  }, [checkoutStage, checkoutStages, checkoutState, isBypassLoading]);
17970
17998
  const previewRequestIdRef = useRef6(0);
17999
+ const planStageVisible = checkoutStages.some((stage) => stage.id === "plan") && !checkoutState?.bypassPlanSelection;
18000
+ const checkoutStageCurrencies = useMemo12(() => {
18001
+ if (!selectedPlan) return currencies;
18002
+ return currencies.filter(
18003
+ (currency) => planOffersCurrencyForPeriod(selectedPlan, planPeriod, currency)
18004
+ );
18005
+ }, [currencies, selectedPlan, planPeriod]);
18006
+ const showPlanCurrencySelector = canSelectCurrency && planStageVisible;
18007
+ const showCheckoutCurrencySelector = canSelectCurrency && !planStageVisible && checkoutStageCurrencies.length > 1;
18008
+ const currencyPeriodMismatch = hasCurrency && !lockedCurrency && !planStageVisible && !!selectedPlan && !planOffersCurrencyForPeriod(selectedPlan, planPeriod, effectiveCurrency);
18009
+ useEffect4(() => {
18010
+ if (currencyPeriodMismatch) {
18011
+ console.error(
18012
+ `[Schematic] No ${effectiveCurrency} price for the "${planPeriod}" billing period on the selected plan; refusing to fall back to the default currency.`
18013
+ );
18014
+ debug("currency/period mismatch in checkout bypass config", {
18015
+ currency: effectiveCurrency,
18016
+ period: planPeriod,
18017
+ planId: selectedPlan?.id
18018
+ });
18019
+ }
18020
+ }, [
18021
+ currencyPeriodMismatch,
18022
+ effectiveCurrency,
18023
+ planPeriod,
18024
+ selectedPlan?.id,
18025
+ debug
18026
+ ]);
17971
18027
  const handlePreviewCheckout = useCallback7(
17972
18028
  async (updates) => {
17973
18029
  const period = updates.period || planPeriod;
@@ -18479,6 +18535,35 @@ var CheckoutDialog = ({ top }) => {
18479
18535
  }
18480
18536
  );
18481
18537
  }
18538
+ if (currencyPeriodMismatch) {
18539
+ return /* @__PURE__ */ jsx24(
18540
+ Dialog2,
18541
+ {
18542
+ ref: setDialog,
18543
+ isModal,
18544
+ size: "lg",
18545
+ top,
18546
+ onClose: handleClose,
18547
+ ...!isModal && { open: layout === "checkout" },
18548
+ children: /* @__PURE__ */ jsx24(DialogContent2, { children: /* @__PURE__ */ jsx24(
18549
+ Flex,
18550
+ {
18551
+ $flexGrow: 1,
18552
+ $alignItems: "center",
18553
+ $justifyContent: "center",
18554
+ $padding: "2rem",
18555
+ children: /* @__PURE__ */ jsx24(
18556
+ CurrencyPeriodMismatchNotice,
18557
+ {
18558
+ currency: effectiveCurrency,
18559
+ period: planPeriod
18560
+ }
18561
+ )
18562
+ }
18563
+ ) })
18564
+ }
18565
+ );
18566
+ }
18482
18567
  return /* @__PURE__ */ jsxs16(
18483
18568
  Dialog2,
18484
18569
  {
@@ -18569,7 +18654,7 @@ var CheckoutDialog = ({ top }) => {
18569
18654
  activeCheckoutStage.description && /* @__PURE__ */ jsx24(Text, { as: "p", children: activeCheckoutStage.description })
18570
18655
  ] }),
18571
18656
  effectiveCheckoutStage === "plan" && /* @__PURE__ */ jsxs16(Flex, { $alignItems: "center", $gap: "0.75rem", children: [
18572
- showCurrencySelector && /* @__PURE__ */ jsx24(
18657
+ showPlanCurrencySelector && /* @__PURE__ */ jsx24(
18573
18658
  CurrencyToggle,
18574
18659
  {
18575
18660
  currencies,
@@ -18587,7 +18672,15 @@ var CheckoutDialog = ({ top }) => {
18587
18672
  onSelect: changePlanPeriod
18588
18673
  }
18589
18674
  )
18590
- ] })
18675
+ ] }),
18676
+ effectiveCheckoutStage === "checkout" && showCheckoutCurrencySelector && /* @__PURE__ */ jsx24(Flex, { $alignItems: "center", $gap: "0.75rem", children: /* @__PURE__ */ jsx24(
18677
+ CurrencyToggle,
18678
+ {
18679
+ currencies: checkoutStageCurrencies,
18680
+ selectedCurrency: effectiveCurrency,
18681
+ onSelect: setSelectedCurrency
18682
+ }
18683
+ ) })
18591
18684
  ]
18592
18685
  }
18593
18686
  ),
@@ -18714,8 +18807,49 @@ var CheckoutDialog = ({ top }) => {
18714
18807
  );
18715
18808
  };
18716
18809
 
18717
- // src/components/shared/currency-toggle/CurrencyToggle.tsx
18810
+ // src/components/shared/currency-period-mismatch-notice/CurrencyPeriodMismatchNotice.tsx
18718
18811
  import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
18812
+ var CurrencyPeriodMismatchNotice = ({
18813
+ currency,
18814
+ period
18815
+ }) => {
18816
+ const { settings } = useEmbed();
18817
+ const { t: t3 } = useTranslation();
18818
+ return /* @__PURE__ */ jsxs17(
18819
+ Flex,
18820
+ {
18821
+ "data-testid": "sch-currency-period-mismatch-notice",
18822
+ $flexDirection: "column",
18823
+ $alignItems: "center",
18824
+ $gap: "0.75rem",
18825
+ $padding: "1.5rem 2rem",
18826
+ $maxWidth: "28rem",
18827
+ $borderWidth: "1px",
18828
+ $borderStyle: "solid",
18829
+ $borderColor: settings.theme.danger,
18830
+ $borderRadius: "0.5rem",
18831
+ children: [
18832
+ /* @__PURE__ */ jsx25(Icon3, { name: "info-rounded", color: settings.theme.danger, size: "lg" }),
18833
+ /* @__PURE__ */ jsx25(Text, { $weight: 600, $size: 16, $color: settings.theme.danger, children: t3("This plan is not available in the selected currency and period.") }),
18834
+ /* @__PURE__ */ jsx25(
18835
+ Text,
18836
+ {
18837
+ $size: 13,
18838
+ $color: settings.theme.danger,
18839
+ style: { opacity: 0.85, textAlign: "center" },
18840
+ children: t3("No {{currency}} price for the {{period}} billing period.", {
18841
+ currency: currency.toUpperCase(),
18842
+ period
18843
+ })
18844
+ }
18845
+ )
18846
+ ]
18847
+ }
18848
+ );
18849
+ };
18850
+
18851
+ // src/components/shared/currency-toggle/CurrencyToggle.tsx
18852
+ import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
18719
18853
  var CurrencyToggle = ({
18720
18854
  currencies,
18721
18855
  selectedCurrency,
@@ -18724,7 +18858,7 @@ var CurrencyToggle = ({
18724
18858
  }) => {
18725
18859
  const { settings } = useEmbed();
18726
18860
  const isLightBackground = useIsLightBackground();
18727
- return /* @__PURE__ */ jsx25(
18861
+ return /* @__PURE__ */ jsx26(
18728
18862
  Flex,
18729
18863
  {
18730
18864
  "data-testid": "sch-currency-toggle",
@@ -18737,14 +18871,14 @@ var CurrencyToggle = ({
18737
18871
  $borderRadius: "2.5rem",
18738
18872
  $cursor: disabled ? "default" : "pointer",
18739
18873
  $opacity: disabled ? 0.6 : 1,
18740
- children: /* @__PURE__ */ jsxs17(
18874
+ children: /* @__PURE__ */ jsxs18(
18741
18875
  Flex,
18742
18876
  {
18743
18877
  $alignItems: "center",
18744
18878
  $padding: "0.375rem 0.75rem",
18745
18879
  style: { position: "relative" },
18746
18880
  children: [
18747
- /* @__PURE__ */ jsxs17(
18881
+ /* @__PURE__ */ jsxs18(
18748
18882
  Text,
18749
18883
  {
18750
18884
  style: {
@@ -18761,7 +18895,7 @@ var CurrencyToggle = ({
18761
18895
  ]
18762
18896
  }
18763
18897
  ),
18764
- /* @__PURE__ */ jsx25(
18898
+ /* @__PURE__ */ jsx26(
18765
18899
  "select",
18766
18900
  {
18767
18901
  "data-testid": "sch-currency-select",
@@ -18777,7 +18911,7 @@ var CurrencyToggle = ({
18777
18911
  cursor: disabled ? "default" : "pointer",
18778
18912
  fontSize: "inherit"
18779
18913
  },
18780
- children: currencies.map((currency) => /* @__PURE__ */ jsxs17("option", { value: currency, children: [
18914
+ children: currencies.map((currency) => /* @__PURE__ */ jsxs18("option", { value: currency, children: [
18781
18915
  getCurrencyFlag(currency),
18782
18916
  " ",
18783
18917
  getCurrencySymbol(currency),
@@ -18786,7 +18920,7 @@ var CurrencyToggle = ({
18786
18920
  ] }, currency))
18787
18921
  }
18788
18922
  ),
18789
- /* @__PURE__ */ jsx25(
18923
+ /* @__PURE__ */ jsx26(
18790
18924
  "svg",
18791
18925
  {
18792
18926
  width: 12,
@@ -18794,7 +18928,7 @@ var CurrencyToggle = ({
18794
18928
  viewBox: "0 0 12 12",
18795
18929
  fill: "none",
18796
18930
  style: { marginLeft: "0.25rem", flexShrink: 0 },
18797
- children: /* @__PURE__ */ jsx25(
18931
+ children: /* @__PURE__ */ jsx26(
18798
18932
  "path",
18799
18933
  {
18800
18934
  d: "M3 4.5L6 7.5L9 4.5",
@@ -18814,7 +18948,7 @@ var CurrencyToggle = ({
18814
18948
  };
18815
18949
 
18816
18950
  // src/components/shared/hard-limit-tooltip/HardLimitTooltip.tsx
18817
- import { jsx as jsx26 } from "react/jsx-runtime";
18951
+ import { jsx as jsx27 } from "react/jsx-runtime";
18818
18952
  var HardLimitTooltip = ({
18819
18953
  portal,
18820
18954
  feature,
@@ -18827,11 +18961,11 @@ var HardLimitTooltip = ({
18827
18961
  if (!showHardLimit || !feature || typeof limit !== "number") {
18828
18962
  return null;
18829
18963
  }
18830
- return /* @__PURE__ */ jsx26(
18964
+ return /* @__PURE__ */ jsx27(
18831
18965
  Tooltip,
18832
18966
  {
18833
18967
  portal,
18834
- trigger: /* @__PURE__ */ jsx26(
18968
+ trigger: /* @__PURE__ */ jsx27(
18835
18969
  Icon3,
18836
18970
  {
18837
18971
  title: "limit",
@@ -18840,7 +18974,7 @@ var HardLimitTooltip = ({
18840
18974
  style: { lineHeight: 0 }
18841
18975
  }
18842
18976
  ),
18843
- content: /* @__PURE__ */ jsx26(Text, { children: t3("Up to a limit of", {
18977
+ content: /* @__PURE__ */ jsx27(Text, { children: t3("Up to a limit of", {
18844
18978
  amount: limit,
18845
18979
  units: getFeatureName(feature, limit)
18846
18980
  }) })
@@ -18849,13 +18983,13 @@ var HardLimitTooltip = ({
18849
18983
  };
18850
18984
 
18851
18985
  // src/components/shared/invalid-currency-notice/InvalidCurrencyNotice.tsx
18852
- import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
18986
+ import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
18853
18987
  var InvalidCurrencyNotice = ({
18854
18988
  invalidEntries = []
18855
18989
  }) => {
18856
18990
  const { settings } = useEmbed();
18857
18991
  const { t: t3 } = useTranslation();
18858
- return /* @__PURE__ */ jsxs18(
18992
+ return /* @__PURE__ */ jsxs19(
18859
18993
  Flex,
18860
18994
  {
18861
18995
  "data-testid": "sch-invalid-currency-notice",
@@ -18869,9 +19003,9 @@ var InvalidCurrencyNotice = ({
18869
19003
  $borderColor: settings.theme.danger,
18870
19004
  $borderRadius: "0.5rem",
18871
19005
  children: [
18872
- /* @__PURE__ */ jsx27(Icon3, { name: "info-rounded", color: settings.theme.danger, size: "lg" }),
18873
- /* @__PURE__ */ jsx27(Text, { $weight: 600, $size: 16, $color: settings.theme.danger, children: t3("No supported currencies are available.") }),
18874
- invalidEntries.length > 0 && /* @__PURE__ */ jsx27(
19006
+ /* @__PURE__ */ jsx28(Icon3, { name: "info-rounded", color: settings.theme.danger, size: "lg" }),
19007
+ /* @__PURE__ */ jsx28(Text, { $weight: 600, $size: 16, $color: settings.theme.danger, children: t3("No supported currencies are available.") }),
19008
+ invalidEntries.length > 0 && /* @__PURE__ */ jsx28(
18875
19009
  Text,
18876
19010
  {
18877
19011
  $size: 13,
@@ -18889,7 +19023,7 @@ var InvalidCurrencyNotice = ({
18889
19023
 
18890
19024
  // src/components/shared/payment-dialog/PaymentDialog.tsx
18891
19025
  import { useCallback as useCallback8, useLayoutEffect as useLayoutEffect5, useRef as useRef7, useState as useState9 } from "react";
18892
- import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
19026
+ import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
18893
19027
  var PaymentDialog = ({ top }) => {
18894
19028
  const { t: t3 } = useTranslation();
18895
19029
  const { layout, setLayout, clearCheckoutState } = useEmbed();
@@ -18915,7 +19049,7 @@ var PaymentDialog = ({ top }) => {
18915
19049
  element.show();
18916
19050
  }
18917
19051
  }, [layout]);
18918
- return /* @__PURE__ */ jsxs19(
19052
+ return /* @__PURE__ */ jsxs20(
18919
19053
  Dialog2,
18920
19054
  {
18921
19055
  ref: dialogRef,
@@ -18925,8 +19059,8 @@ var PaymentDialog = ({ top }) => {
18925
19059
  onClose: handleClose,
18926
19060
  ...!isModal && { open: layout === "payment" },
18927
19061
  children: [
18928
- /* @__PURE__ */ jsx28(DialogHeader, { bordered: true, onClose: handleClose, children: /* @__PURE__ */ jsx28(Text, { $size: 18, children: t3("Edit payment method") }) }),
18929
- /* @__PURE__ */ jsx28(DialogContent2, { children: /* @__PURE__ */ jsx28(Flex, { $position: "relative", $flexGrow: 1, $overflow: "auto", children: /* @__PURE__ */ jsx28(PaymentMethodDetails, {}) }) })
19062
+ /* @__PURE__ */ jsx29(DialogHeader, { bordered: true, onClose: handleClose, children: /* @__PURE__ */ jsx29(Text, { $size: 18, children: t3("Edit payment method") }) }),
19063
+ /* @__PURE__ */ jsx29(DialogContent2, { children: /* @__PURE__ */ jsx29(Flex, { $position: "relative", $flexGrow: 1, $overflow: "auto", children: /* @__PURE__ */ jsx29(PaymentMethodDetails, {}) }) })
18930
19064
  ]
18931
19065
  }
18932
19066
  );
@@ -18995,7 +19129,7 @@ var Input2 = gt2.input`
18995
19129
  `;
18996
19130
 
18997
19131
  // src/components/shared/payment-form/PaymentForm.tsx
18998
- import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
19132
+ import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
18999
19133
  var PaymentForm = ({ onConfirm, financeData }) => {
19000
19134
  const { t: t3 } = useTranslation();
19001
19135
  const stripe = useStripe();
@@ -19084,7 +19218,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
19084
19218
  }
19085
19219
  };
19086
19220
  }, [t3, isPaymentReady]);
19087
- return /* @__PURE__ */ jsxs20(
19221
+ return /* @__PURE__ */ jsxs21(
19088
19222
  Flex,
19089
19223
  {
19090
19224
  as: "form",
@@ -19092,8 +19226,8 @@ var PaymentForm = ({ onConfirm, financeData }) => {
19092
19226
  onSubmit: handleSubmit,
19093
19227
  $flexDirection: "column",
19094
19228
  children: [
19095
- /* @__PURE__ */ jsxs20(Box, { $marginBottom: "1.5rem", children: [
19096
- /* @__PURE__ */ jsx29(
19229
+ /* @__PURE__ */ jsxs21(Box, { $marginBottom: "1.5rem", children: [
19230
+ /* @__PURE__ */ jsx30(
19097
19231
  PaymentElement,
19098
19232
  {
19099
19233
  id: "payment-element",
@@ -19114,7 +19248,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
19114
19248
  }
19115
19249
  }
19116
19250
  ),
19117
- loadError && /* @__PURE__ */ jsx29(
19251
+ loadError && /* @__PURE__ */ jsx30(
19118
19252
  Flex,
19119
19253
  {
19120
19254
  as: TransitionBox,
@@ -19122,13 +19256,13 @@ var PaymentForm = ({ onConfirm, financeData }) => {
19122
19256
  $justifyContent: "center",
19123
19257
  $alignItems: "center",
19124
19258
  $gap: "1rem",
19125
- children: /* @__PURE__ */ jsx29(Text, { $weight: 500, $color: "#DB6669", children: loadError })
19259
+ children: /* @__PURE__ */ jsx30(Text, { $weight: 500, $color: "#DB6669", children: loadError })
19126
19260
  }
19127
19261
  )
19128
19262
  ] }),
19129
- stripe && collectEmail && /* @__PURE__ */ jsxs20(Box, { "data-field": "name", $marginBottom: "1.5rem", $verticalAlign: "top", children: [
19130
- /* @__PURE__ */ jsx29(Label, { htmlFor: "email", children: "Email" }),
19131
- /* @__PURE__ */ jsx29(
19263
+ stripe && collectEmail && /* @__PURE__ */ jsxs21(Box, { "data-field": "name", $marginBottom: "1.5rem", $verticalAlign: "top", children: [
19264
+ /* @__PURE__ */ jsx30(Label, { htmlFor: "email", children: "Email" }),
19265
+ /* @__PURE__ */ jsx30(
19132
19266
  Input2,
19133
19267
  {
19134
19268
  id: "email",
@@ -19143,7 +19277,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
19143
19277
  }
19144
19278
  )
19145
19279
  ] }),
19146
- showBillingAddress && /* @__PURE__ */ jsx29(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ jsx29(
19280
+ showBillingAddress && /* @__PURE__ */ jsx30(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ jsx30(
19147
19281
  AddressElement,
19148
19282
  {
19149
19283
  options: {
@@ -19162,7 +19296,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
19162
19296
  },
19163
19297
  addressDefaultsKey
19164
19298
  ) }),
19165
- /* @__PURE__ */ jsx29(
19299
+ /* @__PURE__ */ jsx30(
19166
19300
  Button,
19167
19301
  {
19168
19302
  id: "submit",
@@ -19174,7 +19308,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
19174
19308
  children: isLoading ? t3("Loading") : t3("Save payment method")
19175
19309
  }
19176
19310
  ),
19177
- message && /* @__PURE__ */ jsx29(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx29(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
19311
+ message && /* @__PURE__ */ jsx30(Box, { $margin: "1rem 0", children: /* @__PURE__ */ jsx30(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
19178
19312
  ]
19179
19313
  }
19180
19314
  );
@@ -19182,7 +19316,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
19182
19316
 
19183
19317
  // src/components/shared/period-toggle/PeriodToggle.tsx
19184
19318
  import { useMemo as useMemo14 } from "react";
19185
- import { jsx as jsx30 } from "react/jsx-runtime";
19319
+ import { jsx as jsx31 } from "react/jsx-runtime";
19186
19320
  var PERIOD_MONTH_COUNT = {
19187
19321
  year: 12,
19188
19322
  quarter: 3
@@ -19215,7 +19349,7 @@ var PeriodToggle = ({
19215
19349
  }
19216
19350
  return result;
19217
19351
  }, [selectedPlan]);
19218
- return /* @__PURE__ */ jsx30(
19352
+ return /* @__PURE__ */ jsx31(
19219
19353
  Flex,
19220
19354
  {
19221
19355
  "data-testid": "sch-period-toggle",
@@ -19228,7 +19362,7 @@ var PeriodToggle = ({
19228
19362
  $borderRadius: "2.5rem",
19229
19363
  $cursor: "pointer",
19230
19364
  children: options.map((option) => {
19231
- const element = /* @__PURE__ */ jsx30(
19365
+ const element = /* @__PURE__ */ jsx31(
19232
19366
  Button,
19233
19367
  {
19234
19368
  "data-testid": "sch-period-toggle-button",
@@ -19252,7 +19386,7 @@ var PeriodToggle = ({
19252
19386
  backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
19253
19387
  }
19254
19388
  },
19255
- children: /* @__PURE__ */ jsx30(
19389
+ children: /* @__PURE__ */ jsx31(
19256
19390
  Text,
19257
19391
  {
19258
19392
  style: {
@@ -19270,12 +19404,12 @@ var PeriodToggle = ({
19270
19404
  const savingsPercentage = savingsByPeriod[option];
19271
19405
  if (typeof savingsPercentage === "number") {
19272
19406
  const isOptionYear = option === "year";
19273
- return /* @__PURE__ */ jsx30(
19407
+ return /* @__PURE__ */ jsx31(
19274
19408
  Tooltip,
19275
19409
  {
19276
19410
  portal,
19277
19411
  trigger: element,
19278
- content: /* @__PURE__ */ jsx30(Text, { $size: 11, $leading: "none", children: selectedOption === option ? t3(
19412
+ content: /* @__PURE__ */ jsx31(Text, { $size: 11, $leading: "none", children: selectedOption === option ? t3(
19279
19413
  isOptionYear ? "Saving with yearly billing" : "Saving with quarterly billing",
19280
19414
  { percent: savingsPercentage }
19281
19415
  ) : t3(
@@ -19299,7 +19433,7 @@ import { useMemo as useMemo16 } from "react";
19299
19433
 
19300
19434
  // src/components/shared/pricing-tiers-tooltip/PriceText.tsx
19301
19435
  import { useMemo as useMemo15 } from "react";
19302
- import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
19436
+ import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
19303
19437
  var PriceText = ({
19304
19438
  feature,
19305
19439
  period,
@@ -19310,38 +19444,38 @@ var PriceText = ({
19310
19444
  const { settings } = useEmbed();
19311
19445
  const text = useMemo15(() => {
19312
19446
  if (!flatAmount && perUnitPrice) {
19313
- return /* @__PURE__ */ jsxs21(Fragment10, { children: [
19447
+ return /* @__PURE__ */ jsxs22(Fragment10, { children: [
19314
19448
  formatCurrency(perUnitPrice, currency),
19315
- /* @__PURE__ */ jsxs21("sub", { children: [
19449
+ /* @__PURE__ */ jsxs22("sub", { children: [
19316
19450
  "/",
19317
19451
  getFeatureName(feature, 1)
19318
19452
  ] })
19319
19453
  ] });
19320
19454
  }
19321
19455
  if (flatAmount && !perUnitPrice) {
19322
- return /* @__PURE__ */ jsxs21(Fragment10, { children: [
19456
+ return /* @__PURE__ */ jsxs22(Fragment10, { children: [
19323
19457
  formatCurrency(flatAmount, currency),
19324
- period && /* @__PURE__ */ jsxs21("sub", { children: [
19458
+ period && /* @__PURE__ */ jsxs22("sub", { children: [
19325
19459
  "/",
19326
19460
  shortenPeriod(period)
19327
19461
  ] })
19328
19462
  ] });
19329
19463
  }
19330
- return /* @__PURE__ */ jsxs21(Fragment10, { children: [
19464
+ return /* @__PURE__ */ jsxs22(Fragment10, { children: [
19331
19465
  formatCurrency(perUnitPrice, currency),
19332
- /* @__PURE__ */ jsxs21("sub", { children: [
19466
+ /* @__PURE__ */ jsxs22("sub", { children: [
19333
19467
  "/",
19334
19468
  getFeatureName(feature, 1)
19335
19469
  ] }),
19336
19470
  " + ",
19337
19471
  formatCurrency(flatAmount, currency),
19338
- period && /* @__PURE__ */ jsxs21("sub", { children: [
19472
+ period && /* @__PURE__ */ jsxs22("sub", { children: [
19339
19473
  "/",
19340
19474
  shortenPeriod(period)
19341
19475
  ] })
19342
19476
  ] });
19343
19477
  }, [feature, period, currency, flatAmount, perUnitPrice]);
19344
- return /* @__PURE__ */ jsx31(
19478
+ return /* @__PURE__ */ jsx32(
19345
19479
  Text,
19346
19480
  {
19347
19481
  $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -19352,7 +19486,7 @@ var PriceText = ({
19352
19486
  };
19353
19487
 
19354
19488
  // src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx
19355
- import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
19489
+ import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
19356
19490
  var PricingTiersTooltip = ({
19357
19491
  portal,
19358
19492
  feature,
@@ -19385,11 +19519,11 @@ var PricingTiersTooltip = ({
19385
19519
  if (!priceTiers.length) {
19386
19520
  return null;
19387
19521
  }
19388
- return /* @__PURE__ */ jsx32(
19522
+ return /* @__PURE__ */ jsx33(
19389
19523
  Tooltip,
19390
19524
  {
19391
19525
  portal,
19392
- trigger: /* @__PURE__ */ jsx32(
19526
+ trigger: /* @__PURE__ */ jsx33(
19393
19527
  Icon3,
19394
19528
  {
19395
19529
  title: "tiered pricing",
@@ -19398,11 +19532,11 @@ var PricingTiersTooltip = ({
19398
19532
  style: { lineHeight: 0 }
19399
19533
  }
19400
19534
  ),
19401
- content: /* @__PURE__ */ jsxs22(Flex, { $flexDirection: "column", $gap: "1rem", children: [
19402
- /* @__PURE__ */ jsx32("dl", { children: tiers.map((tier, index) => {
19535
+ content: /* @__PURE__ */ jsxs23(Flex, { $flexDirection: "column", $gap: "1rem", children: [
19536
+ /* @__PURE__ */ jsx33("dl", { children: tiers.map((tier, index) => {
19403
19537
  const flatAmount = typeof tier.flatAmount === "number" ? tier.flatAmount : void 0;
19404
19538
  const perUnitPrice = typeof tier.perUnitPriceDecimal === "string" ? Number(tier.perUnitPriceDecimal) : typeof tier.perUnitPrice === "number" ? tier.perUnitPrice : void 0;
19405
- return /* @__PURE__ */ jsxs22(
19539
+ return /* @__PURE__ */ jsxs23(
19406
19540
  Flex,
19407
19541
  {
19408
19542
  $justifyContent: "space-between",
@@ -19410,17 +19544,17 @@ var PricingTiersTooltip = ({
19410
19544
  $gap: "1rem",
19411
19545
  $padding: "0.5rem",
19412
19546
  children: [
19413
- /* @__PURE__ */ jsx32("dt", { children: /* @__PURE__ */ jsxs22(
19547
+ /* @__PURE__ */ jsx33("dt", { children: /* @__PURE__ */ jsxs23(
19414
19548
  Text,
19415
19549
  {
19416
19550
  $size: 0.875 * settings.theme.typography.text.fontSize,
19417
19551
  children: [
19418
19552
  tier.from,
19419
- tier.from !== tier.to && /* @__PURE__ */ jsx32(Fragment11, { children: tier.to === Infinity ? "+" : `\u2013${tier.to}` })
19553
+ tier.from !== tier.to && /* @__PURE__ */ jsx33(Fragment11, { children: tier.to === Infinity ? "+" : `\u2013${tier.to}` })
19420
19554
  ]
19421
19555
  }
19422
19556
  ) }),
19423
- /* @__PURE__ */ jsx32("dd", { children: /* @__PURE__ */ jsx32(
19557
+ /* @__PURE__ */ jsx33("dd", { children: /* @__PURE__ */ jsx33(
19424
19558
  PriceText,
19425
19559
  {
19426
19560
  period,
@@ -19435,8 +19569,8 @@ var PricingTiersTooltip = ({
19435
19569
  index
19436
19570
  );
19437
19571
  }) }),
19438
- tiersMode && /* @__PURE__ */ jsxs22(Fragment11, { children: [
19439
- /* @__PURE__ */ jsx32(
19572
+ tiersMode && /* @__PURE__ */ jsxs23(Fragment11, { children: [
19573
+ /* @__PURE__ */ jsx33(
19440
19574
  "hr",
19441
19575
  {
19442
19576
  style: {
@@ -19446,7 +19580,7 @@ var PricingTiersTooltip = ({
19446
19580
  }
19447
19581
  }
19448
19582
  ),
19449
- /* @__PURE__ */ jsx32(Box, { children: /* @__PURE__ */ jsxs22(Text, { $size: 0.875 * settings.theme.typography.text.fontSize, children: [
19583
+ /* @__PURE__ */ jsx33(Box, { children: /* @__PURE__ */ jsxs23(Text, { $size: 0.875 * settings.theme.typography.text.fontSize, children: [
19450
19584
  "\u2139\uFE0F",
19451
19585
  " ",
19452
19586
  tiersMode === BillingTiersMode.Volume ? t3("Price by unit based on final tier reached.") : t3("Tiers apply progressively as quantity increases.")
@@ -19470,7 +19604,7 @@ import {
19470
19604
  import { createPortal as createPortal2 } from "react-dom";
19471
19605
 
19472
19606
  // src/components/shared/subscription-sidebar/CheckoutStageButton.tsx
19473
- import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
19607
+ import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
19474
19608
  var NoPaymentRequired = ({
19475
19609
  isDisabled,
19476
19610
  isLoading,
@@ -19480,7 +19614,7 @@ var NoPaymentRequired = ({
19480
19614
  onClick
19481
19615
  }) => {
19482
19616
  const { t: t3 } = useTranslation();
19483
- return /* @__PURE__ */ jsx33(
19617
+ return /* @__PURE__ */ jsx34(
19484
19618
  Button,
19485
19619
  {
19486
19620
  type: "button",
@@ -19542,7 +19676,7 @@ var CheckoutStageButton = ({
19542
19676
  if (checkoutStage === "plan") {
19543
19677
  const nextStage = getNextStageId("plan");
19544
19678
  if (isSelectedPlanTrialable && trialPaymentMethodRequired && shouldTrial) {
19545
- return /* @__PURE__ */ jsx33(
19679
+ return /* @__PURE__ */ jsx34(
19546
19680
  Button,
19547
19681
  {
19548
19682
  type: "button",
@@ -19552,7 +19686,7 @@ var CheckoutStageButton = ({
19552
19686
  },
19553
19687
  $fullWidth: true,
19554
19688
  $isLoading: isLoading,
19555
- children: /* @__PURE__ */ jsxs23(
19689
+ children: /* @__PURE__ */ jsxs24(
19556
19690
  Flex,
19557
19691
  {
19558
19692
  $gap: "0.5rem",
@@ -19563,7 +19697,7 @@ var CheckoutStageButton = ({
19563
19697
  t3("Next"),
19564
19698
  ": ",
19565
19699
  t3("Checkout"),
19566
- /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
19700
+ /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
19567
19701
  ]
19568
19702
  }
19569
19703
  )
@@ -19571,7 +19705,7 @@ var CheckoutStageButton = ({
19571
19705
  );
19572
19706
  }
19573
19707
  if (!isPaymentMethodRequired && !nextStage) {
19574
- return /* @__PURE__ */ jsx33(
19708
+ return /* @__PURE__ */ jsx34(
19575
19709
  NoPaymentRequired,
19576
19710
  {
19577
19711
  isDisabled,
@@ -19582,7 +19716,7 @@ var CheckoutStageButton = ({
19582
19716
  }
19583
19717
  );
19584
19718
  }
19585
- return /* @__PURE__ */ jsx33(
19719
+ return /* @__PURE__ */ jsx34(
19586
19720
  Button,
19587
19721
  {
19588
19722
  type: "button",
@@ -19593,11 +19727,11 @@ var CheckoutStageButton = ({
19593
19727
  $size: isSticky ? "sm" : "md",
19594
19728
  $fullWidth: true,
19595
19729
  $isLoading: isLoading,
19596
- children: /* @__PURE__ */ jsxs23(Flex, { $gap: "0.5rem", $justifyContent: "center", $alignItems: "center", children: [
19730
+ children: /* @__PURE__ */ jsxs24(Flex, { $gap: "0.5rem", $justifyContent: "center", $alignItems: "center", children: [
19597
19731
  t3("Next"),
19598
19732
  ": ",
19599
19733
  getStageDisplayName(nextStage),
19600
- /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
19734
+ /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
19601
19735
  ] })
19602
19736
  }
19603
19737
  );
@@ -19605,7 +19739,7 @@ var CheckoutStageButton = ({
19605
19739
  if (checkoutStage === "autoTopup") {
19606
19740
  const nextStage = getNextStageId("autoTopup");
19607
19741
  if (!isPaymentMethodRequired && !nextStage) {
19608
- return /* @__PURE__ */ jsx33(
19742
+ return /* @__PURE__ */ jsx34(
19609
19743
  NoPaymentRequired,
19610
19744
  {
19611
19745
  isDisabled,
@@ -19616,7 +19750,7 @@ var CheckoutStageButton = ({
19616
19750
  }
19617
19751
  );
19618
19752
  }
19619
- return /* @__PURE__ */ jsx33(
19753
+ return /* @__PURE__ */ jsx34(
19620
19754
  Button,
19621
19755
  {
19622
19756
  type: "button",
@@ -19627,7 +19761,7 @@ var CheckoutStageButton = ({
19627
19761
  $size: isSticky ? "sm" : "md",
19628
19762
  $fullWidth: true,
19629
19763
  $isLoading: isLoading,
19630
- children: /* @__PURE__ */ jsxs23(
19764
+ children: /* @__PURE__ */ jsxs24(
19631
19765
  Flex,
19632
19766
  {
19633
19767
  $gap: "0.5rem",
@@ -19638,7 +19772,7 @@ var CheckoutStageButton = ({
19638
19772
  t3("Next"),
19639
19773
  ": ",
19640
19774
  getStageDisplayName(nextStage),
19641
- /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
19775
+ /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
19642
19776
  ]
19643
19777
  }
19644
19778
  )
@@ -19648,7 +19782,7 @@ var CheckoutStageButton = ({
19648
19782
  if (checkoutStage === "usage") {
19649
19783
  const nextStage = getNextStageId("usage");
19650
19784
  if (!isPaymentMethodRequired && !nextStage) {
19651
- return /* @__PURE__ */ jsx33(
19785
+ return /* @__PURE__ */ jsx34(
19652
19786
  NoPaymentRequired,
19653
19787
  {
19654
19788
  isDisabled,
@@ -19659,7 +19793,7 @@ var CheckoutStageButton = ({
19659
19793
  }
19660
19794
  );
19661
19795
  }
19662
- return /* @__PURE__ */ jsx33(
19796
+ return /* @__PURE__ */ jsx34(
19663
19797
  Button,
19664
19798
  {
19665
19799
  type: "button",
@@ -19670,7 +19804,7 @@ var CheckoutStageButton = ({
19670
19804
  $size: isSticky ? "sm" : "md",
19671
19805
  $fullWidth: true,
19672
19806
  $isLoading: isLoading,
19673
- children: /* @__PURE__ */ jsxs23(
19807
+ children: /* @__PURE__ */ jsxs24(
19674
19808
  Flex,
19675
19809
  {
19676
19810
  $gap: "0.5rem",
@@ -19681,7 +19815,7 @@ var CheckoutStageButton = ({
19681
19815
  t3("Next"),
19682
19816
  ": ",
19683
19817
  getStageDisplayName(nextStage),
19684
- /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
19818
+ /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
19685
19819
  ]
19686
19820
  }
19687
19821
  )
@@ -19691,7 +19825,7 @@ var CheckoutStageButton = ({
19691
19825
  if (checkoutStage === "addons") {
19692
19826
  const nextStage = getNextStageId("addons");
19693
19827
  if (!isPaymentMethodRequired && !nextStage) {
19694
- return /* @__PURE__ */ jsx33(
19828
+ return /* @__PURE__ */ jsx34(
19695
19829
  NoPaymentRequired,
19696
19830
  {
19697
19831
  isDisabled,
@@ -19702,7 +19836,7 @@ var CheckoutStageButton = ({
19702
19836
  }
19703
19837
  );
19704
19838
  }
19705
- return /* @__PURE__ */ jsx33(
19839
+ return /* @__PURE__ */ jsx34(
19706
19840
  Button,
19707
19841
  {
19708
19842
  type: "button",
@@ -19712,7 +19846,7 @@ var CheckoutStageButton = ({
19712
19846
  },
19713
19847
  $fullWidth: true,
19714
19848
  $isLoading: isLoading,
19715
- children: /* @__PURE__ */ jsxs23(
19849
+ children: /* @__PURE__ */ jsxs24(
19716
19850
  Flex,
19717
19851
  {
19718
19852
  $gap: "0.5rem",
@@ -19723,7 +19857,7 @@ var CheckoutStageButton = ({
19723
19857
  t3("Next"),
19724
19858
  ": ",
19725
19859
  getStageDisplayName(nextStage),
19726
- /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
19860
+ /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
19727
19861
  ]
19728
19862
  }
19729
19863
  )
@@ -19733,7 +19867,7 @@ var CheckoutStageButton = ({
19733
19867
  if (checkoutStage === "addonsUsage") {
19734
19868
  const nextStage = getNextStageId("addonsUsage");
19735
19869
  if (!isPaymentMethodRequired && !nextStage) {
19736
- return /* @__PURE__ */ jsx33(
19870
+ return /* @__PURE__ */ jsx34(
19737
19871
  NoPaymentRequired,
19738
19872
  {
19739
19873
  isDisabled,
@@ -19744,7 +19878,7 @@ var CheckoutStageButton = ({
19744
19878
  }
19745
19879
  );
19746
19880
  }
19747
- return /* @__PURE__ */ jsx33(
19881
+ return /* @__PURE__ */ jsx34(
19748
19882
  Button,
19749
19883
  {
19750
19884
  type: "button",
@@ -19755,7 +19889,7 @@ var CheckoutStageButton = ({
19755
19889
  $size: isSticky ? "sm" : "md",
19756
19890
  $fullWidth: true,
19757
19891
  $isLoading: isLoading,
19758
- children: /* @__PURE__ */ jsxs23(
19892
+ children: /* @__PURE__ */ jsxs24(
19759
19893
  Flex,
19760
19894
  {
19761
19895
  $gap: "0.5rem",
@@ -19766,7 +19900,7 @@ var CheckoutStageButton = ({
19766
19900
  t3("Next"),
19767
19901
  ": ",
19768
19902
  getStageDisplayName(nextStage),
19769
- /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
19903
+ /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
19770
19904
  ]
19771
19905
  }
19772
19906
  )
@@ -19776,7 +19910,7 @@ var CheckoutStageButton = ({
19776
19910
  if (checkoutStage === "credits") {
19777
19911
  const nextStage = getNextStageId("credits");
19778
19912
  if (!nextStage) {
19779
- return /* @__PURE__ */ jsx33(
19913
+ return /* @__PURE__ */ jsx34(
19780
19914
  NoPaymentRequired,
19781
19915
  {
19782
19916
  isDisabled,
@@ -19787,7 +19921,7 @@ var CheckoutStageButton = ({
19787
19921
  }
19788
19922
  );
19789
19923
  }
19790
- return /* @__PURE__ */ jsx33(
19924
+ return /* @__PURE__ */ jsx34(
19791
19925
  Button,
19792
19926
  {
19793
19927
  type: "button",
@@ -19797,7 +19931,7 @@ var CheckoutStageButton = ({
19797
19931
  },
19798
19932
  $fullWidth: true,
19799
19933
  $isLoading: isLoading,
19800
- children: /* @__PURE__ */ jsxs23(
19934
+ children: /* @__PURE__ */ jsxs24(
19801
19935
  Flex,
19802
19936
  {
19803
19937
  $gap: "0.5rem",
@@ -19808,7 +19942,7 @@ var CheckoutStageButton = ({
19808
19942
  t3("Next"),
19809
19943
  ": ",
19810
19944
  getStageDisplayName(nextStage),
19811
- /* @__PURE__ */ jsx33(Icon3, { name: "arrow-right" })
19945
+ /* @__PURE__ */ jsx34(Icon3, { name: "arrow-right" })
19812
19946
  ]
19813
19947
  }
19814
19948
  )
@@ -19817,7 +19951,7 @@ var CheckoutStageButton = ({
19817
19951
  }
19818
19952
  if (checkoutStage === "checkout") {
19819
19953
  if (!isPaymentMethodRequired) {
19820
- return /* @__PURE__ */ jsx33(
19954
+ return /* @__PURE__ */ jsx34(
19821
19955
  NoPaymentRequired,
19822
19956
  {
19823
19957
  isDisabled,
@@ -19828,7 +19962,7 @@ var CheckoutStageButton = ({
19828
19962
  }
19829
19963
  );
19830
19964
  }
19831
- return /* @__PURE__ */ jsx33(
19965
+ return /* @__PURE__ */ jsx34(
19832
19966
  Button,
19833
19967
  {
19834
19968
  type: "button",
@@ -19843,7 +19977,7 @@ var CheckoutStageButton = ({
19843
19977
  };
19844
19978
 
19845
19979
  // src/components/shared/subscription-sidebar/EntitlementRow.tsx
19846
- import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
19980
+ import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
19847
19981
  var EntitlementRow = (props) => {
19848
19982
  const { t: t3 } = useTranslation();
19849
19983
  const { settings } = useEmbed();
@@ -19863,41 +19997,41 @@ var EntitlementRow = (props) => {
19863
19997
  tiersMode
19864
19998
  } = entitlementPrice || {};
19865
19999
  const tiered = priceBehavior === EntitlementPriceBehavior.PayInAdvance && isTieredPrice(entitlementPrice);
19866
- return /* @__PURE__ */ jsxs24(Fragment12, { children: [
19867
- /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsx34(Text, { display: "heading4", children: priceBehavior === EntitlementPriceBehavior.PayInAdvance ? /* @__PURE__ */ jsxs24(Fragment12, { children: [
20000
+ return /* @__PURE__ */ jsxs25(Fragment12, { children: [
20001
+ /* @__PURE__ */ jsx35(Box, { children: /* @__PURE__ */ jsx35(Text, { display: "heading4", children: priceBehavior === EntitlementPriceBehavior.PayInAdvance ? /* @__PURE__ */ jsxs25(Fragment12, { children: [
19868
20002
  quantity,
19869
20003
  " ",
19870
20004
  getFeatureName(feature, quantity)
19871
- ] }) : priceBehavior === EntitlementPriceBehavior.Overage && typeof softLimit === "number" ? /* @__PURE__ */ jsxs24(Fragment12, { children: [
20005
+ ] }) : priceBehavior === EntitlementPriceBehavior.Overage && typeof softLimit === "number" ? /* @__PURE__ */ jsxs25(Fragment12, { children: [
19872
20006
  softLimit,
19873
20007
  " ",
19874
20008
  getFeatureName(feature, softLimit)
19875
20009
  ] }) : feature.name }) }),
19876
- /* @__PURE__ */ jsx34(Box, { $whiteSpace: "nowrap", $lineHeight: 1, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered ? /* @__PURE__ */ jsxs24(Text, { children: [
20010
+ /* @__PURE__ */ jsx35(Box, { $whiteSpace: "nowrap", $lineHeight: 1, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered ? /* @__PURE__ */ jsxs25(Text, { children: [
19877
20011
  formatCurrency((price ?? 0) * quantity, currency),
19878
- /* @__PURE__ */ jsxs24("sub", { children: [
20012
+ /* @__PURE__ */ jsxs25("sub", { children: [
19879
20013
  "/",
19880
20014
  shortenPeriod(planPeriod)
19881
20015
  ] })
19882
- ] }) : priceBehavior === EntitlementPriceBehavior.PayAsYouGo || priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ jsxs24(Text, { children: [
19883
- priceBehavior === EntitlementPriceBehavior.Overage && /* @__PURE__ */ jsxs24(Fragment12, { children: [
20016
+ ] }) : priceBehavior === EntitlementPriceBehavior.PayAsYouGo || priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ jsxs25(Text, { children: [
20017
+ priceBehavior === EntitlementPriceBehavior.Overage && /* @__PURE__ */ jsxs25(Fragment12, { children: [
19884
20018
  t3("then"),
19885
20019
  " "
19886
20020
  ] }),
19887
20021
  formatCurrency(price ?? 0, currency),
19888
- /* @__PURE__ */ jsxs24("sub", { children: [
20022
+ /* @__PURE__ */ jsxs25("sub", { children: [
19889
20023
  "/",
19890
- packageSize > 1 && /* @__PURE__ */ jsxs24(Fragment12, { children: [
20024
+ packageSize > 1 && /* @__PURE__ */ jsxs25(Fragment12, { children: [
19891
20025
  packageSize,
19892
20026
  " "
19893
20027
  ] }),
19894
20028
  getFeatureName(feature, packageSize),
19895
- feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs24(Fragment12, { children: [
20029
+ feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs25(Fragment12, { children: [
19896
20030
  "/",
19897
20031
  shortenPeriod(planPeriod)
19898
20032
  ] })
19899
20033
  ] })
19900
- ] }) : (priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ jsxs24(
20034
+ ] }) : (priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ jsxs25(
19901
20035
  Text,
19902
20036
  {
19903
20037
  style: { opacity: 0.54 },
@@ -19905,7 +20039,7 @@ var EntitlementRow = (props) => {
19905
20039
  $color: settings.theme.typography.text.color,
19906
20040
  children: [
19907
20041
  t3("Tier-based"),
19908
- /* @__PURE__ */ jsx34(
20042
+ /* @__PURE__ */ jsx35(
19909
20043
  PricingTiersTooltip,
19910
20044
  {
19911
20045
  portal,
@@ -19926,7 +20060,7 @@ var EntitlementRow = (props) => {
19926
20060
 
19927
20061
  // src/components/shared/subscription-sidebar/Proration.tsx
19928
20062
  import { useState as useState11 } from "react";
19929
- import { Fragment as Fragment13, jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
20063
+ import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
19930
20064
  var Proration = ({ currency, charges }) => {
19931
20065
  const { t: t3 } = useTranslation();
19932
20066
  const { settings } = useEmbed();
@@ -19936,21 +20070,21 @@ var Proration = ({ currency, charges }) => {
19936
20070
  e2.stopPropagation();
19937
20071
  setOpen((open2) => !open2);
19938
20072
  };
19939
- return /* @__PURE__ */ jsxs25(Fragment13, { children: [
19940
- /* @__PURE__ */ jsx35(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx35(Text, { $size: 14, children: t3("Proration") }) }),
19941
- /* @__PURE__ */ jsxs25(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
20073
+ return /* @__PURE__ */ jsxs26(Fragment13, { children: [
20074
+ /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { $size: 14, children: t3("Proration") }) }),
20075
+ /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
19942
20076
  open && charges?.upcomingInvoiceLineItems.map(
19943
20077
  ({ amount, description }, index) => {
19944
- return /* @__PURE__ */ jsxs25(Flex, { $gap: "1rem", children: [
19945
- /* @__PURE__ */ jsx35(Text, { children: description }),
19946
- /* @__PURE__ */ jsx35(Text, { children: formatCurrency(amount, currency) })
20078
+ return /* @__PURE__ */ jsxs26(Flex, { $gap: "1rem", children: [
20079
+ /* @__PURE__ */ jsx36(Text, { children: description }),
20080
+ /* @__PURE__ */ jsx36(Text, { children: formatCurrency(amount, currency) })
19947
20081
  ] }, index);
19948
20082
  }
19949
20083
  ),
19950
- /* @__PURE__ */ jsxs25(Flex, { $justifyContent: "space-between", $alignItems: "center", $gap: "1rem", children: [
19951
- /* @__PURE__ */ jsxs25(Flex, { children: [
19952
- /* @__PURE__ */ jsx35(Text, { display: "heading4", children: t3("Total") }),
19953
- /* @__PURE__ */ jsxs25(
20084
+ /* @__PURE__ */ jsxs26(Flex, { $justifyContent: "space-between", $alignItems: "center", $gap: "1rem", children: [
20085
+ /* @__PURE__ */ jsxs26(Flex, { children: [
20086
+ /* @__PURE__ */ jsx36(Text, { display: "heading4", children: t3("Total") }),
20087
+ /* @__PURE__ */ jsxs26(
19954
20088
  Button,
19955
20089
  {
19956
20090
  type: "button",
@@ -19958,26 +20092,26 @@ var Proration = ({ currency, charges }) => {
19958
20092
  style: { height: "auto", padding: 0 },
19959
20093
  $variant: "text",
19960
20094
  children: [
19961
- /* @__PURE__ */ jsx35(
20095
+ /* @__PURE__ */ jsx36(
19962
20096
  Icon3,
19963
20097
  {
19964
20098
  name: open ? "chevron-up" : "chevron-down",
19965
20099
  color: settings.theme.typography.text.color
19966
20100
  }
19967
20101
  ),
19968
- /* @__PURE__ */ jsx35(Text, { children: open ? t3("Hide details") : t3("Show details") })
20102
+ /* @__PURE__ */ jsx36(Text, { children: open ? t3("Hide details") : t3("Show details") })
19969
20103
  ]
19970
20104
  }
19971
20105
  )
19972
20106
  ] }),
19973
- /* @__PURE__ */ jsx35(Flex, { children: /* @__PURE__ */ jsx35(Text, { children: formatCurrency(charges.proration, currency) }) })
20107
+ /* @__PURE__ */ jsx36(Flex, { children: /* @__PURE__ */ jsx36(Text, { children: formatCurrency(charges.proration, currency) }) })
19974
20108
  ] })
19975
20109
  ] })
19976
20110
  ] });
19977
20111
  };
19978
20112
 
19979
20113
  // src/components/shared/subscription-sidebar/SubscriptionSidebar.tsx
19980
- import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
20114
+ import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
19981
20115
  var SubscriptionSidebar = forwardRef7(
19982
20116
  ({
19983
20117
  portal,
@@ -20383,7 +20517,7 @@ var SubscriptionSidebar = forwardRef7(
20383
20517
  const isSticky = !isButtonInView;
20384
20518
  switch (layout) {
20385
20519
  case "checkout":
20386
- return /* @__PURE__ */ jsx36(
20520
+ return /* @__PURE__ */ jsx37(
20387
20521
  CheckoutStageButton,
20388
20522
  {
20389
20523
  canCheckout,
@@ -20406,7 +20540,7 @@ var SubscriptionSidebar = forwardRef7(
20406
20540
  }
20407
20541
  );
20408
20542
  case "unsubscribe":
20409
- return /* @__PURE__ */ jsx36(
20543
+ return /* @__PURE__ */ jsx37(
20410
20544
  Button,
20411
20545
  {
20412
20546
  type: "button",
@@ -20472,7 +20606,7 @@ var SubscriptionSidebar = forwardRef7(
20472
20606
  if (isSelectedPlanTrialable && selectedPlan.trialDays) {
20473
20607
  trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
20474
20608
  }
20475
- return /* @__PURE__ */ jsxs26(
20609
+ return /* @__PURE__ */ jsxs27(
20476
20610
  Flex,
20477
20611
  {
20478
20612
  ref,
@@ -20489,7 +20623,7 @@ var SubscriptionSidebar = forwardRef7(
20489
20623
  },
20490
20624
  ...rest,
20491
20625
  children: [
20492
- showHeader && /* @__PURE__ */ jsx36(
20626
+ showHeader && /* @__PURE__ */ jsx37(
20493
20627
  Flex,
20494
20628
  {
20495
20629
  $position: "relative",
@@ -20501,10 +20635,10 @@ var SubscriptionSidebar = forwardRef7(
20501
20635
  $borderBottomWidth: "1px",
20502
20636
  $borderStyle: "solid",
20503
20637
  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
20504
- children: /* @__PURE__ */ jsx36(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx36(Text, { as: "h3", display: "heading3", children: t3("Subscription") }) })
20638
+ children: /* @__PURE__ */ jsx37(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx37(Text, { as: "h3", display: "heading3", children: t3("Subscription") }) })
20505
20639
  }
20506
20640
  ),
20507
- /* @__PURE__ */ jsxs26(
20641
+ /* @__PURE__ */ jsxs27(
20508
20642
  Flex,
20509
20643
  {
20510
20644
  $position: "relative",
@@ -20518,9 +20652,9 @@ var SubscriptionSidebar = forwardRef7(
20518
20652
  $borderStyle: "solid",
20519
20653
  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
20520
20654
  children: [
20521
- /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { $size: 14, children: t3("Plan") }) }),
20522
- /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
20523
- currentPlan && /* @__PURE__ */ jsxs26(
20655
+ /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { $size: 14, children: t3("Plan") }) }),
20656
+ /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
20657
+ currentPlan && /* @__PURE__ */ jsxs27(
20524
20658
  Flex,
20525
20659
  {
20526
20660
  $justifyContent: "space-between",
@@ -20532,13 +20666,13 @@ var SubscriptionSidebar = forwardRef7(
20532
20666
  $color: settings.theme.typography.heading4.color
20533
20667
  },
20534
20668
  children: [
20535
- /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: "heading4", children: currentPlan.name }) }),
20536
- typeof currentPlan.planPrice === "number" && /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs26(Text, { children: [
20669
+ /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: "heading4", children: currentPlan.name }) }),
20670
+ typeof currentPlan.planPrice === "number" && /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs27(Text, { children: [
20537
20671
  formatCurrency(
20538
20672
  currentPlan.planPrice,
20539
20673
  billingSubscription?.currency
20540
20674
  ),
20541
- /* @__PURE__ */ jsxs26("sub", { children: [
20675
+ /* @__PURE__ */ jsxs27("sub", { children: [
20542
20676
  "/",
20543
20677
  shortenPeriod(
20544
20678
  getSubscriptionPeriod(billingSubscription) || currentPlan.planPeriod || planPeriod
@@ -20548,8 +20682,8 @@ var SubscriptionSidebar = forwardRef7(
20548
20682
  ]
20549
20683
  }
20550
20684
  ),
20551
- selectedPlan && !selectedPlan.current && /* @__PURE__ */ jsxs26(Box, { children: [
20552
- /* @__PURE__ */ jsx36(
20685
+ selectedPlan && !selectedPlan.current && /* @__PURE__ */ jsxs27(Box, { children: [
20686
+ /* @__PURE__ */ jsx37(
20553
20687
  Box,
20554
20688
  {
20555
20689
  $width: "100%",
@@ -20557,7 +20691,7 @@ var SubscriptionSidebar = forwardRef7(
20557
20691
  $opacity: "50%",
20558
20692
  $marginBottom: "0.25rem",
20559
20693
  $marginTop: "-0.25rem",
20560
- children: /* @__PURE__ */ jsx36(
20694
+ children: /* @__PURE__ */ jsx37(
20561
20695
  Icon3,
20562
20696
  {
20563
20697
  name: "arrow-down",
@@ -20569,20 +20703,20 @@ var SubscriptionSidebar = forwardRef7(
20569
20703
  )
20570
20704
  }
20571
20705
  ),
20572
- /* @__PURE__ */ jsxs26(
20706
+ /* @__PURE__ */ jsxs27(
20573
20707
  Flex,
20574
20708
  {
20575
20709
  $justifyContent: "space-between",
20576
20710
  $alignItems: "center",
20577
20711
  $gap: "1rem",
20578
20712
  children: [
20579
- /* @__PURE__ */ jsx36(Flex, { children: /* @__PURE__ */ jsx36(Text, { display: "heading4", children: selectedPlan.name }) }),
20580
- /* @__PURE__ */ jsx36(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs26(Text, { children: [
20713
+ /* @__PURE__ */ jsx37(Flex, { children: /* @__PURE__ */ jsx37(Text, { display: "heading4", children: selectedPlan.name }) }),
20714
+ /* @__PURE__ */ jsx37(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs27(Text, { children: [
20581
20715
  formatCurrency(
20582
20716
  selectedPlanPrice ?? 0,
20583
20717
  selectedPlanCurrency
20584
20718
  ),
20585
- /* @__PURE__ */ jsxs26("sub", { children: [
20719
+ /* @__PURE__ */ jsxs27("sub", { children: [
20586
20720
  "/",
20587
20721
  shortenPeriod(planPeriod)
20588
20722
  ] })
@@ -20592,13 +20726,13 @@ var SubscriptionSidebar = forwardRef7(
20592
20726
  )
20593
20727
  ] })
20594
20728
  ] }),
20595
- updatedUsageBasedEntitlements.willChange && /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
20596
- /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { $size: 14, children: t3("Usage-based") }) }),
20729
+ updatedUsageBasedEntitlements.willChange && /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
20730
+ /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { $size: 14, children: t3("Usage-based") }) }),
20597
20731
  updatedUsageBasedEntitlements.removed.reduce(
20598
20732
  (acc, entitlement, index) => {
20599
20733
  if (entitlement.feature?.name) {
20600
20734
  acc.push(
20601
- /* @__PURE__ */ jsx36(
20735
+ /* @__PURE__ */ jsx37(
20602
20736
  Flex,
20603
20737
  {
20604
20738
  $justifyContent: "space-between",
@@ -20607,7 +20741,7 @@ var SubscriptionSidebar = forwardRef7(
20607
20741
  $opacity: "0.625",
20608
20742
  $textDecoration: "line-through",
20609
20743
  $color: settings.theme.typography.heading4.color,
20610
- children: /* @__PURE__ */ jsx36(
20744
+ children: /* @__PURE__ */ jsx37(
20611
20745
  EntitlementRow,
20612
20746
  {
20613
20747
  portal: resolvedPortal,
@@ -20629,8 +20763,8 @@ var SubscriptionSidebar = forwardRef7(
20629
20763
  (acc, { previous, next: next2 }, index) => {
20630
20764
  if (next2.feature?.name) {
20631
20765
  acc.push(
20632
- /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
20633
- /* @__PURE__ */ jsx36(
20766
+ /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
20767
+ /* @__PURE__ */ jsx37(
20634
20768
  Flex,
20635
20769
  {
20636
20770
  $justifyContent: "space-between",
@@ -20639,7 +20773,7 @@ var SubscriptionSidebar = forwardRef7(
20639
20773
  $opacity: "0.625",
20640
20774
  $textDecoration: "line-through",
20641
20775
  $color: settings.theme.typography.heading4.color,
20642
- children: /* @__PURE__ */ jsx36(
20776
+ children: /* @__PURE__ */ jsx37(
20643
20777
  EntitlementRow,
20644
20778
  {
20645
20779
  portal: resolvedPortal,
@@ -20650,13 +20784,13 @@ var SubscriptionSidebar = forwardRef7(
20650
20784
  )
20651
20785
  }
20652
20786
  ),
20653
- /* @__PURE__ */ jsx36(
20787
+ /* @__PURE__ */ jsx37(
20654
20788
  Flex,
20655
20789
  {
20656
20790
  $justifyContent: "space-between",
20657
20791
  $alignItems: "baseline",
20658
20792
  $gap: "1rem",
20659
- children: /* @__PURE__ */ jsx36(
20793
+ children: /* @__PURE__ */ jsx37(
20660
20794
  EntitlementRow,
20661
20795
  {
20662
20796
  portal: resolvedPortal,
@@ -20678,13 +20812,13 @@ var SubscriptionSidebar = forwardRef7(
20678
20812
  (acc, entitlement, index) => {
20679
20813
  if (entitlement.feature?.name) {
20680
20814
  acc.push(
20681
- /* @__PURE__ */ jsx36(
20815
+ /* @__PURE__ */ jsx37(
20682
20816
  Flex,
20683
20817
  {
20684
20818
  $justifyContent: "space-between",
20685
20819
  $alignItems: "baseline",
20686
20820
  $gap: "1rem",
20687
- children: /* @__PURE__ */ jsx36(
20821
+ children: /* @__PURE__ */ jsx37(
20688
20822
  EntitlementRow,
20689
20823
  {
20690
20824
  portal: resolvedPortal,
@@ -20703,33 +20837,33 @@ var SubscriptionSidebar = forwardRef7(
20703
20837
  []
20704
20838
  )
20705
20839
  ] }),
20706
- selectedPlan && isSelectedPlanTrialable && shouldTrial && /* @__PURE__ */ jsxs26(Box, { children: [
20707
- /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { $size: 14, children: t3("Trial") }) }),
20708
- /* @__PURE__ */ jsxs26(
20840
+ selectedPlan && isSelectedPlanTrialable && shouldTrial && /* @__PURE__ */ jsxs27(Box, { children: [
20841
+ /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { $size: 14, children: t3("Trial") }) }),
20842
+ /* @__PURE__ */ jsxs27(
20709
20843
  Flex,
20710
20844
  {
20711
20845
  $justifyContent: "space-between",
20712
20846
  $alignItems: "center",
20713
20847
  $gap: "1rem",
20714
20848
  children: [
20715
- /* @__PURE__ */ jsx36(Flex, { children: /* @__PURE__ */ jsx36(Text, { display: "heading4", children: t3("Ends on", { date: trialEndsOn.toLocaleDateString() }) }) }),
20716
- /* @__PURE__ */ jsx36(Flex, { children: /* @__PURE__ */ jsxs26(Text, { children: [
20849
+ /* @__PURE__ */ jsx37(Flex, { children: /* @__PURE__ */ jsx37(Text, { display: "heading4", children: t3("Ends on", { date: trialEndsOn.toLocaleDateString() }) }) }),
20850
+ /* @__PURE__ */ jsx37(Flex, { children: /* @__PURE__ */ jsxs27(Text, { children: [
20717
20851
  "-",
20718
20852
  formatCurrency(
20719
20853
  selectedPlanPrice ?? 0,
20720
20854
  selectedPlanCurrency
20721
20855
  ),
20722
20856
  "/",
20723
- /* @__PURE__ */ jsx36("sub", { children: shortenPeriod(planPeriod) })
20857
+ /* @__PURE__ */ jsx37("sub", { children: shortenPeriod(planPeriod) })
20724
20858
  ] }) })
20725
20859
  ]
20726
20860
  }
20727
20861
  )
20728
20862
  ] }),
20729
- (willAddOnsChange || selectedAddOnsWithPrice.length > 0) && /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
20730
- /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { $size: 14, children: t3("Add-ons") }) }),
20863
+ (willAddOnsChange || selectedAddOnsWithPrice.length > 0) && /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
20864
+ /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { $size: 14, children: t3("Add-ons") }) }),
20731
20865
  removedAddOns.map((addOn, index) => {
20732
- return /* @__PURE__ */ jsxs26(
20866
+ return /* @__PURE__ */ jsxs27(
20733
20867
  Flex,
20734
20868
  {
20735
20869
  $justifyContent: "space-between",
@@ -20739,13 +20873,13 @@ var SubscriptionSidebar = forwardRef7(
20739
20873
  $textDecoration: "line-through",
20740
20874
  $color: settings.theme.typography.heading4.color,
20741
20875
  children: [
20742
- /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: "heading4", children: addOn.name }) }),
20743
- typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs26(Text, { children: [
20876
+ /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: "heading4", children: addOn.name }) }),
20877
+ typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs27(Text, { children: [
20744
20878
  formatCurrency(
20745
20879
  addOn.planPrice,
20746
20880
  selectedPlanCurrency
20747
20881
  ),
20748
- addOn.planPeriod !== "one-time" && /* @__PURE__ */ jsxs26("sub", { children: [
20882
+ addOn.planPeriod !== "one-time" && /* @__PURE__ */ jsxs27("sub", { children: [
20749
20883
  "/",
20750
20884
  shortenPeriod(planPeriod)
20751
20885
  ] })
@@ -20757,17 +20891,17 @@ var SubscriptionSidebar = forwardRef7(
20757
20891
  }),
20758
20892
  selectedAddOnsWithPrice.map((addOn, index) => {
20759
20893
  const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, planPeriod, currency) || {};
20760
- return /* @__PURE__ */ jsxs26(
20894
+ return /* @__PURE__ */ jsxs27(
20761
20895
  Flex,
20762
20896
  {
20763
20897
  $justifyContent: "space-between",
20764
20898
  $alignItems: "center",
20765
20899
  $gap: "1rem",
20766
20900
  children: [
20767
- /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { display: "heading4", children: addOn.name }) }),
20768
- /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs26(Text, { children: [
20901
+ /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { display: "heading4", children: addOn.name }) }),
20902
+ /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs27(Text, { children: [
20769
20903
  formatCurrency(addOnPrice ?? 0, addOnCurrency),
20770
- addOn.chargeType !== ChargeType.oneTime && /* @__PURE__ */ jsxs26("sub", { children: [
20904
+ addOn.chargeType !== ChargeType.oneTime && /* @__PURE__ */ jsxs27("sub", { children: [
20771
20905
  "/",
20772
20906
  shortenPeriod(planPeriod)
20773
20907
  ] })
@@ -20778,35 +20912,35 @@ var SubscriptionSidebar = forwardRef7(
20778
20912
  );
20779
20913
  })
20780
20914
  ] }),
20781
- addedCreditBundles.length > 0 && /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
20782
- /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { $size: 14, children: t3("Credits") }) }),
20915
+ addedCreditBundles.length > 0 && /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
20916
+ /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { $size: 14, children: t3("Credits") }) }),
20783
20917
  addedCreditBundles.reduce(
20784
20918
  (acc, bundle, index) => {
20785
20919
  const price = typeof bundle.price?.priceDecimal === "string" ? Number(bundle.price.priceDecimal) : typeof bundle.price?.price === "number" ? bundle.price.price : void 0;
20786
20920
  const amount = (bundle.quantity ?? 0) * bundle.count;
20787
20921
  if (price)
20788
20922
  acc.push(
20789
- /* @__PURE__ */ jsxs26(
20923
+ /* @__PURE__ */ jsxs27(
20790
20924
  Flex,
20791
20925
  {
20792
20926
  $justifyContent: "space-between",
20793
20927
  $alignItems: "center",
20794
20928
  $gap: "1rem",
20795
20929
  children: [
20796
- /* @__PURE__ */ jsxs26(Box, { children: [
20797
- /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsxs26(Text, { display: "heading4", children: [
20930
+ /* @__PURE__ */ jsxs27(Box, { children: [
20931
+ /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsxs27(Text, { display: "heading4", children: [
20798
20932
  bundle.name,
20799
20933
  " (",
20800
20934
  bundle.count,
20801
20935
  ")"
20802
20936
  ] }) }),
20803
- /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsxs26(Text, { children: [
20937
+ /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsxs27(Text, { children: [
20804
20938
  amount,
20805
20939
  " ",
20806
20940
  getFeatureName(bundle, amount)
20807
20941
  ] }) })
20808
20942
  ] }),
20809
- bundle.count > 0 && /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx36(Text, { children: formatCurrency(
20943
+ bundle.count > 0 && /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx37(Text, { children: formatCurrency(
20810
20944
  price * bundle.count,
20811
20945
  bundle.price?.currency
20812
20946
  ) }) })
@@ -20820,7 +20954,7 @@ var SubscriptionSidebar = forwardRef7(
20820
20954
  []
20821
20955
  )
20822
20956
  ] }),
20823
- proration !== 0 && charges && selectedPlanCurrency && /* @__PURE__ */ jsx36(
20957
+ proration !== 0 && charges && selectedPlanCurrency && /* @__PURE__ */ jsx37(
20824
20958
  Proration,
20825
20959
  {
20826
20960
  charges,
@@ -20831,7 +20965,7 @@ var SubscriptionSidebar = forwardRef7(
20831
20965
  ]
20832
20966
  }
20833
20967
  ),
20834
- /* @__PURE__ */ jsxs26(
20968
+ /* @__PURE__ */ jsxs27(
20835
20969
  Flex,
20836
20970
  {
20837
20971
  $flexDirection: "column",
@@ -20840,15 +20974,15 @@ var SubscriptionSidebar = forwardRef7(
20840
20974
  $width: "100%",
20841
20975
  $padding: "1.5rem",
20842
20976
  children: [
20843
- discountApplied && /* @__PURE__ */ jsxs26(
20977
+ discountApplied && /* @__PURE__ */ jsxs27(
20844
20978
  Flex,
20845
20979
  {
20846
20980
  $justifyContent: "space-between",
20847
20981
  $alignItems: "center",
20848
20982
  $gap: "1rem",
20849
20983
  children: [
20850
- /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { children: t3("Discount") }) }),
20851
- /* @__PURE__ */ jsxs26(
20984
+ /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { children: t3("Discount") }) }),
20985
+ /* @__PURE__ */ jsxs27(
20852
20986
  Flex,
20853
20987
  {
20854
20988
  $alignItems: "center",
@@ -20858,15 +20992,15 @@ var SubscriptionSidebar = forwardRef7(
20858
20992
  $outlineColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
20859
20993
  $borderRadius: "0.3125rem",
20860
20994
  children: [
20861
- /* @__PURE__ */ jsx36(Text, { $size: 0.75 * settings.theme.typography.text.fontSize, children: promoCode }),
20862
- /* @__PURE__ */ jsx36(
20995
+ /* @__PURE__ */ jsx37(Text, { $size: 0.75 * settings.theme.typography.text.fontSize, children: promoCode }),
20996
+ /* @__PURE__ */ jsx37(
20863
20997
  Box,
20864
20998
  {
20865
20999
  $cursor: "pointer",
20866
21000
  onClick: () => {
20867
21001
  updatePromoCode?.(null);
20868
21002
  },
20869
- children: /* @__PURE__ */ jsx36(
21003
+ children: /* @__PURE__ */ jsx37(
20870
21004
  Icon3,
20871
21005
  {
20872
21006
  name: "close",
@@ -20882,55 +21016,55 @@ var SubscriptionSidebar = forwardRef7(
20882
21016
  ]
20883
21017
  }
20884
21018
  ),
20885
- percentOff > 0 && /* @__PURE__ */ jsxs26(
21019
+ percentOff > 0 && /* @__PURE__ */ jsxs27(
20886
21020
  Flex,
20887
21021
  {
20888
21022
  $justifyContent: "space-between",
20889
21023
  $alignItems: "center",
20890
21024
  $gap: "1rem",
20891
21025
  children: [
20892
- /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx36(Text, { children: t3("X% off", { percent: percentOff }) }) }),
20893
- /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { children: formatCurrency(
21026
+ /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx37(Text, { children: t3("X% off", { percent: percentOff }) }) }),
21027
+ /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { children: formatCurrency(
20894
21028
  newCharges / 100 * percentOff,
20895
21029
  selectedPlanCurrency
20896
21030
  ) }) })
20897
21031
  ]
20898
21032
  }
20899
21033
  ),
20900
- amountOff > 0 && /* @__PURE__ */ jsxs26(
21034
+ amountOff > 0 && /* @__PURE__ */ jsxs27(
20901
21035
  Flex,
20902
21036
  {
20903
21037
  $justifyContent: "space-between",
20904
21038
  $alignItems: "center",
20905
21039
  $gap: "1rem",
20906
21040
  children: [
20907
- /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx36(Text, { children: t3("X off", {
21041
+ /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx37(Text, { children: t3("X off", {
20908
21042
  amount: formatCurrency(
20909
21043
  Math.abs(amountOff),
20910
21044
  selectedPlanCurrency
20911
21045
  )
20912
21046
  }) }) }),
20913
- /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsxs26(Text, { children: [
21047
+ /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsxs27(Text, { children: [
20914
21048
  "-",
20915
21049
  formatCurrency(Math.abs(amountOff), selectedPlanCurrency)
20916
21050
  ] }) })
20917
21051
  ]
20918
21052
  }
20919
21053
  ),
20920
- !isCreditOnlyPurchase && subscriptionPrice && /* @__PURE__ */ jsxs26(
21054
+ !isCreditOnlyPurchase && subscriptionPrice && /* @__PURE__ */ jsxs27(
20921
21055
  Flex,
20922
21056
  {
20923
21057
  $justifyContent: "space-between",
20924
21058
  $alignItems: "center",
20925
21059
  $gap: "1rem",
20926
21060
  children: [
20927
- /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs26(Text, { children: [
21061
+ /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs27(Text, { children: [
20928
21062
  planPeriod === "year" ? t3("Yearly total") : planPeriod === "quarter" ? t3("Quarterly total") : t3("Monthly total"),
20929
21063
  ":"
20930
21064
  ] }) }),
20931
- /* @__PURE__ */ jsx36(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs26(Text, { children: [
21065
+ /* @__PURE__ */ jsx37(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs27(Text, { children: [
20932
21066
  subscriptionPrice,
20933
- /* @__PURE__ */ jsxs26("sub", { children: [
21067
+ /* @__PURE__ */ jsxs27("sub", { children: [
20934
21068
  "/",
20935
21069
  shortenPeriod(planPeriod)
20936
21070
  ] })
@@ -20938,46 +21072,46 @@ var SubscriptionSidebar = forwardRef7(
20938
21072
  ]
20939
21073
  }
20940
21074
  ),
20941
- taxAmount > 0 && /* @__PURE__ */ jsxs26(
21075
+ taxAmount > 0 && /* @__PURE__ */ jsxs27(
20942
21076
  Flex,
20943
21077
  {
20944
21078
  $justifyContent: "space-between",
20945
21079
  $alignItems: "center",
20946
21080
  $gap: "1rem",
20947
21081
  children: [
20948
- /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { children: t3("Tax (description):", {
21082
+ /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { children: t3("Tax (description):", {
20949
21083
  description: taxDescription
20950
21084
  }) }) }),
20951
- /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { children: formatCurrency(taxAmount, selectedPlanCurrency) }) })
21085
+ /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { children: formatCurrency(taxAmount, selectedPlanCurrency) }) })
20952
21086
  ]
20953
21087
  }
20954
21088
  ),
20955
- charges && /* @__PURE__ */ jsxs26(
21089
+ charges && /* @__PURE__ */ jsxs27(
20956
21090
  Flex,
20957
21091
  {
20958
21092
  $justifyContent: "space-between",
20959
21093
  $alignItems: "center",
20960
21094
  $gap: "1rem",
20961
21095
  children: [
20962
- /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs26(Text, { children: [
21096
+ /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs27(Text, { children: [
20963
21097
  t3("Due today"),
20964
21098
  ":"
20965
21099
  ] }) }),
20966
- /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { children: formatCurrency(Math.max(0, dueNow), selectedPlanCurrency) }) })
21100
+ /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { children: formatCurrency(Math.max(0, dueNow), selectedPlanCurrency) }) })
20967
21101
  ]
20968
21102
  }
20969
21103
  ),
20970
- dueNow < 0 && /* @__PURE__ */ jsxs26(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
20971
- /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsxs26(Text, { children: [
21104
+ dueNow < 0 && /* @__PURE__ */ jsxs27(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
21105
+ /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsxs27(Text, { children: [
20972
21106
  t3("Credits to be applied to future invoices"),
20973
21107
  ":"
20974
21108
  ] }) }),
20975
- /* @__PURE__ */ jsx36(Box, { children: /* @__PURE__ */ jsx36(Text, { children: formatCurrency(Math.abs(dueNow), selectedPlanCurrency) }) })
21109
+ /* @__PURE__ */ jsx37(Box, { children: /* @__PURE__ */ jsx37(Text, { children: formatCurrency(Math.abs(dueNow), selectedPlanCurrency) }) })
20976
21110
  ] }),
20977
- /* @__PURE__ */ jsxs26("div", { ref: buttonRef, children: [
21111
+ /* @__PURE__ */ jsxs27("div", { ref: buttonRef, children: [
20978
21112
  button,
20979
21113
  createPortal2(
20980
- /* @__PURE__ */ jsx36(
21114
+ /* @__PURE__ */ jsx37(
20981
21115
  Box,
20982
21116
  {
20983
21117
  $position: "sticky",
@@ -20991,15 +21125,15 @@ var SubscriptionSidebar = forwardRef7(
20991
21125
  $borderTopWidth: "1px",
20992
21126
  $borderTopStyle: "solid",
20993
21127
  $borderTopColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
20994
- children: /* @__PURE__ */ jsx36(Box, { $padding: "1rem 1.5rem", children: button })
21128
+ children: /* @__PURE__ */ jsx37(Box, { $padding: "1rem 1.5rem", children: button })
20995
21129
  }
20996
21130
  ),
20997
21131
  resolvedPortal
20998
21132
  )
20999
21133
  ] }),
21000
- !isLoading && error && /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", children: [
21001
- /* @__PURE__ */ jsx36(Text, { $weight: 500, $color: "#DB6669", children: error }),
21002
- error === t3("Downgrade not permitted.") && data?.preventSelfServiceDowngrade && data?.preventSelfServiceDowngradeUrl && data?.preventSelfServiceDowngradeButtonText && /* @__PURE__ */ jsx36(
21134
+ !isLoading && error && /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", children: [
21135
+ /* @__PURE__ */ jsx37(Text, { $weight: 500, $color: "#DB6669", children: error }),
21136
+ error === t3("Downgrade not permitted.") && data?.preventSelfServiceDowngrade && data?.preventSelfServiceDowngradeUrl && data?.preventSelfServiceDowngradeButtonText && /* @__PURE__ */ jsx37(
21003
21137
  Text,
21004
21138
  {
21005
21139
  as: "a",
@@ -21009,7 +21143,7 @@ var SubscriptionSidebar = forwardRef7(
21009
21143
  }
21010
21144
  )
21011
21145
  ] }),
21012
- layout !== "unsubscribe" && !isCreditOnlyPurchase && /* @__PURE__ */ jsx36(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx36(Text, { children: willScheduleDowngrade && selectedPlan?.name && billingSubscription ? t3(
21146
+ layout !== "unsubscribe" && !isCreditOnlyPurchase && /* @__PURE__ */ jsx37(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx37(Text, { children: willScheduleDowngrade && selectedPlan?.name && billingSubscription ? t3(
21013
21147
  "You will be downgraded at the end of your billing period.",
21014
21148
  {
21015
21149
  plan: selectedPlan.name,
@@ -21090,7 +21224,7 @@ var TieredPricingDetails = ({
21090
21224
 
21091
21225
  // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
21092
21226
  import { useCallback as useCallback10, useLayoutEffect as useLayoutEffect7, useMemo as useMemo19, useRef as useRef10, useState as useState13 } from "react";
21093
- import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
21227
+ import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
21094
21228
  var UnsubscribeDialog = ({ top }) => {
21095
21229
  const { t: t3 } = useTranslation();
21096
21230
  const { data, layout, setLayout, setCheckoutState, clearCheckoutState } = useEmbed();
@@ -21160,7 +21294,7 @@ var UnsubscribeDialog = ({ top }) => {
21160
21294
  element.show();
21161
21295
  }
21162
21296
  }, [layout]);
21163
- return /* @__PURE__ */ jsx37(
21297
+ return /* @__PURE__ */ jsx38(
21164
21298
  Dialog2,
21165
21299
  {
21166
21300
  ref: setDialog,
@@ -21169,8 +21303,8 @@ var UnsubscribeDialog = ({ top }) => {
21169
21303
  top,
21170
21304
  onClose: handleClose,
21171
21305
  ...!isModal && { open: layout === "unsubscribe" },
21172
- children: /* @__PURE__ */ jsxs27(DialogContent2, { children: [
21173
- /* @__PURE__ */ jsx37(
21306
+ children: /* @__PURE__ */ jsxs28(DialogContent2, { children: [
21307
+ /* @__PURE__ */ jsx38(
21174
21308
  DialogClose,
21175
21309
  {
21176
21310
  onClose: handleClose,
@@ -21180,7 +21314,7 @@ var UnsubscribeDialog = ({ top }) => {
21180
21314
  $margin: "1rem 0.75rem 0 0"
21181
21315
  }
21182
21316
  ),
21183
- /* @__PURE__ */ jsxs27(
21317
+ /* @__PURE__ */ jsxs28(
21184
21318
  Flex,
21185
21319
  {
21186
21320
  $flexDirection: "column",
@@ -21190,9 +21324,9 @@ var UnsubscribeDialog = ({ top }) => {
21190
21324
  $padding: "2.5rem",
21191
21325
  $overflow: "auto",
21192
21326
  children: [
21193
- /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
21194
- /* @__PURE__ */ jsx37(Text, { as: "h2", display: "heading2", children: t3("Cancel subscription") }),
21195
- /* @__PURE__ */ jsxs27(Text, { as: "p", children: [
21327
+ /* @__PURE__ */ jsxs28(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
21328
+ /* @__PURE__ */ jsx38(Text, { as: "h2", display: "heading2", children: t3("Cancel subscription") }),
21329
+ /* @__PURE__ */ jsxs28(Text, { as: "p", children: [
21196
21330
  t3(
21197
21331
  "You will retain access to your plan until the end of the billing period, on"
21198
21332
  ),
@@ -21202,9 +21336,9 @@ var UnsubscribeDialog = ({ top }) => {
21202
21336
  })
21203
21337
  ] })
21204
21338
  ] }),
21205
- /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
21206
- /* @__PURE__ */ jsx37(Text, { as: "p", children: t3("Not ready to cancel?") }),
21207
- /* @__PURE__ */ jsx37(
21339
+ /* @__PURE__ */ jsxs28(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
21340
+ /* @__PURE__ */ jsx38(Text, { as: "p", children: t3("Not ready to cancel?") }),
21341
+ /* @__PURE__ */ jsx38(
21208
21342
  Button,
21209
21343
  {
21210
21344
  type: "button",
@@ -21225,7 +21359,7 @@ var UnsubscribeDialog = ({ top }) => {
21225
21359
  ]
21226
21360
  }
21227
21361
  ),
21228
- /* @__PURE__ */ jsx37(
21362
+ /* @__PURE__ */ jsx38(
21229
21363
  SubscriptionSidebar,
21230
21364
  {
21231
21365
  ref: sidebarRef,
@@ -21252,14 +21386,14 @@ var UnsubscribeDialog = ({ top }) => {
21252
21386
  };
21253
21387
 
21254
21388
  // src/components/shared/usage-violation-text/UsageViolationText.tsx
21255
- import { jsx as jsx38 } from "react/jsx-runtime";
21389
+ import { jsx as jsx39 } from "react/jsx-runtime";
21256
21390
  var UsageViolationText = ({ violations }) => {
21257
21391
  const { t: t3 } = useTranslation();
21258
21392
  const { settings } = useEmbed();
21259
21393
  if (violations.length === 0) {
21260
21394
  return null;
21261
21395
  }
21262
- return /* @__PURE__ */ jsx38(
21396
+ return /* @__PURE__ */ jsx39(
21263
21397
  Text,
21264
21398
  {
21265
21399
  $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -21278,11 +21412,11 @@ var UsageViolationText = ({ violations }) => {
21278
21412
  };
21279
21413
 
21280
21414
  // src/components/ui/badge/Badge.tsx
21281
- import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
21415
+ import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
21282
21416
  var Badge = () => {
21283
21417
  const { t: t3 } = useTranslation();
21284
21418
  const { settings } = useEmbed();
21285
- return /* @__PURE__ */ jsxs28(
21419
+ return /* @__PURE__ */ jsxs29(
21286
21420
  Flex,
21287
21421
  {
21288
21422
  as: "a",
@@ -21295,82 +21429,82 @@ var Badge = () => {
21295
21429
  $gridColumn: "1 / -1",
21296
21430
  $color: settings.theme.typography.text.color,
21297
21431
  children: [
21298
- /* @__PURE__ */ jsxs28(Text, { $size: 12, children: [
21432
+ /* @__PURE__ */ jsxs29(Text, { $size: 12, children: [
21299
21433
  t3("Powered by"),
21300
21434
  " "
21301
21435
  ] }),
21302
- /* @__PURE__ */ jsxs28("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
21303
- /* @__PURE__ */ jsx39(
21436
+ /* @__PURE__ */ jsxs29("svg", { viewBox: "0 0 86 16", width: 86, height: 16, children: [
21437
+ /* @__PURE__ */ jsx40(
21304
21438
  "path",
21305
21439
  {
21306
21440
  d: "M21.2354 6.16227C21.1796 5.95015 21.0494 5.76779 20.8261 5.61893C20.6028 5.46635 20.3423 5.39564 20.0408 5.39564C19.3151 5.39564 18.7941 5.69708 18.7941 6.2367C18.7941 6.49721 18.9095 6.69073 19.1402 6.81726C19.3635 6.94379 19.732 7.07033 20.2344 7.18569C21.0084 7.37177 21.4922 7.51691 21.9686 7.7402C22.203 7.85557 22.3928 7.97465 22.5305 8.10863C22.7948 8.3803 22.9548 8.74501 22.9362 9.20276C22.9176 9.86147 22.6571 10.375 22.1547 10.7397C21.6523 11.1082 20.9563 11.2905 20.0818 11.2905C19.2072 11.2905 18.5597 11.1268 18.0312 10.8067C17.5065 10.4867 17.2013 10.0215 17.1194 9.41116L18.6192 9.27719C18.6974 9.57491 18.8723 9.7982 19.1514 9.94706C19.4305 10.0959 19.7394 10.1778 20.0818 10.1778C20.4614 10.1778 20.7777 10.0996 21.0308 9.9359C21.2838 9.77959 21.4104 9.56002 21.4104 9.28835C21.4104 8.90876 21.0531 8.61104 20.5991 8.43613C20.3683 8.35053 20.0855 8.27238 19.7468 8.19423C19.2705 8.07886 18.8946 7.97094 18.6155 7.87418C18.3364 7.78486 18.0908 7.66205 17.8712 7.51319C17.4358 7.21547 17.2832 6.8247 17.2832 6.2367C17.2832 5.61521 17.5325 5.13141 18.0312 4.79648C18.5262 4.46526 19.2035 4.29407 20.0669 4.29407C21.5853 4.29407 22.5752 4.9044 22.7389 6.05807L21.228 6.16227H21.2354Z",
21307
21441
  fill: "currentColor"
21308
21442
  }
21309
21443
  ),
21310
- /* @__PURE__ */ jsx39(
21444
+ /* @__PURE__ */ jsx40(
21311
21445
  "path",
21312
21446
  {
21313
21447
  d: "M29.4145 8.9796L30.7803 9.55271C30.49 10.0923 30.0621 10.5129 29.5001 10.8217C28.9382 11.1344 28.3167 11.2944 27.6319 11.2944C26.9472 11.2944 26.3629 11.1567 25.8121 10.8701C25.2613 10.5873 24.8147 10.1742 24.4835 9.6383C24.1523 9.09868 23.9811 8.48835 23.9811 7.79987C23.9811 7.11138 24.1486 6.49361 24.4835 5.95771C24.8147 5.41809 25.2613 5.00873 25.8121 4.72589C26.3629 4.44305 26.9732 4.30164 27.6319 4.30164C28.2906 4.30164 28.9382 4.45794 29.5038 4.77427C30.0658 5.08688 30.4938 5.51113 30.7803 6.05075L29.4145 6.62015C29.0535 5.93539 28.3985 5.56323 27.6319 5.56323C27.0327 5.56323 26.5303 5.77536 26.1135 6.19961C25.6967 6.62387 25.492 7.15977 25.492 7.80731C25.492 8.45486 25.6967 8.99076 26.1135 9.40757C26.5303 9.83182 27.0327 10.0439 27.6319 10.0439C28.3985 10.0439 29.0535 9.66807 29.4145 8.98703V8.9796Z",
21314
21448
  fill: "currentColor"
21315
21449
  }
21316
21450
  ),
21317
- /* @__PURE__ */ jsx39(
21451
+ /* @__PURE__ */ jsx40(
21318
21452
  "path",
21319
21453
  {
21320
21454
  d: "M37.4386 11.2049V7.80341C37.4386 6.35945 36.9139 5.59282 35.697 5.59282C35.0978 5.59282 34.614 5.7975 34.2419 6.21059C33.8623 6.61996 33.6725 7.15214 33.6725 7.80713V11.2086H32.1615V1.9234H33.6725V5.47745C34.1004 4.73315 35.001 4.29773 36.1919 4.29773C37.167 4.29773 37.8666 4.59917 38.302 5.19834C38.7375 5.7975 38.9533 6.66834 38.9533 7.80341V11.2049H37.4349H37.4386Z",
21321
21455
  fill: "currentColor"
21322
21456
  }
21323
21457
  ),
21324
- /* @__PURE__ */ jsx39(
21458
+ /* @__PURE__ */ jsx40(
21325
21459
  "path",
21326
21460
  {
21327
21461
  d: "M46.5692 5.38819C47.2167 6.07295 47.5777 7.1187 47.5107 8.30587H41.8242C41.9284 8.83805 42.1741 9.26602 42.5611 9.59352C42.9481 9.92473 43.4022 10.0885 43.9157 10.0885C44.8052 10.0885 45.5234 9.59724 45.8844 8.78222L47.1795 9.40372C46.8818 9.99172 46.4352 10.4495 45.8509 10.7881C45.2629 11.1268 44.6191 11.2943 43.9157 11.2943C42.9295 11.2943 42.0178 10.9444 41.3516 10.3453C40.6855 9.7461 40.2649 8.83432 40.2649 7.79602C40.2649 6.75771 40.6892 5.84222 41.3516 5.23933C42.0178 4.64017 42.9295 4.29034 43.9157 4.29034C44.9801 4.29034 45.9216 4.69971 46.5692 5.38447V5.38819ZM42.5388 6.00224C42.1592 6.32974 41.921 6.75772 41.8205 7.29734H46.0221C45.9179 6.75772 45.6835 6.3223 45.3039 5.99852C44.9243 5.67847 44.4628 5.51473 43.9195 5.51473C43.3761 5.51473 42.9221 5.67847 42.5425 6.00597L42.5388 6.00224Z",
21328
21462
  fill: "currentColor"
21329
21463
  }
21330
21464
  ),
21331
- /* @__PURE__ */ jsx39(
21465
+ /* @__PURE__ */ jsx40(
21332
21466
  "path",
21333
21467
  {
21334
21468
  d: "M59.7699 5.23933C60.1495 5.86827 60.3132 6.68329 60.3132 7.80347V11.2049H58.8023V7.80347C58.8023 6.35952 58.3371 5.59288 57.2318 5.59288C56.6438 5.59288 56.1861 5.79384 55.8586 6.19577C55.5311 6.60141 55.3673 7.13731 55.3673 7.80347V11.2049H53.8489V7.80347C53.8489 6.35952 53.3838 5.59288 52.2785 5.59288C51.6905 5.59288 51.2327 5.79384 50.9052 6.19577C50.574 6.60141 50.4102 7.13731 50.4102 7.80347V11.2049H48.8993V4.39827H50.3433L50.4102 5.47379C50.8196 4.65878 51.5825 4.29407 52.8106 4.29407C53.9606 4.29407 54.7161 4.78531 55.077 5.76407C55.5199 4.81508 56.4428 4.29407 57.7677 4.29407C58.7093 4.29407 59.3829 4.61412 59.7699 5.23562V5.23933Z",
21335
21469
  fill: "currentColor"
21336
21470
  }
21337
21471
  ),
21338
- /* @__PURE__ */ jsx39(
21472
+ /* @__PURE__ */ jsx40(
21339
21473
  "path",
21340
21474
  {
21341
21475
  d: "M67.4264 5.47382L67.4934 4.3983H68.9373V11.205H67.4934L67.4264 10.1294C67.0282 10.9147 66.1797 11.3092 64.8809 11.3017C63.102 11.3427 61.591 9.79823 61.6283 7.8035C61.591 5.8162 63.102 4.2606 64.8809 4.29782C66.0643 4.29782 67.0096 4.7444 67.4264 5.47754V5.47382ZM66.8049 9.37398C67.2217 8.95717 67.4264 8.43243 67.4264 7.79605C67.4264 7.15967 67.2217 6.64238 66.8049 6.21813C66.3881 5.80132 65.8782 5.58919 65.2828 5.58919C64.6874 5.58919 64.1887 5.80132 63.7719 6.21813C63.355 6.64238 63.1504 7.16711 63.1504 7.79605C63.1504 8.42499 63.355 8.95717 63.7719 9.37398C64.1887 9.79823 64.6911 10.0104 65.2828 10.0104C65.8745 10.0104 66.3881 9.79823 66.8049 9.37398Z",
21342
21476
  fill: "currentColor"
21343
21477
  }
21344
21478
  ),
21345
- /* @__PURE__ */ jsx39(
21479
+ /* @__PURE__ */ jsx40(
21346
21480
  "path",
21347
21481
  {
21348
21482
  d: "M71.3891 2.85757H72.8926V4.39828H74.6455V5.58172H72.8926V8.9683C72.8926 9.5898 73.1048 9.90985 73.5923 9.96568C73.89 10.0252 74.2398 10.0141 74.6455 9.9359V11.1863C74.1989 11.257 73.7858 11.2943 73.4062 11.2943C72.6731 11.2943 72.1595 11.1082 71.8543 10.7323C71.5454 10.3639 71.3891 9.79076 71.3891 9.02041V5.58172H70.4215V4.39828H71.3891V2.85757Z",
21349
21483
  fill: "currentColor"
21350
21484
  }
21351
21485
  ),
21352
- /* @__PURE__ */ jsx39(
21486
+ /* @__PURE__ */ jsx40(
21353
21487
  "path",
21354
21488
  {
21355
21489
  d: "M76.1747 3.15526C75.9923 2.98035 75.903 2.76078 75.903 2.50772C75.903 2.25466 75.9923 2.04997 76.1747 1.86762C76.3496 1.69271 76.5691 1.60339 76.8222 1.60339C77.0753 1.60339 77.2874 1.69271 77.4623 1.86762C77.6372 2.04997 77.7265 2.2621 77.7265 2.50772C77.7265 2.75334 77.6372 2.97291 77.4623 3.15526C77.2874 3.33762 77.0678 3.42694 76.8222 3.42694C76.5766 3.42694 76.3496 3.33762 76.1747 3.15526ZM76.0593 4.39826H77.5777V11.2049H76.0593V4.39826Z",
21356
21490
  fill: "currentColor"
21357
21491
  }
21358
21492
  ),
21359
- /* @__PURE__ */ jsx39(
21493
+ /* @__PURE__ */ jsx40(
21360
21494
  "path",
21361
21495
  {
21362
21496
  d: "M84.3023 8.9796L85.6681 9.55271C85.3778 10.0923 84.9498 10.5129 84.3879 10.8217C83.8259 11.1344 83.2044 11.2944 82.5197 11.2944C81.8349 11.2944 81.2506 11.1567 80.6998 10.8701C80.1491 10.5873 79.7025 10.1742 79.3713 9.6383C79.04 9.09868 78.8689 8.48835 78.8689 7.79987C78.8689 7.11138 79.0363 6.49361 79.3713 5.95771C79.7025 5.41809 80.1528 5.00873 80.6998 4.72589C81.2469 4.44305 81.8609 4.30164 82.5197 4.30164C83.1784 4.30164 83.8259 4.45794 84.3916 4.77427C84.9535 5.08688 85.3815 5.51113 85.6681 6.05075L84.3023 6.62015C83.9413 5.93539 83.2863 5.56323 82.5197 5.56323C81.9205 5.56323 81.4181 5.77536 81.0013 6.19961C80.5845 6.62387 80.3798 7.15977 80.3798 7.80731C80.3798 8.45486 80.5845 8.99076 81.0013 9.40757C81.4181 9.83182 81.9205 10.0439 82.5197 10.0439C83.2863 10.0439 83.9413 9.66807 84.3023 8.98703V8.9796Z",
21363
21497
  fill: "currentColor"
21364
21498
  }
21365
21499
  ),
21366
- /* @__PURE__ */ jsx39(
21500
+ /* @__PURE__ */ jsx40(
21367
21501
  "path",
21368
21502
  {
21369
21503
  d: "M5.93091 10.8141L7.2758 9.41753L3.83719 5.84667C2.98568 4.9624 2.98568 3.52157 3.83719 2.63731C4.68871 1.75305 6.07617 1.75305 6.92769 2.63731L10.3663 6.20817L11.7112 4.81156L8.27258 1.24069C6.67975 -0.413401 4.08513 -0.413401 2.4923 1.24069C0.899472 2.89479 0.899472 5.58919 2.4923 7.24328L5.93091 10.8141Z",
21370
21504
  fill: "currentColor"
21371
21505
  }
21372
21506
  ),
21373
- /* @__PURE__ */ jsx39(
21507
+ /* @__PURE__ */ jsx40(
21374
21508
  "path",
21375
21509
  {
21376
21510
  d: "M6.05827 3.54751C5.68761 3.1626 5.08404 3.1626 4.71338 3.54751C4.34272 3.93243 4.34272 4.55921 4.71338 4.94413L9.02103 9.41746L5.93054 12.6268L1.62288 8.15349C1.25223 7.76857 0.648653 7.76857 0.277994 8.15349C-0.0926647 8.5384 -0.0926647 9.16519 0.277994 9.5501L5.93054 15.4201L11.7108 9.41746L6.05827 3.54751Z",
@@ -21384,9 +21518,9 @@ var Badge = () => {
21384
21518
  };
21385
21519
 
21386
21520
  // src/components/layout/RenderLayout.tsx
21387
- import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
21521
+ import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
21388
21522
  var Disabled = () => {
21389
- return /* @__PURE__ */ jsx40(Box, { $width: "max-content", $height: "max-content", children: /* @__PURE__ */ jsx40(Card, { children: /* @__PURE__ */ jsxs29(
21523
+ return /* @__PURE__ */ jsx41(Box, { $width: "max-content", $height: "max-content", children: /* @__PURE__ */ jsx41(Card, { children: /* @__PURE__ */ jsxs30(
21390
21524
  Element,
21391
21525
  {
21392
21526
  as: Flex,
@@ -21395,8 +21529,8 @@ var Disabled = () => {
21395
21529
  $alignItems: "center",
21396
21530
  $whiteSpace: "nowrap",
21397
21531
  children: [
21398
- /* @__PURE__ */ jsx40(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx40(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
21399
- /* @__PURE__ */ jsx40(Text, { as: "p", children: "Please try again later." })
21532
+ /* @__PURE__ */ jsx41(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx41(Text, { as: "h1", display: "heading1", children: "Portal not found" }) }),
21533
+ /* @__PURE__ */ jsx41(Text, { as: "p", children: "Please try again later." })
21400
21534
  ]
21401
21535
  }
21402
21536
  ) }) });
@@ -21405,7 +21539,7 @@ var RenderLayout = ({ children }) => {
21405
21539
  const { layout } = useEmbed();
21406
21540
  switch (layout) {
21407
21541
  case "disabled":
21408
- return /* @__PURE__ */ jsx40(Disabled, {});
21542
+ return /* @__PURE__ */ jsx41(Disabled, {});
21409
21543
  default:
21410
21544
  return children;
21411
21545
  }
@@ -21430,7 +21564,7 @@ var StyledViewport = gt2.div.withConfig({
21430
21564
  `;
21431
21565
 
21432
21566
  // src/components/layout/viewport/Viewport.tsx
21433
- import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
21567
+ import { Fragment as Fragment14, jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
21434
21568
  var Viewport = forwardRef8(
21435
21569
  ({ children, portal, ...props }, ref) => {
21436
21570
  portal = portal || document.body;
@@ -21451,21 +21585,21 @@ var Viewport = forwardRef8(
21451
21585
  };
21452
21586
  }, []);
21453
21587
  const isBadgeVisible = !data?.capabilities?.badgeVisibility || settings.badge?.visibility !== "hidden";
21454
- return /* @__PURE__ */ jsxs30(Fragment14, { children: [
21455
- /* @__PURE__ */ jsxs30(StyledViewport, { ref, ...props, children: [
21456
- /* @__PURE__ */ jsx41(RenderLayout, { children }),
21457
- isBadgeVisible && /* @__PURE__ */ jsx41(Badge, {})
21588
+ return /* @__PURE__ */ jsxs31(Fragment14, { children: [
21589
+ /* @__PURE__ */ jsxs31(StyledViewport, { ref, ...props, children: [
21590
+ /* @__PURE__ */ jsx42(RenderLayout, { children }),
21591
+ isBadgeVisible && /* @__PURE__ */ jsx42(Badge, {})
21458
21592
  ] }),
21459
- layout === "checkout" && createPortal3(/* @__PURE__ */ jsx41(CheckoutDialog, { top }), portal),
21460
- layout === "unsubscribe" && createPortal3(/* @__PURE__ */ jsx41(UnsubscribeDialog, { top }), portal),
21461
- layout === "payment" && createPortal3(/* @__PURE__ */ jsx41(PaymentDialog, { top }), portal)
21593
+ layout === "checkout" && createPortal3(/* @__PURE__ */ jsx42(CheckoutDialog, { top }), portal),
21594
+ layout === "unsubscribe" && createPortal3(/* @__PURE__ */ jsx42(UnsubscribeDialog, { top }), portal),
21595
+ layout === "payment" && createPortal3(/* @__PURE__ */ jsx42(PaymentDialog, { top }), portal)
21462
21596
  ] });
21463
21597
  }
21464
21598
  );
21465
21599
  Viewport.displayName = "Viewport";
21466
21600
 
21467
21601
  // src/components/elements/button/Button.tsx
21468
- import { jsx as jsx42 } from "react/jsx-runtime";
21602
+ import { jsx as jsx43 } from "react/jsx-runtime";
21469
21603
  var resolveDesignProps = (props) => {
21470
21604
  return {
21471
21605
  button: {
@@ -21496,7 +21630,7 @@ var ButtonElement = forwardRef9(({ children, className, ...rest }, ref) => {
21496
21630
  variant: "text"
21497
21631
  }
21498
21632
  };
21499
- return /* @__PURE__ */ jsx42(
21633
+ return /* @__PURE__ */ jsx43(
21500
21634
  Element,
21501
21635
  {
21502
21636
  as: Flex,
@@ -21504,7 +21638,7 @@ var ButtonElement = forwardRef9(({ children, className, ...rest }, ref) => {
21504
21638
  className,
21505
21639
  $flexDirection: "column",
21506
21640
  $gap: "2rem",
21507
- children: /* @__PURE__ */ jsx42(
21641
+ children: /* @__PURE__ */ jsx43(
21508
21642
  Button,
21509
21643
  {
21510
21644
  as: "a",
@@ -21529,7 +21663,7 @@ import { Fragment as Fragment17, forwardRef as forwardRef10, useMemo as useMemo2
21529
21663
 
21530
21664
  // src/components/elements/included-features/UsageDetails.tsx
21531
21665
  import { Fragment as Fragment15, useMemo as useMemo20 } from "react";
21532
- import { Fragment as Fragment16, jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
21666
+ import { Fragment as Fragment16, jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
21533
21667
  var UsageDetails = ({ entitlement, layout }) => {
21534
21668
  const {
21535
21669
  allocation,
@@ -21660,7 +21794,7 @@ var UsageDetails = ({ entitlement, layout }) => {
21660
21794
  let index = 0;
21661
21795
  if (priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered && typeof period === "string" && typeof price === "number") {
21662
21796
  acc.push(
21663
- /* @__PURE__ */ jsx43(Fragment15, { children: packageSize > 1 ? t3("$X/Y units/period", {
21797
+ /* @__PURE__ */ jsx44(Fragment15, { children: packageSize > 1 ? t3("$X/Y units/period", {
21664
21798
  cost: formatCurrency(price, currency),
21665
21799
  size: packageSize,
21666
21800
  units: getFeatureName(feature, packageSize),
@@ -21674,7 +21808,7 @@ var UsageDetails = ({ entitlement, layout }) => {
21674
21808
  index += 1;
21675
21809
  } else if ((priceBehavior === EntitlementPriceBehavior.PayAsYouGo || priceBehavior === EntitlementPriceBehavior.Overage || priceBehavior === EntitlementPriceBehavior.Tier || priceBehavior === EntitlementPriceBehavior.CreditBurndown || tiered) && typeof usage === "number") {
21676
21810
  acc.push(
21677
- /* @__PURE__ */ jsx43(Fragment15, { children: t3("X units used", {
21811
+ /* @__PURE__ */ jsx44(Fragment15, { children: t3("X units used", {
21678
21812
  amount: usage,
21679
21813
  units: getFeatureName(feature, usage)
21680
21814
  }) }, index)
@@ -21683,14 +21817,14 @@ var UsageDetails = ({ entitlement, layout }) => {
21683
21817
  }
21684
21818
  if (typeof cost === "number" && cost > 0) {
21685
21819
  acc.push(
21686
- /* @__PURE__ */ jsxs31(Fragment15, { children: [
21687
- acc.length > 0 && /* @__PURE__ */ jsx43(Fragment16, { children: " \u2022 " }),
21820
+ /* @__PURE__ */ jsxs32(Fragment15, { children: [
21821
+ acc.length > 0 && /* @__PURE__ */ jsx44(Fragment16, { children: " \u2022 " }),
21688
21822
  formatCurrency(cost, currency)
21689
21823
  ] }, index)
21690
21824
  );
21691
21825
  index += 1;
21692
21826
  if (feature.featureType === FeatureType.Trait && typeof period === "string") {
21693
- acc.push(/* @__PURE__ */ jsxs31(Fragment15, { children: [
21827
+ acc.push(/* @__PURE__ */ jsxs32(Fragment15, { children: [
21694
21828
  "/",
21695
21829
  shortenPeriod(period)
21696
21830
  ] }, index));
@@ -21699,8 +21833,8 @@ var UsageDetails = ({ entitlement, layout }) => {
21699
21833
  }
21700
21834
  if (metricResetAt) {
21701
21835
  acc.push(
21702
- /* @__PURE__ */ jsxs31(Fragment15, { children: [
21703
- acc.length > 0 && /* @__PURE__ */ jsx43(Fragment16, { children: " \u2022 " }),
21836
+ /* @__PURE__ */ jsxs32(Fragment15, { children: [
21837
+ acc.length > 0 && /* @__PURE__ */ jsx44(Fragment16, { children: " \u2022 " }),
21704
21838
  t3("Resets", {
21705
21839
  date: toPrettyDate(metricResetAt, {
21706
21840
  month: "numeric",
@@ -21739,8 +21873,8 @@ var UsageDetails = ({ entitlement, layout }) => {
21739
21873
  if (!text && !usageText || !feature) {
21740
21874
  return null;
21741
21875
  }
21742
- return /* @__PURE__ */ jsxs31(Fragment16, { children: [
21743
- layout.entitlement.isVisible && /* @__PURE__ */ jsx43(
21876
+ return /* @__PURE__ */ jsxs32(Fragment16, { children: [
21877
+ layout.entitlement.isVisible && /* @__PURE__ */ jsx44(
21744
21878
  Flex,
21745
21879
  {
21746
21880
  $marginTop: "0.75rem",
@@ -21750,9 +21884,9 @@ var UsageDetails = ({ entitlement, layout }) => {
21750
21884
  $marginTop: 0
21751
21885
  }
21752
21886
  },
21753
- children: /* @__PURE__ */ jsxs31(Text, { display: layout.entitlement.fontStyle, children: [
21887
+ children: /* @__PURE__ */ jsxs32(Text, { display: layout.entitlement.fontStyle, children: [
21754
21888
  text,
21755
- entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx43(
21889
+ entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx44(
21756
21890
  HardLimitTooltip,
21757
21891
  {
21758
21892
  feature: entitlement.feature,
@@ -21762,7 +21896,7 @@ var UsageDetails = ({ entitlement, layout }) => {
21762
21896
  ] })
21763
21897
  }
21764
21898
  ),
21765
- layout.usage.isVisible && usageText && /* @__PURE__ */ jsx43(
21899
+ layout.usage.isVisible && usageText && /* @__PURE__ */ jsx44(
21766
21900
  Flex,
21767
21901
  {
21768
21902
  $viewport: {
@@ -21770,9 +21904,9 @@ var UsageDetails = ({ entitlement, layout }) => {
21770
21904
  $justifyContent: "end"
21771
21905
  }
21772
21906
  },
21773
- children: /* @__PURE__ */ jsxs31(Text, { display: layout.usage.fontStyle, children: [
21907
+ children: /* @__PURE__ */ jsxs32(Text, { display: layout.usage.fontStyle, children: [
21774
21908
  usageText,
21775
- (priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ jsx43(
21909
+ (priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ jsx44(
21776
21910
  PricingTiersTooltip,
21777
21911
  {
21778
21912
  feature,
@@ -21789,7 +21923,7 @@ var UsageDetails = ({ entitlement, layout }) => {
21789
21923
  };
21790
21924
 
21791
21925
  // src/components/elements/included-features/IncludedFeatures.tsx
21792
- import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
21926
+ import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
21793
21927
  function resolveDesignProps2(props) {
21794
21928
  return {
21795
21929
  // there is a typescript bug with `DeepPartial` so we must cast to `string[] | undefined`
@@ -21864,9 +21998,9 @@ var IncludedFeatures = forwardRef10(({ className, ...rest }, ref) => {
21864
21998
  }
21865
21999
  const shouldShowExpand = featureListSize > VISIBLE_ENTITLEMENT_COUNT;
21866
22000
  const isExpanded = showCount > VISIBLE_ENTITLEMENT_COUNT;
21867
- return /* @__PURE__ */ jsxs32(Element, { ref, className, $containerType: "inline-size", children: [
21868
- props.header.isVisible && /* @__PURE__ */ jsx44(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx44(Text, { display: props.header.fontStyle, children: props.header.text }) }),
21869
- /* @__PURE__ */ jsx44(
22001
+ return /* @__PURE__ */ jsxs33(Element, { ref, className, $containerType: "inline-size", children: [
22002
+ props.header.isVisible && /* @__PURE__ */ jsx45(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx45(Text, { display: props.header.fontStyle, children: props.header.text }) }),
22003
+ /* @__PURE__ */ jsx45(
21870
22004
  Box,
21871
22005
  {
21872
22006
  $display: "grid",
@@ -21879,8 +22013,8 @@ var IncludedFeatures = forwardRef10(({ className, ...rest }, ref) => {
21879
22013
  }
21880
22014
  },
21881
22015
  children: featureUsage.slice(0, showCount).map((entitlement, index) => {
21882
- return /* @__PURE__ */ jsxs32(Fragment17, { children: [
21883
- props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ jsx44(
22016
+ return /* @__PURE__ */ jsxs33(Fragment17, { children: [
22017
+ props.icons.isVisible && entitlement.feature?.icon && /* @__PURE__ */ jsx45(
21884
22018
  Icon3,
21885
22019
  {
21886
22020
  name: entitlement.feature.icon,
@@ -21890,16 +22024,16 @@ var IncludedFeatures = forwardRef10(({ className, ...rest }, ref) => {
21890
22024
  style: { marginRight: "0.5rem" }
21891
22025
  }
21892
22026
  ),
21893
- /* @__PURE__ */ jsxs32(
22027
+ /* @__PURE__ */ jsxs33(
21894
22028
  Flex,
21895
22029
  {
21896
22030
  $flexDirection: "column",
21897
22031
  $alignSelf: "baseline",
21898
22032
  $gap: "0.25rem",
21899
22033
  children: [
21900
- entitlement.feature?.name && /* @__PURE__ */ jsx44(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
21901
- props.description.isVisible && entitlement.feature?.description && /* @__PURE__ */ jsx44(Text, { display: props.description.fontStyle, children: entitlement.feature.description }),
21902
- props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ jsx44(
22034
+ entitlement.feature?.name && /* @__PURE__ */ jsx45(Text, { display: props.icons.fontStyle, children: entitlement.feature.name }),
22035
+ props.description.isVisible && entitlement.feature?.description && /* @__PURE__ */ jsx45(Text, { display: props.description.fontStyle, children: entitlement.feature.description }),
22036
+ props.entitlementExpiration.isVisible && entitlement.entitlementExpirationDate && /* @__PURE__ */ jsx45(
21903
22037
  Text,
21904
22038
  {
21905
22039
  as: "em",
@@ -21917,7 +22051,7 @@ var IncludedFeatures = forwardRef10(({ className, ...rest }, ref) => {
21917
22051
  ]
21918
22052
  }
21919
22053
  ),
21920
- /* @__PURE__ */ jsx44(
22054
+ /* @__PURE__ */ jsx45(
21921
22055
  Flex,
21922
22056
  {
21923
22057
  $gridColumn: "span 2",
@@ -21934,22 +22068,22 @@ var IncludedFeatures = forwardRef10(({ className, ...rest }, ref) => {
21934
22068
  $marginLeft: 0
21935
22069
  }
21936
22070
  },
21937
- children: /* @__PURE__ */ jsx44(UsageDetails, { entitlement, layout: props })
22071
+ children: /* @__PURE__ */ jsx45(UsageDetails, { entitlement, layout: props })
21938
22072
  }
21939
22073
  )
21940
22074
  ] }, index);
21941
22075
  })
21942
22076
  }
21943
22077
  ),
21944
- shouldShowExpand && /* @__PURE__ */ jsxs32(Flex, { $alignItems: "center", $marginTop: "1rem", children: [
21945
- /* @__PURE__ */ jsx44(
22078
+ shouldShowExpand && /* @__PURE__ */ jsxs33(Flex, { $alignItems: "center", $marginTop: "1rem", children: [
22079
+ /* @__PURE__ */ jsx45(
21946
22080
  Icon3,
21947
22081
  {
21948
22082
  name: isExpanded ? "chevron-up" : "chevron-down",
21949
22083
  color: "#D0D0D0"
21950
22084
  }
21951
22085
  ),
21952
- /* @__PURE__ */ jsx44(
22086
+ /* @__PURE__ */ jsx45(
21953
22087
  Text,
21954
22088
  {
21955
22089
  onClick: handleToggleShowAll,
@@ -21965,7 +22099,7 @@ IncludedFeatures.displayName = "IncludedFeatures";
21965
22099
 
21966
22100
  // src/components/elements/invoices/Invoices.tsx
21967
22101
  import { forwardRef as forwardRef11, useCallback as useCallback11, useEffect as useEffect6, useState as useState16 } from "react";
21968
- import { Fragment as Fragment18, jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
22102
+ import { Fragment as Fragment18, jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
21969
22103
  function resolveDesignProps3(props) {
21970
22104
  return {
21971
22105
  header: {
@@ -22068,9 +22202,9 @@ var Invoices = forwardRef11(({ className, ...rest }, ref) => {
22068
22202
  if (invoices.length === 0) {
22069
22203
  return null;
22070
22204
  }
22071
- return /* @__PURE__ */ jsxs33(Element, { ref, className, children: [
22072
- /* @__PURE__ */ jsx45(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx45(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
22073
- error ? /* @__PURE__ */ jsxs33(
22205
+ return /* @__PURE__ */ jsxs34(Element, { ref, className, children: [
22206
+ /* @__PURE__ */ jsx46(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx46(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
22207
+ error ? /* @__PURE__ */ jsxs34(
22074
22208
  Flex,
22075
22209
  {
22076
22210
  as: TransitionBox,
@@ -22079,8 +22213,8 @@ var Invoices = forwardRef11(({ className, ...rest }, ref) => {
22079
22213
  $alignItems: "center",
22080
22214
  $gap: "1rem",
22081
22215
  children: [
22082
- /* @__PURE__ */ jsx45(Text, { $weight: 500, $color: "#DB6669", children: t3("There was a problem retrieving your invoices.") }),
22083
- /* @__PURE__ */ jsx45(
22216
+ /* @__PURE__ */ jsx46(Text, { $weight: 500, $color: "#DB6669", children: t3("There was a problem retrieving your invoices.") }),
22217
+ /* @__PURE__ */ jsx46(
22084
22218
  Button,
22085
22219
  {
22086
22220
  type: "button",
@@ -22093,17 +22227,17 @@ var Invoices = forwardRef11(({ className, ...rest }, ref) => {
22093
22227
  )
22094
22228
  ]
22095
22229
  }
22096
- ) : !isLoading && /* @__PURE__ */ jsx45(TransitionBox, { children: /* @__PURE__ */ jsxs33(Flex, { $flexDirection: "column", $gap: "1rem", children: [
22097
- props.header.isVisible && /* @__PURE__ */ jsx45(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx45(Text, { display: props.header.fontStyle, children: t3("Invoices") }) }),
22098
- invoices.length > 0 ? /* @__PURE__ */ jsxs33(Fragment18, { children: [
22099
- /* @__PURE__ */ jsx45(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, amountDue, url }, index) => {
22100
- return /* @__PURE__ */ jsxs33(
22230
+ ) : !isLoading && /* @__PURE__ */ jsx46(TransitionBox, { children: /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "1rem", children: [
22231
+ props.header.isVisible && /* @__PURE__ */ jsx46(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx46(Text, { display: props.header.fontStyle, children: t3("Invoices") }) }),
22232
+ invoices.length > 0 ? /* @__PURE__ */ jsxs34(Fragment18, { children: [
22233
+ /* @__PURE__ */ jsx46(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, amountDue, url }, index) => {
22234
+ return /* @__PURE__ */ jsxs34(
22101
22235
  Flex,
22102
22236
  {
22103
22237
  $justifyContent: "space-between",
22104
22238
  $alignItems: "center",
22105
22239
  children: [
22106
- props.date.isVisible && /* @__PURE__ */ jsx45(
22240
+ props.date.isVisible && /* @__PURE__ */ jsx46(
22107
22241
  Text,
22108
22242
  {
22109
22243
  display: props.date.fontStyle,
@@ -22117,10 +22251,10 @@ var Invoices = forwardRef11(({ className, ...rest }, ref) => {
22117
22251
  children: date
22118
22252
  }
22119
22253
  ),
22120
- props.amount.isVisible && /* @__PURE__ */ jsx45(
22254
+ props.amount.isVisible && /* @__PURE__ */ jsx46(
22121
22255
  Tooltip,
22122
22256
  {
22123
- trigger: /* @__PURE__ */ jsx45(Text, { display: props.amount.fontStyle, children: amount }),
22257
+ trigger: /* @__PURE__ */ jsx46(Text, { display: props.amount.fontStyle, children: amount }),
22124
22258
  content: amountDue < 0 ? t3("Invoice credit tooltip") : t3("Invoice charge tooltip")
22125
22259
  }
22126
22260
  )
@@ -22129,15 +22263,15 @@ var Invoices = forwardRef11(({ className, ...rest }, ref) => {
22129
22263
  index
22130
22264
  );
22131
22265
  }) }),
22132
- props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs33(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
22133
- /* @__PURE__ */ jsx45(
22266
+ props.collapse.isVisible && invoices.length > props.limit.number && /* @__PURE__ */ jsxs34(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
22267
+ /* @__PURE__ */ jsx46(
22134
22268
  Icon3,
22135
22269
  {
22136
22270
  name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
22137
22271
  color: "#D0D0D0"
22138
22272
  }
22139
22273
  ),
22140
- /* @__PURE__ */ jsx45(
22274
+ /* @__PURE__ */ jsx46(
22141
22275
  Text,
22142
22276
  {
22143
22277
  onClick: toggleListSize,
@@ -22149,7 +22283,7 @@ var Invoices = forwardRef11(({ className, ...rest }, ref) => {
22149
22283
  }
22150
22284
  )
22151
22285
  ] })
22152
- ] }) : /* @__PURE__ */ jsx45(Text, { display: "heading2", children: t3("No invoices created yet") })
22286
+ ] }) : /* @__PURE__ */ jsx46(Text, { display: "heading2", children: t3("No invoices created yet") })
22153
22287
  ] }) })
22154
22288
  ] });
22155
22289
  });
@@ -22159,7 +22293,7 @@ Invoices.displayName = "Invoices";
22159
22293
  import { forwardRef as forwardRef12, useCallback as useCallback12, useMemo as useMemo22, useRef as useRef12, useState as useState17 } from "react";
22160
22294
 
22161
22295
  // src/components/elements/metered-features/Meter.tsx
22162
- import { jsx as jsx46 } from "react/jsx-runtime";
22296
+ import { jsx as jsx47 } from "react/jsx-runtime";
22163
22297
  var Meter = ({ entitlement }) => {
22164
22298
  const { allocation, priceBehavior, softLimit, usage } = entitlement;
22165
22299
  const limit = softLimit ?? allocation;
@@ -22167,7 +22301,7 @@ var Meter = ({ entitlement }) => {
22167
22301
  return null;
22168
22302
  }
22169
22303
  const progress = (priceBehavior === EntitlementPriceBehavior.Overage && usage > limit ? Math.min(usage, limit) / Math.max(usage, limit) : usage / limit) * 100;
22170
- const meter = /* @__PURE__ */ jsx46(
22304
+ const meter = /* @__PURE__ */ jsx47(
22171
22305
  ProgressBar,
22172
22306
  {
22173
22307
  progress,
@@ -22184,7 +22318,7 @@ var Meter = ({ entitlement }) => {
22184
22318
  };
22185
22319
 
22186
22320
  // src/components/elements/metered-features/PriceDetails.tsx
22187
- import { Fragment as Fragment19, jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
22321
+ import { Fragment as Fragment19, jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
22188
22322
  var PriceDetails = ({
22189
22323
  entitlement,
22190
22324
  usageDetails,
@@ -22211,7 +22345,7 @@ var PriceDetails = ({
22211
22345
  if (!feature || typeof currentTierPerUnitPrice !== "number") {
22212
22346
  return null;
22213
22347
  }
22214
- return /* @__PURE__ */ jsxs34(
22348
+ return /* @__PURE__ */ jsxs35(
22215
22349
  Flex,
22216
22350
  {
22217
22351
  $justifyContent: "space-between",
@@ -22225,28 +22359,28 @@ var PriceDetails = ({
22225
22359
  $borderBottomRightRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`
22226
22360
  },
22227
22361
  children: [
22228
- priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ jsxs34(Text, { children: [
22362
+ priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ jsxs35(Text, { children: [
22229
22363
  t3("Additional"),
22230
22364
  ": ",
22231
22365
  formatCurrency(currentTierPerUnitPrice, currency),
22232
- /* @__PURE__ */ jsxs34(Box, { as: "sub", $whiteSpace: "nowrap", children: [
22366
+ /* @__PURE__ */ jsxs35(Box, { as: "sub", $whiteSpace: "nowrap", children: [
22233
22367
  "/",
22234
- packageSize > 1 && /* @__PURE__ */ jsxs34(Fragment19, { children: [
22368
+ packageSize > 1 && /* @__PURE__ */ jsxs35(Fragment19, { children: [
22235
22369
  packageSize,
22236
22370
  " "
22237
22371
  ] }),
22238
22372
  getFeatureName(feature, packageSize),
22239
- feature.featureType === FeatureType.Trait && period && /* @__PURE__ */ jsxs34(Fragment19, { children: [
22373
+ feature.featureType === FeatureType.Trait && period && /* @__PURE__ */ jsxs35(Fragment19, { children: [
22240
22374
  "/",
22241
22375
  shortenPeriod(period)
22242
22376
  ] })
22243
22377
  ] })
22244
- ] }) : priceBehavior === EntitlementPriceBehavior.Tier && /* @__PURE__ */ jsxs34(Text, { children: [
22378
+ ] }) : priceBehavior === EntitlementPriceBehavior.Tier && /* @__PURE__ */ jsxs35(Text, { children: [
22245
22379
  t3("Tier"),
22246
22380
  ": ",
22247
22381
  currentTier?.from || 1,
22248
- typeof currentTier?.to === "number" && (currentTier.from || 1) !== currentTier.to && /* @__PURE__ */ jsx47(Fragment19, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` }),
22249
- /* @__PURE__ */ jsx47(
22382
+ typeof currentTier?.to === "number" && (currentTier.from || 1) !== currentTier.to && /* @__PURE__ */ jsx48(Fragment19, { children: currentTier.to === Infinity ? "+" : `\u2013${currentTier.to}` }),
22383
+ /* @__PURE__ */ jsx48(
22250
22384
  PricingTiersTooltip,
22251
22385
  {
22252
22386
  period,
@@ -22257,19 +22391,19 @@ var PriceDetails = ({
22257
22391
  }
22258
22392
  )
22259
22393
  ] }),
22260
- typeof amount === "number" && /* @__PURE__ */ jsx47(Fragment19, { children: priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ jsxs34(Text, { children: [
22394
+ typeof amount === "number" && /* @__PURE__ */ jsx48(Fragment19, { children: priceBehavior === EntitlementPriceBehavior.Overage ? /* @__PURE__ */ jsxs35(Text, { children: [
22261
22395
  formatNumber(amount),
22262
22396
  " ",
22263
22397
  getFeatureName(feature, amount),
22264
22398
  " \xB7 ",
22265
22399
  formatCurrency(currentTierPerUnitPrice * amount, currency),
22266
- feature.featureType === FeatureType.Trait && typeof period === "string" && /* @__PURE__ */ jsxs34(Box, { as: "sub", $whiteSpace: "nowrap", children: [
22400
+ feature.featureType === FeatureType.Trait && typeof period === "string" && /* @__PURE__ */ jsxs35(Box, { as: "sub", $whiteSpace: "nowrap", children: [
22267
22401
  "/",
22268
22402
  shortenPeriod(period)
22269
22403
  ] })
22270
- ] }) : priceBehavior === EntitlementPriceBehavior.Tier && typeof cost === "number" && /* @__PURE__ */ jsxs34(Text, { children: [
22404
+ ] }) : priceBehavior === EntitlementPriceBehavior.Tier && typeof cost === "number" && /* @__PURE__ */ jsxs35(Text, { children: [
22271
22405
  formatCurrency(cost, currency),
22272
- feature.featureType === FeatureType.Trait && typeof period === "string" && /* @__PURE__ */ jsxs34(Box, { as: "sub", $whiteSpace: "nowrap", children: [
22406
+ feature.featureType === FeatureType.Trait && typeof period === "string" && /* @__PURE__ */ jsxs35(Box, { as: "sub", $whiteSpace: "nowrap", children: [
22273
22407
  "/",
22274
22408
  shortenPeriod(period)
22275
22409
  ] })
@@ -22297,7 +22431,7 @@ var Container2 = gt2.div`
22297
22431
  `;
22298
22432
 
22299
22433
  // src/components/elements/metered-features/MeteredFeatures.tsx
22300
- import { Fragment as Fragment20, jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
22434
+ import { Fragment as Fragment20, jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
22301
22435
  var Limit = ({ entitlement, usageDetails, fontStyle }) => {
22302
22436
  const { t: t3 } = useTranslation();
22303
22437
  const { data } = useEmbed();
@@ -22343,9 +22477,9 @@ var Limit = ({ entitlement, usageDetails, fontStyle }) => {
22343
22477
  })
22344
22478
  );
22345
22479
  }
22346
- return /* @__PURE__ */ jsxs35(Text, { display: fontStyle, children: [
22480
+ return /* @__PURE__ */ jsxs36(Text, { display: fontStyle, children: [
22347
22481
  acc.join(" \u2022 "),
22348
- entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx48(
22482
+ entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx49(
22349
22483
  HardLimitTooltip,
22350
22484
  {
22351
22485
  feature: entitlement.feature,
@@ -22423,7 +22557,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22423
22557
  const period = getSubscriptionPeriod(data?.company?.billingSubscription) ?? (typeof data?.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0);
22424
22558
  const canCheckout = data?.capabilities?.checkout ?? false;
22425
22559
  const showCredits = data?.displaySettings?.showCredits ?? true;
22426
- return /* @__PURE__ */ jsxs35(Container2, { ref, className, children: [
22560
+ return /* @__PURE__ */ jsxs36(Container2, { ref, className, children: [
22427
22561
  meteredFeatures.reduce((acc, entitlement, index) => {
22428
22562
  if (!entitlement.feature) {
22429
22563
  return acc;
@@ -22432,9 +22566,9 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22432
22566
  const usageDetails = getUsageDetails(entitlement, period);
22433
22567
  const { limit } = usageDetails;
22434
22568
  acc.push(
22435
- /* @__PURE__ */ jsxs35(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
22436
- /* @__PURE__ */ jsxs35(Flex, { $gap: "1.5rem", children: [
22437
- props.icon.isVisible && /* @__PURE__ */ jsx48(
22569
+ /* @__PURE__ */ jsxs36(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
22570
+ /* @__PURE__ */ jsxs36(Flex, { $gap: "1.5rem", children: [
22571
+ props.icon.isVisible && /* @__PURE__ */ jsx49(
22438
22572
  Icon3,
22439
22573
  {
22440
22574
  name: feature.icon,
@@ -22443,8 +22577,8 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22443
22577
  rounded: true
22444
22578
  }
22445
22579
  ),
22446
- /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
22447
- /* @__PURE__ */ jsxs35(
22580
+ /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
22581
+ /* @__PURE__ */ jsxs36(
22448
22582
  Flex,
22449
22583
  {
22450
22584
  ref: (el) => {
@@ -22455,31 +22589,31 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22455
22589
  $flexWrap: "wrap",
22456
22590
  $gap: "1rem",
22457
22591
  children: [
22458
- /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
22459
- /* @__PURE__ */ jsx48(Box, { children: /* @__PURE__ */ jsx48(Text, { display: props.header.fontStyle, children: feature.name }) }),
22460
- props.description.isVisible && feature.description && /* @__PURE__ */ jsx48(Box, { children: /* @__PURE__ */ jsx48(Text, { display: props.description.fontStyle, children: feature.description }) })
22592
+ /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
22593
+ /* @__PURE__ */ jsx49(Box, { children: /* @__PURE__ */ jsx49(Text, { display: props.header.fontStyle, children: feature.name }) }),
22594
+ props.description.isVisible && feature.description && /* @__PURE__ */ jsx49(Box, { children: /* @__PURE__ */ jsx49(Text, { display: props.description.fontStyle, children: feature.description }) })
22461
22595
  ] }),
22462
- /* @__PURE__ */ jsxs35(
22596
+ /* @__PURE__ */ jsxs36(
22463
22597
  Box,
22464
22598
  {
22465
22599
  $flexBasis: "min-content",
22466
22600
  $flexGrow: 1,
22467
22601
  $textAlign: shouldWrapChildren ? "left" : "right",
22468
22602
  children: [
22469
- props.usage.isVisible && /* @__PURE__ */ jsx48(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx48(Text, { display: props.usage.fontStyle, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance ? /* @__PURE__ */ jsxs35(Fragment20, { children: [
22470
- typeof limit === "number" && /* @__PURE__ */ jsxs35(Fragment20, { children: [
22603
+ props.usage.isVisible && /* @__PURE__ */ jsx49(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx49(Text, { display: props.usage.fontStyle, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance ? /* @__PURE__ */ jsxs36(Fragment20, { children: [
22604
+ typeof limit === "number" && /* @__PURE__ */ jsxs36(Fragment20, { children: [
22471
22605
  formatNumber(limit),
22472
22606
  " "
22473
22607
  ] }),
22474
22608
  getFeatureName(feature, limit)
22475
- ] }) : typeof usage === "number" && /* @__PURE__ */ jsxs35(Fragment20, { children: [
22609
+ ] }) : typeof usage === "number" && /* @__PURE__ */ jsxs36(Fragment20, { children: [
22476
22610
  formatNumber(usage),
22477
22611
  " ",
22478
22612
  getFeatureName(feature, usage),
22479
22613
  " ",
22480
22614
  t3("used")
22481
22615
  ] }) }) }),
22482
- props.allocation.isVisible && /* @__PURE__ */ jsx48(
22616
+ props.allocation.isVisible && /* @__PURE__ */ jsx49(
22483
22617
  Limit,
22484
22618
  {
22485
22619
  entitlement,
@@ -22493,8 +22627,8 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22493
22627
  ]
22494
22628
  }
22495
22629
  ),
22496
- props.isVisible && priceBehavior !== EntitlementPriceBehavior.PayAsYouGo && priceBehavior !== EntitlementPriceBehavior.CreditBurndown && /* @__PURE__ */ jsx48(Meter, { entitlement }),
22497
- canCheckout && priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ jsx48(
22630
+ props.isVisible && priceBehavior !== EntitlementPriceBehavior.PayAsYouGo && priceBehavior !== EntitlementPriceBehavior.CreditBurndown && /* @__PURE__ */ jsx49(Meter, { entitlement }),
22631
+ canCheckout && priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ jsx49(
22498
22632
  Button,
22499
22633
  {
22500
22634
  type: "button",
@@ -22507,7 +22641,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22507
22641
  )
22508
22642
  ] })
22509
22643
  ] }),
22510
- (priceBehavior === EntitlementPriceBehavior.Overage || priceBehavior === EntitlementPriceBehavior.Tier) && /* @__PURE__ */ jsx48(
22644
+ (priceBehavior === EntitlementPriceBehavior.Overage || priceBehavior === EntitlementPriceBehavior.Tier) && /* @__PURE__ */ jsx49(
22511
22645
  PriceDetails,
22512
22646
  {
22513
22647
  entitlement,
@@ -22521,9 +22655,9 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22521
22655
  }, []),
22522
22656
  showCredits && creditGroups.map((credit, index) => {
22523
22657
  const isExpanded = creditVisibility.find(({ id }) => credit.id === id)?.isExpanded ?? false;
22524
- return /* @__PURE__ */ jsxs35(Element, { as: Flex, $flexDirection: "column", $gap: "1rem", children: [
22525
- /* @__PURE__ */ jsxs35(Flex, { $gap: "1.5rem", children: [
22526
- props.icon.isVisible && /* @__PURE__ */ jsx48(
22658
+ return /* @__PURE__ */ jsxs36(Element, { as: Flex, $flexDirection: "column", $gap: "1rem", children: [
22659
+ /* @__PURE__ */ jsxs36(Flex, { $gap: "1.5rem", children: [
22660
+ props.icon.isVisible && /* @__PURE__ */ jsx49(
22527
22661
  Icon3,
22528
22662
  {
22529
22663
  name: credit.icon,
@@ -22532,13 +22666,13 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22532
22666
  rounded: true
22533
22667
  }
22534
22668
  ),
22535
- /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
22536
- /* @__PURE__ */ jsx48(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
22537
- /* @__PURE__ */ jsx48(Box, { children: /* @__PURE__ */ jsx48(Text, { display: props.header.fontStyle, children: credit.name }) }),
22538
- props.description.isVisible && credit.description && /* @__PURE__ */ jsx48(Box, { children: /* @__PURE__ */ jsx48(Text, { display: props.description.fontStyle, children: credit.description }) })
22669
+ /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: 1, children: [
22670
+ /* @__PURE__ */ jsx49(Flex, { $flexWrap: "wrap", $gap: "1rem", children: /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: 1, children: [
22671
+ /* @__PURE__ */ jsx49(Box, { children: /* @__PURE__ */ jsx49(Text, { display: props.header.fontStyle, children: credit.name }) }),
22672
+ props.description.isVisible && credit.description && /* @__PURE__ */ jsx49(Box, { children: /* @__PURE__ */ jsx49(Text, { display: props.description.fontStyle, children: credit.description }) })
22539
22673
  ] }) }),
22540
- /* @__PURE__ */ jsxs35(Flex, { $gap: "1rem", children: [
22541
- /* @__PURE__ */ jsx48(
22674
+ /* @__PURE__ */ jsxs36(Flex, { $gap: "1rem", children: [
22675
+ /* @__PURE__ */ jsx49(
22542
22676
  ProgressBar,
22543
22677
  {
22544
22678
  progress: credit.total.used / credit.total.value * 100,
@@ -22549,7 +22683,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22549
22683
  )]
22550
22684
  }
22551
22685
  ),
22552
- canCheckout && /* @__PURE__ */ jsx48(
22686
+ canCheckout && /* @__PURE__ */ jsx49(
22553
22687
  Button,
22554
22688
  {
22555
22689
  type: "button",
@@ -22564,12 +22698,12 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22564
22698
  ] })
22565
22699
  ] })
22566
22700
  ] }),
22567
- /* @__PURE__ */ jsx48(
22701
+ /* @__PURE__ */ jsx49(
22568
22702
  Box,
22569
22703
  {
22570
22704
  $width: `calc(100% + ${2 * settings.theme.card.padding / TEXT_BASE_SIZE}rem)`,
22571
22705
  $margin: `0 0 0 -${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
22572
- children: /* @__PURE__ */ jsx48(
22706
+ children: /* @__PURE__ */ jsx49(
22573
22707
  TransitionBox,
22574
22708
  {
22575
22709
  $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0375)" : "hsla(0, 0%, 100%, 0.075)",
@@ -22577,19 +22711,19 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22577
22711
  children: credit.grants.map((grant, index2) => {
22578
22712
  const paddingX = settings.theme.card.padding / TEXT_BASE_SIZE;
22579
22713
  const padding = index2 > 0 ? `0 ${paddingX}rem 1rem` : `1rem ${paddingX}rem`;
22580
- return /* @__PURE__ */ jsx48(Box, { $display: "table-row", children: grant.grantReason === BillingCreditGrantReason.Plan ? /* @__PURE__ */ jsxs35(Fragment20, { children: [
22581
- /* @__PURE__ */ jsx48(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx48(Text, { children: t3("X items included in plan", {
22714
+ return /* @__PURE__ */ jsx49(Box, { $display: "table-row", children: grant.grantReason === BillingCreditGrantReason.Plan ? /* @__PURE__ */ jsxs36(Fragment20, { children: [
22715
+ /* @__PURE__ */ jsx49(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx49(Text, { children: t3("X items included in plan", {
22582
22716
  amount: grant.quantity,
22583
22717
  item: getFeatureName(credit, grant.quantity)
22584
22718
  }) }) }),
22585
- /* @__PURE__ */ jsx48(
22719
+ /* @__PURE__ */ jsx49(
22586
22720
  Box,
22587
22721
  {
22588
22722
  $display: "table-cell",
22589
22723
  $padding: padding,
22590
22724
  $textAlign: "right",
22591
22725
  $whiteSpace: "nowrap",
22592
- children: grant.expiresAt && /* @__PURE__ */ jsx48(Text, { children: t3("Resets", {
22726
+ children: grant.expiresAt && /* @__PURE__ */ jsx49(Text, { children: t3("Resets", {
22593
22727
  date: toPrettyDate(
22594
22728
  modifyDate(grant.expiresAt, 1),
22595
22729
  {
@@ -22601,8 +22735,8 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22601
22735
  }) })
22602
22736
  }
22603
22737
  )
22604
- ] }) : /* @__PURE__ */ jsxs35(Fragment20, { children: [
22605
- /* @__PURE__ */ jsx48(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx48(Text, { children: grant.grantReason === BillingCreditGrantReason.Purchased ? /* @__PURE__ */ jsx48(Fragment20, { children: t3("X item bundle", {
22738
+ ] }) : /* @__PURE__ */ jsxs36(Fragment20, { children: [
22739
+ /* @__PURE__ */ jsx49(Box, { $display: "table-cell", $padding: padding, children: /* @__PURE__ */ jsx49(Text, { children: grant.grantReason === BillingCreditGrantReason.Purchased ? /* @__PURE__ */ jsx49(Fragment20, { children: t3("X item bundle", {
22606
22740
  amount: grant.quantity,
22607
22741
  item: getFeatureName(credit, 1),
22608
22742
  createdAt: toPrettyDate(grant.createdAt, {
@@ -22610,7 +22744,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22610
22744
  month: "2-digit",
22611
22745
  year: "2-digit"
22612
22746
  })
22613
- }) }) : grant.grantReason === BillingCreditGrantReason.BillingCreditAutoTopup ? /* @__PURE__ */ jsx48(Fragment20, { children: t3("X item auto-topup", {
22747
+ }) }) : grant.grantReason === BillingCreditGrantReason.BillingCreditAutoTopup ? /* @__PURE__ */ jsx49(Fragment20, { children: t3("X item auto-topup", {
22614
22748
  amount: grant.quantity,
22615
22749
  item: getFeatureName(
22616
22750
  credit,
@@ -22621,7 +22755,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22621
22755
  month: "2-digit",
22622
22756
  year: "2-digit"
22623
22757
  })
22624
- }) }) : /* @__PURE__ */ jsx48(Fragment20, { children: t3("X item grant", {
22758
+ }) }) : /* @__PURE__ */ jsx49(Fragment20, { children: t3("X item grant", {
22625
22759
  amount: grant.quantity,
22626
22760
  item: getFeatureName(
22627
22761
  credit,
@@ -22633,14 +22767,14 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22633
22767
  year: "2-digit"
22634
22768
  })
22635
22769
  }) }) }) }),
22636
- /* @__PURE__ */ jsx48(
22770
+ /* @__PURE__ */ jsx49(
22637
22771
  Box,
22638
22772
  {
22639
22773
  $display: "table-cell",
22640
22774
  $padding: padding,
22641
22775
  $textAlign: "right",
22642
22776
  $whiteSpace: "nowrap",
22643
- children: grant.expiresAt && /* @__PURE__ */ jsx48(Text, { children: t3("Expires", {
22777
+ children: grant.expiresAt && /* @__PURE__ */ jsx49(Text, { children: t3("Expires", {
22644
22778
  date: toPrettyDate(
22645
22779
  modifyDate(grant.expiresAt, 1),
22646
22780
  {
@@ -22658,8 +22792,8 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22658
22792
  )
22659
22793
  }
22660
22794
  ),
22661
- /* @__PURE__ */ jsxs35(Flex, { $gap: "0.25rem", children: [
22662
- /* @__PURE__ */ jsx48(
22795
+ /* @__PURE__ */ jsxs36(Flex, { $gap: "0.25rem", children: [
22796
+ /* @__PURE__ */ jsx49(
22663
22797
  Icon3,
22664
22798
  {
22665
22799
  name: "chevron-down",
@@ -22670,7 +22804,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
22670
22804
  }
22671
22805
  }
22672
22806
  ),
22673
- /* @__PURE__ */ jsx48(
22807
+ /* @__PURE__ */ jsx49(
22674
22808
  Text,
22675
22809
  {
22676
22810
  onClick: () => toggleBalanceDetails(credit.id),
@@ -22690,7 +22824,7 @@ import { forwardRef as forwardRef13, useMemo as useMemo24 } from "react";
22690
22824
 
22691
22825
  // src/components/elements/payment-method/PaymentMethodElement.tsx
22692
22826
  import { useMemo as useMemo23 } from "react";
22693
- import { jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
22827
+ import { jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
22694
22828
  var PaymentElement2 = ({
22695
22829
  iconName,
22696
22830
  iconTitle,
@@ -22698,8 +22832,8 @@ var PaymentElement2 = ({
22698
22832
  paymentLast4
22699
22833
  }) => {
22700
22834
  const { settings } = useEmbed();
22701
- return /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
22702
- iconName && /* @__PURE__ */ jsx49(
22835
+ return /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "row", $alignItems: "center", $gap: "0.5rem", children: [
22836
+ iconName && /* @__PURE__ */ jsx50(
22703
22837
  Icon3,
22704
22838
  {
22705
22839
  name: iconName,
@@ -22707,15 +22841,15 @@ var PaymentElement2 = ({
22707
22841
  color: settings.theme.typography.text.color
22708
22842
  }
22709
22843
  ),
22710
- (label || paymentLast4) && /* @__PURE__ */ jsxs36(Box, { $flexGrow: 1, children: [
22711
- label && /* @__PURE__ */ jsx49(Text, { children: label }),
22844
+ (label || paymentLast4) && /* @__PURE__ */ jsxs37(Box, { $flexGrow: 1, children: [
22845
+ label && /* @__PURE__ */ jsx50(Text, { children: label }),
22712
22846
  " ",
22713
- paymentLast4 && /* @__PURE__ */ jsx49(Text, { children: paymentLast4 })
22847
+ paymentLast4 && /* @__PURE__ */ jsx50(Text, { children: paymentLast4 })
22714
22848
  ] })
22715
22849
  ] });
22716
22850
  };
22717
22851
  var EmptyPaymentElement = () => {
22718
- return /* @__PURE__ */ jsx49(Text, { children: /* @__PURE__ */ jsx49(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx49(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx49(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
22852
+ return /* @__PURE__ */ jsx50(Text, { children: /* @__PURE__ */ jsx50(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx50(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx50(Box, { $lineHeight: 1, children: t("No payment method added yet") }) }) }) });
22719
22853
  };
22720
22854
  var getPaymentMethodData = ({
22721
22855
  accountLast4,
@@ -22781,12 +22915,12 @@ var PaymentMethodElement = ({
22781
22915
  const { t: t3 } = useTranslation();
22782
22916
  const isLightBackground = useIsLightBackground();
22783
22917
  const sizeFactor = size === "lg" ? 1.5 : size === "md" ? 1 : 0.5;
22784
- return /* @__PURE__ */ jsxs36(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
22785
- props.header.isVisible && /* @__PURE__ */ jsxs36(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
22786
- /* @__PURE__ */ jsx49(Text, { display: props.header.fontStyle, children: t3("Payment Method") }),
22787
- props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx49(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t3("Expires in X months", { months: monthsToExpiration }) : t3("Expired") })
22918
+ return /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "column", $gap: `${sizeFactor}rem`, children: [
22919
+ props.header.isVisible && /* @__PURE__ */ jsxs37(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
22920
+ /* @__PURE__ */ jsx50(Text, { display: props.header.fontStyle, children: t3("Payment Method") }),
22921
+ props.functions.showExpiration && typeof monthsToExpiration === "number" && monthsToExpiration < 4 && /* @__PURE__ */ jsx50(Text, { $size: 14, $color: "#DB6769", children: monthsToExpiration > 0 ? t3("Expires in X months", { months: monthsToExpiration }) : t3("Expired") })
22788
22922
  ] }),
22789
- /* @__PURE__ */ jsxs36(
22923
+ /* @__PURE__ */ jsxs37(
22790
22924
  Flex,
22791
22925
  {
22792
22926
  $justifyContent: "space-between",
@@ -22795,8 +22929,8 @@ var PaymentMethodElement = ({
22795
22929
  $padding: `${sizeFactor / 2.25}rem ${sizeFactor}rem`,
22796
22930
  $borderRadius: "9999px",
22797
22931
  children: [
22798
- paymentMethod ? /* @__PURE__ */ jsx49(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ jsx49(EmptyPaymentElement, {}),
22799
- onRemove && /* @__PURE__ */ jsx49(
22932
+ paymentMethod ? /* @__PURE__ */ jsx50(PaymentElement2, { ...getPaymentMethodData(paymentMethod) }) : /* @__PURE__ */ jsx50(EmptyPaymentElement, {}),
22933
+ onRemove && /* @__PURE__ */ jsx50(
22800
22934
  Text,
22801
22935
  {
22802
22936
  onClick: onRemove,
@@ -22806,7 +22940,7 @@ var PaymentMethodElement = ({
22806
22940
  children: t3("Remove")
22807
22941
  }
22808
22942
  ),
22809
- props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx49(
22943
+ props.functions.allowEdit && onEdit && /* @__PURE__ */ jsx50(
22810
22944
  Text,
22811
22945
  {
22812
22946
  onClick: onEdit,
@@ -22840,7 +22974,7 @@ var PaymentListElement = ({
22840
22974
  }
22841
22975
  return `${cardExpMonth}/${formatedYear}`;
22842
22976
  }, [paymentMethod]);
22843
- return /* @__PURE__ */ jsxs36(
22977
+ return /* @__PURE__ */ jsxs37(
22844
22978
  Flex,
22845
22979
  {
22846
22980
  $flexDirection: "row",
@@ -22852,7 +22986,7 @@ var PaymentListElement = ({
22852
22986
  $borderStyle: "solid",
22853
22987
  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
22854
22988
  children: [
22855
- iconName && /* @__PURE__ */ jsx49(
22989
+ iconName && /* @__PURE__ */ jsx50(
22856
22990
  Icon3,
22857
22991
  {
22858
22992
  name: iconName,
@@ -22860,20 +22994,20 @@ var PaymentListElement = ({
22860
22994
  color: settings.theme.typography.text.color
22861
22995
  }
22862
22996
  ),
22863
- (label || paymentLast4) && /* @__PURE__ */ jsxs36(Box, { $flexGrow: 1, children: [
22864
- label && /* @__PURE__ */ jsx49(Text, { children: label }),
22997
+ (label || paymentLast4) && /* @__PURE__ */ jsxs37(Box, { $flexGrow: 1, children: [
22998
+ label && /* @__PURE__ */ jsx50(Text, { children: label }),
22865
22999
  " ",
22866
- paymentLast4 && /* @__PURE__ */ jsx49(Text, { children: paymentLast4 })
23000
+ paymentLast4 && /* @__PURE__ */ jsx50(Text, { children: paymentLast4 })
22867
23001
  ] }),
22868
- expirationDate && /* @__PURE__ */ jsx49(
23002
+ expirationDate && /* @__PURE__ */ jsx50(
22869
23003
  Box,
22870
23004
  {
22871
23005
  $flexGrow: 1,
22872
23006
  $color: isLightBackground ? "hsla(0, 0%, 0%, 0.375)" : "hsla(0, 0%, 100%, 0.375)",
22873
- children: /* @__PURE__ */ jsx49(Text, { children: t("Expires", { date: expirationDate }) })
23007
+ children: /* @__PURE__ */ jsx50(Text, { children: t("Expires", { date: expirationDate }) })
22874
23008
  }
22875
23009
  ),
22876
- /* @__PURE__ */ jsx49(Box, { children: /* @__PURE__ */ jsx49(
23010
+ /* @__PURE__ */ jsx50(Box, { children: /* @__PURE__ */ jsx50(
22877
23011
  Text,
22878
23012
  {
22879
23013
  onClick: () => {
@@ -22886,7 +23020,7 @@ var PaymentListElement = ({
22886
23020
  children: t("Set default")
22887
23021
  }
22888
23022
  ) }),
22889
- /* @__PURE__ */ jsx49(
23023
+ /* @__PURE__ */ jsx50(
22890
23024
  Icon3,
22891
23025
  {
22892
23026
  tabIndex: 0,
@@ -22908,7 +23042,7 @@ var PaymentListElement = ({
22908
23042
  };
22909
23043
 
22910
23044
  // src/components/elements/payment-method/PaymentMethod.tsx
22911
- import { jsx as jsx50 } from "react/jsx-runtime";
23045
+ import { jsx as jsx51 } from "react/jsx-runtime";
22912
23046
  var resolveDesignProps5 = (props) => {
22913
23047
  return {
22914
23048
  header: {
@@ -22943,7 +23077,7 @@ var PaymentMethod = forwardRef13(({ children, className, portal, allowEdit = tru
22943
23077
  monthsToExpiration: monthsToExpiration2
22944
23078
  };
22945
23079
  }, [data?.company?.defaultPaymentMethod, data?.subscription?.paymentMethod]);
22946
- return /* @__PURE__ */ jsx50(Element, { ref, className, children: /* @__PURE__ */ jsx50(
23080
+ return /* @__PURE__ */ jsx51(Element, { ref, className, children: /* @__PURE__ */ jsx51(
22947
23081
  PaymentMethodElement,
22948
23082
  {
22949
23083
  paymentMethod,
@@ -23012,7 +23146,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
23012
23146
  }
23013
23147
  stripe._registerWrapper({
23014
23148
  name: "stripe-js",
23015
- version: "9.6.0",
23149
+ version: "9.7.0",
23016
23150
  startTime
23017
23151
  });
23018
23152
  };
@@ -23090,7 +23224,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
23090
23224
  var version = runtimeVersionToUrlVersion(maybeStripe.version);
23091
23225
  var expectedVersion = RELEASE_TRAIN;
23092
23226
  if (isTestKey && version !== expectedVersion) {
23093
- console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("9.6.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
23227
+ console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("9.7.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
23094
23228
  }
23095
23229
  var stripe = maybeStripe.apply(void 0, args);
23096
23230
  registerWrapper(stripe, startTime);
@@ -23128,7 +23262,7 @@ var loadStripe = function loadStripe2() {
23128
23262
 
23129
23263
  // src/components/elements/payment-method/PaymentMethodDetails.tsx
23130
23264
  import { useCallback as useCallback13, useEffect as useEffect7, useMemo as useMemo25, useState as useState18 } from "react";
23131
- import { jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
23265
+ import { jsx as jsx52, jsxs as jsxs38 } from "react/jsx-runtime";
23132
23266
  var resolveDesignProps6 = () => {
23133
23267
  return {
23134
23268
  header: {
@@ -23300,7 +23434,7 @@ var PaymentMethodDetails = ({
23300
23434
  showPaymentForm,
23301
23435
  initializePaymentMethod
23302
23436
  ]);
23303
- return /* @__PURE__ */ jsxs37(
23437
+ return /* @__PURE__ */ jsxs38(
23304
23438
  Flex,
23305
23439
  {
23306
23440
  $position: "relative",
@@ -23308,7 +23442,7 @@ var PaymentMethodDetails = ({
23308
23442
  $flexGrow: 1,
23309
23443
  $gap: "1.5rem",
23310
23444
  children: [
23311
- /* @__PURE__ */ jsx51(
23445
+ /* @__PURE__ */ jsx52(
23312
23446
  Flex,
23313
23447
  {
23314
23448
  $position: "absolute",
@@ -23317,7 +23451,7 @@ var PaymentMethodDetails = ({
23317
23451
  $alignItems: "center",
23318
23452
  $width: "100%",
23319
23453
  $height: "100%",
23320
- children: /* @__PURE__ */ jsx51(
23454
+ children: /* @__PURE__ */ jsx52(
23321
23455
  Loader,
23322
23456
  {
23323
23457
  $color: settings.theme.primary,
@@ -23327,7 +23461,7 @@ var PaymentMethodDetails = ({
23327
23461
  )
23328
23462
  }
23329
23463
  ),
23330
- /* @__PURE__ */ jsxs37(
23464
+ /* @__PURE__ */ jsxs38(
23331
23465
  Flex,
23332
23466
  {
23333
23467
  $zIndex: isLoading || isConfirmingPayment ? 0 : 1,
@@ -23344,7 +23478,7 @@ var PaymentMethodDetails = ({
23344
23478
  }
23345
23479
  },
23346
23480
  children: [
23347
- setupIntent && showPaymentForm && stripe ? /* @__PURE__ */ jsxs37(
23481
+ setupIntent && showPaymentForm && stripe ? /* @__PURE__ */ jsxs38(
23348
23482
  Elements,
23349
23483
  {
23350
23484
  stripe,
@@ -23374,7 +23508,7 @@ var PaymentMethodDetails = ({
23374
23508
  clientSecret: setupIntent?.setupIntentClientSecret
23375
23509
  },
23376
23510
  children: [
23377
- /* @__PURE__ */ jsx51(
23511
+ /* @__PURE__ */ jsx52(
23378
23512
  PaymentForm,
23379
23513
  {
23380
23514
  financeData,
@@ -23385,7 +23519,7 @@ var PaymentMethodDetails = ({
23385
23519
  }
23386
23520
  }
23387
23521
  ),
23388
- currentPaymentMethod && /* @__PURE__ */ jsx51(Box, { children: /* @__PURE__ */ jsx51(
23522
+ currentPaymentMethod && /* @__PURE__ */ jsx52(Box, { children: /* @__PURE__ */ jsx52(
23389
23523
  Text,
23390
23524
  {
23391
23525
  onClick: focusExistingPaymentMethods,
@@ -23398,8 +23532,8 @@ var PaymentMethodDetails = ({
23398
23532
  ) })
23399
23533
  ]
23400
23534
  }
23401
- ) : /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "column", $gap: "2rem", children: [
23402
- /* @__PURE__ */ jsx51(
23535
+ ) : /* @__PURE__ */ jsxs38(Flex, { $flexDirection: "column", $gap: "2rem", children: [
23536
+ /* @__PURE__ */ jsx52(
23403
23537
  PaymentMethodElement,
23404
23538
  {
23405
23539
  paymentMethod: currentPaymentMethod,
@@ -23412,8 +23546,8 @@ var PaymentMethodDetails = ({
23412
23546
  ...props
23413
23547
  }
23414
23548
  ),
23415
- paymentMethods.length > 0 && /* @__PURE__ */ jsxs37(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
23416
- /* @__PURE__ */ jsx51(
23549
+ paymentMethods.length > 0 && /* @__PURE__ */ jsxs38(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
23550
+ /* @__PURE__ */ jsx52(
23417
23551
  Text,
23418
23552
  {
23419
23553
  onClick: toggleShowPaymentMethods,
@@ -23424,7 +23558,7 @@ var PaymentMethodDetails = ({
23424
23558
  children: t3("Choose different payment method")
23425
23559
  }
23426
23560
  ),
23427
- /* @__PURE__ */ jsx51(
23561
+ /* @__PURE__ */ jsx52(
23428
23562
  Icon3,
23429
23563
  {
23430
23564
  name: showDifferentPaymentMethods ? "chevron-up" : "chevron-down",
@@ -23432,10 +23566,10 @@ var PaymentMethodDetails = ({
23432
23566
  }
23433
23567
  )
23434
23568
  ] }),
23435
- showDifferentPaymentMethods && /* @__PURE__ */ jsxs37(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
23436
- paymentMethods.length > 1 && /* @__PURE__ */ jsx51(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
23569
+ showDifferentPaymentMethods && /* @__PURE__ */ jsxs38(Flex, { $flexDirection: "column", $gap: "2rem", $marginTop: "-1rem", children: [
23570
+ paymentMethods.length > 1 && /* @__PURE__ */ jsx52(Flex, { $flexDirection: "column", $overflow: "auto", children: (paymentMethods.filter(
23437
23571
  (paymentMethod) => paymentMethod.id !== currentPaymentMethod?.id
23438
- ) || []).map((paymentMethod) => /* @__PURE__ */ jsx51(
23572
+ ) || []).map((paymentMethod) => /* @__PURE__ */ jsx52(
23439
23573
  PaymentListElement,
23440
23574
  {
23441
23575
  paymentMethod,
@@ -23444,7 +23578,7 @@ var PaymentMethodDetails = ({
23444
23578
  },
23445
23579
  paymentMethod.id
23446
23580
  )) }),
23447
- /* @__PURE__ */ jsx51(
23581
+ /* @__PURE__ */ jsx52(
23448
23582
  Button,
23449
23583
  {
23450
23584
  type: "button",
@@ -23459,7 +23593,7 @@ var PaymentMethodDetails = ({
23459
23593
  )
23460
23594
  ] })
23461
23595
  ] }),
23462
- !isLoading && error && /* @__PURE__ */ jsx51(Box, { children: /* @__PURE__ */ jsx51(Text, { $weight: 500, $color: "#DB6669", children: error }) })
23596
+ !isLoading && error && /* @__PURE__ */ jsx52(Box, { children: /* @__PURE__ */ jsx52(Text, { $weight: 500, $color: "#DB6669", children: error }) })
23463
23597
  ]
23464
23598
  }
23465
23599
  )
@@ -23472,10 +23606,10 @@ var PaymentMethodDetails = ({
23472
23606
  import { forwardRef as forwardRef14, useMemo as useMemo27 } from "react";
23473
23607
 
23474
23608
  // src/components/elements/plan-manager/AddOn.tsx
23475
- import { jsx as jsx52, jsxs as jsxs38 } from "react/jsx-runtime";
23609
+ import { jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
23476
23610
  var AddOn = ({ addOn, currency, period, layout }) => {
23477
23611
  const resolvedPeriod = addOn.planPeriod === "one-time" ? addOn.planPeriod : period ?? addOn.planPeriod;
23478
- return /* @__PURE__ */ jsxs38(
23612
+ return /* @__PURE__ */ jsxs39(
23479
23613
  Flex,
23480
23614
  {
23481
23615
  $justifyContent: "space-between",
@@ -23483,10 +23617,10 @@ var AddOn = ({ addOn, currency, period, layout }) => {
23483
23617
  $flexWrap: "wrap",
23484
23618
  $gap: "1rem",
23485
23619
  children: [
23486
- /* @__PURE__ */ jsx52(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
23487
- typeof addOn.planPrice === "number" && resolvedPeriod && /* @__PURE__ */ jsxs38(Text, { children: [
23620
+ /* @__PURE__ */ jsx53(Text, { display: layout.addOns.fontStyle, children: addOn.name }),
23621
+ typeof addOn.planPrice === "number" && resolvedPeriod && /* @__PURE__ */ jsxs39(Text, { children: [
23488
23622
  formatCurrency(addOn.planPrice, currency),
23489
- /* @__PURE__ */ jsx52("sub", { children: resolvedPeriod === "one-time" ? shortenPeriod(resolvedPeriod) : `/${shortenPeriod(resolvedPeriod)}` })
23623
+ /* @__PURE__ */ jsx53("sub", { children: resolvedPeriod === "one-time" ? shortenPeriod(resolvedPeriod) : `/${shortenPeriod(resolvedPeriod)}` })
23490
23624
  ] })
23491
23625
  ]
23492
23626
  }
@@ -23495,7 +23629,7 @@ var AddOn = ({ addOn, currency, period, layout }) => {
23495
23629
 
23496
23630
  // src/components/elements/plan-manager/UsageDetails.tsx
23497
23631
  import { Fragment as Fragment21, useMemo as useMemo26 } from "react";
23498
- import { Fragment as Fragment22, jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
23632
+ import { Fragment as Fragment22, jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
23499
23633
  var UsageDetails2 = ({
23500
23634
  entitlement,
23501
23635
  period,
@@ -23517,30 +23651,30 @@ var UsageDetails2 = ({
23517
23651
  const acc = [];
23518
23652
  let index = 0;
23519
23653
  if (entitlement.priceBehavior === EntitlementPriceBehavior.Overage) {
23520
- acc.push(/* @__PURE__ */ jsxs39(Fragment21, { children: [
23654
+ acc.push(/* @__PURE__ */ jsxs40(Fragment21, { children: [
23521
23655
  t3("Additional"),
23522
23656
  ": "
23523
23657
  ] }, index));
23524
23658
  index += 1;
23525
23659
  }
23526
23660
  if (entitlement.priceBehavior === EntitlementPriceBehavior.Tier) {
23527
- acc.push(/* @__PURE__ */ jsx53(Fragment21, { children: t3("Tier-based") }, index));
23661
+ acc.push(/* @__PURE__ */ jsx54(Fragment21, { children: t3("Tier-based") }, index));
23528
23662
  index += 1;
23529
23663
  }
23530
23664
  const { price } = getEntitlementPrice(entitlement, period, currency) || {};
23531
23665
  if ((entitlement.priceBehavior === EntitlementPriceBehavior.PayAsYouGo || entitlement.priceBehavior === EntitlementPriceBehavior.Overage) && entitlement.feature && typeof price === "number") {
23532
23666
  const packageSize = billingPrice?.packageSize ?? 1;
23533
23667
  acc.push(
23534
- /* @__PURE__ */ jsxs39(Fragment21, { children: [
23668
+ /* @__PURE__ */ jsxs40(Fragment21, { children: [
23535
23669
  formatCurrency(price, billingPrice?.currency),
23536
- /* @__PURE__ */ jsxs39("sub", { children: [
23670
+ /* @__PURE__ */ jsxs40("sub", { children: [
23537
23671
  "/",
23538
- packageSize > 1 && /* @__PURE__ */ jsxs39(Fragment22, { children: [
23672
+ packageSize > 1 && /* @__PURE__ */ jsxs40(Fragment22, { children: [
23539
23673
  packageSize,
23540
23674
  " "
23541
23675
  ] }),
23542
23676
  getFeatureName(entitlement.feature, packageSize),
23543
- entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs39(Fragment22, { children: [
23677
+ entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs40(Fragment22, { children: [
23544
23678
  "/",
23545
23679
  shortenPeriod(period)
23546
23680
  ] })
@@ -23551,7 +23685,7 @@ var UsageDetails2 = ({
23551
23685
  }
23552
23686
  if (showCredits && entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && entitlement.planEntitlement?.consumptionRate && entitlement.planEntitlement?.valueCredit) {
23553
23687
  acc.push(
23554
- /* @__PURE__ */ jsxs39(Fragment21, { children: [
23688
+ /* @__PURE__ */ jsxs40(Fragment21, { children: [
23555
23689
  entitlement.planEntitlement.consumptionRate,
23556
23690
  " ",
23557
23691
  getFeatureName(
@@ -23579,7 +23713,7 @@ var UsageDetails2 = ({
23579
23713
  return null;
23580
23714
  }
23581
23715
  const quantity = entitlement.priceBehavior !== EntitlementPriceBehavior.CreditBurndown ? limit : void 0;
23582
- return /* @__PURE__ */ jsxs39(
23716
+ return /* @__PURE__ */ jsxs40(
23583
23717
  Flex,
23584
23718
  {
23585
23719
  $justifyContent: "space-between",
@@ -23587,13 +23721,13 @@ var UsageDetails2 = ({
23587
23721
  $flexWrap: "wrap",
23588
23722
  $gap: "0.5rem",
23589
23723
  children: [
23590
- /* @__PURE__ */ jsx53(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" ? /* @__PURE__ */ jsxs39(Fragment22, { children: [
23724
+ /* @__PURE__ */ jsx54(Text, { display: layout.addOns.fontStyle, children: typeof quantity === "number" ? /* @__PURE__ */ jsxs40(Fragment22, { children: [
23591
23725
  quantity,
23592
23726
  " ",
23593
23727
  getFeatureName(entitlement.feature, quantity, true)
23594
23728
  ] }) : entitlement.feature.name }),
23595
- /* @__PURE__ */ jsxs39(Text, { children: [
23596
- description.length > 0 && /* @__PURE__ */ jsx53(
23729
+ /* @__PURE__ */ jsxs40(Text, { children: [
23730
+ description.length > 0 && /* @__PURE__ */ jsx54(
23597
23731
  Text,
23598
23732
  {
23599
23733
  style: { opacity: 0.54 },
@@ -23604,15 +23738,15 @@ var UsageDetails2 = ({
23604
23738
  ),
23605
23739
  // only show cost for pay-in-advance entitlements
23606
23740
  // `description` will include price for other price behaviors
23607
- entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ jsxs39(Fragment22, { children: [
23741
+ entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ jsxs40(Fragment22, { children: [
23608
23742
  " ",
23609
23743
  formatCurrency(cost, billingPrice?.currency),
23610
- entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs39("sub", { children: [
23744
+ entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs40("sub", { children: [
23611
23745
  "/",
23612
23746
  shortenPeriod(period)
23613
23747
  ] })
23614
23748
  ] }),
23615
- entitlement.priceBehavior === EntitlementPriceBehavior.Tier && /* @__PURE__ */ jsx53(
23749
+ entitlement.priceBehavior === EntitlementPriceBehavior.Tier && /* @__PURE__ */ jsx54(
23616
23750
  PricingTiersTooltip,
23617
23751
  {
23618
23752
  feature: entitlement.feature,
@@ -23622,7 +23756,7 @@ var UsageDetails2 = ({
23622
23756
  tiersMode: billingPrice?.tiersMode ?? void 0
23623
23757
  }
23624
23758
  ),
23625
- entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx53(
23759
+ entitlementHasHardLimit(entitlement) && entitlement.allocationType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx54(
23626
23760
  HardLimitTooltip,
23627
23761
  {
23628
23762
  feature: entitlement.feature,
@@ -23636,7 +23770,7 @@ var UsageDetails2 = ({
23636
23770
  };
23637
23771
 
23638
23772
  // src/components/elements/plan-manager/PlanManager.tsx
23639
- import { Fragment as Fragment23, jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
23773
+ import { Fragment as Fragment23, jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
23640
23774
  var resolveDesignProps7 = (props) => {
23641
23775
  return {
23642
23776
  header: {
@@ -23758,8 +23892,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23758
23892
  const hasAutoTopupSelfService = currentPlan?.includedCreditGrants.some((grant) => {
23759
23893
  return grant.billingCreditAutoTopupSelfService;
23760
23894
  }) ?? false;
23761
- return /* @__PURE__ */ jsxs40(Fragment23, { children: [
23762
- isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs40(
23895
+ return /* @__PURE__ */ jsxs41(Fragment23, { children: [
23896
+ isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs41(
23763
23897
  Notice,
23764
23898
  {
23765
23899
  as: Flex,
@@ -23769,8 +23903,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23769
23903
  $textAlign: "center",
23770
23904
  $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
23771
23905
  children: [
23772
- typeof trialEnd.endDate !== "undefined" && /* @__PURE__ */ jsx54(Text, { as: "h3", display: "heading3", children: t3("Trial ends in", trialEnd) }),
23773
- (trialPaymentMethodRequired || postTrialPlan || currentPlan) && /* @__PURE__ */ jsx54(
23906
+ typeof trialEnd.endDate !== "undefined" && /* @__PURE__ */ jsx55(Text, { as: "h3", display: "heading3", children: t3("Trial ends in", trialEnd) }),
23907
+ (trialPaymentMethodRequired || postTrialPlan || currentPlan) && /* @__PURE__ */ jsx55(
23774
23908
  Text,
23775
23909
  {
23776
23910
  as: "p",
@@ -23784,7 +23918,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23784
23918
  )
23785
23919
  ]
23786
23920
  }
23787
- ) : willSubscriptionCancel ? /* @__PURE__ */ jsxs40(
23921
+ ) : willSubscriptionCancel ? /* @__PURE__ */ jsxs41(
23788
23922
  Notice,
23789
23923
  {
23790
23924
  as: Flex,
@@ -23794,8 +23928,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23794
23928
  $textAlign: "center",
23795
23929
  $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
23796
23930
  children: [
23797
- /* @__PURE__ */ jsx54(Text, { as: "h3", display: "heading3", children: t3("Subscription canceled") }),
23798
- typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ jsx54(
23931
+ /* @__PURE__ */ jsx55(Text, { as: "h3", display: "heading3", children: t3("Subscription canceled") }),
23932
+ typeof billingSubscription?.cancelAt === "number" && /* @__PURE__ */ jsx55(
23799
23933
  Text,
23800
23934
  {
23801
23935
  as: "p",
@@ -23813,7 +23947,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23813
23947
  )
23814
23948
  ]
23815
23949
  }
23816
- ) : customPlanBilling ? /* @__PURE__ */ jsxs40(
23950
+ ) : customPlanBilling ? /* @__PURE__ */ jsxs41(
23817
23951
  Notice,
23818
23952
  {
23819
23953
  as: Flex,
@@ -23823,7 +23957,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23823
23957
  $textAlign: "center",
23824
23958
  $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
23825
23959
  children: [
23826
- /* @__PURE__ */ jsx54(Text, { as: "h3", display: "heading3", children: customPlanBilling.isAwaitingActivation ? t3("Custom plan awaiting payment", {
23960
+ /* @__PURE__ */ jsx55(Text, { as: "h3", display: "heading3", children: customPlanBilling.isAwaitingActivation ? t3("Custom plan awaiting payment", {
23827
23961
  plan: customPlanBilling.planName ?? t3("your plan")
23828
23962
  }) : t3("Custom plan payment due", {
23829
23963
  plan: customPlanBilling.planName ?? t3("your plan"),
@@ -23831,7 +23965,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23831
23965
  month: "numeric"
23832
23966
  })
23833
23967
  }) }),
23834
- /* @__PURE__ */ jsx54(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: customPlanBilling.isAwaitingActivation ? t3("Custom plan awaiting payment description", {
23968
+ /* @__PURE__ */ jsx55(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: customPlanBilling.isAwaitingActivation ? t3("Custom plan awaiting payment description", {
23835
23969
  date: toPrettyDate(customPlanBilling.deadline, {
23836
23970
  month: "numeric"
23837
23971
  })
@@ -23841,7 +23975,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23841
23975
  month: "numeric"
23842
23976
  })
23843
23977
  }) }),
23844
- customPlanBilling.billing.stripeInvoiceUrl && /* @__PURE__ */ jsx54(
23978
+ customPlanBilling.billing.stripeInvoiceUrl && /* @__PURE__ */ jsx55(
23845
23979
  Button,
23846
23980
  {
23847
23981
  as: "a",
@@ -23855,7 +23989,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23855
23989
  )
23856
23990
  ]
23857
23991
  }
23858
- ) : data?.company?.scheduledDowngrade?.toPlanName && /* @__PURE__ */ jsxs40(
23992
+ ) : data?.company?.scheduledDowngrade?.toPlanName && /* @__PURE__ */ jsxs41(
23859
23993
  Notice,
23860
23994
  {
23861
23995
  as: Flex,
@@ -23865,10 +23999,10 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23865
23999
  $textAlign: "center",
23866
24000
  $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
23867
24001
  children: [
23868
- /* @__PURE__ */ jsx54(Text, { as: "h3", display: "heading3", children: t3("Downgrade to plan scheduled", {
24002
+ /* @__PURE__ */ jsx55(Text, { as: "h3", display: "heading3", children: t3("Downgrade to plan scheduled", {
23869
24003
  plan: data.company.scheduledDowngrade.toPlanName
23870
24004
  }) }),
23871
- typeof billingSubscription?.periodEnd === "number" && /* @__PURE__ */ jsx54(
24005
+ typeof billingSubscription?.periodEnd === "number" && /* @__PURE__ */ jsx55(
23872
24006
  Text,
23873
24007
  {
23874
24008
  as: "p",
@@ -23887,7 +24021,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23887
24021
  ]
23888
24022
  }
23889
24023
  ),
23890
- /* @__PURE__ */ jsxs40(
24024
+ /* @__PURE__ */ jsxs41(
23891
24025
  Element,
23892
24026
  {
23893
24027
  as: Flex,
@@ -23896,19 +24030,19 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23896
24030
  $flexDirection: "column",
23897
24031
  $gap: "2rem",
23898
24032
  children: [
23899
- props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs40(
24033
+ props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs41(
23900
24034
  Flex,
23901
24035
  {
23902
24036
  $justifyContent: "space-between",
23903
24037
  $alignItems: "center",
23904
24038
  $gap: "1rem",
23905
24039
  children: [
23906
- /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "1rem", children: [
23907
- /* @__PURE__ */ jsx54(Text, { display: props.header.title.fontStyle, $leading: "none", children: currentPlan.name }),
23908
- props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx54(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
24040
+ /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "1rem", children: [
24041
+ /* @__PURE__ */ jsx55(Text, { display: props.header.title.fontStyle, $leading: "none", children: currentPlan.name }),
24042
+ props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx55(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
23909
24043
  ] }),
23910
- props.header.price.isVisible && typeof currentPlan.planPrice === "number" && /* @__PURE__ */ jsxs40(Box, { children: [
23911
- /* @__PURE__ */ jsx54(
24044
+ props.header.price.isVisible && typeof currentPlan.planPrice === "number" && /* @__PURE__ */ jsxs41(Box, { children: [
24045
+ /* @__PURE__ */ jsx55(
23912
24046
  Text,
23913
24047
  {
23914
24048
  display: isUsageBasedPlan ? "heading3" : props.header.price.fontStyle,
@@ -23918,7 +24052,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23918
24052
  )
23919
24053
  }
23920
24054
  ),
23921
- !isFreePlan && currentPlanPeriod && /* @__PURE__ */ jsx54(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs40("sub", { children: [
24055
+ !isFreePlan && currentPlanPeriod && /* @__PURE__ */ jsx55(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs41("sub", { children: [
23922
24056
  "/",
23923
24057
  shortenPeriod(currentPlanPeriod)
23924
24058
  ] }) })
@@ -23926,8 +24060,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23926
24060
  ]
23927
24061
  }
23928
24062
  ),
23929
- props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
23930
- props.addOns.showLabel && /* @__PURE__ */ jsx54(
24063
+ props.addOns.isVisible && currentAddOns.length > 0 && /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
24064
+ props.addOns.showLabel && /* @__PURE__ */ jsx55(
23931
24065
  Text,
23932
24066
  {
23933
24067
  $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -23935,7 +24069,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23935
24069
  children: t3("Add-ons")
23936
24070
  }
23937
24071
  ),
23938
- /* @__PURE__ */ jsx54(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ jsx54(
24072
+ /* @__PURE__ */ jsx55(Flex, { $flexDirection: "column", $gap: "1rem", children: currentAddOns.map((addOn, addOnIndex) => /* @__PURE__ */ jsx55(
23939
24073
  AddOn,
23940
24074
  {
23941
24075
  addOn,
@@ -23946,8 +24080,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23946
24080
  addOnIndex
23947
24081
  )) })
23948
24082
  ] }),
23949
- props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
23950
- props.addOns.showLabel && /* @__PURE__ */ jsx54(
24083
+ props.addOns.isVisible && usageBasedEntitlements.length > 0 && /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
24084
+ props.addOns.showLabel && /* @__PURE__ */ jsx55(
23951
24085
  Text,
23952
24086
  {
23953
24087
  $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -23955,8 +24089,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23955
24089
  children: t3("Usage-based")
23956
24090
  }
23957
24091
  ),
23958
- /* @__PURE__ */ jsx54(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
23959
- return /* @__PURE__ */ jsx54(
24092
+ /* @__PURE__ */ jsx55(Flex, { $flexDirection: "column", $gap: "1rem", children: usageBasedEntitlements.map((entitlement, entitlementIndex) => {
24093
+ return /* @__PURE__ */ jsx55(
23960
24094
  UsageDetails2,
23961
24095
  {
23962
24096
  entitlement,
@@ -23969,8 +24103,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23969
24103
  );
23970
24104
  }) })
23971
24105
  ] }),
23972
- props.addOns.isVisible && showCredits && creditGroups.plan.length > 0 && /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
23973
- props.addOns.showLabel && /* @__PURE__ */ jsx54(
24106
+ props.addOns.isVisible && showCredits && creditGroups.plan.length > 0 && /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
24107
+ props.addOns.showLabel && /* @__PURE__ */ jsx55(
23974
24108
  Text,
23975
24109
  {
23976
24110
  $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -23978,19 +24112,19 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23978
24112
  children: t3("Credits in plan")
23979
24113
  }
23980
24114
  ),
23981
- /* @__PURE__ */ jsx54(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
24115
+ /* @__PURE__ */ jsx55(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
23982
24116
  const planCreditGrant = currentPlan?.includedCreditGrants.find(
23983
24117
  (grant) => grant.creditId === group.id
23984
24118
  );
23985
24119
  const hasAutoTopup = isAutoTopupEnabled(planCreditGrant);
23986
24120
  const thresholdCredits = getAutoTopupThresholdCredits(planCreditGrant);
23987
24121
  const topupAmount = getAutoTopupAmount(planCreditGrant);
23988
- return /* @__PURE__ */ jsx54(
24122
+ return /* @__PURE__ */ jsx55(
23989
24123
  Flex,
23990
24124
  {
23991
24125
  $flexDirection: "column",
23992
24126
  $gap: "0.25rem",
23993
- children: /* @__PURE__ */ jsxs40(
24127
+ children: /* @__PURE__ */ jsxs41(
23994
24128
  Flex,
23995
24129
  {
23996
24130
  $justifyContent: "space-between",
@@ -23998,18 +24132,18 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
23998
24132
  $flexWrap: "wrap",
23999
24133
  $gap: "0.5rem",
24000
24134
  children: [
24001
- /* @__PURE__ */ jsxs40(Text, { display: props.addOns.fontStyle, children: [
24135
+ /* @__PURE__ */ jsxs41(Text, { display: props.addOns.fontStyle, children: [
24002
24136
  group.quantity,
24003
24137
  " ",
24004
24138
  getFeatureName(group, group.quantity),
24005
24139
  " ",
24006
- subscriptionInterval && /* @__PURE__ */ jsxs40(Fragment23, { children: [
24140
+ subscriptionInterval && /* @__PURE__ */ jsxs41(Fragment23, { children: [
24007
24141
  t3("per"),
24008
24142
  " ",
24009
24143
  t3(subscriptionInterval)
24010
24144
  ] })
24011
24145
  ] }),
24012
- group.total.used > 0 && /* @__PURE__ */ jsx54(Flex, { $alignItems: "baseline", children: /* @__PURE__ */ jsxs40(
24146
+ group.total.used > 0 && /* @__PURE__ */ jsx55(Flex, { $alignItems: "baseline", children: /* @__PURE__ */ jsxs41(
24013
24147
  Text,
24014
24148
  {
24015
24149
  style: { opacity: 0.54 },
@@ -24019,7 +24153,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24019
24153
  group.total.used,
24020
24154
  " ",
24021
24155
  t3("used"),
24022
- hasAutoTopup && planCreditGrant && /* @__PURE__ */ jsx54(
24156
+ hasAutoTopup && planCreditGrant && /* @__PURE__ */ jsx55(
24023
24157
  AutoTopupNotice,
24024
24158
  {
24025
24159
  thresholdCredits,
@@ -24036,7 +24170,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24036
24170
  groupIndex
24037
24171
  );
24038
24172
  }) }),
24039
- hasAutoTopupSelfService && /* @__PURE__ */ jsxs40(
24173
+ hasAutoTopupSelfService && /* @__PURE__ */ jsxs41(
24040
24174
  Flex,
24041
24175
  {
24042
24176
  $justifyContent: "space-between",
@@ -24046,8 +24180,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24046
24180
  $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
24047
24181
  $borderRadius: "0.5rem",
24048
24182
  children: [
24049
- /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
24050
- /* @__PURE__ */ jsx54(Text, { display: props.addOns.fontStyle, children: t3("Auto top-up") }),
24183
+ /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
24184
+ /* @__PURE__ */ jsx55(Text, { display: props.addOns.fontStyle, children: t3("Auto top-up") }),
24051
24185
  currentPlan?.includedCreditGrants.reduce(
24052
24186
  (acc, grant) => {
24053
24187
  if (!grant.credit || !grant.billingCreditAutoTopupSelfService) {
@@ -24056,7 +24190,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24056
24190
  const autoTopupEnabled = grant.companyAutoTopupEnabled ?? false;
24057
24191
  if (!autoTopupEnabled) {
24058
24192
  acc.push(
24059
- /* @__PURE__ */ jsx54(Text, { $leading: "tight", children: t3("Auto top-up disabled for token", {
24193
+ /* @__PURE__ */ jsx55(Text, { $leading: "tight", children: t3("Auto top-up disabled for token", {
24060
24194
  unit: getFeatureName(grant.credit, 1)
24061
24195
  }) }, grant.id)
24062
24196
  );
@@ -24066,7 +24200,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24066
24200
  const autoTopupAmount = getAutoTopupAmount(grant);
24067
24201
  if (typeof autoTopupThresholdCredits === "number" && typeof autoTopupAmount === "number") {
24068
24202
  acc.push(
24069
- /* @__PURE__ */ jsx54(Text, { $leading: "tight", children: t3("Adds X tokens when Y remaining in balance", {
24203
+ /* @__PURE__ */ jsx55(Text, { $leading: "tight", children: t3("Adds X tokens when Y remaining in balance", {
24070
24204
  unit: getFeatureName(
24071
24205
  grant.credit,
24072
24206
  autoTopupAmount
@@ -24081,7 +24215,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24081
24215
  []
24082
24216
  )
24083
24217
  ] }),
24084
- /* @__PURE__ */ jsx54(
24218
+ /* @__PURE__ */ jsx55(
24085
24219
  Button,
24086
24220
  {
24087
24221
  type: "button",
@@ -24098,8 +24232,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24098
24232
  }
24099
24233
  )
24100
24234
  ] }),
24101
- props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
24102
- props.addOns.showLabel && /* @__PURE__ */ jsx54(
24235
+ props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
24236
+ props.addOns.showLabel && /* @__PURE__ */ jsx55(
24103
24237
  Text,
24104
24238
  {
24105
24239
  $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -24107,9 +24241,9 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24107
24241
  children: t3("Credit bundles")
24108
24242
  }
24109
24243
  ),
24110
- /* @__PURE__ */ jsx54(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
24244
+ /* @__PURE__ */ jsx55(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
24111
24245
  const bundle = group?.bundleId ? creditBundles.find((b3) => b3.id === group.bundleId) : void 0;
24112
- return /* @__PURE__ */ jsxs40(
24246
+ return /* @__PURE__ */ jsxs41(
24113
24247
  Flex,
24114
24248
  {
24115
24249
  $justifyContent: "space-between",
@@ -24117,8 +24251,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24117
24251
  $flexWrap: "wrap",
24118
24252
  $gap: "0.5rem",
24119
24253
  children: [
24120
- bundle ? /* @__PURE__ */ jsxs40(Text, { display: props.addOns.fontStyle, children: [
24121
- group.grants.length > 1 && /* @__PURE__ */ jsxs40(Text, { style: { opacity: 0.5 }, children: [
24254
+ bundle ? /* @__PURE__ */ jsxs41(Text, { display: props.addOns.fontStyle, children: [
24255
+ group.grants.length > 1 && /* @__PURE__ */ jsxs41(Text, { style: { opacity: 0.5 }, children: [
24122
24256
  "(",
24123
24257
  group.grants.length,
24124
24258
  ")",
@@ -24130,12 +24264,12 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24130
24264
  " ",
24131
24265
  getFeatureName(group, group.quantity),
24132
24266
  ")"
24133
- ] }) : /* @__PURE__ */ jsxs40(Text, { display: props.addOns.fontStyle, children: [
24267
+ ] }) : /* @__PURE__ */ jsxs41(Text, { display: props.addOns.fontStyle, children: [
24134
24268
  group.quantity,
24135
24269
  " ",
24136
24270
  getFeatureName(group, group.quantity)
24137
24271
  ] }),
24138
- group.total.used > 0 && /* @__PURE__ */ jsxs40(
24272
+ group.total.used > 0 && /* @__PURE__ */ jsxs41(
24139
24273
  Text,
24140
24274
  {
24141
24275
  style: { opacity: 0.54 },
@@ -24154,8 +24288,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24154
24288
  );
24155
24289
  }) })
24156
24290
  ] }),
24157
- props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ jsxs40(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
24158
- props.addOns.showLabel && /* @__PURE__ */ jsx54(
24291
+ props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ jsxs41(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
24292
+ props.addOns.showLabel && /* @__PURE__ */ jsx55(
24159
24293
  Text,
24160
24294
  {
24161
24295
  $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
@@ -24163,8 +24297,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24163
24297
  children: t3("Promotional credits")
24164
24298
  }
24165
24299
  ),
24166
- /* @__PURE__ */ jsx54(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
24167
- return /* @__PURE__ */ jsxs40(
24300
+ /* @__PURE__ */ jsx55(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
24301
+ return /* @__PURE__ */ jsxs41(
24168
24302
  Flex,
24169
24303
  {
24170
24304
  $justifyContent: "space-between",
@@ -24172,12 +24306,12 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24172
24306
  $flexWrap: "wrap",
24173
24307
  $gap: "0.5rem",
24174
24308
  children: [
24175
- /* @__PURE__ */ jsxs40(Text, { display: props.addOns.fontStyle, children: [
24309
+ /* @__PURE__ */ jsxs41(Text, { display: props.addOns.fontStyle, children: [
24176
24310
  group.quantity,
24177
24311
  " ",
24178
24312
  getFeatureName(group, group.quantity)
24179
24313
  ] }),
24180
- group.total.used > 0 && /* @__PURE__ */ jsxs40(
24314
+ group.total.used > 0 && /* @__PURE__ */ jsxs41(
24181
24315
  Text,
24182
24316
  {
24183
24317
  style: { opacity: 0.54 },
@@ -24196,7 +24330,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
24196
24330
  );
24197
24331
  }) })
24198
24332
  ] }),
24199
- canCheckout && props.callToAction.isVisible && !customPlanBilling?.isAwaitingActivation && /* @__PURE__ */ jsx54(
24333
+ canCheckout && props.callToAction.isVisible && !customPlanBilling?.isAwaitingActivation && /* @__PURE__ */ jsx55(
24200
24334
  Button,
24201
24335
  {
24202
24336
  type: "button",
@@ -24228,7 +24362,7 @@ import {
24228
24362
 
24229
24363
  // src/components/elements/pricing-table/AddOn.tsx
24230
24364
  import { useMemo as useMemo28 } from "react";
24231
- import { Fragment as Fragment24, jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
24365
+ import { Fragment as Fragment24, jsx as jsx56, jsxs as jsxs42 } from "react/jsx-runtime";
24232
24366
  function renderMeteredEntitlementPricing2({
24233
24367
  priceBehavior,
24234
24368
  softLimit,
@@ -24240,7 +24374,7 @@ function renderMeteredEntitlementPricing2({
24240
24374
  isTiered
24241
24375
  }) {
24242
24376
  if (priceBehavior === EntitlementPriceBehavior.Overage && softLimit) {
24243
- return /* @__PURE__ */ jsxs41(Fragment24, { children: [
24377
+ return /* @__PURE__ */ jsxs42(Fragment24, { children: [
24244
24378
  "Additional: ",
24245
24379
  formatCurrency(price, currency),
24246
24380
  "/",
@@ -24251,13 +24385,13 @@ function renderMeteredEntitlementPricing2({
24251
24385
  ] });
24252
24386
  }
24253
24387
  if (isTiered) {
24254
- return /* @__PURE__ */ jsx55(Fragment24, { children: "Tier-based pricing" });
24388
+ return /* @__PURE__ */ jsx56(Fragment24, { children: "Tier-based pricing" });
24255
24389
  }
24256
24390
  if (priceBehavior === EntitlementPriceBehavior.PayAsYouGo || priceBehavior === EntitlementPriceBehavior.PayInAdvance) {
24257
- return /* @__PURE__ */ jsxs41(Fragment24, { children: [
24391
+ return /* @__PURE__ */ jsxs42(Fragment24, { children: [
24258
24392
  formatCurrency(price, currency),
24259
24393
  "/",
24260
- packageSize > 1 && /* @__PURE__ */ jsxs41(Fragment24, { children: [
24394
+ packageSize > 1 && /* @__PURE__ */ jsxs42(Fragment24, { children: [
24261
24395
  packageSize,
24262
24396
  " "
24263
24397
  ] }),
@@ -24321,7 +24455,7 @@ var AddOn2 = ({
24321
24455
  isTiered: entitlement.priceBehavior === EntitlementPriceBehavior.Tier || isTieredPrice(priceData)
24322
24456
  };
24323
24457
  }) || [];
24324
- return /* @__PURE__ */ jsxs41(
24458
+ return /* @__PURE__ */ jsxs42(
24325
24459
  Flex,
24326
24460
  {
24327
24461
  as: "li",
@@ -24341,7 +24475,7 @@ var AddOn2 = ({
24341
24475
  $boxShadow: cardBoxShadow
24342
24476
  },
24343
24477
  children: [
24344
- /* @__PURE__ */ jsxs41(
24478
+ /* @__PURE__ */ jsxs42(
24345
24479
  Flex,
24346
24480
  {
24347
24481
  $flexDirection: "column",
@@ -24352,7 +24486,7 @@ var AddOn2 = ({
24352
24486
  $borderStyle: "solid",
24353
24487
  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
24354
24488
  children: [
24355
- /* @__PURE__ */ jsx55(Box, { children: /* @__PURE__ */ jsx55(
24489
+ /* @__PURE__ */ jsx56(Box, { children: /* @__PURE__ */ jsx56(
24356
24490
  Text,
24357
24491
  {
24358
24492
  as: "h3",
@@ -24361,22 +24495,22 @@ var AddOn2 = ({
24361
24495
  children: addOn.name
24362
24496
  }
24363
24497
  ) }),
24364
- layout.addOns.showDescription && /* @__PURE__ */ jsx55(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx55(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
24365
- /* @__PURE__ */ jsx55(Box, { children: /* @__PURE__ */ jsx55(
24498
+ layout.addOns.showDescription && /* @__PURE__ */ jsx56(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx56(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
24499
+ /* @__PURE__ */ jsx56(Box, { children: /* @__PURE__ */ jsx56(
24366
24500
  Text,
24367
24501
  {
24368
24502
  "data-testid": "sch-addon-price",
24369
24503
  display: layout.plans.name.fontStyle,
24370
- children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? t3("Usage-based") : /* @__PURE__ */ jsxs41(Fragment24, { children: [
24504
+ children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? t3("Usage-based") : /* @__PURE__ */ jsxs42(Fragment24, { children: [
24371
24505
  formatCurrency(addOnPrice ?? 0, addOnCurrency),
24372
- /* @__PURE__ */ jsxs41("sub", { children: [
24506
+ /* @__PURE__ */ jsxs42("sub", { children: [
24373
24507
  "/",
24374
24508
  selectedPeriod
24375
24509
  ] })
24376
24510
  ] })
24377
24511
  }
24378
24512
  ) }),
24379
- isActiveAddOn && /* @__PURE__ */ jsx55(
24513
+ isActiveAddOn && /* @__PURE__ */ jsx56(
24380
24514
  Flex,
24381
24515
  {
24382
24516
  "data-testid": "sch-addon-active",
@@ -24386,7 +24520,7 @@ var AddOn2 = ({
24386
24520
  $backgroundColor: settings.theme.primary,
24387
24521
  $borderRadius: "9999px",
24388
24522
  $padding: "0.125rem 0.85rem",
24389
- children: /* @__PURE__ */ jsx55(
24523
+ children: /* @__PURE__ */ jsx56(
24390
24524
  Text,
24391
24525
  {
24392
24526
  $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -24399,7 +24533,7 @@ var AddOn2 = ({
24399
24533
  ]
24400
24534
  }
24401
24535
  ),
24402
- /* @__PURE__ */ jsxs41(
24536
+ /* @__PURE__ */ jsxs42(
24403
24537
  Flex,
24404
24538
  {
24405
24539
  $flexDirection: "column",
@@ -24408,7 +24542,7 @@ var AddOn2 = ({
24408
24542
  $flexGrow: 1,
24409
24543
  $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
24410
24544
  children: [
24411
- layout.addOns.showEntitlements && displayableEntitlements.length > 0 && /* @__PURE__ */ jsx55(
24545
+ layout.addOns.showEntitlements && displayableEntitlements.length > 0 && /* @__PURE__ */ jsx56(
24412
24546
  Flex,
24413
24547
  {
24414
24548
  as: "ul",
@@ -24420,7 +24554,7 @@ var AddOn2 = ({
24420
24554
  $listStyle: "none",
24421
24555
  children: displayableEntitlements.map((entitlement, idx) => {
24422
24556
  if (entitlement.isUnlimited) {
24423
- return /* @__PURE__ */ jsxs41(
24557
+ return /* @__PURE__ */ jsxs42(
24424
24558
  Flex,
24425
24559
  {
24426
24560
  as: "li",
@@ -24429,8 +24563,8 @@ var AddOn2 = ({
24429
24563
  $alignItems: "center",
24430
24564
  $gap: "1rem",
24431
24565
  children: [
24432
- /* @__PURE__ */ jsxs41(Flex, { $gap: "1rem", children: [
24433
- layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx55(
24566
+ /* @__PURE__ */ jsxs42(Flex, { $gap: "1rem", children: [
24567
+ layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx56(
24434
24568
  Icon3,
24435
24569
  {
24436
24570
  name: entitlement.feature.icon,
@@ -24439,16 +24573,16 @@ var AddOn2 = ({
24439
24573
  rounded: true
24440
24574
  }
24441
24575
  ),
24442
- entitlement.feature && /* @__PURE__ */ jsx55(
24576
+ entitlement.feature && /* @__PURE__ */ jsx56(
24443
24577
  Flex,
24444
24578
  {
24445
24579
  $flexDirection: "column",
24446
24580
  $justifyContent: "center",
24447
- children: /* @__PURE__ */ jsx55(Text, { children: getFeatureName(entitlement.feature) })
24581
+ children: /* @__PURE__ */ jsx56(Text, { children: getFeatureName(entitlement.feature) })
24448
24582
  }
24449
24583
  )
24450
24584
  ] }),
24451
- /* @__PURE__ */ jsx55(
24585
+ /* @__PURE__ */ jsx56(
24452
24586
  Text,
24453
24587
  {
24454
24588
  style: { opacity: 0.54 },
@@ -24463,7 +24597,7 @@ var AddOn2 = ({
24463
24597
  );
24464
24598
  }
24465
24599
  const meteredEntitlement = entitlement;
24466
- return /* @__PURE__ */ jsxs41(
24600
+ return /* @__PURE__ */ jsxs42(
24467
24601
  Flex,
24468
24602
  {
24469
24603
  as: "li",
@@ -24473,8 +24607,8 @@ var AddOn2 = ({
24473
24607
  $gap: "1rem",
24474
24608
  $listStyle: "none",
24475
24609
  children: [
24476
- /* @__PURE__ */ jsxs41(Flex, { $gap: "1rem", children: [
24477
- meteredEntitlement.feature?.icon && /* @__PURE__ */ jsx55(
24610
+ /* @__PURE__ */ jsxs42(Flex, { $gap: "1rem", children: [
24611
+ meteredEntitlement.feature?.icon && /* @__PURE__ */ jsx56(
24478
24612
  Icon3,
24479
24613
  {
24480
24614
  "data-testid": "sch-feature-icon",
@@ -24484,9 +24618,9 @@ var AddOn2 = ({
24484
24618
  rounded: true
24485
24619
  }
24486
24620
  ),
24487
- /* @__PURE__ */ jsx55(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ jsx55(Text, { children: meteredEntitlement.priceBehavior === EntitlementPriceBehavior.Overage && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
24621
+ /* @__PURE__ */ jsx56(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ jsx56(Text, { children: meteredEntitlement.priceBehavior === EntitlementPriceBehavior.Overage && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
24488
24622
  ] }),
24489
- /* @__PURE__ */ jsx55(
24623
+ /* @__PURE__ */ jsx56(
24490
24624
  Text,
24491
24625
  {
24492
24626
  style: { opacity: 0.54 },
@@ -24502,7 +24636,7 @@ var AddOn2 = ({
24502
24636
  })
24503
24637
  }
24504
24638
  ),
24505
- sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsx55(Flex, { $flexDirection: "column", $gap: "0.5rem", children: /* @__PURE__ */ jsx55(
24639
+ sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsx56(Flex, { $flexDirection: "column", $gap: "0.5rem", children: /* @__PURE__ */ jsx56(
24506
24640
  Button,
24507
24641
  {
24508
24642
  type: "button",
@@ -24544,7 +24678,7 @@ var AddOn2 = ({
24544
24678
  import { useState as useState19 } from "react";
24545
24679
 
24546
24680
  // src/components/elements/pricing-table/Entitlement.tsx
24547
- import { Fragment as Fragment25, jsx as jsx56, jsxs as jsxs42 } from "react/jsx-runtime";
24681
+ import { Fragment as Fragment25, jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
24548
24682
  var Entitlement2 = ({
24549
24683
  entitlement,
24550
24684
  sharedProps,
@@ -24576,8 +24710,8 @@ var Entitlement2 = ({
24576
24710
  entitlement,
24577
24711
  credits
24578
24712
  );
24579
- return /* @__PURE__ */ jsxs42(Flex, { as: "li", $gap: "1rem", style: { listStyle: "none" }, children: [
24580
- layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx56(
24713
+ return /* @__PURE__ */ jsxs43(Flex, { as: "li", $gap: "1rem", style: { listStyle: "none" }, children: [
24714
+ layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx57(
24581
24715
  Icon3,
24582
24716
  {
24583
24717
  "data-testid": "sch-feature-icon",
@@ -24587,31 +24721,31 @@ var Entitlement2 = ({
24587
24721
  rounded: true
24588
24722
  }
24589
24723
  ),
24590
- entitlement.feature?.name && /* @__PURE__ */ jsxs42(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
24591
- /* @__PURE__ */ jsxs42(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
24592
- /* @__PURE__ */ jsx56(Text, { children: typeof entitlementPrice === "number" && !tiered && (entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance || entitlement.priceBehavior === EntitlementPriceBehavior.PayAsYouGo) ? /* @__PURE__ */ jsxs42(Fragment25, { children: [
24724
+ entitlement.feature?.name && /* @__PURE__ */ jsxs43(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
24725
+ /* @__PURE__ */ jsxs43(Flex, { $flexDirection: "column", $justifyContent: "center", $flexGrow: 1, children: [
24726
+ /* @__PURE__ */ jsx57(Text, { children: typeof entitlementPrice === "number" && !tiered && (entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance || entitlement.priceBehavior === EntitlementPriceBehavior.PayAsYouGo) ? /* @__PURE__ */ jsxs43(Fragment25, { children: [
24593
24727
  formatCurrency(entitlementPrice, entitlementCurrency),
24594
24728
  " ",
24595
24729
  t3("per"),
24596
24730
  " ",
24597
- entitlementPackageSize > 1 && /* @__PURE__ */ jsxs42(Fragment25, { children: [
24731
+ entitlementPackageSize > 1 && /* @__PURE__ */ jsxs43(Fragment25, { children: [
24598
24732
  formatNumber(entitlementPackageSize),
24599
24733
  " "
24600
24734
  ] }),
24601
24735
  getFeatureName(entitlement.feature, entitlementPackageSize),
24602
- entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ jsxs42(Fragment25, { children: [
24736
+ entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && /* @__PURE__ */ jsxs43(Fragment25, { children: [
24603
24737
  " ",
24604
24738
  t3("per"),
24605
24739
  " ",
24606
24740
  selectedPeriod
24607
24741
  ] })
24608
- ] }) : entitlement.priceBehavior === EntitlementPriceBehavior.Tier || tiered ? /* @__PURE__ */ jsx56(
24742
+ ] }) : entitlement.priceBehavior === EntitlementPriceBehavior.Tier || tiered ? /* @__PURE__ */ jsx57(
24609
24743
  TieredPricingDetails,
24610
24744
  {
24611
24745
  entitlement,
24612
24746
  period: selectedPeriod
24613
24747
  }
24614
- ) : showCredits && entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && entitlement.valueCredit && entitlement.consumptionRate ? /* @__PURE__ */ jsxs42(Fragment25, { children: [
24748
+ ) : showCredits && entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && entitlement.valueCredit && entitlement.consumptionRate ? /* @__PURE__ */ jsxs43(Fragment25, { children: [
24615
24749
  formatNumber(entitlement.consumptionRate),
24616
24750
  " ",
24617
24751
  getFeatureName(
@@ -24622,7 +24756,7 @@ var Entitlement2 = ({
24622
24756
  t3("per"),
24623
24757
  " ",
24624
24758
  getFeatureName(entitlement.feature, 1)
24625
- ] }) : entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && creditBasedEntitlementLimit ? /* @__PURE__ */ jsx56(Fragment25, { children: creditBasedEntitlementLimit?.period ? t3("Up to X units per period", {
24759
+ ] }) : entitlement.priceBehavior === EntitlementPriceBehavior.CreditBurndown && creditBasedEntitlementLimit ? /* @__PURE__ */ jsx57(Fragment25, { children: creditBasedEntitlementLimit?.period ? t3("Up to X units per period", {
24626
24760
  amount: formatNumber(creditBasedEntitlementLimit.limit),
24627
24761
  units: getFeatureName(
24628
24762
  entitlement.feature,
@@ -24635,25 +24769,25 @@ var Entitlement2 = ({
24635
24769
  entitlement.feature,
24636
24770
  creditBasedEntitlementLimit.limit
24637
24771
  )
24638
- }) }) : entitlement.valueType === EntitlementValueType.Numeric || entitlement.valueType === EntitlementValueType.Unlimited || entitlement.valueType === EntitlementValueType.Trait ? /* @__PURE__ */ jsxs42(Fragment25, { children: [
24772
+ }) }) : entitlement.valueType === EntitlementValueType.Numeric || entitlement.valueType === EntitlementValueType.Unlimited || entitlement.valueType === EntitlementValueType.Trait ? /* @__PURE__ */ jsxs43(Fragment25, { children: [
24639
24773
  entitlement.valueType === EntitlementValueType.Unlimited && !entitlement.priceBehavior ? t3("Unlimited", {
24640
24774
  item: getFeatureName(entitlement.feature)
24641
- }) : /* @__PURE__ */ jsxs42(Fragment25, { children: [
24642
- typeof limit === "number" && /* @__PURE__ */ jsxs42(Fragment25, { children: [
24775
+ }) : /* @__PURE__ */ jsxs43(Fragment25, { children: [
24776
+ typeof limit === "number" && /* @__PURE__ */ jsxs43(Fragment25, { children: [
24643
24777
  formatNumber(limit),
24644
24778
  " "
24645
24779
  ] }),
24646
24780
  getFeatureName(entitlement.feature, limit)
24647
24781
  ] }),
24648
- metricPeriodName && /* @__PURE__ */ jsxs42(Fragment25, { children: [
24782
+ metricPeriodName && /* @__PURE__ */ jsxs43(Fragment25, { children: [
24649
24783
  " ",
24650
24784
  t3("per"),
24651
24785
  " ",
24652
24786
  t3(metricPeriodName)
24653
24787
  ] })
24654
24788
  ] }) : entitlement.feature.name }),
24655
- /* @__PURE__ */ jsxs42(Text, { children: [
24656
- entitlement.priceBehavior === EntitlementPriceBehavior.Overage && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsx56(Fragment25, { children: /* @__PURE__ */ jsxs42(
24789
+ /* @__PURE__ */ jsxs43(Text, { children: [
24790
+ entitlement.priceBehavior === EntitlementPriceBehavior.Overage && typeof entitlementPrice === "number" ? /* @__PURE__ */ jsx57(Fragment25, { children: /* @__PURE__ */ jsxs43(
24657
24791
  Text,
24658
24792
  {
24659
24793
  $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -24663,7 +24797,7 @@ var Entitlement2 = ({
24663
24797
  " ",
24664
24798
  formatCurrency(entitlementPrice, entitlementCurrency),
24665
24799
  "/",
24666
- entitlementPackageSize > 1 && /* @__PURE__ */ jsxs42(Fragment25, { children: [
24800
+ entitlementPackageSize > 1 && /* @__PURE__ */ jsxs43(Fragment25, { children: [
24667
24801
  formatNumber(entitlementPackageSize),
24668
24802
  " "
24669
24803
  ] }),
@@ -24671,14 +24805,14 @@ var Entitlement2 = ({
24671
24805
  entitlement.feature,
24672
24806
  entitlementPackageSize
24673
24807
  ),
24674
- entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs42(Fragment25, { children: [
24808
+ entitlement.feature.featureType === FeatureType.Trait && /* @__PURE__ */ jsxs43(Fragment25, { children: [
24675
24809
  "/",
24676
24810
  shortenPeriod(selectedPeriod)
24677
24811
  ] })
24678
24812
  ]
24679
24813
  }
24680
- ) }) : (entitlement.priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ jsxs42(Fragment25, { children: [
24681
- /* @__PURE__ */ jsx56(
24814
+ ) }) : (entitlement.priceBehavior === EntitlementPriceBehavior.Tier || tiered) && /* @__PURE__ */ jsxs43(Fragment25, { children: [
24815
+ /* @__PURE__ */ jsx57(
24682
24816
  Text,
24683
24817
  {
24684
24818
  style: { opacity: 0.54 },
@@ -24687,7 +24821,7 @@ var Entitlement2 = ({
24687
24821
  children: t3("Tier-based")
24688
24822
  }
24689
24823
  ),
24690
- /* @__PURE__ */ jsx56(
24824
+ /* @__PURE__ */ jsx57(
24691
24825
  PricingTiersTooltip,
24692
24826
  {
24693
24827
  feature: entitlement.feature,
@@ -24698,14 +24832,14 @@ var Entitlement2 = ({
24698
24832
  }
24699
24833
  )
24700
24834
  ] }),
24701
- entitlementHasHardLimit(entitlement) && entitlement.valueType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx56(
24835
+ entitlementHasHardLimit(entitlement) && entitlement.valueType === EntitlementValueType.Numeric && /* @__PURE__ */ jsx57(
24702
24836
  HardLimitTooltip,
24703
24837
  {
24704
24838
  feature: entitlement.feature,
24705
24839
  limit: entitlement.valueNumeric
24706
24840
  }
24707
24841
  ),
24708
- entitlement.billingThreshold && /* @__PURE__ */ jsx56(
24842
+ entitlement.billingThreshold && /* @__PURE__ */ jsx57(
24709
24843
  BillingThresholdTooltip,
24710
24844
  {
24711
24845
  billingThreshold: entitlement.billingThreshold
@@ -24713,7 +24847,7 @@ var Entitlement2 = ({
24713
24847
  )
24714
24848
  ] })
24715
24849
  ] }),
24716
- layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx56(
24850
+ layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx57(
24717
24851
  Text,
24718
24852
  {
24719
24853
  $size: 0.875 * settings.theme.typography.text.fontSize,
@@ -24726,7 +24860,7 @@ var Entitlement2 = ({
24726
24860
  };
24727
24861
 
24728
24862
  // src/components/elements/pricing-table/Plan.tsx
24729
- import { Fragment as Fragment26, jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
24863
+ import { Fragment as Fragment26, jsx as jsx58, jsxs as jsxs44 } from "react/jsx-runtime";
24730
24864
  var Plan2 = ({
24731
24865
  plan,
24732
24866
  index,
@@ -24769,7 +24903,7 @@ var Plan2 = ({
24769
24903
  const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
24770
24904
  const headerPriceFontStyle = settings.theme.typography[layout.plans.name.fontStyle];
24771
24905
  const isExpanded = entitlementVisibility[plan.id] ?? false;
24772
- return /* @__PURE__ */ jsxs43(
24906
+ return /* @__PURE__ */ jsxs44(
24773
24907
  Flex,
24774
24908
  {
24775
24909
  as: "li",
@@ -24789,7 +24923,7 @@ var Plan2 = ({
24789
24923
  $boxShadow: cardBoxShadow
24790
24924
  },
24791
24925
  children: [
24792
- /* @__PURE__ */ jsxs43(
24926
+ /* @__PURE__ */ jsxs44(
24793
24927
  Flex,
24794
24928
  {
24795
24929
  $flexDirection: "column",
@@ -24800,7 +24934,7 @@ var Plan2 = ({
24800
24934
  $borderStyle: "solid",
24801
24935
  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
24802
24936
  children: [
24803
- /* @__PURE__ */ jsx57(Box, { children: /* @__PURE__ */ jsx57(
24937
+ /* @__PURE__ */ jsx58(Box, { children: /* @__PURE__ */ jsx58(
24804
24938
  Text,
24805
24939
  {
24806
24940
  as: "h3",
@@ -24809,8 +24943,8 @@ var Plan2 = ({
24809
24943
  children: plan.name
24810
24944
  }
24811
24945
  ) }),
24812
- layout.plans.description.isVisible && /* @__PURE__ */ jsx57(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx57(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
24813
- /* @__PURE__ */ jsx57(Box, { children: /* @__PURE__ */ jsxs43(
24946
+ layout.plans.description.isVisible && /* @__PURE__ */ jsx58(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx58(Text, { display: layout.plans.description.fontStyle, children: plan.description }) }),
24947
+ /* @__PURE__ */ jsx58(Box, { children: /* @__PURE__ */ jsxs44(
24814
24948
  Text,
24815
24949
  {
24816
24950
  "data-testid": "sch-plan-price",
@@ -24826,14 +24960,14 @@ var Plan2 = ({
24826
24960
  currency: planCurrency,
24827
24961
  testSignificantDigits: false
24828
24962
  }) : formatCurrency(planPrice ?? 0, planCurrency),
24829
- !plan.custom && !isFreePlan && /* @__PURE__ */ jsxs43("sub", { children: [
24963
+ !plan.custom && !isFreePlan && /* @__PURE__ */ jsxs44("sub", { children: [
24830
24964
  "/",
24831
24965
  showAsMonthlyPrices && selectedPeriod === BillingProductPriceInterval.Year ? t3("month, billed yearly") : showAsMonthlyPrices && selectedPeriod === "quarter" ? t3("month, billed quarterly") : t3(selectedPeriod)
24832
24966
  ] })
24833
24967
  ]
24834
24968
  }
24835
24969
  ) }),
24836
- showCredits && credits.length > 0 && /* @__PURE__ */ jsx57(
24970
+ showCredits && credits.length > 0 && /* @__PURE__ */ jsx58(
24837
24971
  Flex,
24838
24972
  {
24839
24973
  as: "ul",
@@ -24845,8 +24979,8 @@ var Plan2 = ({
24845
24979
  $margin: 0,
24846
24980
  $listStyle: "none",
24847
24981
  children: credits.map((credit, idx) => {
24848
- return /* @__PURE__ */ jsxs43(Flex, { as: "li", $gap: "1rem", $listStyle: "none", children: [
24849
- layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ jsx57(
24982
+ return /* @__PURE__ */ jsxs44(Flex, { as: "li", $gap: "1rem", $listStyle: "none", children: [
24983
+ layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ jsx58(
24850
24984
  Icon3,
24851
24985
  {
24852
24986
  "data-testid": "sch-feature-icon",
@@ -24856,17 +24990,17 @@ var Plan2 = ({
24856
24990
  rounded: true
24857
24991
  }
24858
24992
  ),
24859
- credit.name && /* @__PURE__ */ jsx57(
24993
+ credit.name && /* @__PURE__ */ jsx58(
24860
24994
  Flex,
24861
24995
  {
24862
24996
  $flexDirection: "column",
24863
24997
  $justifyContent: "center",
24864
24998
  $gap: "0.5rem",
24865
- children: /* @__PURE__ */ jsxs43(Text, { children: [
24999
+ children: /* @__PURE__ */ jsxs44(Text, { children: [
24866
25000
  credit.quantity,
24867
25001
  " ",
24868
25002
  getFeatureName(credit, credit.quantity),
24869
- credit.period && /* @__PURE__ */ jsxs43(Fragment26, { children: [
25003
+ credit.period && /* @__PURE__ */ jsxs44(Fragment26, { children: [
24870
25004
  " ",
24871
25005
  t3("per"),
24872
25006
  " ",
@@ -24879,7 +25013,7 @@ var Plan2 = ({
24879
25013
  })
24880
25014
  }
24881
25015
  ),
24882
- isActivePlan && /* @__PURE__ */ jsx57(
25016
+ isActivePlan && /* @__PURE__ */ jsx58(
24883
25017
  Flex,
24884
25018
  {
24885
25019
  "data-testid": "sch-plan-active",
@@ -24889,7 +25023,7 @@ var Plan2 = ({
24889
25023
  $backgroundColor: settings.theme.primary,
24890
25024
  $borderRadius: "9999px",
24891
25025
  $padding: "0.125rem 0.85rem",
24892
- children: /* @__PURE__ */ jsx57(
25026
+ children: /* @__PURE__ */ jsx58(
24893
25027
  Text,
24894
25028
  {
24895
25029
  $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -24902,7 +25036,7 @@ var Plan2 = ({
24902
25036
  ]
24903
25037
  }
24904
25038
  ),
24905
- /* @__PURE__ */ jsxs43(
25039
+ /* @__PURE__ */ jsxs44(
24906
25040
  Flex,
24907
25041
  {
24908
25042
  $flexDirection: "column",
@@ -24911,7 +25045,7 @@ var Plan2 = ({
24911
25045
  $gap: `${cardPadding}rem`,
24912
25046
  $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
24913
25047
  children: [
24914
- layout.plans.showEntitlements && /* @__PURE__ */ jsxs43(
25048
+ layout.plans.showEntitlements && /* @__PURE__ */ jsxs44(
24915
25049
  Flex,
24916
25050
  {
24917
25051
  as: "ul",
@@ -24922,14 +25056,14 @@ var Plan2 = ({
24922
25056
  $margin: 0,
24923
25057
  $listStyle: "none",
24924
25058
  children: [
24925
- layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx57(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx57(Text, { children: t3("Everything in", {
25059
+ layout.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx58(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx58(Text, { children: t3("Everything in", {
24926
25060
  plan: plans[index - 1].name
24927
25061
  }) }) }),
24928
25062
  (plan.entitlements ?? []).reduce(
24929
25063
  (acc, entitlement, idx) => {
24930
25064
  if (isExpanded || idx < VISIBLE_ENTITLEMENT_COUNT) {
24931
25065
  acc.push(
24932
- /* @__PURE__ */ jsx57(
25066
+ /* @__PURE__ */ jsx58(
24933
25067
  Entitlement2,
24934
25068
  {
24935
25069
  entitlement,
@@ -24947,7 +25081,7 @@ var Plan2 = ({
24947
25081
  },
24948
25082
  []
24949
25083
  ),
24950
- (plan.entitlements ?? []).length > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ jsxs43(
25084
+ (plan.entitlements ?? []).length > VISIBLE_ENTITLEMENT_COUNT && /* @__PURE__ */ jsxs44(
24951
25085
  Flex,
24952
25086
  {
24953
25087
  as: "li",
@@ -24957,14 +25091,14 @@ var Plan2 = ({
24957
25091
  $marginTop: "1rem",
24958
25092
  $listStyle: "none",
24959
25093
  children: [
24960
- /* @__PURE__ */ jsx57(
25094
+ /* @__PURE__ */ jsx58(
24961
25095
  Icon3,
24962
25096
  {
24963
25097
  name: isExpanded ? "chevron-up" : "chevron-down",
24964
25098
  color: "#D0D0D0"
24965
25099
  }
24966
25100
  ),
24967
- /* @__PURE__ */ jsx57(
25101
+ /* @__PURE__ */ jsx58(
24968
25102
  Text,
24969
25103
  {
24970
25104
  as: "button",
@@ -24993,7 +25127,7 @@ var Plan2 = ({
24993
25127
  ]
24994
25128
  }
24995
25129
  ),
24996
- isActivePlan ? /* @__PURE__ */ jsxs43(
25130
+ isActivePlan ? /* @__PURE__ */ jsxs44(
24997
25131
  Flex,
24998
25132
  {
24999
25133
  $justifyContent: "center",
@@ -25001,7 +25135,7 @@ var Plan2 = ({
25001
25135
  $gap: "0.25rem",
25002
25136
  $padding: "0.625rem 0",
25003
25137
  children: [
25004
- /* @__PURE__ */ jsx57(
25138
+ /* @__PURE__ */ jsx58(
25005
25139
  Icon3,
25006
25140
  {
25007
25141
  name: "check-rounded",
@@ -25009,11 +25143,11 @@ var Plan2 = ({
25009
25143
  color: settings.theme.primary
25010
25144
  }
25011
25145
  ),
25012
- /* @__PURE__ */ jsx57(Text, { $size: 15, $leading: "none", children: t3("Current plan") })
25146
+ /* @__PURE__ */ jsx58(Text, { $size: 15, $leading: "none", children: t3("Current plan") })
25013
25147
  ]
25014
25148
  }
25015
- ) : sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsxs43(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
25016
- /* @__PURE__ */ jsx57(
25149
+ ) : sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ jsxs44(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
25150
+ /* @__PURE__ */ jsx58(
25017
25151
  Button,
25018
25152
  {
25019
25153
  type: "button",
@@ -25051,10 +25185,10 @@ var Plan2 = ({
25051
25185
  }
25052
25186
  },
25053
25187
  $fullWidth: true,
25054
- children: plan.custom ? plan.customPlanConfig?.ctaText ?? t3("Talk to support") : !plan.valid ? /* @__PURE__ */ jsx57(Text, { as: Box, $align: "center", children: t3("Over plan limit") }) : t3("Choose plan")
25188
+ children: plan.custom ? plan.customPlanConfig?.ctaText ?? t3("Talk to support") : !plan.valid ? /* @__PURE__ */ jsx58(Text, { as: Box, $align: "center", children: t3("Over plan limit") }) : t3("Choose plan")
25055
25189
  }
25056
25190
  ),
25057
- !plan.valid && /* @__PURE__ */ jsx57(UsageViolationText, { violations: plan.usageViolations })
25191
+ !plan.valid && /* @__PURE__ */ jsx58(UsageViolationText, { violations: plan.usageViolations })
25058
25192
  ] })
25059
25193
  ]
25060
25194
  }
@@ -25065,7 +25199,7 @@ var Plan2 = ({
25065
25199
  };
25066
25200
 
25067
25201
  // src/components/elements/pricing-table/PricingTable.tsx
25068
- import { Fragment as Fragment28, jsx as jsx58, jsxs as jsxs44 } from "react/jsx-runtime";
25202
+ import { Fragment as Fragment28, jsx as jsx59, jsxs as jsxs45 } from "react/jsx-runtime";
25069
25203
  var resolveDesignProps8 = (props) => {
25070
25204
  return {
25071
25205
  showPeriodToggle: props.showPeriodToggle ?? true,
@@ -25170,7 +25304,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
25170
25304
  }
25171
25305
  }, [data?.component, hydratePublic]);
25172
25306
  if (isPending) {
25173
- return /* @__PURE__ */ jsx58(
25307
+ return /* @__PURE__ */ jsx59(
25174
25308
  Flex,
25175
25309
  {
25176
25310
  $width: "100%",
@@ -25178,12 +25312,12 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
25178
25312
  $alignItems: "center",
25179
25313
  $justifyContent: "center",
25180
25314
  $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
25181
- children: /* @__PURE__ */ jsx58(Loader, { "aria-label": "loading", $size: "2xl" })
25315
+ children: /* @__PURE__ */ jsx59(Loader, { "aria-label": "loading", $size: "2xl" })
25182
25316
  }
25183
25317
  );
25184
25318
  }
25185
25319
  if (hasNoUsableCurrency) {
25186
- return /* @__PURE__ */ jsx58(Container, { children: /* @__PURE__ */ jsx58(Flex, { $justifyContent: "center", $padding: "2rem 0", children: /* @__PURE__ */ jsx58(InvalidCurrencyNotice, { invalidEntries: invalidFilterEntries }) }) });
25320
+ return /* @__PURE__ */ jsx59(Container, { children: /* @__PURE__ */ jsx59(Flex, { $justifyContent: "center", $padding: "2rem 0", children: /* @__PURE__ */ jsx59(InvalidCurrencyNotice, { invalidEntries: invalidFilterEntries }) }) });
25187
25321
  }
25188
25322
  const currentPlan = plans.find((plan) => plan.id === data?.company?.plan?.id);
25189
25323
  const showCallToAction = typeof data?.component !== "undefined" || typeof rest.callToActionUrl === "string" || typeof rest.onCallToAction === "function";
@@ -25192,7 +25326,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
25192
25326
  rest.callToActionTarget
25193
25327
  );
25194
25328
  const Wrapper = typeof data?.component === "undefined" ? Container : Fragment27;
25195
- return /* @__PURE__ */ jsx58(Wrapper, { children: /* @__PURE__ */ jsxs44(
25329
+ return /* @__PURE__ */ jsx59(Wrapper, { children: /* @__PURE__ */ jsxs45(
25196
25330
  FussyChild,
25197
25331
  {
25198
25332
  ref,
@@ -25202,8 +25336,8 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
25202
25336
  $flexDirection: "column",
25203
25337
  $gap: "2rem",
25204
25338
  children: [
25205
- /* @__PURE__ */ jsxs44(Box, { children: [
25206
- /* @__PURE__ */ jsxs44(
25339
+ /* @__PURE__ */ jsxs45(Box, { children: [
25340
+ /* @__PURE__ */ jsxs45(
25207
25341
  Flex,
25208
25342
  {
25209
25343
  $flexDirection: "column",
@@ -25218,7 +25352,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
25218
25352
  }
25219
25353
  },
25220
25354
  children: [
25221
- /* @__PURE__ */ jsx58(
25355
+ /* @__PURE__ */ jsx59(
25222
25356
  Text,
25223
25357
  {
25224
25358
  as: "h2",
@@ -25227,8 +25361,8 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
25227
25361
  children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t3("Plans")
25228
25362
  }
25229
25363
  ),
25230
- /* @__PURE__ */ jsxs44(Flex, { $alignItems: "center", $gap: "0.75rem", children: [
25231
- showCurrencySelector && /* @__PURE__ */ jsx58(
25364
+ /* @__PURE__ */ jsxs45(Flex, { $alignItems: "center", $gap: "0.75rem", children: [
25365
+ showCurrencySelector && /* @__PURE__ */ jsx59(
25232
25366
  CurrencyToggle,
25233
25367
  {
25234
25368
  currencies,
@@ -25236,7 +25370,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
25236
25370
  onSelect: setSelectedCurrency
25237
25371
  }
25238
25372
  ),
25239
- showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx58(
25373
+ showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx59(
25240
25374
  PeriodToggle,
25241
25375
  {
25242
25376
  options: periods,
@@ -25253,7 +25387,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
25253
25387
  ]
25254
25388
  }
25255
25389
  ),
25256
- props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx58(
25390
+ props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ jsx59(
25257
25391
  Box,
25258
25392
  {
25259
25393
  as: "ul",
@@ -25266,7 +25400,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
25266
25400
  $listStyle: "none",
25267
25401
  children: plans.map((plan, index, self2) => {
25268
25402
  const planPeriod = showPeriodToggle ? selectedPeriod : plan.monthlyPrice ? BillingProductPriceInterval.Month : plan.quarterlyPrice ? "quarter" : plan.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
25269
- return /* @__PURE__ */ jsx58(
25403
+ return /* @__PURE__ */ jsx59(
25270
25404
  Plan2,
25271
25405
  {
25272
25406
  plan,
@@ -25288,14 +25422,14 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
25288
25422
  }
25289
25423
  )
25290
25424
  ] }),
25291
- /* @__PURE__ */ jsx58(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs44(Fragment28, { children: [
25292
- props.header.isVisible && /* @__PURE__ */ jsx58(
25425
+ /* @__PURE__ */ jsx59(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs45(Fragment28, { children: [
25426
+ props.header.isVisible && /* @__PURE__ */ jsx59(
25293
25427
  Flex,
25294
25428
  {
25295
25429
  $justifyContent: "space-between",
25296
25430
  $alignItems: "center",
25297
25431
  $marginBottom: "1rem",
25298
- children: /* @__PURE__ */ jsx58(
25432
+ children: /* @__PURE__ */ jsx59(
25299
25433
  Text,
25300
25434
  {
25301
25435
  as: "h2",
@@ -25306,7 +25440,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
25306
25440
  )
25307
25441
  }
25308
25442
  ),
25309
- /* @__PURE__ */ jsx58(
25443
+ /* @__PURE__ */ jsx59(
25310
25444
  Box,
25311
25445
  {
25312
25446
  as: "ul",
@@ -25318,7 +25452,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
25318
25452
  $listStyle: "none",
25319
25453
  children: addOns.map((addOn, index) => {
25320
25454
  const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.monthlyPrice ? BillingProductPriceInterval.Month : addOn.quarterlyPrice ? "quarter" : addOn.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
25321
- return /* @__PURE__ */ jsx58(
25455
+ return /* @__PURE__ */ jsx59(
25322
25456
  AddOn2,
25323
25457
  {
25324
25458
  addOn,
@@ -25346,7 +25480,7 @@ PricingTable.displayName = "PricingTable";
25346
25480
 
25347
25481
  // src/components/elements/text/Text.tsx
25348
25482
  import { forwardRef as forwardRef16 } from "react";
25349
- import { jsx as jsx59 } from "react/jsx-runtime";
25483
+ import { jsx as jsx60 } from "react/jsx-runtime";
25350
25484
  var resolveDesignProps9 = (props) => {
25351
25485
  return {
25352
25486
  text: {
@@ -25358,7 +25492,7 @@ var resolveDesignProps9 = (props) => {
25358
25492
  };
25359
25493
  var TextElement = forwardRef16(({ children, className, ...rest }, ref) => {
25360
25494
  const props = resolveDesignProps9(rest);
25361
- return /* @__PURE__ */ jsx59(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx59(
25495
+ return /* @__PURE__ */ jsx60(Element, { as: Flex, ref, className, children: /* @__PURE__ */ jsx60(
25362
25496
  Text,
25363
25497
  {
25364
25498
  display: props.text.fontStyle,
@@ -25372,7 +25506,7 @@ TextElement.displayName = "Text";
25372
25506
 
25373
25507
  // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
25374
25508
  import { forwardRef as forwardRef17, useMemo as useMemo30 } from "react";
25375
- import { jsx as jsx60 } from "react/jsx-runtime";
25509
+ import { jsx as jsx61 } from "react/jsx-runtime";
25376
25510
  var buttonStyles = {
25377
25511
  primary: {
25378
25512
  color: "primary",
@@ -25408,7 +25542,7 @@ var UnsubscribeButton = forwardRef17(({ children, className, ...rest }, ref) =>
25408
25542
  if (!hasActiveSubscription) {
25409
25543
  return null;
25410
25544
  }
25411
- return /* @__PURE__ */ jsx60(
25545
+ return /* @__PURE__ */ jsx61(
25412
25546
  Element,
25413
25547
  {
25414
25548
  as: Flex,
@@ -25416,7 +25550,7 @@ var UnsubscribeButton = forwardRef17(({ children, className, ...rest }, ref) =>
25416
25550
  className,
25417
25551
  $flexDirection: "column",
25418
25552
  $gap: "2rem",
25419
- children: /* @__PURE__ */ jsx60(
25553
+ children: /* @__PURE__ */ jsx61(
25420
25554
  Button,
25421
25555
  {
25422
25556
  type: "button",
@@ -25438,7 +25572,7 @@ UnsubscribeButton.displayName = "UnsubscribeButton";
25438
25572
 
25439
25573
  // src/components/elements/upcoming-bill/UpcomingBill.tsx
25440
25574
  import { forwardRef as forwardRef18, useCallback as useCallback15, useEffect as useEffect9, useMemo as useMemo31, useState as useState21 } from "react";
25441
- import { jsx as jsx61, jsxs as jsxs45 } from "react/jsx-runtime";
25575
+ import { jsx as jsx62, jsxs as jsxs46 } from "react/jsx-runtime";
25442
25576
  function resolveDesignProps11(props) {
25443
25577
  return {
25444
25578
  header: {
@@ -25516,9 +25650,9 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
25516
25650
  if (!data?.subscription || data.subscription.cancelAt) {
25517
25651
  return null;
25518
25652
  }
25519
- return /* @__PURE__ */ jsxs45(Element, { ref, className, children: [
25520
- /* @__PURE__ */ jsx61(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx61(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
25521
- error ? /* @__PURE__ */ jsxs45(
25653
+ return /* @__PURE__ */ jsxs46(Element, { ref, className, children: [
25654
+ /* @__PURE__ */ jsx62(Flex, { as: TransitionBox, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ jsx62(Loader, { $color: settings.theme.primary, $isLoading: isLoading }) }),
25655
+ error ? /* @__PURE__ */ jsxs46(
25522
25656
  Flex,
25523
25657
  {
25524
25658
  as: TransitionBox,
@@ -25527,8 +25661,8 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
25527
25661
  $alignItems: "center",
25528
25662
  $gap: "1rem",
25529
25663
  children: [
25530
- /* @__PURE__ */ jsx61(Text, { $weight: 500, $color: "#DB6669", children: t3("There was a problem retrieving your upcoming invoice.") }),
25531
- /* @__PURE__ */ jsx61(
25664
+ /* @__PURE__ */ jsx62(Text, { $weight: 500, $color: "#DB6669", children: t3("There was a problem retrieving your upcoming invoice.") }),
25665
+ /* @__PURE__ */ jsx62(
25532
25666
  Button,
25533
25667
  {
25534
25668
  type: "button",
@@ -25541,28 +25675,28 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
25541
25675
  )
25542
25676
  ]
25543
25677
  }
25544
- ) : !isLoading && /* @__PURE__ */ jsx61(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ jsxs45(Flex, { $flexDirection: "column", $gap: "1rem", children: [
25545
- props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsxs45(Text, { display: props.header.fontStyle, children: [
25678
+ ) : !isLoading && /* @__PURE__ */ jsx62(TransitionBox, { children: upcomingInvoice ? /* @__PURE__ */ jsxs46(Flex, { $flexDirection: "column", $gap: "1rem", children: [
25679
+ props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsxs46(Text, { display: props.header.fontStyle, children: [
25546
25680
  props.header.prefix,
25547
25681
  " ",
25548
25682
  toPrettyDate(upcomingInvoice.dueDate)
25549
25683
  ] }),
25550
- /* @__PURE__ */ jsxs45(
25684
+ /* @__PURE__ */ jsxs46(
25551
25685
  Flex,
25552
25686
  {
25553
25687
  $justifyContent: "space-between",
25554
25688
  $alignItems: "start",
25555
25689
  $gap: "1rem",
25556
25690
  children: [
25557
- props.price.isVisible && /* @__PURE__ */ jsx61(Text, { display: props.price.fontStyle, $leading: "none", children: formatCurrency(
25691
+ props.price.isVisible && /* @__PURE__ */ jsx62(Text, { display: props.price.fontStyle, $leading: "none", children: formatCurrency(
25558
25692
  upcomingInvoice.amountDue,
25559
25693
  upcomingInvoice.currency
25560
25694
  ) }),
25561
- /* @__PURE__ */ jsx61(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx61(Text, { display: props.contractEndDate.fontStyle, children: t3("Estimated bill") }) })
25695
+ /* @__PURE__ */ jsx62(Box, { $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx62(Text, { display: props.contractEndDate.fontStyle, children: t3("Estimated bill") }) })
25562
25696
  ]
25563
25697
  }
25564
25698
  ),
25565
- balances.length > 0 && /* @__PURE__ */ jsxs45(
25699
+ balances.length > 0 && /* @__PURE__ */ jsxs46(
25566
25700
  Flex,
25567
25701
  {
25568
25702
  as: TransitionBox,
@@ -25570,20 +25704,20 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
25570
25704
  $alignItems: "start",
25571
25705
  $gap: "1rem",
25572
25706
  children: [
25573
- /* @__PURE__ */ jsx61(Text, { $weight: 600, children: t3("Remaining balance") }),
25574
- /* @__PURE__ */ jsx61(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ jsx61(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
25707
+ /* @__PURE__ */ jsx62(Text, { $weight: 600, children: t3("Remaining balance") }),
25708
+ /* @__PURE__ */ jsx62(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ jsx62(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
25575
25709
  ]
25576
25710
  }
25577
25711
  ),
25578
- discounts.length > 0 && /* @__PURE__ */ jsxs45(
25712
+ discounts.length > 0 && /* @__PURE__ */ jsxs46(
25579
25713
  Flex,
25580
25714
  {
25581
25715
  $justifyContent: "space-between",
25582
25716
  $alignItems: "start",
25583
25717
  $gap: "1rem",
25584
25718
  children: [
25585
- /* @__PURE__ */ jsx61(Text, { $weight: 600, children: t3("Discount") }),
25586
- /* @__PURE__ */ jsx61(
25719
+ /* @__PURE__ */ jsx62(Text, { $weight: 600, children: t3("Discount") }),
25720
+ /* @__PURE__ */ jsx62(
25587
25721
  Flex,
25588
25722
  {
25589
25723
  $flexDirection: "column",
@@ -25593,13 +25727,13 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
25593
25727
  (acc, discount) => {
25594
25728
  if (typeof discount.percentOff === "number" || typeof discount.amountOff === "number") {
25595
25729
  acc.push(
25596
- /* @__PURE__ */ jsxs45(
25730
+ /* @__PURE__ */ jsxs46(
25597
25731
  Flex,
25598
25732
  {
25599
25733
  $alignItems: "center",
25600
25734
  $gap: "0.5rem",
25601
25735
  children: [
25602
- discount.customerFacingCode && /* @__PURE__ */ jsx61(
25736
+ discount.customerFacingCode && /* @__PURE__ */ jsx62(
25603
25737
  Flex,
25604
25738
  {
25605
25739
  $alignItems: "center",
@@ -25608,7 +25742,7 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
25608
25742
  $borderStyle: "solid",
25609
25743
  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
25610
25744
  $borderRadius: "0.3125rem",
25611
- children: /* @__PURE__ */ jsx61(
25745
+ children: /* @__PURE__ */ jsx62(
25612
25746
  Text,
25613
25747
  {
25614
25748
  $size: 0.75 * settings.theme.typography.text.fontSize,
@@ -25618,7 +25752,7 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
25618
25752
  )
25619
25753
  }
25620
25754
  ),
25621
- /* @__PURE__ */ jsx61(Box, { children: /* @__PURE__ */ jsx61(Text, { children: typeof discount.percentOff === "number" ? t3("Percent off", {
25755
+ /* @__PURE__ */ jsx62(Box, { children: /* @__PURE__ */ jsx62(Text, { children: typeof discount.percentOff === "number" ? t3("Percent off", {
25622
25756
  percent: discount.percentOff
25623
25757
  }) : t3("Amount off", {
25624
25758
  amount: formatCurrency(
@@ -25642,7 +25776,7 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
25642
25776
  ]
25643
25777
  }
25644
25778
  )
25645
- ] }) : /* @__PURE__ */ jsx61(Text, { display: "heading2", children: t3("No upcoming invoice") }) })
25779
+ ] }) : /* @__PURE__ */ jsx62(Text, { display: "heading2", children: t3("No upcoming invoice") }) })
25646
25780
  ] });
25647
25781
  });
25648
25782
  UpcomingBill.displayName = "UpcomingBill";
@@ -29902,11 +30036,11 @@ function createRenderer(options) {
29902
30036
  }
29903
30037
 
29904
30038
  // src/components/embed/Embed.tsx
29905
- import { jsx as jsx62, jsxs as jsxs46 } from "react/jsx-runtime";
30039
+ import { jsx as jsx63, jsxs as jsxs47 } from "react/jsx-runtime";
29906
30040
  var renderer = createRenderer();
29907
30041
  var Loading = () => {
29908
30042
  const { settings } = useEmbed();
29909
- return /* @__PURE__ */ jsx62(
30043
+ return /* @__PURE__ */ jsx63(
29910
30044
  Flex,
29911
30045
  {
29912
30046
  $width: "100%",
@@ -29914,13 +30048,13 @@ var Loading = () => {
29914
30048
  $alignItems: "center",
29915
30049
  $justifyContent: "center",
29916
30050
  $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
29917
- children: /* @__PURE__ */ jsx62(Loader, { $color: settings.theme.primary, $size: "2xl" })
30051
+ children: /* @__PURE__ */ jsx63(Loader, { $color: settings.theme.primary, $size: "2xl" })
29918
30052
  }
29919
30053
  );
29920
30054
  };
29921
30055
  var Error2 = ({ message }) => {
29922
30056
  const { settings } = useEmbed();
29923
- return /* @__PURE__ */ jsxs46(
30057
+ return /* @__PURE__ */ jsxs47(
29924
30058
  Flex,
29925
30059
  {
29926
30060
  $flexDirection: "column",
@@ -29931,8 +30065,8 @@ var Error2 = ({ message }) => {
29931
30065
  $alignItems: "center",
29932
30066
  $justifyContent: "center",
29933
30067
  children: [
29934
- /* @__PURE__ */ jsx62(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx62(Text, { display: "heading1", children: "Error" }) }),
29935
- /* @__PURE__ */ jsx62(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx62(Text, { children: message }) })
30068
+ /* @__PURE__ */ jsx63(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx63(Text, { display: "heading1", children: "Error" }) }),
30069
+ /* @__PURE__ */ jsx63(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx63(Text, { children: message }) })
29936
30070
  ]
29937
30071
  }
29938
30072
  );
@@ -30006,13 +30140,13 @@ var SchematicEmbed = ({ id, accessToken }) => {
30006
30140
  return stub();
30007
30141
  }
30008
30142
  if (error) {
30009
- return /* @__PURE__ */ jsx62(Error2, { message: error.message });
30143
+ return /* @__PURE__ */ jsx63(Error2, { message: error.message });
30010
30144
  }
30011
30145
  if (accessToken?.length === 0) {
30012
- return /* @__PURE__ */ jsx62(Error2, { message: "Please provide an access token." });
30146
+ return /* @__PURE__ */ jsx63(Error2, { message: "Please provide an access token." });
30013
30147
  }
30014
30148
  if (!accessToken?.startsWith("token_")) {
30015
- return /* @__PURE__ */ jsx62(
30149
+ return /* @__PURE__ */ jsx63(
30016
30150
  Error2,
30017
30151
  {
30018
30152
  message: 'Invalid access token; your temporary access token will start with "token_".'
@@ -30020,9 +30154,9 @@ var SchematicEmbed = ({ id, accessToken }) => {
30020
30154
  );
30021
30155
  }
30022
30156
  if (isPending) {
30023
- return /* @__PURE__ */ jsx62(Loading, {});
30157
+ return /* @__PURE__ */ jsx63(Loading, {});
30024
30158
  }
30025
- return /* @__PURE__ */ jsx62(Box, { className: "sch-Embed", "data-testid": "sch-embed", children: children ?? /* @__PURE__ */ jsx62(Loading, {}) });
30159
+ return /* @__PURE__ */ jsx63(Box, { className: "sch-Embed", "data-testid": "sch-embed", children: children ?? /* @__PURE__ */ jsx63(Loading, {}) });
30026
30160
  };
30027
30161
  export {
30028
30162
  AddOns,