@schematichq/schematic-components 0.4.9 → 0.4.11

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 +388 -363
  2. package/dist/schematic-components.d.ts +2 -2
  3. package/dist/schematic-components.esm.js +404 -379
  4. package/package.json +2 -2
package/dist/schematic-components.esm.js CHANGED
@@ -2076,7 +2076,7 @@ var require_pluralize = __commonJS({
2076
2076
  });
2077
2077
 
2078
2078
  // src/components/elements/included-features/IncludedFeatures.tsx
2079
- import { forwardRef as forwardRef7, useRef as useRef6, useState as useState12 } from "react";
2079
+ import { forwardRef as forwardRef7, useRef as useRef7, useState as useState12 } from "react";
2080
2080
 
2081
2081
  // node_modules/react-i18next/dist/es/Trans.js
2082
2082
  import { useContext } from "react";
@@ -12776,7 +12776,7 @@ var EmbedProvider = ({
12776
12776
  useEffect2(() => {
12777
12777
  if (accessToken) {
12778
12778
  const { headers = {} } = apiConfig ?? {};
12779
- headers["X-Schematic-Components-Version"] = "0.4.9";
12779
+ headers["X-Schematic-Components-Version"] = "0.4.11";
12780
12780
  headers["X-Schematic-Session-ID"] = sessionIdRef.current;
12781
12781
  const config = new Configuration({
12782
12782
  ...apiConfig,
@@ -13775,7 +13775,7 @@ var Loader = dt.div`
13775
13775
  `;
13776
13776
 
13777
13777
  // src/components/ui/modal/Modal.tsx
13778
- import { forwardRef as forwardRef2, useCallback as useCallback4 } from "react";
13778
+ import { forwardRef as forwardRef2, useCallback as useCallback4, useLayoutEffect as useLayoutEffect2 } from "react";
13779
13779
  import { jsx as jsx5 } from "react/jsx-runtime";
13780
13780
  var Modal = forwardRef2(
13781
13781
  ({ children, contentRef, size = "auto", top = 0, onClose, ...rest }, ref) => {
@@ -13786,6 +13786,9 @@ var Modal = forwardRef2(
13786
13786
  setLayout("portal");
13787
13787
  onClose?.();
13788
13788
  }, [setLayout, onClose]);
13789
+ useLayoutEffect2(() => {
13790
+ contentRef?.current?.focus({ preventScroll: true });
13791
+ }, [contentRef]);
13789
13792
  return /* @__PURE__ */ jsx5(
13790
13793
  Container2,
13791
13794
  {
@@ -13819,6 +13822,9 @@ var Modal = forwardRef2(
13819
13822
  Flex,
13820
13823
  {
13821
13824
  ref: contentRef,
13825
+ tabIndex: 0,
13826
+ role: "dialog",
13827
+ "aria-modal": "true",
13822
13828
  $position: "relative",
13823
13829
  $top: "50%",
13824
13830
  $left: "50%",
@@ -13829,8 +13835,6 @@ var Modal = forwardRef2(
13829
13835
  $height: "100vh",
13830
13836
  $backgroundColor: theme.card.background,
13831
13837
  $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
13832
- role: "dialog",
13833
- "aria-modal": "true",
13834
13838
  $viewport: {
13835
13839
  md: {
13836
13840
  ...size === "auto" ? { $width: "fit-content", $height: "fit-content" } : {
@@ -14019,7 +14023,7 @@ var Text = dt.span.attrs(({ onClick }) => ({
14019
14023
  `;
14020
14024
 
14021
14025
  // src/components/ui/tooltip/Tooltip.tsx
14022
- import { useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState4 } from "react";
14026
+ import { useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState4 } from "react";
14023
14027
  import { createPortal } from "react-dom";
14024
14028
 
14025
14029
  // src/components/ui/tooltip/styles.ts
@@ -14160,7 +14164,7 @@ var Tooltip = ({
14160
14164
  const ref = useRef4(null);
14161
14165
  const [show, setShow] = useState4(false);
14162
14166
  const [coords2, setCoords] = useState4({ x: 0, y: 0 });
14163
- useLayoutEffect2(() => {
14167
+ useLayoutEffect3(() => {
14164
14168
  if (ref.current) {
14165
14169
  const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
14166
14170
  const rect = ref.current.getBoundingClientRect();
@@ -14223,121 +14227,19 @@ var Root = forwardRef3(
14223
14227
  Root.displayName = "Root";
14224
14228
 
14225
14229
  // src/components/layout/viewport/Viewport.tsx
14226
- import { forwardRef as forwardRef4, useLayoutEffect as useLayoutEffect5, useState as useState11 } from "react";
14230
+ import { forwardRef as forwardRef4, useLayoutEffect as useLayoutEffect6, useState as useState11 } from "react";
14227
14231
  import { createPortal as createPortal2 } from "react-dom";
14228
14232
 
14229
14233
  // src/components/shared/checkout-dialog/CheckoutDialog.tsx
14230
14234
  import {
14231
14235
  useCallback as useCallback7,
14232
14236
  useEffect as useEffect5,
14233
- useLayoutEffect as useLayoutEffect3,
14237
+ useLayoutEffect as useLayoutEffect4,
14234
14238
  useMemo as useMemo5,
14235
14239
  useRef as useRef5,
14236
14240
  useState as useState7
14237
14241
  } from "react";
14238
14242
 
14239
- // src/components/shared/checkout-dialog/Navigation.tsx
14240
- import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
14241
- var Navigation = ({
14242
- name,
14243
- index,
14244
- activeIndex,
14245
- isLast,
14246
- onClick
14247
- }) => {
14248
- const theme = nt();
14249
- const isLightBackground = useIsLightBackground();
14250
- const showFullContent = index === activeIndex || index === activeIndex + 1;
14251
- return /* @__PURE__ */ jsxs6(Fragment3, { children: [
14252
- /* @__PURE__ */ jsxs6(
14253
- Flex,
14254
- {
14255
- $gap: "0.5rem",
14256
- $alignItems: "center",
14257
- ...!showFullContent && { $flexGrow: 1, $minWidth: 0 },
14258
- children: [
14259
- /* @__PURE__ */ jsx10(
14260
- Box,
14261
- {
14262
- $display: "none",
14263
- $viewport: {
14264
- md: {
14265
- $display: "block"
14266
- }
14267
- },
14268
- children: index >= activeIndex ? /* @__PURE__ */ jsx10(
14269
- Box,
14270
- {
14271
- $width: `${20 / TEXT_BASE_SIZE}rem`,
14272
- $height: `${20 / TEXT_BASE_SIZE}rem`,
14273
- $borderWidth: "2px",
14274
- $borderStyle: "solid",
14275
- $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
14276
- $borderRadius: "9999px"
14277
- }
14278
- ) : /* @__PURE__ */ jsx10(
14279
- IconRound,
14280
- {
14281
- name: "check",
14282
- colors: [
14283
- theme.card.background,
14284
- isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
14285
- ],
14286
- style: {
14287
- fontSize: `${16 / TEXT_BASE_SIZE}rem`,
14288
- width: `${20 / TEXT_BASE_SIZE}rem`,
14289
- height: `${20 / TEXT_BASE_SIZE}rem`
14290
- }
14291
- }
14292
- )
14293
- }
14294
- ),
14295
- /* @__PURE__ */ jsxs6(
14296
- Box,
14297
- {
14298
- tabIndex: 0,
14299
- $fontSize: `${16 / TEXT_BASE_SIZE}rem`,
14300
- $fontFamily: theme.typography.text.fontFamily,
14301
- $fontWeight: index === activeIndex ? 600 : 400,
14302
- $color: theme.typography.text.color,
14303
- ...!showFullContent && {
14304
- $overflow: "hidden",
14305
- $whiteSpace: "nowrap",
14306
- $textOverflow: "ellipsis"
14307
- },
14308
- ...index !== activeIndex && { $opacity: "0.6375" },
14309
- ...index < activeIndex && {
14310
- onClick,
14311
- $cursor: "pointer"
14312
- },
14313
- $viewport: {
14314
- md: {
14315
- $fontSize: `${19 / TEXT_BASE_SIZE}rem`
14316
- }
14317
- },
14318
- children: [
14319
- index + 1,
14320
- ". ",
14321
- name
14322
- ]
14323
- }
14324
- )
14325
- ]
14326
- }
14327
- ),
14328
- !isLast && /* @__PURE__ */ jsx10(
14329
- Icon2,
14330
- {
14331
- name: "chevron-right",
14332
- style: {
14333
- fontSize: 16,
14334
- color: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.35)"
14335
- }
14336
- }
14337
- )
14338
- ] });
14339
- };
14340
-
14341
14243
  // src/components/shared/sidebar/Sidebar.tsx
14342
14244
  import {
14343
14245
  useCallback as useCallback6,
@@ -14346,7 +14248,7 @@ import {
14346
14248
  var import_pluralize = __toESM(require_pluralize());
14347
14249
 
14348
14250
  // src/components/shared/sidebar/StageButton.tsx
14349
- import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
14251
+ import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
14350
14252
  var StageButton = ({
14351
14253
  canTrial,
14352
14254
  canCheckout,
@@ -14363,7 +14265,7 @@ var StageButton = ({
14363
14265
  }) => {
14364
14266
  const { t: t2 } = useTranslation();
14365
14267
  const NoPaymentRequired = () => {
14366
- return /* @__PURE__ */ jsx11(
14268
+ return /* @__PURE__ */ jsx10(
14367
14269
  EmbedButton,
14368
14270
  {
14369
14271
  type: "button",
@@ -14377,7 +14279,7 @@ var StageButton = ({
14377
14279
  if (checkoutStage === "plan") {
14378
14280
  if (canTrial) {
14379
14281
  if (trialPaymentMethodRequired) {
14380
- return /* @__PURE__ */ jsx11(
14282
+ return /* @__PURE__ */ jsx10(
14381
14283
  EmbedButton,
14382
14284
  {
14383
14285
  type: "button",
@@ -14386,7 +14288,7 @@ var StageButton = ({
14386
14288
  setCheckoutStage?.("checkout");
14387
14289
  },
14388
14290
  isLoading,
14389
- children: /* @__PURE__ */ jsxs7(
14291
+ children: /* @__PURE__ */ jsxs6(
14390
14292
  Flex,
14391
14293
  {
14392
14294
  $gap: "0.5rem",
@@ -14397,14 +14299,14 @@ var StageButton = ({
14397
14299
  t2("Next"),
14398
14300
  ": ",
14399
14301
  t2("Checkout"),
14400
- /* @__PURE__ */ jsx11(Icon2, { name: "arrow-right" })
14302
+ /* @__PURE__ */ jsx10(Icon2, { name: "arrow-right" })
14401
14303
  ]
14402
14304
  }
14403
14305
  )
14404
14306
  }
14405
14307
  );
14406
14308
  }
14407
- return /* @__PURE__ */ jsx11(
14309
+ return /* @__PURE__ */ jsx10(
14408
14310
  EmbedButton,
14409
14311
  {
14410
14312
  type: "button",
@@ -14413,7 +14315,7 @@ var StageButton = ({
14413
14315
  checkout();
14414
14316
  },
14415
14317
  isLoading,
14416
- children: /* @__PURE__ */ jsxs7(
14318
+ children: /* @__PURE__ */ jsxs6(
14417
14319
  Flex,
14418
14320
  {
14419
14321
  $gap: "0.5rem",
@@ -14422,7 +14324,7 @@ var StageButton = ({
14422
14324
  $padding: "0 1rem",
14423
14325
  children: [
14424
14326
  t2("Subscribe and close"),
14425
- /* @__PURE__ */ jsx11(Icon2, { name: "arrow-right" })
14327
+ /* @__PURE__ */ jsx10(Icon2, { name: "arrow-right" })
14426
14328
  ]
14427
14329
  }
14428
14330
  )
@@ -14432,9 +14334,9 @@ var StageButton = ({
14432
14334
  if (!requiresPayment && !checkoutStages?.some(
14433
14335
  (stage) => stage.id === "addons" || stage.id === "usage"
14434
14336
  )) {
14435
- return /* @__PURE__ */ jsx11(NoPaymentRequired, {});
14337
+ return /* @__PURE__ */ jsx10(NoPaymentRequired, {});
14436
14338
  }
14437
- return /* @__PURE__ */ jsx11(
14339
+ return /* @__PURE__ */ jsx10(
14438
14340
  EmbedButton,
14439
14341
  {
14440
14342
  type: "button",
@@ -14445,7 +14347,7 @@ var StageButton = ({
14445
14347
  );
14446
14348
  },
14447
14349
  isLoading,
14448
- children: /* @__PURE__ */ jsxs7(
14350
+ children: /* @__PURE__ */ jsxs6(
14449
14351
  Flex,
14450
14352
  {
14451
14353
  $gap: "0.5rem",
@@ -14457,7 +14359,7 @@ var StageButton = ({
14457
14359
  ":",
14458
14360
  " ",
14459
14361
  hasPayInAdvanceEntitlements ? t2("Usage") : hasAddOns ? t2("Addons") : t2("Checkout"),
14460
- /* @__PURE__ */ jsx11(Icon2, { name: "arrow-right" })
14362
+ /* @__PURE__ */ jsx10(Icon2, { name: "arrow-right" })
14461
14363
  ]
14462
14364
  }
14463
14365
  )
@@ -14466,9 +14368,9 @@ var StageButton = ({
14466
14368
  }
14467
14369
  if (checkoutStage === "usage") {
14468
14370
  if (!requiresPayment) {
14469
- return /* @__PURE__ */ jsx11(NoPaymentRequired, {});
14371
+ return /* @__PURE__ */ jsx10(NoPaymentRequired, {});
14470
14372
  }
14471
- return /* @__PURE__ */ jsx11(
14373
+ return /* @__PURE__ */ jsx10(
14472
14374
  EmbedButton,
14473
14375
  {
14474
14376
  type: "button",
@@ -14477,7 +14379,7 @@ var StageButton = ({
14477
14379
  setCheckoutStage?.(hasAddOns ? "addons" : "checkout");
14478
14380
  },
14479
14381
  isLoading,
14480
- children: /* @__PURE__ */ jsxs7(
14382
+ children: /* @__PURE__ */ jsxs6(
14481
14383
  Flex,
14482
14384
  {
14483
14385
  $gap: "0.5rem",
@@ -14488,7 +14390,7 @@ var StageButton = ({
14488
14390
  t2("Next"),
14489
14391
  ": ",
14490
14392
  hasAddOns ? t2("Addons") : t2("Checkout"),
14491
- /* @__PURE__ */ jsx11(Icon2, { name: "arrow-right" })
14393
+ /* @__PURE__ */ jsx10(Icon2, { name: "arrow-right" })
14492
14394
  ]
14493
14395
  }
14494
14396
  )
@@ -14497,9 +14399,9 @@ var StageButton = ({
14497
14399
  }
14498
14400
  if (checkoutStage === "addons") {
14499
14401
  if (!requiresPayment) {
14500
- return /* @__PURE__ */ jsx11(NoPaymentRequired, {});
14402
+ return /* @__PURE__ */ jsx10(NoPaymentRequired, {});
14501
14403
  }
14502
- return /* @__PURE__ */ jsx11(
14404
+ return /* @__PURE__ */ jsx10(
14503
14405
  EmbedButton,
14504
14406
  {
14505
14407
  type: "button",
@@ -14508,7 +14410,7 @@ var StageButton = ({
14508
14410
  setCheckoutStage?.("checkout");
14509
14411
  },
14510
14412
  isLoading,
14511
- children: /* @__PURE__ */ jsxs7(
14413
+ children: /* @__PURE__ */ jsxs6(
14512
14414
  Flex,
14513
14415
  {
14514
14416
  $gap: "0.5rem",
@@ -14519,7 +14421,7 @@ var StageButton = ({
14519
14421
  t2("Next"),
14520
14422
  ": ",
14521
14423
  t2("Checkout"),
14522
- /* @__PURE__ */ jsx11(Icon2, { name: "arrow-right" })
14424
+ /* @__PURE__ */ jsx10(Icon2, { name: "arrow-right" })
14523
14425
  ]
14524
14426
  }
14525
14427
  )
@@ -14528,9 +14430,9 @@ var StageButton = ({
14528
14430
  }
14529
14431
  if (checkoutStage === "checkout") {
14530
14432
  if (!requiresPayment) {
14531
- return /* @__PURE__ */ jsx11(NoPaymentRequired, {});
14433
+ return /* @__PURE__ */ jsx10(NoPaymentRequired, {});
14532
14434
  }
14533
- return /* @__PURE__ */ jsx11(
14435
+ return /* @__PURE__ */ jsx10(
14534
14436
  EmbedButton,
14535
14437
  {
14536
14438
  type: "button",
@@ -14544,7 +14446,7 @@ var StageButton = ({
14544
14446
  };
14545
14447
 
14546
14448
  // src/components/shared/sidebar/Sidebar.tsx
14547
- import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
14449
+ import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
14548
14450
  var Sidebar = ({
14549
14451
  planPeriod,
14550
14452
  selectedPlan,
@@ -14777,7 +14679,7 @@ var Sidebar = ({
14777
14679
  if (isTrialable && selectedPlan.trialDays) {
14778
14680
  trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
14779
14681
  }
14780
- return /* @__PURE__ */ jsxs8(
14682
+ return /* @__PURE__ */ jsxs7(
14781
14683
  Flex,
14782
14684
  {
14783
14685
  ref: checkoutRef,
@@ -14794,7 +14696,7 @@ var Sidebar = ({
14794
14696
  }
14795
14697
  },
14796
14698
  children: [
14797
- showHeader && /* @__PURE__ */ jsx12(
14699
+ showHeader && /* @__PURE__ */ jsx11(
14798
14700
  Flex,
14799
14701
  {
14800
14702
  $position: "relative",
@@ -14806,7 +14708,7 @@ var Sidebar = ({
14806
14708
  $borderBottomWidth: "1px",
14807
14709
  $borderStyle: "solid",
14808
14710
  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
14809
- children: /* @__PURE__ */ jsx12(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx12(
14711
+ children: /* @__PURE__ */ jsx11(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx11(
14810
14712
  Text,
14811
14713
  {
14812
14714
  as: "h3",
@@ -14819,7 +14721,7 @@ var Sidebar = ({
14819
14721
  ) })
14820
14722
  }
14821
14723
  ),
14822
- /* @__PURE__ */ jsxs8(
14724
+ /* @__PURE__ */ jsxs7(
14823
14725
  Flex,
14824
14726
  {
14825
14727
  $position: "relative",
@@ -14833,7 +14735,7 @@ var Sidebar = ({
14833
14735
  $borderStyle: "solid",
14834
14736
  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
14835
14737
  children: [
14836
- /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
14738
+ /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
14837
14739
  Text,
14838
14740
  {
14839
14741
  $font: theme.typography.text.fontFamily,
@@ -14843,8 +14745,8 @@ var Sidebar = ({
14843
14745
  children: t2("Plan")
14844
14746
  }
14845
14747
  ) }),
14846
- /* @__PURE__ */ jsxs8(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
14847
- data.company?.plan && /* @__PURE__ */ jsxs8(
14748
+ /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
14749
+ data.company?.plan && /* @__PURE__ */ jsxs7(
14848
14750
  Flex,
14849
14751
  {
14850
14752
  $justifyContent: "space-between",
@@ -14856,7 +14758,7 @@ var Sidebar = ({
14856
14758
  $color: theme.typography.heading4.color
14857
14759
  },
14858
14760
  children: [
14859
- /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
14761
+ /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
14860
14762
  Text,
14861
14763
  {
14862
14764
  $font: theme.typography.heading4.fontFamily,
@@ -14866,7 +14768,7 @@ var Sidebar = ({
14866
14768
  children: data.company.plan.name
14867
14769
  }
14868
14770
  ) }),
14869
- typeof data.company.plan.planPrice === "number" && /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
14771
+ typeof data.company.plan.planPrice === "number" && /* @__PURE__ */ jsx11(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs7(
14870
14772
  Text,
14871
14773
  {
14872
14774
  $font: theme.typography.text.fontFamily,
@@ -14878,7 +14780,7 @@ var Sidebar = ({
14878
14780
  data.company.plan.planPrice,
14879
14781
  data.company.billingSubscription?.currency
14880
14782
  ),
14881
- /* @__PURE__ */ jsxs8("sub", { children: [
14783
+ /* @__PURE__ */ jsxs7("sub", { children: [
14882
14784
  "/",
14883
14785
  shortenPeriod(
14884
14786
  data.company.plan.planPeriod || planPeriod
@@ -14890,8 +14792,8 @@ var Sidebar = ({
14890
14792
  ]
14891
14793
  }
14892
14794
  ),
14893
- willPlanChange && /* @__PURE__ */ jsxs8(Box, { children: [
14894
- /* @__PURE__ */ jsx12(
14795
+ willPlanChange && /* @__PURE__ */ jsxs7(Box, { children: [
14796
+ /* @__PURE__ */ jsx11(
14895
14797
  Box,
14896
14798
  {
14897
14799
  $width: "100%",
@@ -14899,7 +14801,7 @@ var Sidebar = ({
14899
14801
  $opacity: "50%",
14900
14802
  $marginBottom: "0.25rem",
14901
14803
  $marginTop: "-0.25rem",
14902
- children: /* @__PURE__ */ jsx12(
14804
+ children: /* @__PURE__ */ jsx11(
14903
14805
  Icon2,
14904
14806
  {
14905
14807
  name: "arrow-down",
@@ -14911,14 +14813,14 @@ var Sidebar = ({
14911
14813
  )
14912
14814
  }
14913
14815
  ),
14914
- /* @__PURE__ */ jsxs8(
14816
+ /* @__PURE__ */ jsxs7(
14915
14817
  Flex,
14916
14818
  {
14917
14819
  $justifyContent: "space-between",
14918
14820
  $alignItems: "center",
14919
14821
  $gap: "1rem",
14920
14822
  children: [
14921
- /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsx12(
14823
+ /* @__PURE__ */ jsx11(Flex, { children: /* @__PURE__ */ jsx11(
14922
14824
  Text,
14923
14825
  {
14924
14826
  $font: theme.typography.heading4.fontFamily,
@@ -14928,7 +14830,7 @@ var Sidebar = ({
14928
14830
  children: selectedPlan.name
14929
14831
  }
14930
14832
  ) }),
14931
- /* @__PURE__ */ jsx12(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
14833
+ /* @__PURE__ */ jsx11(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs7(
14932
14834
  Text,
14933
14835
  {
14934
14836
  $font: theme.typography.text.fontFamily,
@@ -14940,7 +14842,7 @@ var Sidebar = ({
14940
14842
  (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0,
14941
14843
  (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.currency
14942
14844
  ),
14943
- /* @__PURE__ */ jsxs8("sub", { children: [
14845
+ /* @__PURE__ */ jsxs7("sub", { children: [
14944
14846
  "/",
14945
14847
  shortenPeriod(planPeriod)
14946
14848
  ] })
@@ -14952,8 +14854,8 @@ var Sidebar = ({
14952
14854
  )
14953
14855
  ] })
14954
14856
  ] }),
14955
- willUsageBasedEntitlementsChange && /* @__PURE__ */ jsxs8(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
14956
- /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
14857
+ willUsageBasedEntitlementsChange && /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
14858
+ /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
14957
14859
  Text,
14958
14860
  {
14959
14861
  $font: theme.typography.text.fontFamily,
@@ -14968,7 +14870,7 @@ var Sidebar = ({
14968
14870
  if (typeof allocation === "number" && usage.feature?.name) {
14969
14871
  const price = (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.price;
14970
14872
  acc.push(
14971
- /* @__PURE__ */ jsxs8(
14873
+ /* @__PURE__ */ jsxs7(
14972
14874
  Flex,
14973
14875
  {
14974
14876
  $justifyContent: "space-between",
@@ -14978,21 +14880,21 @@ var Sidebar = ({
14978
14880
  $textDecoration: "line-through",
14979
14881
  $color: theme.typography.heading4.color,
14980
14882
  children: [
14981
- /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
14883
+ /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
14982
14884
  Text,
14983
14885
  {
14984
14886
  $font: theme.typography.heading4.fontFamily,
14985
14887
  $size: theme.typography.heading4.fontSize,
14986
14888
  $weight: theme.typography.heading4.fontWeight,
14987
14889
  $color: theme.typography.heading4.color,
14988
- children: usage.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
14890
+ children: usage.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
14989
14891
  quantity,
14990
14892
  " ",
14991
14893
  (0, import_pluralize.default)(usage.feature.name, quantity)
14992
14894
  ] }) : usage.feature.name
14993
14895
  }
14994
14896
  ) }),
14995
- /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
14897
+ /* @__PURE__ */ jsx11(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs7(
14996
14898
  Text,
14997
14899
  {
14998
14900
  $font: theme.typography.text.fontFamily,
@@ -15000,22 +14902,22 @@ var Sidebar = ({
15000
14902
  $weight: theme.typography.text.fontWeight,
15001
14903
  $color: theme.typography.text.color,
15002
14904
  children: [
15003
- usage.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ jsxs8(Fragment4, { children: [
14905
+ usage.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ jsxs7(Fragment3, { children: [
15004
14906
  formatCurrency(
15005
14907
  price * quantity,
15006
14908
  (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.currency
15007
14909
  ),
15008
- /* @__PURE__ */ jsxs8("sub", { children: [
14910
+ /* @__PURE__ */ jsxs7("sub", { children: [
15009
14911
  "/",
15010
14912
  shortenPeriod(planPeriod)
15011
14913
  ] })
15012
14914
  ] }),
15013
- usage.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ jsxs8(Fragment4, { children: [
14915
+ usage.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ jsxs7(Fragment3, { children: [
15014
14916
  formatCurrency(
15015
14917
  price,
15016
14918
  (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.currency
15017
14919
  ),
15018
- /* @__PURE__ */ jsxs8("sub", { children: [
14920
+ /* @__PURE__ */ jsxs7("sub", { children: [
15019
14921
  "/",
15020
14922
  (0, import_pluralize.default)(
15021
14923
  usage.feature.name.toLowerCase(),
@@ -15040,8 +14942,8 @@ var Sidebar = ({
15040
14942
  (acc, { entitlement, previous, next: next2 }) => {
15041
14943
  if (entitlement?.feature?.name) {
15042
14944
  acc.push(
15043
- /* @__PURE__ */ jsxs8(Box, { children: [
15044
- /* @__PURE__ */ jsxs8(
14945
+ /* @__PURE__ */ jsxs7(Box, { children: [
14946
+ /* @__PURE__ */ jsxs7(
15045
14947
  Flex,
15046
14948
  {
15047
14949
  $justifyContent: "space-between",
@@ -15051,7 +14953,7 @@ var Sidebar = ({
15051
14953
  $textDecoration: "line-through",
15052
14954
  $color: theme.typography.heading4.color,
15053
14955
  children: [
15054
- /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsxs8(
14956
+ /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsxs7(
15055
14957
  Text,
15056
14958
  {
15057
14959
  $font: theme.typography.heading4.fontFamily,
@@ -15065,7 +14967,7 @@ var Sidebar = ({
15065
14967
  ]
15066
14968
  }
15067
14969
  ) }),
15068
- /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
14970
+ /* @__PURE__ */ jsx11(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs7(
15069
14971
  Text,
15070
14972
  {
15071
14973
  $font: theme.typography.text.fontFamily,
@@ -15077,7 +14979,7 @@ var Sidebar = ({
15077
14979
  ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * previous.quantity,
15078
14980
  (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
15079
14981
  ),
15080
- /* @__PURE__ */ jsxs8("sub", { children: [
14982
+ /* @__PURE__ */ jsxs7("sub", { children: [
15081
14983
  "/",
15082
14984
  shortenPeriod(planPeriod)
15083
14985
  ] })
@@ -15087,14 +14989,14 @@ var Sidebar = ({
15087
14989
  ]
15088
14990
  }
15089
14991
  ),
15090
- /* @__PURE__ */ jsxs8(
14992
+ /* @__PURE__ */ jsxs7(
15091
14993
  Flex,
15092
14994
  {
15093
14995
  $justifyContent: "space-between",
15094
14996
  $alignItems: "center",
15095
14997
  $gap: "1rem",
15096
14998
  children: [
15097
- /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsxs8(
14999
+ /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsxs7(
15098
15000
  Text,
15099
15001
  {
15100
15002
  $font: theme.typography.heading4.fontFamily,
@@ -15108,7 +15010,7 @@ var Sidebar = ({
15108
15010
  ]
15109
15011
  }
15110
15012
  ) }),
15111
- /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
15013
+ /* @__PURE__ */ jsx11(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs7(
15112
15014
  Text,
15113
15015
  {
15114
15016
  $font: theme.typography.text.fontFamily,
@@ -15120,7 +15022,7 @@ var Sidebar = ({
15120
15022
  ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * next2.quantity,
15121
15023
  (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
15122
15024
  ),
15123
- /* @__PURE__ */ jsxs8("sub", { children: [
15025
+ /* @__PURE__ */ jsxs7("sub", { children: [
15124
15026
  "/",
15125
15027
  shortenPeriod(planPeriod)
15126
15028
  ] })
@@ -15142,28 +15044,28 @@ var Sidebar = ({
15142
15044
  if (entitlement.feature?.name) {
15143
15045
  const price = (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price;
15144
15046
  acc.push(
15145
- /* @__PURE__ */ jsxs8(
15047
+ /* @__PURE__ */ jsxs7(
15146
15048
  Flex,
15147
15049
  {
15148
15050
  $justifyContent: "space-between",
15149
15051
  $alignItems: "center",
15150
15052
  $gap: "1rem",
15151
15053
  children: [
15152
- /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
15054
+ /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
15153
15055
  Text,
15154
15056
  {
15155
15057
  $font: theme.typography.heading4.fontFamily,
15156
15058
  $size: theme.typography.heading4.fontSize,
15157
15059
  $weight: theme.typography.heading4.fontWeight,
15158
15060
  $color: theme.typography.heading4.color,
15159
- children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
15061
+ children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
15160
15062
  quantity,
15161
15063
  " ",
15162
15064
  (0, import_pluralize.default)(entitlement.feature.name, quantity)
15163
15065
  ] }) : entitlement.feature.name
15164
15066
  }
15165
15067
  ) }),
15166
- /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
15068
+ /* @__PURE__ */ jsx11(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs7(
15167
15069
  Text,
15168
15070
  {
15169
15071
  $font: theme.typography.text.fontFamily,
@@ -15171,22 +15073,22 @@ var Sidebar = ({
15171
15073
  $weight: theme.typography.text.fontWeight,
15172
15074
  $color: theme.typography.text.color,
15173
15075
  children: [
15174
- entitlement.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ jsxs8(Fragment4, { children: [
15076
+ entitlement.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ jsxs7(Fragment3, { children: [
15175
15077
  formatCurrency(
15176
15078
  price * quantity,
15177
15079
  (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
15178
15080
  ),
15179
- /* @__PURE__ */ jsxs8("sub", { children: [
15081
+ /* @__PURE__ */ jsxs7("sub", { children: [
15180
15082
  "/",
15181
15083
  shortenPeriod(planPeriod)
15182
15084
  ] })
15183
15085
  ] }),
15184
- entitlement.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ jsxs8(Fragment4, { children: [
15086
+ entitlement.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ jsxs7(Fragment3, { children: [
15185
15087
  formatCurrency(
15186
15088
  price,
15187
15089
  (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
15188
15090
  ),
15189
- /* @__PURE__ */ jsxs8("sub", { children: [
15091
+ /* @__PURE__ */ jsxs7("sub", { children: [
15190
15092
  "/",
15191
15093
  (0, import_pluralize.default)(
15192
15094
  entitlement.feature.name.toLowerCase(),
@@ -15208,8 +15110,8 @@ var Sidebar = ({
15208
15110
  []
15209
15111
  )
15210
15112
  ] }),
15211
- selectedPlan && isTrialable && /* @__PURE__ */ jsxs8(Box, { children: [
15212
- /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
15113
+ selectedPlan && isTrialable && /* @__PURE__ */ jsxs7(Box, { children: [
15114
+ /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
15213
15115
  Text,
15214
15116
  {
15215
15117
  $font: theme.typography.text.fontFamily,
@@ -15219,14 +15121,14 @@ var Sidebar = ({
15219
15121
  children: t2("Trial")
15220
15122
  }
15221
15123
  ) }),
15222
- /* @__PURE__ */ jsxs8(
15124
+ /* @__PURE__ */ jsxs7(
15223
15125
  Flex,
15224
15126
  {
15225
15127
  $justifyContent: "space-between",
15226
15128
  $alignItems: "center",
15227
15129
  $gap: "1rem",
15228
15130
  children: [
15229
- /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsx12(
15131
+ /* @__PURE__ */ jsx11(Flex, { children: /* @__PURE__ */ jsx11(
15230
15132
  Text,
15231
15133
  {
15232
15134
  $font: theme.typography.heading4.fontFamily,
@@ -15236,7 +15138,7 @@ var Sidebar = ({
15236
15138
  children: t2("Ends on", { date: trialEndsOn.toLocaleDateString() })
15237
15139
  }
15238
15140
  ) }),
15239
- /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsxs8(
15141
+ /* @__PURE__ */ jsx11(Flex, { children: /* @__PURE__ */ jsxs7(
15240
15142
  Text,
15241
15143
  {
15242
15144
  $font: theme.typography.text.fontFamily,
@@ -15250,7 +15152,7 @@ var Sidebar = ({
15250
15152
  (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.currency
15251
15153
  ),
15252
15154
  "/",
15253
- /* @__PURE__ */ jsx12("sub", { children: shortenPeriod(planPeriod) })
15155
+ /* @__PURE__ */ jsx11("sub", { children: shortenPeriod(planPeriod) })
15254
15156
  ]
15255
15157
  }
15256
15158
  ) })
@@ -15258,8 +15160,8 @@ var Sidebar = ({
15258
15160
  }
15259
15161
  )
15260
15162
  ] }),
15261
- (willAddOnsChange || selectedAddOns.length > 0) && /* @__PURE__ */ jsxs8(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
15262
- /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
15163
+ (willAddOnsChange || selectedAddOns.length > 0) && /* @__PURE__ */ jsxs7(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
15164
+ /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
15263
15165
  Text,
15264
15166
  {
15265
15167
  $font: theme.typography.text.fontFamily,
@@ -15269,7 +15171,7 @@ var Sidebar = ({
15269
15171
  children: t2("Add-ons")
15270
15172
  }
15271
15173
  ) }),
15272
- removedAddOns.map((addOn) => /* @__PURE__ */ jsxs8(
15174
+ removedAddOns.map((addOn) => /* @__PURE__ */ jsxs7(
15273
15175
  Flex,
15274
15176
  {
15275
15177
  $justifyContent: "space-between",
@@ -15279,7 +15181,7 @@ var Sidebar = ({
15279
15181
  $textDecoration: "line-through",
15280
15182
  $color: theme.typography.heading4.color,
15281
15183
  children: [
15282
- /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
15184
+ /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
15283
15185
  Text,
15284
15186
  {
15285
15187
  $font: theme.typography.heading4.fontFamily,
@@ -15289,7 +15191,7 @@ var Sidebar = ({
15289
15191
  children: addOn.name
15290
15192
  }
15291
15193
  ) }),
15292
- typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
15194
+ typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx11(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs7(
15293
15195
  Text,
15294
15196
  {
15295
15197
  $font: theme.typography.text.fontFamily,
@@ -15301,7 +15203,7 @@ var Sidebar = ({
15301
15203
  addOn.planPrice,
15302
15204
  (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
15303
15205
  ),
15304
- /* @__PURE__ */ jsxs8("sub", { children: [
15206
+ /* @__PURE__ */ jsxs7("sub", { children: [
15305
15207
  "/",
15306
15208
  shortenPeriod(addOn.planPeriod)
15307
15209
  ] })
@@ -15312,14 +15214,14 @@ var Sidebar = ({
15312
15214
  },
15313
15215
  addOn.id
15314
15216
  )),
15315
- selectedAddOns.map((addOn) => /* @__PURE__ */ jsxs8(
15217
+ selectedAddOns.map((addOn) => /* @__PURE__ */ jsxs7(
15316
15218
  Flex,
15317
15219
  {
15318
15220
  $justifyContent: "space-between",
15319
15221
  $alignItems: "center",
15320
15222
  $gap: "1rem",
15321
15223
  children: [
15322
- /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
15224
+ /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
15323
15225
  Text,
15324
15226
  {
15325
15227
  $font: theme.typography.heading4.fontFamily,
@@ -15329,7 +15231,7 @@ var Sidebar = ({
15329
15231
  children: addOn.name
15330
15232
  }
15331
15233
  ) }),
15332
- /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
15234
+ /* @__PURE__ */ jsx11(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs7(
15333
15235
  Text,
15334
15236
  {
15335
15237
  $font: theme.typography.text.fontFamily,
@@ -15340,7 +15242,7 @@ var Sidebar = ({
15340
15242
  formatCurrency(
15341
15243
  (planPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0
15342
15244
  ),
15343
- /* @__PURE__ */ jsxs8("sub", { children: [
15245
+ /* @__PURE__ */ jsxs7("sub", { children: [
15344
15246
  "/",
15345
15247
  shortenPeriod(planPeriod)
15346
15248
  ] })
@@ -15352,8 +15254,8 @@ var Sidebar = ({
15352
15254
  addOn.id
15353
15255
  ))
15354
15256
  ] }),
15355
- proration !== 0 && /* @__PURE__ */ jsxs8(Fragment4, { children: [
15356
- /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
15257
+ proration !== 0 && /* @__PURE__ */ jsxs7(Fragment3, { children: [
15258
+ /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
15357
15259
  Text,
15358
15260
  {
15359
15261
  $font: theme.typography.text.fontFamily,
@@ -15363,14 +15265,14 @@ var Sidebar = ({
15363
15265
  children: proration > 0 ? t2("Proration") : !selectedPlan?.companyCanTrial && t2("Credits")
15364
15266
  }
15365
15267
  ) }),
15366
- /* @__PURE__ */ jsx12(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ jsxs8(
15268
+ /* @__PURE__ */ jsx11(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ jsxs7(
15367
15269
  Flex,
15368
15270
  {
15369
15271
  $justifyContent: "space-between",
15370
15272
  $alignItems: "center",
15371
15273
  $gap: "1rem",
15372
15274
  children: [
15373
- /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsx12(
15275
+ /* @__PURE__ */ jsx11(Flex, { children: /* @__PURE__ */ jsx11(
15374
15276
  Text,
15375
15277
  {
15376
15278
  $font: theme.typography.heading4.fontFamily,
@@ -15380,7 +15282,7 @@ var Sidebar = ({
15380
15282
  children: t2("Unused time")
15381
15283
  }
15382
15284
  ) }),
15383
- /* @__PURE__ */ jsx12(Flex, { children: /* @__PURE__ */ jsx12(
15285
+ /* @__PURE__ */ jsx11(Flex, { children: /* @__PURE__ */ jsx11(
15384
15286
  Text,
15385
15287
  {
15386
15288
  $font: theme.typography.text.fontFamily,
@@ -15400,7 +15302,7 @@ var Sidebar = ({
15400
15302
  ]
15401
15303
  }
15402
15304
  ),
15403
- /* @__PURE__ */ jsxs8(
15305
+ /* @__PURE__ */ jsxs7(
15404
15306
  Flex,
15405
15307
  {
15406
15308
  $flexDirection: "column",
@@ -15409,14 +15311,14 @@ var Sidebar = ({
15409
15311
  $width: "100%",
15410
15312
  $padding: "1.5rem",
15411
15313
  children: [
15412
- promoCode && /* @__PURE__ */ jsxs8(
15314
+ promoCode && /* @__PURE__ */ jsxs7(
15413
15315
  Flex,
15414
15316
  {
15415
15317
  $justifyContent: "space-between",
15416
15318
  $alignItems: "center",
15417
15319
  $gap: "1rem",
15418
15320
  children: [
15419
- /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
15321
+ /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
15420
15322
  Text,
15421
15323
  {
15422
15324
  $font: theme.typography.text.fontFamily,
@@ -15426,7 +15328,7 @@ var Sidebar = ({
15426
15328
  children: t2("Discount")
15427
15329
  }
15428
15330
  ) }),
15429
- /* @__PURE__ */ jsxs8(
15331
+ /* @__PURE__ */ jsxs7(
15430
15332
  Flex,
15431
15333
  {
15432
15334
  $alignItems: "center",
@@ -15436,7 +15338,7 @@ var Sidebar = ({
15436
15338
  $outlineColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
15437
15339
  $borderRadius: "0.3125rem",
15438
15340
  children: [
15439
- /* @__PURE__ */ jsx12(
15341
+ /* @__PURE__ */ jsx11(
15440
15342
  Text,
15441
15343
  {
15442
15344
  $font: theme.typography.text.fontFamily,
@@ -15446,14 +15348,14 @@ var Sidebar = ({
15446
15348
  children: promoCode
15447
15349
  }
15448
15350
  ),
15449
- /* @__PURE__ */ jsx12(
15351
+ /* @__PURE__ */ jsx11(
15450
15352
  Box,
15451
15353
  {
15452
15354
  $cursor: "pointer",
15453
15355
  onClick: () => {
15454
15356
  updatePromoCode?.(void 0);
15455
15357
  },
15456
- children: /* @__PURE__ */ jsx12(
15358
+ children: /* @__PURE__ */ jsx11(
15457
15359
  Icon2,
15458
15360
  {
15459
15361
  name: "close",
@@ -15470,14 +15372,14 @@ var Sidebar = ({
15470
15372
  ]
15471
15373
  }
15472
15374
  ),
15473
- percentOff > 0 && /* @__PURE__ */ jsxs8(
15375
+ percentOff > 0 && /* @__PURE__ */ jsxs7(
15474
15376
  Flex,
15475
15377
  {
15476
15378
  $justifyContent: "space-between",
15477
15379
  $alignItems: "center",
15478
15380
  $gap: "1rem",
15479
15381
  children: [
15480
- /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx12(
15382
+ /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx11(
15481
15383
  Text,
15482
15384
  {
15483
15385
  $font: theme.typography.text.fontFamily,
@@ -15487,7 +15389,7 @@ var Sidebar = ({
15487
15389
  children: t2("X% off", { percent: percentOff })
15488
15390
  }
15489
15391
  ) }),
15490
- /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
15392
+ /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
15491
15393
  Text,
15492
15394
  {
15493
15395
  $font: theme.typography.text.fontFamily,
@@ -15503,14 +15405,14 @@ var Sidebar = ({
15503
15405
  ]
15504
15406
  }
15505
15407
  ),
15506
- amountOff > 0 && /* @__PURE__ */ jsxs8(
15408
+ amountOff > 0 && /* @__PURE__ */ jsxs7(
15507
15409
  Flex,
15508
15410
  {
15509
15411
  $justifyContent: "space-between",
15510
15412
  $alignItems: "center",
15511
15413
  $gap: "1rem",
15512
15414
  children: [
15513
- /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx12(
15415
+ /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsx11(
15514
15416
  Text,
15515
15417
  {
15516
15418
  $font: theme.typography.text.fontFamily,
@@ -15525,7 +15427,7 @@ var Sidebar = ({
15525
15427
  })
15526
15428
  }
15527
15429
  ) }),
15528
- /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsxs8(
15430
+ /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsxs7(
15529
15431
  Text,
15530
15432
  {
15531
15433
  $font: theme.typography.text.fontFamily,
@@ -15544,14 +15446,14 @@ var Sidebar = ({
15544
15446
  ]
15545
15447
  }
15546
15448
  ),
15547
- subscriptionPrice && /* @__PURE__ */ jsxs8(
15449
+ subscriptionPrice && /* @__PURE__ */ jsxs7(
15548
15450
  Flex,
15549
15451
  {
15550
15452
  $justifyContent: "space-between",
15551
15453
  $alignItems: "center",
15552
15454
  $gap: "1rem",
15553
15455
  children: [
15554
- /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs8(
15456
+ /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs7(
15555
15457
  Text,
15556
15458
  {
15557
15459
  $font: theme.typography.text.fontFamily,
@@ -15564,7 +15466,7 @@ var Sidebar = ({
15564
15466
  ]
15565
15467
  }
15566
15468
  ) }),
15567
- /* @__PURE__ */ jsx12(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
15469
+ /* @__PURE__ */ jsx11(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs7(
15568
15470
  Text,
15569
15471
  {
15570
15472
  $font: theme.typography.text.fontFamily,
@@ -15573,7 +15475,7 @@ var Sidebar = ({
15573
15475
  $color: theme.typography.text.color,
15574
15476
  children: [
15575
15477
  subscriptionPrice,
15576
- /* @__PURE__ */ jsxs8("sub", { children: [
15478
+ /* @__PURE__ */ jsxs7("sub", { children: [
15577
15479
  "/",
15578
15480
  shortenPeriod(planPeriod)
15579
15481
  ] })
@@ -15583,14 +15485,14 @@ var Sidebar = ({
15583
15485
  ]
15584
15486
  }
15585
15487
  ),
15586
- charges && /* @__PURE__ */ jsxs8(
15488
+ charges && /* @__PURE__ */ jsxs7(
15587
15489
  Flex,
15588
15490
  {
15589
15491
  $justifyContent: "space-between",
15590
15492
  $alignItems: "center",
15591
15493
  $gap: "1rem",
15592
15494
  children: [
15593
- /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs8(
15495
+ /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs7(
15594
15496
  Text,
15595
15497
  {
15596
15498
  $font: theme.typography.text.fontFamily,
@@ -15603,7 +15505,7 @@ var Sidebar = ({
15603
15505
  ]
15604
15506
  }
15605
15507
  ) }),
15606
- /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
15508
+ /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
15607
15509
  Text,
15608
15510
  {
15609
15511
  $font: theme.typography.text.fontFamily,
@@ -15619,8 +15521,8 @@ var Sidebar = ({
15619
15521
  ]
15620
15522
  }
15621
15523
  ),
15622
- dueNow < 0 && /* @__PURE__ */ jsxs8(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
15623
- /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsxs8(
15524
+ dueNow < 0 && /* @__PURE__ */ jsxs7(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
15525
+ /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ jsxs7(
15624
15526
  Text,
15625
15527
  {
15626
15528
  $font: theme.typography.text.fontFamily,
@@ -15633,7 +15535,7 @@ var Sidebar = ({
15633
15535
  ]
15634
15536
  }
15635
15537
  ) }),
15636
- /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
15538
+ /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
15637
15539
  Text,
15638
15540
  {
15639
15541
  $font: theme.typography.text.fontFamily,
@@ -15647,7 +15549,7 @@ var Sidebar = ({
15647
15549
  }
15648
15550
  ) })
15649
15551
  ] }),
15650
- layout === "checkout" && /* @__PURE__ */ jsx12(
15552
+ layout === "checkout" && /* @__PURE__ */ jsx11(
15651
15553
  StageButton,
15652
15554
  {
15653
15555
  canTrial: selectedPlan?.companyCanTrial === true,
@@ -15664,8 +15566,8 @@ var Sidebar = ({
15664
15566
  trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
15665
15567
  }
15666
15568
  ),
15667
- layout === "unsubscribe" && /* @__PURE__ */ jsx12(EmbedButton, { onClick: unsubscribe, isLoading, children: t2("Cancel subscription") }),
15668
- !isLoading && error && /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
15569
+ layout === "unsubscribe" && /* @__PURE__ */ jsx11(EmbedButton, { onClick: unsubscribe, isLoading, children: t2("Cancel subscription") }),
15570
+ !isLoading && error && /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
15669
15571
  Text,
15670
15572
  {
15671
15573
  $font: theme.typography.text.fontFamily,
@@ -15675,7 +15577,7 @@ var Sidebar = ({
15675
15577
  children: error
15676
15578
  }
15677
15579
  ) }),
15678
- layout !== "unsubscribe" && /* @__PURE__ */ jsx12(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx12(
15580
+ layout !== "unsubscribe" && /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
15679
15581
  Text,
15680
15582
  {
15681
15583
  $font: theme.typography.text.fontFamily,
@@ -15695,6 +15597,108 @@ var Sidebar = ({
15695
15597
  );
15696
15598
  };
15697
15599
 
15600
+ // src/components/shared/checkout-dialog/Navigation.tsx
15601
+ import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
15602
+ var Navigation = ({
15603
+ name,
15604
+ index,
15605
+ activeIndex,
15606
+ isLast,
15607
+ onClick
15608
+ }) => {
15609
+ const theme = nt();
15610
+ const isLightBackground = useIsLightBackground();
15611
+ const showFullContent = index === activeIndex || index === activeIndex + 1;
15612
+ return /* @__PURE__ */ jsxs8(Fragment4, { children: [
15613
+ /* @__PURE__ */ jsxs8(
15614
+ Flex,
15615
+ {
15616
+ $gap: "0.5rem",
15617
+ $alignItems: "center",
15618
+ ...!showFullContent && { $flexGrow: 1, $minWidth: 0 },
15619
+ children: [
15620
+ /* @__PURE__ */ jsx12(
15621
+ Box,
15622
+ {
15623
+ $display: "none",
15624
+ $viewport: {
15625
+ md: {
15626
+ $display: "block"
15627
+ }
15628
+ },
15629
+ children: index >= activeIndex ? /* @__PURE__ */ jsx12(
15630
+ Box,
15631
+ {
15632
+ $width: `${20 / TEXT_BASE_SIZE}rem`,
15633
+ $height: `${20 / TEXT_BASE_SIZE}rem`,
15634
+ $borderWidth: "2px",
15635
+ $borderStyle: "solid",
15636
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
15637
+ $borderRadius: "9999px"
15638
+ }
15639
+ ) : /* @__PURE__ */ jsx12(
15640
+ IconRound,
15641
+ {
15642
+ name: "check",
15643
+ colors: [
15644
+ theme.card.background,
15645
+ isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
15646
+ ],
15647
+ style: {
15648
+ fontSize: `${16 / TEXT_BASE_SIZE}rem`,
15649
+ width: `${20 / TEXT_BASE_SIZE}rem`,
15650
+ height: `${20 / TEXT_BASE_SIZE}rem`
15651
+ }
15652
+ }
15653
+ )
15654
+ }
15655
+ ),
15656
+ /* @__PURE__ */ jsxs8(
15657
+ Box,
15658
+ {
15659
+ tabIndex: 0,
15660
+ $fontSize: `${16 / TEXT_BASE_SIZE}rem`,
15661
+ $fontFamily: theme.typography.text.fontFamily,
15662
+ $fontWeight: index === activeIndex ? 600 : 400,
15663
+ $color: theme.typography.text.color,
15664
+ ...!showFullContent && {
15665
+ $overflow: "hidden",
15666
+ $whiteSpace: "nowrap",
15667
+ $textOverflow: "ellipsis"
15668
+ },
15669
+ ...index !== activeIndex && { $opacity: "0.6375" },
15670
+ ...index < activeIndex && {
15671
+ onClick,
15672
+ $cursor: "pointer"
15673
+ },
15674
+ $viewport: {
15675
+ md: {
15676
+ $fontSize: `${19 / TEXT_BASE_SIZE}rem`
15677
+ }
15678
+ },
15679
+ children: [
15680
+ index + 1,
15681
+ ". ",
15682
+ name
15683
+ ]
15684
+ }
15685
+ )
15686
+ ]
15687
+ }
15688
+ ),
15689
+ !isLast && /* @__PURE__ */ jsx12(
15690
+ Icon2,
15691
+ {
15692
+ name: "chevron-right",
15693
+ style: {
15694
+ fontSize: 16,
15695
+ color: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.35)"
15696
+ }
15697
+ }
15698
+ )
15699
+ ] });
15700
+ };
15701
+
15698
15702
  // src/components/shared/checkout-dialog/Plan.tsx
15699
15703
  import { useState as useState5 } from "react";
15700
15704
  var import_pluralize2 = __toESM(require_pluralize());
@@ -16955,7 +16959,7 @@ var CheckoutDialog = ({ top = 0 }) => {
16955
16959
  });
16956
16960
  }
16957
16961
  }, [charges]);
16958
- useLayoutEffect3(() => {
16962
+ useLayoutEffect4(() => {
16959
16963
  if (contentRef.current) {
16960
16964
  contentRef.current.scrollTo({
16961
16965
  top: 0,
@@ -17246,7 +17250,7 @@ var PaymentForm = ({ onConfirm }) => {
17246
17250
  };
17247
17251
 
17248
17252
  // src/components/shared/period-toggle/PeriodToggle.tsx
17249
- import { useLayoutEffect as useLayoutEffect4, useMemo as useMemo6, useState as useState9 } from "react";
17253
+ import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo6, useState as useState9 } from "react";
17250
17254
  import { jsx as jsx19 } from "react/jsx-runtime";
17251
17255
  var PeriodToggle = ({
17252
17256
  options,
@@ -17267,7 +17271,7 @@ var PeriodToggle = ({
17267
17271
  }
17268
17272
  return 0;
17269
17273
  }, [selectedPlan]);
17270
- useLayoutEffect4(() => {
17274
+ useLayoutEffect5(() => {
17271
17275
  const element = layerRef?.current;
17272
17276
  if (element) {
17273
17277
  const style = getComputedStyle(element);
@@ -17357,12 +17361,13 @@ var PeriodToggle = ({
17357
17361
  };
17358
17362
 
17359
17363
  // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
17360
- import { useCallback as useCallback8, useMemo as useMemo7, useState as useState10 } from "react";
17364
+ import { useCallback as useCallback8, useMemo as useMemo7, useRef as useRef6, useState as useState10 } from "react";
17361
17365
  import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
17362
- var UnsubscribeDialog = () => {
17366
+ var UnsubscribeDialog = ({ top = 0 }) => {
17363
17367
  const { t: t2 } = useTranslation();
17364
17368
  const theme = nt();
17365
17369
  const { data, setLayout, setSelected } = useEmbed();
17370
+ const contentRef = useRef6(null);
17366
17371
  const [error, setError] = useState10();
17367
17372
  const [isLoading, setIsLoading] = useState10(false);
17368
17373
  const planPeriod = useMemo7(
@@ -17409,136 +17414,145 @@ var UnsubscribeDialog = () => {
17409
17414
  const handleClose = useCallback8(() => {
17410
17415
  setLayout("portal");
17411
17416
  }, [setLayout]);
17412
- return /* @__PURE__ */ jsxs15(Modal, { id: "unsubscribe-dialog", size: "auto", children: [
17413
- /* @__PURE__ */ jsx20(
17414
- Box,
17415
- {
17416
- $display: "inline-flex",
17417
- $position: "absolute",
17418
- $top: 0,
17419
- $right: 0,
17420
- $zIndex: 1,
17421
- $cursor: "pointer",
17422
- onClick: handleClose,
17423
- children: /* @__PURE__ */ jsx20(
17424
- Icon2,
17417
+ return /* @__PURE__ */ jsxs15(
17418
+ Modal,
17419
+ {
17420
+ id: "unsubscribe-dialog",
17421
+ size: "auto",
17422
+ top,
17423
+ contentRef,
17424
+ children: [
17425
+ /* @__PURE__ */ jsx20(
17426
+ Box,
17425
17427
  {
17426
- name: "close",
17427
- style: {
17428
- fontSize: 36,
17429
- color: isLightBackground ? "hsla(0, 0%, 0%, 0.275)" : "hsla(0, 0%, 100%, 0.275)"
17430
- }
17428
+ $display: "inline-flex",
17429
+ $position: "absolute",
17430
+ $top: 0,
17431
+ $right: 0,
17432
+ $zIndex: 1,
17433
+ $cursor: "pointer",
17434
+ onClick: handleClose,
17435
+ children: /* @__PURE__ */ jsx20(
17436
+ Icon2,
17437
+ {
17438
+ name: "close",
17439
+ style: {
17440
+ fontSize: 36,
17441
+ color: isLightBackground ? "hsla(0, 0%, 0%, 0.275)" : "hsla(0, 0%, 100%, 0.275)"
17442
+ }
17443
+ }
17444
+ )
17431
17445
  }
17432
- )
17433
- }
17434
- ),
17435
- /* @__PURE__ */ jsxs15(
17436
- Flex,
17437
- {
17438
- $position: "relative",
17439
- $flexDirection: "column",
17440
- $height: "auto",
17441
- $viewport: {
17442
- md: {
17443
- $flexDirection: "row",
17444
- $height: "calc(100% - 5rem)"
17446
+ ),
17447
+ /* @__PURE__ */ jsxs15(
17448
+ Flex,
17449
+ {
17450
+ $position: "relative",
17451
+ $flexDirection: "column",
17452
+ $height: "auto",
17453
+ $viewport: {
17454
+ md: {
17455
+ $flexDirection: "row",
17456
+ $height: "calc(100% - 5rem)"
17457
+ }
17458
+ },
17459
+ children: [
17460
+ /* @__PURE__ */ jsxs15(
17461
+ Flex,
17462
+ {
17463
+ $flexDirection: "column",
17464
+ $flexWrap: "wrap",
17465
+ $justifyContent: "space-around",
17466
+ $gap: "5rem",
17467
+ $padding: "2.5rem",
17468
+ children: [
17469
+ /* @__PURE__ */ jsxs15(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
17470
+ /* @__PURE__ */ jsx20(
17471
+ Text,
17472
+ {
17473
+ as: "h2",
17474
+ $font: theme.typography.heading2.fontFamily,
17475
+ $size: theme.typography.heading2.fontSize,
17476
+ $weight: theme.typography.heading2.fontWeight,
17477
+ $color: theme.typography.heading2.color,
17478
+ children: t2("Cancel subscription")
17479
+ }
17480
+ ),
17481
+ /* @__PURE__ */ jsxs15(
17482
+ Text,
17483
+ {
17484
+ as: "p",
17485
+ $font: theme.typography.text.fontFamily,
17486
+ $size: theme.typography.text.fontSize,
17487
+ $weight: theme.typography.text.fontWeight,
17488
+ $color: theme.typography.text.color,
17489
+ children: [
17490
+ t2(
17491
+ "You will retain access to your plan until the end of the billing period, on"
17492
+ ),
17493
+ " ",
17494
+ cancelDate ? toPrettyDate(cancelDate, {
17495
+ month: "numeric"
17496
+ }) : ""
17497
+ ]
17498
+ }
17499
+ )
17500
+ ] }),
17501
+ /* @__PURE__ */ jsxs15(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
17502
+ /* @__PURE__ */ jsx20(
17503
+ Text,
17504
+ {
17505
+ as: "p",
17506
+ $font: theme.typography.text.fontFamily,
17507
+ $size: theme.typography.text.fontSize,
17508
+ $weight: theme.typography.text.fontWeight,
17509
+ $color: theme.typography.text.color,
17510
+ children: t2("Not ready to cancel?")
17511
+ }
17512
+ ),
17513
+ /* @__PURE__ */ jsx20(
17514
+ EmbedButton,
17515
+ {
17516
+ onClick: () => {
17517
+ setSelected({
17518
+ planId: data.company?.plan?.id,
17519
+ addOnId: void 0,
17520
+ usage: false
17521
+ });
17522
+ setLayout("checkout");
17523
+ },
17524
+ $size: "sm",
17525
+ $color: "secondary",
17526
+ $variant: "ghost",
17527
+ $fullWidth: false,
17528
+ children: t2("Manage plan")
17529
+ }
17530
+ )
17531
+ ] })
17532
+ ]
17533
+ }
17534
+ ),
17535
+ /* @__PURE__ */ jsx20(
17536
+ Sidebar,
17537
+ {
17538
+ planPeriod,
17539
+ addOns,
17540
+ usageBasedEntitlements,
17541
+ error,
17542
+ isLoading,
17543
+ showHeader: false,
17544
+ showPaymentForm: false,
17545
+ requiresPayment: false,
17546
+ setError: (msg) => setError(msg),
17547
+ setIsLoading
17548
+ }
17549
+ )
17550
+ ]
17445
17551
  }
17446
- },
17447
- children: [
17448
- /* @__PURE__ */ jsxs15(
17449
- Flex,
17450
- {
17451
- $flexDirection: "column",
17452
- $flexWrap: "wrap",
17453
- $justifyContent: "space-around",
17454
- $gap: "5rem",
17455
- $padding: "2.5rem",
17456
- children: [
17457
- /* @__PURE__ */ jsxs15(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
17458
- /* @__PURE__ */ jsx20(
17459
- Text,
17460
- {
17461
- as: "h2",
17462
- $font: theme.typography.heading2.fontFamily,
17463
- $size: theme.typography.heading2.fontSize,
17464
- $weight: theme.typography.heading2.fontWeight,
17465
- $color: theme.typography.heading2.color,
17466
- children: t2("Cancel subscription")
17467
- }
17468
- ),
17469
- /* @__PURE__ */ jsxs15(
17470
- Text,
17471
- {
17472
- as: "p",
17473
- $font: theme.typography.text.fontFamily,
17474
- $size: theme.typography.text.fontSize,
17475
- $weight: theme.typography.text.fontWeight,
17476
- $color: theme.typography.text.color,
17477
- children: [
17478
- t2(
17479
- "You will retain access to your plan until the end of the billing period, on"
17480
- ),
17481
- " ",
17482
- cancelDate ? toPrettyDate(cancelDate, {
17483
- month: "numeric"
17484
- }) : ""
17485
- ]
17486
- }
17487
- )
17488
- ] }),
17489
- /* @__PURE__ */ jsxs15(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
17490
- /* @__PURE__ */ jsx20(
17491
- Text,
17492
- {
17493
- as: "p",
17494
- $font: theme.typography.text.fontFamily,
17495
- $size: theme.typography.text.fontSize,
17496
- $weight: theme.typography.text.fontWeight,
17497
- $color: theme.typography.text.color,
17498
- children: t2("Not ready to cancel?")
17499
- }
17500
- ),
17501
- /* @__PURE__ */ jsx20(
17502
- EmbedButton,
17503
- {
17504
- onClick: () => {
17505
- setSelected({
17506
- planId: data.company?.plan?.id,
17507
- addOnId: void 0,
17508
- usage: false
17509
- });
17510
- setLayout("checkout");
17511
- },
17512
- $size: "sm",
17513
- $color: "secondary",
17514
- $variant: "ghost",
17515
- $fullWidth: false,
17516
- children: t2("Manage plan")
17517
- }
17518
- )
17519
- ] })
17520
- ]
17521
- }
17522
- ),
17523
- /* @__PURE__ */ jsx20(
17524
- Sidebar,
17525
- {
17526
- planPeriod,
17527
- addOns,
17528
- usageBasedEntitlements,
17529
- error,
17530
- isLoading,
17531
- showHeader: false,
17532
- showPaymentForm: false,
17533
- requiresPayment: false,
17534
- setError: (msg) => setError(msg),
17535
- setIsLoading
17536
- }
17537
- )
17538
- ]
17539
- }
17540
- )
17541
- ] });
17552
+ )
17553
+ ]
17554
+ }
17555
+ );
17542
17556
  };
17543
17557
 
17544
17558
  // src/components/ui/badge/Badge.tsx
@@ -17721,16 +17735,14 @@ var Viewport = forwardRef4(
17721
17735
  const { data, layout } = useEmbed();
17722
17736
  const [top, setTop] = useState11(0);
17723
17737
  const canCheckout = data.capabilities?.checkout ?? true;
17724
- useLayoutEffect5(() => {
17725
- if (layout !== "checkout" && layout !== "unsubscribe") {
17726
- return;
17727
- }
17738
+ useLayoutEffect6(() => {
17728
17739
  const parent = portal || document.body;
17729
- const value = Math.abs(
17730
- (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
17740
+ setTop(
17741
+ Math.abs(
17742
+ (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
17743
+ )
17731
17744
  );
17732
- setTop(value);
17733
- parent.style.overflow = "hidden";
17745
+ parent.style.overflow = layout === "checkout" || layout === "unsubscribe" ? "hidden" : "";
17734
17746
  return () => {
17735
17747
  parent.style.overflow = "";
17736
17748
  };
@@ -17741,7 +17753,10 @@ var Viewport = forwardRef4(
17741
17753
  /* @__PURE__ */ jsx23(Badge, {})
17742
17754
  ] }),
17743
17755
  canCheckout && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx23(CheckoutDialog, { top }), portal || document.body),
17744
- layout === "unsubscribe" && createPortal2(/* @__PURE__ */ jsx23(UnsubscribeDialog, {}), portal || document.body)
17756
+ layout === "unsubscribe" && createPortal2(
17757
+ /* @__PURE__ */ jsx23(UnsubscribeDialog, { top }),
17758
+ portal || document.body
17759
+ )
17745
17760
  ] });
17746
17761
  }
17747
17762
  );
@@ -18011,7 +18026,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
18011
18026
  const { t: t2 } = useTranslation();
18012
18027
  const theme = nt();
18013
18028
  const { data } = useEmbed();
18014
- const elements = useRef6([]);
18029
+ const elements = useRef7([]);
18015
18030
  const shouldWrapChildren = useWrapChildren(elements.current);
18016
18031
  const isLightBackground = useIsLightBackground();
18017
18032
  const [showCount, setShowCount] = useState12(VISIBLE_ENTITLEMENT_COUNT);
@@ -18197,13 +18212,11 @@ function resolveDesignProps2(props) {
18197
18212
  }
18198
18213
  };
18199
18214
  }
18200
- function formatInvoices(invoices) {
18201
- return (invoices || []).filter(
18202
- ({ url, amountDue, amountPaid }) => url && (amountDue === 0 || amountPaid > 0)
18203
- ).sort((a2, b2) => a2.dueDate && b2.dueDate ? +b2.dueDate - +a2.dueDate : 1).map(({ amountDue, dueDate, url, currency }) => ({
18204
- ...dueDate && { date: toPrettyDate(dueDate) },
18215
+ function formatInvoices(invoices = []) {
18216
+ return invoices.filter(({ amountDue, amountPaid }) => amountDue === 0 || amountPaid > 0).sort((a2, b2) => a2.dueDate && b2.dueDate ? +b2.dueDate - +a2.dueDate : 1).map(({ amountDue, dueDate, url, currency }) => ({
18205
18217
  amount: formatCurrency(amountDue, currency),
18206
- url
18218
+ ...dueDate && { date: toPrettyDate(dueDate) },
18219
+ ...url && { url }
18207
18220
  }));
18208
18221
  }
18209
18222
  var InvoiceDate = ({ date, fontStyle, url }) => {
@@ -18303,7 +18316,7 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
18303
18316
  Invoices.displayName = "Invoices";
18304
18317
 
18305
18318
  // src/components/elements/metered-features/MeteredFeatures.tsx
18306
- import { forwardRef as forwardRef9, useRef as useRef7 } from "react";
18319
+ import { forwardRef as forwardRef9, useRef as useRef8 } from "react";
18307
18320
  var import_pluralize5 = __toESM(require_pluralize());
18308
18321
 
18309
18322
  // src/components/elements/metered-features/styles.ts
@@ -18352,7 +18365,7 @@ function resolveDesignProps3(props) {
18352
18365
  }
18353
18366
  var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
18354
18367
  const props = resolveDesignProps3(rest);
18355
- const elements = useRef7([]);
18368
+ const elements = useRef8([]);
18356
18369
  const shouldWrapChildren = useWrapChildren(elements.current);
18357
18370
  const { t: t2 } = useTranslation();
18358
18371
  const theme = nt();
@@ -18537,7 +18550,7 @@ import {
18537
18550
  forwardRef as forwardRef10,
18538
18551
  useCallback as useCallback9,
18539
18552
  useEffect as useEffect7,
18540
- useLayoutEffect as useLayoutEffect6,
18553
+ useLayoutEffect as useLayoutEffect7,
18541
18554
  useMemo as useMemo9,
18542
18555
  useState as useState14
18543
18556
  } from "react";
@@ -18787,7 +18800,7 @@ var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = tru
18787
18800
  setStripe(loadStripe(setupIntent.publishableKey));
18788
18801
  }
18789
18802
  }, [stripe, setupIntent?.publishableKey]);
18790
- useLayoutEffect6(() => {
18803
+ useLayoutEffect7(() => {
18791
18804
  const parent = portal || document.body;
18792
18805
  const value = Math.abs(
18793
18806
  (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
@@ -19441,7 +19454,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
19441
19454
  $display: "grid",
19442
19455
  $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
19443
19456
  $gap: "1rem",
19444
- children: plans.map((plan, index) => {
19457
+ children: plans.map((plan, index, self2) => {
19445
19458
  const isActivePlan = plan.current && data.company?.plan?.planPeriod === selectedPeriod;
19446
19459
  const count = entitlementCounts[plan.id];
19447
19460
  let isExpanded = false;
@@ -19547,6 +19560,18 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
19547
19560
  $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
19548
19561
  children: [
19549
19562
  props.plans.showEntitlements && /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: [
19563
+ props.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx32(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx32(
19564
+ Text,
19565
+ {
19566
+ $font: theme.typography.text.fontFamily,
19567
+ $size: theme.typography.text.fontSize,
19568
+ $weight: theme.typography.text.fontWeight,
19569
+ $color: theme.typography.text.color,
19570
+ children: t2("Everything in", {
19571
+ plan: self2[index - 1].name
19572
+ })
19573
+ }
19574
+ ) }),
19550
19575
  plan.entitlements.reduce((acc, entitlement) => {
19551
19576
  let price;
19552
19577
  let currency;