@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.cjs.js CHANGED
@@ -12824,7 +12824,7 @@ var EmbedProvider = ({
12824
12824
  (0, import_react11.useEffect)(() => {
12825
12825
  if (accessToken) {
12826
12826
  const { headers = {} } = apiConfig ?? {};
12827
- headers["X-Schematic-Components-Version"] = "0.4.9";
12827
+ headers["X-Schematic-Components-Version"] = "0.4.11";
12828
12828
  headers["X-Schematic-Session-ID"] = sessionIdRef.current;
12829
12829
  const config = new Configuration({
12830
12830
  ...apiConfig,
@@ -13834,6 +13834,9 @@ var Modal = (0, import_react17.forwardRef)(
13834
13834
  setLayout("portal");
13835
13835
  onClose?.();
13836
13836
  }, [setLayout, onClose]);
13837
+ (0, import_react17.useLayoutEffect)(() => {
13838
+ contentRef?.current?.focus({ preventScroll: true });
13839
+ }, [contentRef]);
13837
13840
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
13838
13841
  Container2,
13839
13842
  {
@@ -13867,6 +13870,9 @@ var Modal = (0, import_react17.forwardRef)(
13867
13870
  Flex,
13868
13871
  {
13869
13872
  ref: contentRef,
13873
+ tabIndex: 0,
13874
+ role: "dialog",
13875
+ "aria-modal": "true",
13870
13876
  $position: "relative",
13871
13877
  $top: "50%",
13872
13878
  $left: "50%",
@@ -13877,8 +13883,6 @@ var Modal = (0, import_react17.forwardRef)(
13877
13883
  $height: "100vh",
13878
13884
  $backgroundColor: theme.card.background,
13879
13885
  $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
13880
- role: "dialog",
13881
- "aria-modal": "true",
13882
13886
  $viewport: {
13883
13887
  md: {
13884
13888
  ...size === "auto" ? { $width: "fit-content", $height: "fit-content" } : {
@@ -14277,114 +14281,12 @@ var import_react_dom2 = require("react-dom");
14277
14281
  // src/components/shared/checkout-dialog/CheckoutDialog.tsx
14278
14282
  var import_react24 = require("react");
14279
14283
 
14280
- // src/components/shared/checkout-dialog/Navigation.tsx
14281
- var import_jsx_runtime10 = require("react/jsx-runtime");
14282
- var Navigation = ({
14283
- name,
14284
- index,
14285
- activeIndex,
14286
- isLast,
14287
- onClick
14288
- }) => {
14289
- const theme = nt();
14290
- const isLightBackground = useIsLightBackground();
14291
- const showFullContent = index === activeIndex || index === activeIndex + 1;
14292
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
14293
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
14294
- Flex,
14295
- {
14296
- $gap: "0.5rem",
14297
- $alignItems: "center",
14298
- ...!showFullContent && { $flexGrow: 1, $minWidth: 0 },
14299
- children: [
14300
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
14301
- Box,
14302
- {
14303
- $display: "none",
14304
- $viewport: {
14305
- md: {
14306
- $display: "block"
14307
- }
14308
- },
14309
- children: index >= activeIndex ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
14310
- Box,
14311
- {
14312
- $width: `${20 / TEXT_BASE_SIZE}rem`,
14313
- $height: `${20 / TEXT_BASE_SIZE}rem`,
14314
- $borderWidth: "2px",
14315
- $borderStyle: "solid",
14316
- $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
14317
- $borderRadius: "9999px"
14318
- }
14319
- ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
14320
- IconRound,
14321
- {
14322
- name: "check",
14323
- colors: [
14324
- theme.card.background,
14325
- isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
14326
- ],
14327
- style: {
14328
- fontSize: `${16 / TEXT_BASE_SIZE}rem`,
14329
- width: `${20 / TEXT_BASE_SIZE}rem`,
14330
- height: `${20 / TEXT_BASE_SIZE}rem`
14331
- }
14332
- }
14333
- )
14334
- }
14335
- ),
14336
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
14337
- Box,
14338
- {
14339
- tabIndex: 0,
14340
- $fontSize: `${16 / TEXT_BASE_SIZE}rem`,
14341
- $fontFamily: theme.typography.text.fontFamily,
14342
- $fontWeight: index === activeIndex ? 600 : 400,
14343
- $color: theme.typography.text.color,
14344
- ...!showFullContent && {
14345
- $overflow: "hidden",
14346
- $whiteSpace: "nowrap",
14347
- $textOverflow: "ellipsis"
14348
- },
14349
- ...index !== activeIndex && { $opacity: "0.6375" },
14350
- ...index < activeIndex && {
14351
- onClick,
14352
- $cursor: "pointer"
14353
- },
14354
- $viewport: {
14355
- md: {
14356
- $fontSize: `${19 / TEXT_BASE_SIZE}rem`
14357
- }
14358
- },
14359
- children: [
14360
- index + 1,
14361
- ". ",
14362
- name
14363
- ]
14364
- }
14365
- )
14366
- ]
14367
- }
14368
- ),
14369
- !isLast && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
14370
- Icon2,
14371
- {
14372
- name: "chevron-right",
14373
- style: {
14374
- fontSize: 16,
14375
- color: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.35)"
14376
- }
14377
- }
14378
- )
14379
- ] });
14380
- };
14381
-
14382
14284
  // src/components/shared/sidebar/Sidebar.tsx
14383
14285
  var import_react21 = require("react");
14384
14286
  var import_pluralize = __toESM(require_pluralize());
14385
14287
 
14386
14288
  // src/components/shared/sidebar/StageButton.tsx
14387
- var import_jsx_runtime11 = require("react/jsx-runtime");
14289
+ var import_jsx_runtime10 = require("react/jsx-runtime");
14388
14290
  var StageButton = ({
14389
14291
  canTrial,
14390
14292
  canCheckout,
@@ -14401,7 +14303,7 @@ var StageButton = ({
14401
14303
  }) => {
14402
14304
  const { t: t2 } = useTranslation();
14403
14305
  const NoPaymentRequired = () => {
14404
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14306
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
14405
14307
  EmbedButton,
14406
14308
  {
14407
14309
  type: "button",
@@ -14415,7 +14317,7 @@ var StageButton = ({
14415
14317
  if (checkoutStage === "plan") {
14416
14318
  if (canTrial) {
14417
14319
  if (trialPaymentMethodRequired) {
14418
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14320
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
14419
14321
  EmbedButton,
14420
14322
  {
14421
14323
  type: "button",
@@ -14424,7 +14326,7 @@ var StageButton = ({
14424
14326
  setCheckoutStage?.("checkout");
14425
14327
  },
14426
14328
  isLoading,
14427
- children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
14329
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
14428
14330
  Flex,
14429
14331
  {
14430
14332
  $gap: "0.5rem",
@@ -14435,14 +14337,14 @@ var StageButton = ({
14435
14337
  t2("Next"),
14436
14338
  ": ",
14437
14339
  t2("Checkout"),
14438
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: "arrow-right" })
14340
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
14439
14341
  ]
14440
14342
  }
14441
14343
  )
14442
14344
  }
14443
14345
  );
14444
14346
  }
14445
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14347
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
14446
14348
  EmbedButton,
14447
14349
  {
14448
14350
  type: "button",
@@ -14451,7 +14353,7 @@ var StageButton = ({
14451
14353
  checkout();
14452
14354
  },
14453
14355
  isLoading,
14454
- children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
14356
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
14455
14357
  Flex,
14456
14358
  {
14457
14359
  $gap: "0.5rem",
@@ -14460,7 +14362,7 @@ var StageButton = ({
14460
14362
  $padding: "0 1rem",
14461
14363
  children: [
14462
14364
  t2("Subscribe and close"),
14463
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: "arrow-right" })
14365
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
14464
14366
  ]
14465
14367
  }
14466
14368
  )
@@ -14470,9 +14372,9 @@ var StageButton = ({
14470
14372
  if (!requiresPayment && !checkoutStages?.some(
14471
14373
  (stage) => stage.id === "addons" || stage.id === "usage"
14472
14374
  )) {
14473
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NoPaymentRequired, {});
14375
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NoPaymentRequired, {});
14474
14376
  }
14475
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14377
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
14476
14378
  EmbedButton,
14477
14379
  {
14478
14380
  type: "button",
@@ -14483,7 +14385,7 @@ var StageButton = ({
14483
14385
  );
14484
14386
  },
14485
14387
  isLoading,
14486
- children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
14388
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
14487
14389
  Flex,
14488
14390
  {
14489
14391
  $gap: "0.5rem",
@@ -14495,7 +14397,7 @@ var StageButton = ({
14495
14397
  ":",
14496
14398
  " ",
14497
14399
  hasPayInAdvanceEntitlements ? t2("Usage") : hasAddOns ? t2("Addons") : t2("Checkout"),
14498
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: "arrow-right" })
14400
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
14499
14401
  ]
14500
14402
  }
14501
14403
  )
@@ -14504,9 +14406,9 @@ var StageButton = ({
14504
14406
  }
14505
14407
  if (checkoutStage === "usage") {
14506
14408
  if (!requiresPayment) {
14507
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NoPaymentRequired, {});
14409
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NoPaymentRequired, {});
14508
14410
  }
14509
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14411
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
14510
14412
  EmbedButton,
14511
14413
  {
14512
14414
  type: "button",
@@ -14515,7 +14417,7 @@ var StageButton = ({
14515
14417
  setCheckoutStage?.(hasAddOns ? "addons" : "checkout");
14516
14418
  },
14517
14419
  isLoading,
14518
- children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
14420
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
14519
14421
  Flex,
14520
14422
  {
14521
14423
  $gap: "0.5rem",
@@ -14526,7 +14428,7 @@ var StageButton = ({
14526
14428
  t2("Next"),
14527
14429
  ": ",
14528
14430
  hasAddOns ? t2("Addons") : t2("Checkout"),
14529
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: "arrow-right" })
14431
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
14530
14432
  ]
14531
14433
  }
14532
14434
  )
@@ -14535,9 +14437,9 @@ var StageButton = ({
14535
14437
  }
14536
14438
  if (checkoutStage === "addons") {
14537
14439
  if (!requiresPayment) {
14538
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NoPaymentRequired, {});
14440
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NoPaymentRequired, {});
14539
14441
  }
14540
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14442
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
14541
14443
  EmbedButton,
14542
14444
  {
14543
14445
  type: "button",
@@ -14546,7 +14448,7 @@ var StageButton = ({
14546
14448
  setCheckoutStage?.("checkout");
14547
14449
  },
14548
14450
  isLoading,
14549
- children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
14451
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
14550
14452
  Flex,
14551
14453
  {
14552
14454
  $gap: "0.5rem",
@@ -14557,7 +14459,7 @@ var StageButton = ({
14557
14459
  t2("Next"),
14558
14460
  ": ",
14559
14461
  t2("Checkout"),
14560
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: "arrow-right" })
14462
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
14561
14463
  ]
14562
14464
  }
14563
14465
  )
@@ -14566,9 +14468,9 @@ var StageButton = ({
14566
14468
  }
14567
14469
  if (checkoutStage === "checkout") {
14568
14470
  if (!requiresPayment) {
14569
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NoPaymentRequired, {});
14471
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NoPaymentRequired, {});
14570
14472
  }
14571
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14473
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
14572
14474
  EmbedButton,
14573
14475
  {
14574
14476
  type: "button",
@@ -14582,7 +14484,7 @@ var StageButton = ({
14582
14484
  };
14583
14485
 
14584
14486
  // src/components/shared/sidebar/Sidebar.tsx
14585
- var import_jsx_runtime12 = require("react/jsx-runtime");
14487
+ var import_jsx_runtime11 = require("react/jsx-runtime");
14586
14488
  var Sidebar = ({
14587
14489
  planPeriod,
14588
14490
  selectedPlan,
@@ -14815,7 +14717,7 @@ var Sidebar = ({
14815
14717
  if (isTrialable && selectedPlan.trialDays) {
14816
14718
  trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
14817
14719
  }
14818
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
14720
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
14819
14721
  Flex,
14820
14722
  {
14821
14723
  ref: checkoutRef,
@@ -14832,7 +14734,7 @@ var Sidebar = ({
14832
14734
  }
14833
14735
  },
14834
14736
  children: [
14835
- showHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
14737
+ showHeader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14836
14738
  Flex,
14837
14739
  {
14838
14740
  $position: "relative",
@@ -14844,7 +14746,7 @@ var Sidebar = ({
14844
14746
  $borderBottomWidth: "1px",
14845
14747
  $borderStyle: "solid",
14846
14748
  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
14847
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
14749
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14848
14750
  Text,
14849
14751
  {
14850
14752
  as: "h3",
@@ -14857,7 +14759,7 @@ var Sidebar = ({
14857
14759
  ) })
14858
14760
  }
14859
14761
  ),
14860
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
14762
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
14861
14763
  Flex,
14862
14764
  {
14863
14765
  $position: "relative",
@@ -14871,7 +14773,7 @@ var Sidebar = ({
14871
14773
  $borderStyle: "solid",
14872
14774
  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
14873
14775
  children: [
14874
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
14776
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14875
14777
  Text,
14876
14778
  {
14877
14779
  $font: theme.typography.text.fontFamily,
@@ -14881,8 +14783,8 @@ var Sidebar = ({
14881
14783
  children: t2("Plan")
14882
14784
  }
14883
14785
  ) }),
14884
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
14885
- data.company?.plan && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
14786
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
14787
+ data.company?.plan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
14886
14788
  Flex,
14887
14789
  {
14888
14790
  $justifyContent: "space-between",
@@ -14894,7 +14796,7 @@ var Sidebar = ({
14894
14796
  $color: theme.typography.heading4.color
14895
14797
  },
14896
14798
  children: [
14897
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
14799
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14898
14800
  Text,
14899
14801
  {
14900
14802
  $font: theme.typography.heading4.fontFamily,
@@ -14904,7 +14806,7 @@ var Sidebar = ({
14904
14806
  children: data.company.plan.name
14905
14807
  }
14906
14808
  ) }),
14907
- typeof data.company.plan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
14809
+ typeof data.company.plan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
14908
14810
  Text,
14909
14811
  {
14910
14812
  $font: theme.typography.text.fontFamily,
@@ -14916,7 +14818,7 @@ var Sidebar = ({
14916
14818
  data.company.plan.planPrice,
14917
14819
  data.company.billingSubscription?.currency
14918
14820
  ),
14919
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
14821
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
14920
14822
  "/",
14921
14823
  shortenPeriod(
14922
14824
  data.company.plan.planPeriod || planPeriod
@@ -14928,8 +14830,8 @@ var Sidebar = ({
14928
14830
  ]
14929
14831
  }
14930
14832
  ),
14931
- willPlanChange && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { children: [
14932
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
14833
+ willPlanChange && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { children: [
14834
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14933
14835
  Box,
14934
14836
  {
14935
14837
  $width: "100%",
@@ -14937,7 +14839,7 @@ var Sidebar = ({
14937
14839
  $opacity: "50%",
14938
14840
  $marginBottom: "0.25rem",
14939
14841
  $marginTop: "-0.25rem",
14940
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
14842
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14941
14843
  Icon2,
14942
14844
  {
14943
14845
  name: "arrow-down",
@@ -14949,14 +14851,14 @@ var Sidebar = ({
14949
14851
  )
14950
14852
  }
14951
14853
  ),
14952
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
14854
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
14953
14855
  Flex,
14954
14856
  {
14955
14857
  $justifyContent: "space-between",
14956
14858
  $alignItems: "center",
14957
14859
  $gap: "1rem",
14958
14860
  children: [
14959
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
14861
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14960
14862
  Text,
14961
14863
  {
14962
14864
  $font: theme.typography.heading4.fontFamily,
@@ -14966,7 +14868,7 @@ var Sidebar = ({
14966
14868
  children: selectedPlan.name
14967
14869
  }
14968
14870
  ) }),
14969
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
14871
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
14970
14872
  Text,
14971
14873
  {
14972
14874
  $font: theme.typography.text.fontFamily,
@@ -14978,7 +14880,7 @@ var Sidebar = ({
14978
14880
  (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0,
14979
14881
  (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.currency
14980
14882
  ),
14981
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
14883
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
14982
14884
  "/",
14983
14885
  shortenPeriod(planPeriod)
14984
14886
  ] })
@@ -14990,8 +14892,8 @@ var Sidebar = ({
14990
14892
  )
14991
14893
  ] })
14992
14894
  ] }),
14993
- willUsageBasedEntitlementsChange && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
14994
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
14895
+ willUsageBasedEntitlementsChange && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
14896
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
14995
14897
  Text,
14996
14898
  {
14997
14899
  $font: theme.typography.text.fontFamily,
@@ -15006,7 +14908,7 @@ var Sidebar = ({
15006
14908
  if (typeof allocation === "number" && usage.feature?.name) {
15007
14909
  const price = (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.price;
15008
14910
  acc.push(
15009
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
14911
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15010
14912
  Flex,
15011
14913
  {
15012
14914
  $justifyContent: "space-between",
@@ -15016,21 +14918,21 @@ var Sidebar = ({
15016
14918
  $textDecoration: "line-through",
15017
14919
  $color: theme.typography.heading4.color,
15018
14920
  children: [
15019
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
14921
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15020
14922
  Text,
15021
14923
  {
15022
14924
  $font: theme.typography.heading4.fontFamily,
15023
14925
  $size: theme.typography.heading4.fontSize,
15024
14926
  $weight: theme.typography.heading4.fontWeight,
15025
14927
  $color: theme.typography.heading4.color,
15026
- children: usage.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
14928
+ children: usage.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
15027
14929
  quantity,
15028
14930
  " ",
15029
14931
  (0, import_pluralize.default)(usage.feature.name, quantity)
15030
14932
  ] }) : usage.feature.name
15031
14933
  }
15032
14934
  ) }),
15033
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
14935
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15034
14936
  Text,
15035
14937
  {
15036
14938
  $font: theme.typography.text.fontFamily,
@@ -15038,22 +14940,22 @@ var Sidebar = ({
15038
14940
  $weight: theme.typography.text.fontWeight,
15039
14941
  $color: theme.typography.text.color,
15040
14942
  children: [
15041
- usage.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
14943
+ usage.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
15042
14944
  formatCurrency(
15043
14945
  price * quantity,
15044
14946
  (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.currency
15045
14947
  ),
15046
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
14948
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
15047
14949
  "/",
15048
14950
  shortenPeriod(planPeriod)
15049
14951
  ] })
15050
14952
  ] }),
15051
- usage.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
14953
+ usage.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
15052
14954
  formatCurrency(
15053
14955
  price,
15054
14956
  (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.currency
15055
14957
  ),
15056
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
14958
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
15057
14959
  "/",
15058
14960
  (0, import_pluralize.default)(
15059
14961
  usage.feature.name.toLowerCase(),
@@ -15078,8 +14980,8 @@ var Sidebar = ({
15078
14980
  (acc, { entitlement, previous, next: next2 }) => {
15079
14981
  if (entitlement?.feature?.name) {
15080
14982
  acc.push(
15081
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { children: [
15082
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
14983
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { children: [
14984
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15083
14985
  Flex,
15084
14986
  {
15085
14987
  $justifyContent: "space-between",
@@ -15089,7 +14991,7 @@ var Sidebar = ({
15089
14991
  $textDecoration: "line-through",
15090
14992
  $color: theme.typography.heading4.color,
15091
14993
  children: [
15092
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
14994
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15093
14995
  Text,
15094
14996
  {
15095
14997
  $font: theme.typography.heading4.fontFamily,
@@ -15103,7 +15005,7 @@ var Sidebar = ({
15103
15005
  ]
15104
15006
  }
15105
15007
  ) }),
15106
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15008
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15107
15009
  Text,
15108
15010
  {
15109
15011
  $font: theme.typography.text.fontFamily,
@@ -15115,7 +15017,7 @@ var Sidebar = ({
15115
15017
  ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * previous.quantity,
15116
15018
  (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
15117
15019
  ),
15118
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
15020
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
15119
15021
  "/",
15120
15022
  shortenPeriod(planPeriod)
15121
15023
  ] })
@@ -15125,14 +15027,14 @@ var Sidebar = ({
15125
15027
  ]
15126
15028
  }
15127
15029
  ),
15128
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15030
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15129
15031
  Flex,
15130
15032
  {
15131
15033
  $justifyContent: "space-between",
15132
15034
  $alignItems: "center",
15133
15035
  $gap: "1rem",
15134
15036
  children: [
15135
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15037
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15136
15038
  Text,
15137
15039
  {
15138
15040
  $font: theme.typography.heading4.fontFamily,
@@ -15146,7 +15048,7 @@ var Sidebar = ({
15146
15048
  ]
15147
15049
  }
15148
15050
  ) }),
15149
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15051
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15150
15052
  Text,
15151
15053
  {
15152
15054
  $font: theme.typography.text.fontFamily,
@@ -15158,7 +15060,7 @@ var Sidebar = ({
15158
15060
  ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * next2.quantity,
15159
15061
  (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
15160
15062
  ),
15161
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
15063
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
15162
15064
  "/",
15163
15065
  shortenPeriod(planPeriod)
15164
15066
  ] })
@@ -15180,28 +15082,28 @@ var Sidebar = ({
15180
15082
  if (entitlement.feature?.name) {
15181
15083
  const price = (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price;
15182
15084
  acc.push(
15183
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15085
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15184
15086
  Flex,
15185
15087
  {
15186
15088
  $justifyContent: "space-between",
15187
15089
  $alignItems: "center",
15188
15090
  $gap: "1rem",
15189
15091
  children: [
15190
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15092
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15191
15093
  Text,
15192
15094
  {
15193
15095
  $font: theme.typography.heading4.fontFamily,
15194
15096
  $size: theme.typography.heading4.fontSize,
15195
15097
  $weight: theme.typography.heading4.fontWeight,
15196
15098
  $color: theme.typography.heading4.color,
15197
- children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
15099
+ children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
15198
15100
  quantity,
15199
15101
  " ",
15200
15102
  (0, import_pluralize.default)(entitlement.feature.name, quantity)
15201
15103
  ] }) : entitlement.feature.name
15202
15104
  }
15203
15105
  ) }),
15204
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15106
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15205
15107
  Text,
15206
15108
  {
15207
15109
  $font: theme.typography.text.fontFamily,
@@ -15209,22 +15111,22 @@ var Sidebar = ({
15209
15111
  $weight: theme.typography.text.fontWeight,
15210
15112
  $color: theme.typography.text.color,
15211
15113
  children: [
15212
- entitlement.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
15114
+ entitlement.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
15213
15115
  formatCurrency(
15214
15116
  price * quantity,
15215
15117
  (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
15216
15118
  ),
15217
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
15119
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
15218
15120
  "/",
15219
15121
  shortenPeriod(planPeriod)
15220
15122
  ] })
15221
15123
  ] }),
15222
- entitlement.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
15124
+ entitlement.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
15223
15125
  formatCurrency(
15224
15126
  price,
15225
15127
  (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
15226
15128
  ),
15227
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
15129
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
15228
15130
  "/",
15229
15131
  (0, import_pluralize.default)(
15230
15132
  entitlement.feature.name.toLowerCase(),
@@ -15246,8 +15148,8 @@ var Sidebar = ({
15246
15148
  []
15247
15149
  )
15248
15150
  ] }),
15249
- selectedPlan && isTrialable && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { children: [
15250
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15151
+ selectedPlan && isTrialable && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { children: [
15152
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15251
15153
  Text,
15252
15154
  {
15253
15155
  $font: theme.typography.text.fontFamily,
@@ -15257,14 +15159,14 @@ var Sidebar = ({
15257
15159
  children: t2("Trial")
15258
15160
  }
15259
15161
  ) }),
15260
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15162
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15261
15163
  Flex,
15262
15164
  {
15263
15165
  $justifyContent: "space-between",
15264
15166
  $alignItems: "center",
15265
15167
  $gap: "1rem",
15266
15168
  children: [
15267
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15169
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15268
15170
  Text,
15269
15171
  {
15270
15172
  $font: theme.typography.heading4.fontFamily,
@@ -15274,7 +15176,7 @@ var Sidebar = ({
15274
15176
  children: t2("Ends on", { date: trialEndsOn.toLocaleDateString() })
15275
15177
  }
15276
15178
  ) }),
15277
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15179
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15278
15180
  Text,
15279
15181
  {
15280
15182
  $font: theme.typography.text.fontFamily,
@@ -15288,7 +15190,7 @@ var Sidebar = ({
15288
15190
  (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.currency
15289
15191
  ),
15290
15192
  "/",
15291
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("sub", { children: shortenPeriod(planPeriod) })
15193
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("sub", { children: shortenPeriod(planPeriod) })
15292
15194
  ]
15293
15195
  }
15294
15196
  ) })
@@ -15296,8 +15198,8 @@ var Sidebar = ({
15296
15198
  }
15297
15199
  )
15298
15200
  ] }),
15299
- (willAddOnsChange || selectedAddOns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
15300
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15201
+ (willAddOnsChange || selectedAddOns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
15202
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15301
15203
  Text,
15302
15204
  {
15303
15205
  $font: theme.typography.text.fontFamily,
@@ -15307,7 +15209,7 @@ var Sidebar = ({
15307
15209
  children: t2("Add-ons")
15308
15210
  }
15309
15211
  ) }),
15310
- removedAddOns.map((addOn) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15212
+ removedAddOns.map((addOn) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15311
15213
  Flex,
15312
15214
  {
15313
15215
  $justifyContent: "space-between",
@@ -15317,7 +15219,7 @@ var Sidebar = ({
15317
15219
  $textDecoration: "line-through",
15318
15220
  $color: theme.typography.heading4.color,
15319
15221
  children: [
15320
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15222
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15321
15223
  Text,
15322
15224
  {
15323
15225
  $font: theme.typography.heading4.fontFamily,
@@ -15327,7 +15229,7 @@ var Sidebar = ({
15327
15229
  children: addOn.name
15328
15230
  }
15329
15231
  ) }),
15330
- typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15232
+ typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15331
15233
  Text,
15332
15234
  {
15333
15235
  $font: theme.typography.text.fontFamily,
@@ -15339,7 +15241,7 @@ var Sidebar = ({
15339
15241
  addOn.planPrice,
15340
15242
  (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
15341
15243
  ),
15342
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
15244
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
15343
15245
  "/",
15344
15246
  shortenPeriod(addOn.planPeriod)
15345
15247
  ] })
@@ -15350,14 +15252,14 @@ var Sidebar = ({
15350
15252
  },
15351
15253
  addOn.id
15352
15254
  )),
15353
- selectedAddOns.map((addOn) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15255
+ selectedAddOns.map((addOn) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15354
15256
  Flex,
15355
15257
  {
15356
15258
  $justifyContent: "space-between",
15357
15259
  $alignItems: "center",
15358
15260
  $gap: "1rem",
15359
15261
  children: [
15360
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15262
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15361
15263
  Text,
15362
15264
  {
15363
15265
  $font: theme.typography.heading4.fontFamily,
@@ -15367,7 +15269,7 @@ var Sidebar = ({
15367
15269
  children: addOn.name
15368
15270
  }
15369
15271
  ) }),
15370
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15272
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15371
15273
  Text,
15372
15274
  {
15373
15275
  $font: theme.typography.text.fontFamily,
@@ -15378,7 +15280,7 @@ var Sidebar = ({
15378
15280
  formatCurrency(
15379
15281
  (planPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0
15380
15282
  ),
15381
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
15283
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
15382
15284
  "/",
15383
15285
  shortenPeriod(planPeriod)
15384
15286
  ] })
@@ -15390,8 +15292,8 @@ var Sidebar = ({
15390
15292
  addOn.id
15391
15293
  ))
15392
15294
  ] }),
15393
- proration !== 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
15394
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15295
+ proration !== 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
15296
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15395
15297
  Text,
15396
15298
  {
15397
15299
  $font: theme.typography.text.fontFamily,
@@ -15401,14 +15303,14 @@ var Sidebar = ({
15401
15303
  children: proration > 0 ? t2("Proration") : !selectedPlan?.companyCanTrial && t2("Credits")
15402
15304
  }
15403
15305
  ) }),
15404
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15306
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15405
15307
  Flex,
15406
15308
  {
15407
15309
  $justifyContent: "space-between",
15408
15310
  $alignItems: "center",
15409
15311
  $gap: "1rem",
15410
15312
  children: [
15411
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15313
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15412
15314
  Text,
15413
15315
  {
15414
15316
  $font: theme.typography.heading4.fontFamily,
@@ -15418,7 +15320,7 @@ var Sidebar = ({
15418
15320
  children: t2("Unused time")
15419
15321
  }
15420
15322
  ) }),
15421
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15323
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15422
15324
  Text,
15423
15325
  {
15424
15326
  $font: theme.typography.text.fontFamily,
@@ -15438,7 +15340,7 @@ var Sidebar = ({
15438
15340
  ]
15439
15341
  }
15440
15342
  ),
15441
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15343
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15442
15344
  Flex,
15443
15345
  {
15444
15346
  $flexDirection: "column",
@@ -15447,14 +15349,14 @@ var Sidebar = ({
15447
15349
  $width: "100%",
15448
15350
  $padding: "1.5rem",
15449
15351
  children: [
15450
- promoCode && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15352
+ promoCode && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15451
15353
  Flex,
15452
15354
  {
15453
15355
  $justifyContent: "space-between",
15454
15356
  $alignItems: "center",
15455
15357
  $gap: "1rem",
15456
15358
  children: [
15457
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15359
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15458
15360
  Text,
15459
15361
  {
15460
15362
  $font: theme.typography.text.fontFamily,
@@ -15464,7 +15366,7 @@ var Sidebar = ({
15464
15366
  children: t2("Discount")
15465
15367
  }
15466
15368
  ) }),
15467
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15369
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15468
15370
  Flex,
15469
15371
  {
15470
15372
  $alignItems: "center",
@@ -15474,7 +15376,7 @@ var Sidebar = ({
15474
15376
  $outlineColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
15475
15377
  $borderRadius: "0.3125rem",
15476
15378
  children: [
15477
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15379
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15478
15380
  Text,
15479
15381
  {
15480
15382
  $font: theme.typography.text.fontFamily,
@@ -15484,14 +15386,14 @@ var Sidebar = ({
15484
15386
  children: promoCode
15485
15387
  }
15486
15388
  ),
15487
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15389
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15488
15390
  Box,
15489
15391
  {
15490
15392
  $cursor: "pointer",
15491
15393
  onClick: () => {
15492
15394
  updatePromoCode?.(void 0);
15493
15395
  },
15494
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15396
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15495
15397
  Icon2,
15496
15398
  {
15497
15399
  name: "close",
@@ -15508,14 +15410,14 @@ var Sidebar = ({
15508
15410
  ]
15509
15411
  }
15510
15412
  ),
15511
- percentOff > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15413
+ percentOff > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15512
15414
  Flex,
15513
15415
  {
15514
15416
  $justifyContent: "space-between",
15515
15417
  $alignItems: "center",
15516
15418
  $gap: "1rem",
15517
15419
  children: [
15518
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15420
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15519
15421
  Text,
15520
15422
  {
15521
15423
  $font: theme.typography.text.fontFamily,
@@ -15525,7 +15427,7 @@ var Sidebar = ({
15525
15427
  children: t2("X% off", { percent: percentOff })
15526
15428
  }
15527
15429
  ) }),
15528
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15430
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15529
15431
  Text,
15530
15432
  {
15531
15433
  $font: theme.typography.text.fontFamily,
@@ -15541,14 +15443,14 @@ var Sidebar = ({
15541
15443
  ]
15542
15444
  }
15543
15445
  ),
15544
- amountOff > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15446
+ amountOff > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15545
15447
  Flex,
15546
15448
  {
15547
15449
  $justifyContent: "space-between",
15548
15450
  $alignItems: "center",
15549
15451
  $gap: "1rem",
15550
15452
  children: [
15551
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15453
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15552
15454
  Text,
15553
15455
  {
15554
15456
  $font: theme.typography.text.fontFamily,
@@ -15563,7 +15465,7 @@ var Sidebar = ({
15563
15465
  })
15564
15466
  }
15565
15467
  ) }),
15566
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15468
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15567
15469
  Text,
15568
15470
  {
15569
15471
  $font: theme.typography.text.fontFamily,
@@ -15582,14 +15484,14 @@ var Sidebar = ({
15582
15484
  ]
15583
15485
  }
15584
15486
  ),
15585
- subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15487
+ subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15586
15488
  Flex,
15587
15489
  {
15588
15490
  $justifyContent: "space-between",
15589
15491
  $alignItems: "center",
15590
15492
  $gap: "1rem",
15591
15493
  children: [
15592
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15494
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15593
15495
  Text,
15594
15496
  {
15595
15497
  $font: theme.typography.text.fontFamily,
@@ -15602,7 +15504,7 @@ var Sidebar = ({
15602
15504
  ]
15603
15505
  }
15604
15506
  ) }),
15605
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15507
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15606
15508
  Text,
15607
15509
  {
15608
15510
  $font: theme.typography.text.fontFamily,
@@ -15611,7 +15513,7 @@ var Sidebar = ({
15611
15513
  $color: theme.typography.text.color,
15612
15514
  children: [
15613
15515
  subscriptionPrice,
15614
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
15516
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
15615
15517
  "/",
15616
15518
  shortenPeriod(planPeriod)
15617
15519
  ] })
@@ -15621,14 +15523,14 @@ var Sidebar = ({
15621
15523
  ]
15622
15524
  }
15623
15525
  ),
15624
- charges && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15526
+ charges && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15625
15527
  Flex,
15626
15528
  {
15627
15529
  $justifyContent: "space-between",
15628
15530
  $alignItems: "center",
15629
15531
  $gap: "1rem",
15630
15532
  children: [
15631
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15533
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15632
15534
  Text,
15633
15535
  {
15634
15536
  $font: theme.typography.text.fontFamily,
@@ -15641,7 +15543,7 @@ var Sidebar = ({
15641
15543
  ]
15642
15544
  }
15643
15545
  ) }),
15644
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15546
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15645
15547
  Text,
15646
15548
  {
15647
15549
  $font: theme.typography.text.fontFamily,
@@ -15657,8 +15559,8 @@ var Sidebar = ({
15657
15559
  ]
15658
15560
  }
15659
15561
  ),
15660
- dueNow < 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
15661
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15562
+ dueNow < 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
15563
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
15662
15564
  Text,
15663
15565
  {
15664
15566
  $font: theme.typography.text.fontFamily,
@@ -15671,7 +15573,7 @@ var Sidebar = ({
15671
15573
  ]
15672
15574
  }
15673
15575
  ) }),
15674
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15576
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15675
15577
  Text,
15676
15578
  {
15677
15579
  $font: theme.typography.text.fontFamily,
@@ -15685,7 +15587,7 @@ var Sidebar = ({
15685
15587
  }
15686
15588
  ) })
15687
15589
  ] }),
15688
- layout === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15590
+ layout === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15689
15591
  StageButton,
15690
15592
  {
15691
15593
  canTrial: selectedPlan?.companyCanTrial === true,
@@ -15702,8 +15604,8 @@ var Sidebar = ({
15702
15604
  trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
15703
15605
  }
15704
15606
  ),
15705
- layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EmbedButton, { onClick: unsubscribe, isLoading, children: t2("Cancel subscription") }),
15706
- !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15607
+ layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(EmbedButton, { onClick: unsubscribe, isLoading, children: t2("Cancel subscription") }),
15608
+ !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15707
15609
  Text,
15708
15610
  {
15709
15611
  $font: theme.typography.text.fontFamily,
@@ -15713,7 +15615,7 @@ var Sidebar = ({
15713
15615
  children: error
15714
15616
  }
15715
15617
  ) }),
15716
- layout !== "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15618
+ layout !== "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
15717
15619
  Text,
15718
15620
  {
15719
15621
  $font: theme.typography.text.fontFamily,
@@ -15733,6 +15635,108 @@ var Sidebar = ({
15733
15635
  );
15734
15636
  };
15735
15637
 
15638
+ // src/components/shared/checkout-dialog/Navigation.tsx
15639
+ var import_jsx_runtime12 = require("react/jsx-runtime");
15640
+ var Navigation = ({
15641
+ name,
15642
+ index,
15643
+ activeIndex,
15644
+ isLast,
15645
+ onClick
15646
+ }) => {
15647
+ const theme = nt();
15648
+ const isLightBackground = useIsLightBackground();
15649
+ const showFullContent = index === activeIndex || index === activeIndex + 1;
15650
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
15651
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15652
+ Flex,
15653
+ {
15654
+ $gap: "0.5rem",
15655
+ $alignItems: "center",
15656
+ ...!showFullContent && { $flexGrow: 1, $minWidth: 0 },
15657
+ children: [
15658
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15659
+ Box,
15660
+ {
15661
+ $display: "none",
15662
+ $viewport: {
15663
+ md: {
15664
+ $display: "block"
15665
+ }
15666
+ },
15667
+ children: index >= activeIndex ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15668
+ Box,
15669
+ {
15670
+ $width: `${20 / TEXT_BASE_SIZE}rem`,
15671
+ $height: `${20 / TEXT_BASE_SIZE}rem`,
15672
+ $borderWidth: "2px",
15673
+ $borderStyle: "solid",
15674
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
15675
+ $borderRadius: "9999px"
15676
+ }
15677
+ ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15678
+ IconRound,
15679
+ {
15680
+ name: "check",
15681
+ colors: [
15682
+ theme.card.background,
15683
+ isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
15684
+ ],
15685
+ style: {
15686
+ fontSize: `${16 / TEXT_BASE_SIZE}rem`,
15687
+ width: `${20 / TEXT_BASE_SIZE}rem`,
15688
+ height: `${20 / TEXT_BASE_SIZE}rem`
15689
+ }
15690
+ }
15691
+ )
15692
+ }
15693
+ ),
15694
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
15695
+ Box,
15696
+ {
15697
+ tabIndex: 0,
15698
+ $fontSize: `${16 / TEXT_BASE_SIZE}rem`,
15699
+ $fontFamily: theme.typography.text.fontFamily,
15700
+ $fontWeight: index === activeIndex ? 600 : 400,
15701
+ $color: theme.typography.text.color,
15702
+ ...!showFullContent && {
15703
+ $overflow: "hidden",
15704
+ $whiteSpace: "nowrap",
15705
+ $textOverflow: "ellipsis"
15706
+ },
15707
+ ...index !== activeIndex && { $opacity: "0.6375" },
15708
+ ...index < activeIndex && {
15709
+ onClick,
15710
+ $cursor: "pointer"
15711
+ },
15712
+ $viewport: {
15713
+ md: {
15714
+ $fontSize: `${19 / TEXT_BASE_SIZE}rem`
15715
+ }
15716
+ },
15717
+ children: [
15718
+ index + 1,
15719
+ ". ",
15720
+ name
15721
+ ]
15722
+ }
15723
+ )
15724
+ ]
15725
+ }
15726
+ ),
15727
+ !isLast && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
15728
+ Icon2,
15729
+ {
15730
+ name: "chevron-right",
15731
+ style: {
15732
+ fontSize: 16,
15733
+ color: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.35)"
15734
+ }
15735
+ }
15736
+ )
15737
+ ] });
15738
+ };
15739
+
15736
15740
  // src/components/shared/checkout-dialog/Plan.tsx
15737
15741
  var import_react22 = require("react");
15738
15742
  var import_pluralize2 = __toESM(require_pluralize());
@@ -17393,10 +17397,11 @@ var PeriodToggle = ({
17393
17397
  // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
17394
17398
  var import_react27 = require("react");
17395
17399
  var import_jsx_runtime20 = require("react/jsx-runtime");
17396
- var UnsubscribeDialog = () => {
17400
+ var UnsubscribeDialog = ({ top = 0 }) => {
17397
17401
  const { t: t2 } = useTranslation();
17398
17402
  const theme = nt();
17399
17403
  const { data, setLayout, setSelected } = useEmbed();
17404
+ const contentRef = (0, import_react27.useRef)(null);
17400
17405
  const [error, setError] = (0, import_react27.useState)();
17401
17406
  const [isLoading, setIsLoading] = (0, import_react27.useState)(false);
17402
17407
  const planPeriod = (0, import_react27.useMemo)(
@@ -17443,136 +17448,145 @@ var UnsubscribeDialog = () => {
17443
17448
  const handleClose = (0, import_react27.useCallback)(() => {
17444
17449
  setLayout("portal");
17445
17450
  }, [setLayout]);
17446
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Modal, { id: "unsubscribe-dialog", size: "auto", children: [
17447
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
17448
- Box,
17449
- {
17450
- $display: "inline-flex",
17451
- $position: "absolute",
17452
- $top: 0,
17453
- $right: 0,
17454
- $zIndex: 1,
17455
- $cursor: "pointer",
17456
- onClick: handleClose,
17457
- children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
17458
- Icon2,
17451
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
17452
+ Modal,
17453
+ {
17454
+ id: "unsubscribe-dialog",
17455
+ size: "auto",
17456
+ top,
17457
+ contentRef,
17458
+ children: [
17459
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
17460
+ Box,
17459
17461
  {
17460
- name: "close",
17461
- style: {
17462
- fontSize: 36,
17463
- color: isLightBackground ? "hsla(0, 0%, 0%, 0.275)" : "hsla(0, 0%, 100%, 0.275)"
17464
- }
17462
+ $display: "inline-flex",
17463
+ $position: "absolute",
17464
+ $top: 0,
17465
+ $right: 0,
17466
+ $zIndex: 1,
17467
+ $cursor: "pointer",
17468
+ onClick: handleClose,
17469
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
17470
+ Icon2,
17471
+ {
17472
+ name: "close",
17473
+ style: {
17474
+ fontSize: 36,
17475
+ color: isLightBackground ? "hsla(0, 0%, 0%, 0.275)" : "hsla(0, 0%, 100%, 0.275)"
17476
+ }
17477
+ }
17478
+ )
17465
17479
  }
17466
- )
17467
- }
17468
- ),
17469
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
17470
- Flex,
17471
- {
17472
- $position: "relative",
17473
- $flexDirection: "column",
17474
- $height: "auto",
17475
- $viewport: {
17476
- md: {
17477
- $flexDirection: "row",
17478
- $height: "calc(100% - 5rem)"
17480
+ ),
17481
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
17482
+ Flex,
17483
+ {
17484
+ $position: "relative",
17485
+ $flexDirection: "column",
17486
+ $height: "auto",
17487
+ $viewport: {
17488
+ md: {
17489
+ $flexDirection: "row",
17490
+ $height: "calc(100% - 5rem)"
17491
+ }
17492
+ },
17493
+ children: [
17494
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
17495
+ Flex,
17496
+ {
17497
+ $flexDirection: "column",
17498
+ $flexWrap: "wrap",
17499
+ $justifyContent: "space-around",
17500
+ $gap: "5rem",
17501
+ $padding: "2.5rem",
17502
+ children: [
17503
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
17504
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
17505
+ Text,
17506
+ {
17507
+ as: "h2",
17508
+ $font: theme.typography.heading2.fontFamily,
17509
+ $size: theme.typography.heading2.fontSize,
17510
+ $weight: theme.typography.heading2.fontWeight,
17511
+ $color: theme.typography.heading2.color,
17512
+ children: t2("Cancel subscription")
17513
+ }
17514
+ ),
17515
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
17516
+ Text,
17517
+ {
17518
+ as: "p",
17519
+ $font: theme.typography.text.fontFamily,
17520
+ $size: theme.typography.text.fontSize,
17521
+ $weight: theme.typography.text.fontWeight,
17522
+ $color: theme.typography.text.color,
17523
+ children: [
17524
+ t2(
17525
+ "You will retain access to your plan until the end of the billing period, on"
17526
+ ),
17527
+ " ",
17528
+ cancelDate ? toPrettyDate(cancelDate, {
17529
+ month: "numeric"
17530
+ }) : ""
17531
+ ]
17532
+ }
17533
+ )
17534
+ ] }),
17535
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
17536
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
17537
+ Text,
17538
+ {
17539
+ as: "p",
17540
+ $font: theme.typography.text.fontFamily,
17541
+ $size: theme.typography.text.fontSize,
17542
+ $weight: theme.typography.text.fontWeight,
17543
+ $color: theme.typography.text.color,
17544
+ children: t2("Not ready to cancel?")
17545
+ }
17546
+ ),
17547
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
17548
+ EmbedButton,
17549
+ {
17550
+ onClick: () => {
17551
+ setSelected({
17552
+ planId: data.company?.plan?.id,
17553
+ addOnId: void 0,
17554
+ usage: false
17555
+ });
17556
+ setLayout("checkout");
17557
+ },
17558
+ $size: "sm",
17559
+ $color: "secondary",
17560
+ $variant: "ghost",
17561
+ $fullWidth: false,
17562
+ children: t2("Manage plan")
17563
+ }
17564
+ )
17565
+ ] })
17566
+ ]
17567
+ }
17568
+ ),
17569
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
17570
+ Sidebar,
17571
+ {
17572
+ planPeriod,
17573
+ addOns,
17574
+ usageBasedEntitlements,
17575
+ error,
17576
+ isLoading,
17577
+ showHeader: false,
17578
+ showPaymentForm: false,
17579
+ requiresPayment: false,
17580
+ setError: (msg) => setError(msg),
17581
+ setIsLoading
17582
+ }
17583
+ )
17584
+ ]
17479
17585
  }
17480
- },
17481
- children: [
17482
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
17483
- Flex,
17484
- {
17485
- $flexDirection: "column",
17486
- $flexWrap: "wrap",
17487
- $justifyContent: "space-around",
17488
- $gap: "5rem",
17489
- $padding: "2.5rem",
17490
- children: [
17491
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
17492
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
17493
- Text,
17494
- {
17495
- as: "h2",
17496
- $font: theme.typography.heading2.fontFamily,
17497
- $size: theme.typography.heading2.fontSize,
17498
- $weight: theme.typography.heading2.fontWeight,
17499
- $color: theme.typography.heading2.color,
17500
- children: t2("Cancel subscription")
17501
- }
17502
- ),
17503
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
17504
- Text,
17505
- {
17506
- as: "p",
17507
- $font: theme.typography.text.fontFamily,
17508
- $size: theme.typography.text.fontSize,
17509
- $weight: theme.typography.text.fontWeight,
17510
- $color: theme.typography.text.color,
17511
- children: [
17512
- t2(
17513
- "You will retain access to your plan until the end of the billing period, on"
17514
- ),
17515
- " ",
17516
- cancelDate ? toPrettyDate(cancelDate, {
17517
- month: "numeric"
17518
- }) : ""
17519
- ]
17520
- }
17521
- )
17522
- ] }),
17523
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
17524
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
17525
- Text,
17526
- {
17527
- as: "p",
17528
- $font: theme.typography.text.fontFamily,
17529
- $size: theme.typography.text.fontSize,
17530
- $weight: theme.typography.text.fontWeight,
17531
- $color: theme.typography.text.color,
17532
- children: t2("Not ready to cancel?")
17533
- }
17534
- ),
17535
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
17536
- EmbedButton,
17537
- {
17538
- onClick: () => {
17539
- setSelected({
17540
- planId: data.company?.plan?.id,
17541
- addOnId: void 0,
17542
- usage: false
17543
- });
17544
- setLayout("checkout");
17545
- },
17546
- $size: "sm",
17547
- $color: "secondary",
17548
- $variant: "ghost",
17549
- $fullWidth: false,
17550
- children: t2("Manage plan")
17551
- }
17552
- )
17553
- ] })
17554
- ]
17555
- }
17556
- ),
17557
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
17558
- Sidebar,
17559
- {
17560
- planPeriod,
17561
- addOns,
17562
- usageBasedEntitlements,
17563
- error,
17564
- isLoading,
17565
- showHeader: false,
17566
- showPaymentForm: false,
17567
- requiresPayment: false,
17568
- setError: (msg) => setError(msg),
17569
- setIsLoading
17570
- }
17571
- )
17572
- ]
17573
- }
17574
- )
17575
- ] });
17586
+ )
17587
+ ]
17588
+ }
17589
+ );
17576
17590
  };
17577
17591
 
17578
17592
  // src/components/ui/badge/Badge.tsx
@@ -17756,15 +17770,13 @@ var Viewport = (0, import_react28.forwardRef)(
17756
17770
  const [top, setTop] = (0, import_react28.useState)(0);
17757
17771
  const canCheckout = data.capabilities?.checkout ?? true;
17758
17772
  (0, import_react28.useLayoutEffect)(() => {
17759
- if (layout !== "checkout" && layout !== "unsubscribe") {
17760
- return;
17761
- }
17762
17773
  const parent = portal || document.body;
17763
- const value = Math.abs(
17764
- (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
17774
+ setTop(
17775
+ Math.abs(
17776
+ (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
17777
+ )
17765
17778
  );
17766
- setTop(value);
17767
- parent.style.overflow = "hidden";
17779
+ parent.style.overflow = layout === "checkout" || layout === "unsubscribe" ? "hidden" : "";
17768
17780
  return () => {
17769
17781
  parent.style.overflow = "";
17770
17782
  };
@@ -17775,7 +17787,10 @@ var Viewport = (0, import_react28.forwardRef)(
17775
17787
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Badge, {})
17776
17788
  ] }),
17777
17789
  canCheckout && layout === "checkout" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CheckoutDialog, { top }), portal || document.body),
17778
- layout === "unsubscribe" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UnsubscribeDialog, {}), portal || document.body)
17790
+ layout === "unsubscribe" && (0, import_react_dom2.createPortal)(
17791
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UnsubscribeDialog, { top }),
17792
+ portal || document.body
17793
+ )
17779
17794
  ] });
17780
17795
  }
17781
17796
  );
@@ -18231,13 +18246,11 @@ function resolveDesignProps2(props) {
18231
18246
  }
18232
18247
  };
18233
18248
  }
18234
- function formatInvoices(invoices) {
18235
- return (invoices || []).filter(
18236
- ({ url, amountDue, amountPaid }) => url && (amountDue === 0 || amountPaid > 0)
18237
- ).sort((a2, b2) => a2.dueDate && b2.dueDate ? +b2.dueDate - +a2.dueDate : 1).map(({ amountDue, dueDate, url, currency }) => ({
18238
- ...dueDate && { date: toPrettyDate(dueDate) },
18249
+ function formatInvoices(invoices = []) {
18250
+ 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 }) => ({
18239
18251
  amount: formatCurrency(amountDue, currency),
18240
- url
18252
+ ...dueDate && { date: toPrettyDate(dueDate) },
18253
+ ...url && { url }
18241
18254
  }));
18242
18255
  }
18243
18256
  var InvoiceDate = ({ date, fontStyle, url }) => {
@@ -19468,7 +19481,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
19468
19481
  $display: "grid",
19469
19482
  $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
19470
19483
  $gap: "1rem",
19471
- children: plans.map((plan, index) => {
19484
+ children: plans.map((plan, index, self2) => {
19472
19485
  const isActivePlan = plan.current && data.company?.plan?.planPeriod === selectedPeriod;
19473
19486
  const count = entitlementCounts[plan.id];
19474
19487
  let isExpanded = false;
@@ -19574,6 +19587,18 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
19574
19587
  $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
19575
19588
  children: [
19576
19589
  props.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: [
19590
+ props.plans.showInclusionText && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
19591
+ Text,
19592
+ {
19593
+ $font: theme.typography.text.fontFamily,
19594
+ $size: theme.typography.text.fontSize,
19595
+ $weight: theme.typography.text.fontWeight,
19596
+ $color: theme.typography.text.color,
19597
+ children: t2("Everything in", {
19598
+ plan: self2[index - 1].name
19599
+ })
19600
+ }
19601
+ ) }),
19577
19602
  plan.entitlements.reduce((acc, entitlement) => {
19578
19603
  let price;
19579
19604
  let currency;