@schematichq/schematic-react 0.2.0-rc.4 → 0.2.0-rc.5

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.
@@ -6192,6 +6192,11 @@ var Qe = function() {
6192
6192
  }();
6193
6193
  var et = o.createContext(void 0);
6194
6194
  var tt = et.Consumer;
6195
+ function nt() {
6196
+ var e = c(et);
6197
+ if (!e) throw he(18);
6198
+ return e;
6199
+ }
6195
6200
  function ot(e) {
6196
6201
  var n = o.useContext(et), r2 = i(function() {
6197
6202
  return function(e2, n2) {
@@ -6339,6 +6344,12 @@ function ft(n) {
6339
6344
  }
6340
6345
  return o.memo(l2);
6341
6346
  }
6347
+ function mt(t) {
6348
+ for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
6349
+ "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");
6350
+ var r2 = ae(lt.apply(void 0, __spreadArray([t], n, false))), s2 = $(r2);
6351
+ return new We(s2, r2);
6352
+ }
6342
6353
  var vt = function() {
6343
6354
  function e() {
6344
6355
  var e2 = this;
@@ -7307,6 +7318,7 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
7307
7318
  environmentId: json["environment_id"],
7308
7319
  externalId: json["external_id"],
7309
7320
  id: json["id"],
7321
+ paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
7310
7322
  subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
7311
7323
  subtotal: json["subtotal"],
7312
7324
  updatedAt: new Date(json["updated_at"])
@@ -7958,8 +7970,8 @@ function parseEditorState(data) {
7958
7970
  return arr;
7959
7971
  }
7960
7972
  async function fetchComponent(id, api) {
7961
- const settings = { ...defaultSettings };
7962
7973
  const nodes = [];
7974
+ const settings = { ...defaultSettings };
7963
7975
  const response = await api.hydrateComponent({ componentId: id });
7964
7976
  const { data } = response;
7965
7977
  if (data.component?.ast) {
@@ -8073,9 +8085,11 @@ var EmbedProvider = ({
8073
8085
  const setData = useCallback(
8074
8086
  (data) => {
8075
8087
  setState((prev2) => {
8076
- const updated = { ...prev2 };
8077
- (0, import_lodash.default)(updated.data, data);
8078
- return updated;
8088
+ const updatedData = (0, import_lodash.default)({}, prev2.data, { ...data });
8089
+ return {
8090
+ ...prev2,
8091
+ data: updatedData
8092
+ };
8079
8093
  });
8080
8094
  },
8081
8095
  [setState]
@@ -8083,9 +8097,11 @@ var EmbedProvider = ({
8083
8097
  const updateSettings = useCallback(
8084
8098
  (settings) => {
8085
8099
  setState((prev2) => {
8086
- const updated = { ...prev2 };
8087
- (0, import_lodash.default)(updated.settings, settings);
8088
- return updated;
8100
+ const updatedSettings = (0, import_lodash.default)({}, prev2.settings, { ...settings });
8101
+ return {
8102
+ ...prev2,
8103
+ settings: updatedSettings
8104
+ };
8089
8105
  });
8090
8106
  },
8091
8107
  [setState]
@@ -9471,13 +9487,115 @@ var IconRound = ({
9471
9487
  return /* @__PURE__ */ jsx5(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ jsx5(Icon2, { name }) });
9472
9488
  };
9473
9489
 
9490
+ // src/components/ui/modal/Modal.tsx
9491
+ import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2 } from "react";
9492
+ import { jsx as jsx6 } from "react/jsx-runtime";
9493
+ var Modal = ({ children, onClose }) => {
9494
+ const theme = nt();
9495
+ const { setLayout } = useEmbed();
9496
+ const ref = useRef2(null);
9497
+ const handleClose = useCallback2(() => {
9498
+ setLayout("portal");
9499
+ onClose?.();
9500
+ }, [setLayout, onClose]);
9501
+ useEffect4(() => {
9502
+ ref.current?.focus();
9503
+ }, []);
9504
+ return /* @__PURE__ */ jsx6(
9505
+ Box,
9506
+ {
9507
+ ref,
9508
+ tabIndex: 0,
9509
+ onClick: (event) => {
9510
+ if (event.target === event.currentTarget) {
9511
+ handleClose();
9512
+ }
9513
+ },
9514
+ onKeyDown: (event) => {
9515
+ if (event.key === "Escape") {
9516
+ handleClose();
9517
+ }
9518
+ },
9519
+ $position: "absolute",
9520
+ $top: "50%",
9521
+ $left: "50%",
9522
+ $zIndex: "999999",
9523
+ $transform: "translate(-50%, -50%)",
9524
+ $width: "100%",
9525
+ $height: "100%",
9526
+ $backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 15) : lighten(theme.card.background, 15),
9527
+ $overflow: "hidden",
9528
+ children: /* @__PURE__ */ jsx6(
9529
+ Flex,
9530
+ {
9531
+ $position: "relative",
9532
+ $top: "50%",
9533
+ $left: "50%",
9534
+ $transform: "translate(-50%, -50%)",
9535
+ $flexDirection: "column",
9536
+ $overflow: "hidden",
9537
+ $width: "calc(100% - 5rem)",
9538
+ $height: "calc(100% - 5rem)",
9539
+ $backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 2.5) : lighten(theme.card.background, 2.5),
9540
+ $borderRadius: "0.5rem",
9541
+ $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
9542
+ id: "select-plan-dialog",
9543
+ role: "dialog",
9544
+ "aria-labelledby": "select-plan-dialog-label",
9545
+ "aria-modal": "true",
9546
+ children
9547
+ }
9548
+ )
9549
+ }
9550
+ );
9551
+ };
9552
+
9553
+ // src/components/ui/modal/ModalHeader.tsx
9554
+ import { useCallback as useCallback3 } from "react";
9555
+ import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
9556
+ var ModalHeader = ({ children, onClose }) => {
9557
+ const theme = nt();
9558
+ const { setLayout } = useEmbed();
9559
+ const handleClose = useCallback3(() => {
9560
+ setLayout("portal");
9561
+ onClose?.();
9562
+ }, [setLayout, onClose]);
9563
+ return /* @__PURE__ */ jsxs2(
9564
+ Flex,
9565
+ {
9566
+ $justifyContent: "space-between",
9567
+ $alignItems: "center",
9568
+ $gap: "1rem",
9569
+ $height: "3.75rem",
9570
+ $padding: "0 0.625rem 0 2.5rem",
9571
+ $backgroundColor: theme.card.background,
9572
+ $borderBottomWidth: "1px",
9573
+ $borderBottomStyle: "solid",
9574
+ $borderBottomColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 15) : lighten(theme.card.background, 15),
9575
+ children: [
9576
+ children,
9577
+ /* @__PURE__ */ jsx7(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ jsx7(
9578
+ Icon2,
9579
+ {
9580
+ name: "close",
9581
+ style: {
9582
+ fontSize: 36,
9583
+ color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 27.5) : lighten(theme.card.background, 27.5)
9584
+ }
9585
+ }
9586
+ ) })
9587
+ ]
9588
+ }
9589
+ );
9590
+ };
9591
+
9474
9592
  // src/components/ui/progress-bar/styles.ts
9475
9593
  var Container2 = dt(Flex)`
9476
9594
  position: relative;
9477
9595
  `;
9478
9596
 
9479
9597
  // src/components/ui/progress-bar/ProgressBar.tsx
9480
- import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
9598
+ import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
9481
9599
  var ProgressBar = ({
9482
9600
  progress,
9483
9601
  value,
@@ -9493,21 +9611,21 @@ var ProgressBar = ({
9493
9611
  orange: "#DB6769",
9494
9612
  red: "#EF4444"
9495
9613
  };
9496
- return /* @__PURE__ */ jsxs2(
9614
+ return /* @__PURE__ */ jsxs3(
9497
9615
  Container2,
9498
9616
  {
9499
9617
  $alignItems: "center",
9500
9618
  $gap: `${16 / TEXT_BASE_SIZE}rem`,
9501
9619
  ...props,
9502
9620
  children: [
9503
- /* @__PURE__ */ jsx6(
9621
+ /* @__PURE__ */ jsx8(
9504
9622
  Flex,
9505
9623
  {
9506
9624
  $position: "relative",
9507
9625
  $alignItems: "center",
9508
9626
  $width: `${barWidth}`,
9509
9627
  $maxWidth: "100%",
9510
- children: /* @__PURE__ */ jsx6(
9628
+ children: /* @__PURE__ */ jsx8(
9511
9629
  Flex,
9512
9630
  {
9513
9631
  $position: "relative",
@@ -9516,7 +9634,7 @@ var ProgressBar = ({
9516
9634
  $height: `${8 / TEXT_BASE_SIZE}rem`,
9517
9635
  $background: "#F2F4F7",
9518
9636
  $borderRadius: "9999px",
9519
- children: /* @__PURE__ */ jsx6(
9637
+ children: /* @__PURE__ */ jsx8(
9520
9638
  Box,
9521
9639
  {
9522
9640
  $width: `${Math.min(progress, 100)}%`,
@@ -9529,7 +9647,7 @@ var ProgressBar = ({
9529
9647
  )
9530
9648
  }
9531
9649
  ),
9532
- total !== 0 && /* @__PURE__ */ jsxs2(Text, { $size: 14, $weight: 500, children: [
9650
+ total !== 0 && /* @__PURE__ */ jsxs3(Text, { $size: 14, $weight: 500, children: [
9533
9651
  value,
9534
9652
  "/",
9535
9653
  total
@@ -9540,13 +9658,7 @@ var ProgressBar = ({
9540
9658
  };
9541
9659
 
9542
9660
  // src/components/elements/plan-manager/CheckoutDialog.tsx
9543
- import {
9544
- useEffect as useEffect4,
9545
- useMemo as useMemo2,
9546
- useRef as useRef2,
9547
- useState as useState5,
9548
- useCallback as useCallback2
9549
- } from "react";
9661
+ import { useMemo as useMemo2, useState as useState5 } from "react";
9550
9662
 
9551
9663
  // src/components/elements/plan-manager/PaymentForm.tsx
9552
9664
  import { useState as useState4 } from "react";
@@ -9564,7 +9676,18 @@ var StyledButton = dt(Button2)`
9564
9676
  width: 100%;
9565
9677
  ${({ disabled, $color = "primary", theme }) => {
9566
9678
  const { l: l2 } = hexToHSL(theme[$color]);
9567
- const textColor = disabled ? "#989898" : l2 > 50 ? "#000000" : "#FFFFFF";
9679
+ let textColor;
9680
+ let colorFn;
9681
+ if (l2 > 50) {
9682
+ textColor = "#000000";
9683
+ colorFn = lighten;
9684
+ } else {
9685
+ textColor = "#FFFFFF";
9686
+ colorFn = darken;
9687
+ }
9688
+ if (disabled) {
9689
+ textColor = colorFn(textColor, 42.5);
9690
+ }
9568
9691
  return lt`
9569
9692
  color: ${textColor};
9570
9693
 
@@ -9575,35 +9698,47 @@ var StyledButton = dt(Button2)`
9575
9698
  }};
9576
9699
 
9577
9700
  ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
9578
- const color = disabled ? "#EEEEEE" : theme[$color];
9701
+ let color = theme[$color];
9702
+ if (disabled) {
9703
+ const { l: l2 } = hexToHSL(theme.card.background);
9704
+ color = hslToHex({ h: 0, s: 0, l: l2 });
9705
+ color = l2 > 50 ? darken(color, 7.5) : lighten(color, 7.5);
9706
+ }
9579
9707
  return $variant === "filled" ? lt`
9580
9708
  background-color: ${color};
9581
9709
  border-color: ${color};
9582
9710
  ` : lt`
9583
9711
  background-color: transparent;
9584
- border-color: #d2d2d2;
9585
- color: #194bfb;
9712
+ border-color: ${color};
9713
+ color: ${color};
9714
+
9586
9715
  ${Text} {
9587
- color: #194bfb;
9716
+ color: ${color};
9588
9717
  }
9589
9718
  `;
9590
9719
  }}
9591
9720
 
9592
- &:hover {
9593
- ${({ disabled }) => disabled && "cursor: not-allowed;"}
9594
- ${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
9721
+ &:disabled:hover {
9722
+ cursor: not-allowed;
9723
+ }
9724
+
9725
+ &:not(:disabled):hover {
9726
+ ${({ $color = "primary", theme, $variant = "filled" }) => {
9595
9727
  const specified = theme[$color];
9596
9728
  const lightened = lighten(specified, 15);
9597
- const color = disabled ? "#EEEEEE" : specified === lightened ? darken(specified, 15) : lightened;
9729
+ const color = specified === lightened ? darken(specified, 15) : lightened;
9730
+ const { l: l2 } = hexToHSL(theme[$color]);
9731
+ const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
9598
9732
  return $variant === "filled" ? lt`
9599
9733
  background-color: ${color};
9600
9734
  border-color: ${color};
9601
9735
  ` : lt`
9602
9736
  background-color: ${color};
9603
9737
  border-color: ${color};
9604
- color: #ffffff;
9738
+ color: ${textColor};
9739
+
9605
9740
  ${Text} {
9606
- color: #ffffff;
9741
+ color: ${textColor};
9607
9742
  }
9608
9743
  `;
9609
9744
  }}
@@ -9634,7 +9769,7 @@ var StyledButton = dt(Button2)`
9634
9769
  `;
9635
9770
 
9636
9771
  // src/components/elements/plan-manager/PaymentForm.tsx
9637
- import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
9772
+ import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
9638
9773
  var PaymentForm = ({ plan, period, onConfirm }) => {
9639
9774
  const stripe = useStripe();
9640
9775
  const elements = useElements();
@@ -9665,8 +9800,6 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
9665
9800
  }
9666
9801
  if (error?.type === "card_error" || error?.type === "validation_error") {
9667
9802
  setMessage(error.message);
9668
- } else {
9669
- setMessage("An unexpected error occured.");
9670
9803
  }
9671
9804
  setIsLoading(false);
9672
9805
  } catch (error) {
@@ -9678,7 +9811,7 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
9678
9811
  setIsLoading(false);
9679
9812
  }
9680
9813
  };
9681
- return /* @__PURE__ */ jsxs3(
9814
+ return /* @__PURE__ */ jsxs4(
9682
9815
  "form",
9683
9816
  {
9684
9817
  id: "payment-form",
@@ -9691,27 +9824,15 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
9691
9824
  overflowY: "auto"
9692
9825
  },
9693
9826
  children: [
9694
- /* @__PURE__ */ jsxs3(
9695
- Box,
9696
- {
9697
- $fontSize: "18px",
9698
- $marginBottom: "1.5rem",
9699
- $display: "inline-block",
9700
- $width: "100%",
9701
- children: [
9702
- "Add payment method",
9703
- " "
9704
- ]
9705
- }
9706
- ),
9707
- /* @__PURE__ */ jsx7(
9827
+ /* @__PURE__ */ jsx9(Box, { $width: "100%", $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx9(Text, { $size: 18, children: "Add payment method" }) }),
9828
+ /* @__PURE__ */ jsx9(
9708
9829
  Flex,
9709
9830
  {
9710
9831
  $flexDirection: "column",
9711
9832
  $gap: "1.5rem",
9712
9833
  $marginBottom: "1.5rem",
9713
9834
  $width: "100%",
9714
- children: /* @__PURE__ */ jsx7(
9835
+ children: /* @__PURE__ */ jsx9(
9715
9836
  LinkAuthenticationElement,
9716
9837
  {
9717
9838
  id: "link-authentication-element"
@@ -9719,18 +9840,18 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
9719
9840
  )
9720
9841
  }
9721
9842
  ),
9722
- /* @__PURE__ */ jsxs3(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
9723
- /* @__PURE__ */ jsx7(PaymentElement, { id: "payment-element" }),
9724
- message && /* @__PURE__ */ jsx7("div", { id: "payment-message", children: message })
9843
+ /* @__PURE__ */ jsxs4(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
9844
+ /* @__PURE__ */ jsx9(PaymentElement, { id: "payment-element" }),
9845
+ message && /* @__PURE__ */ jsx9(Text, { id: "payment-message", children: message })
9725
9846
  ] }),
9726
- /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7(
9847
+ /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(
9727
9848
  StyledButton,
9728
9849
  {
9729
9850
  id: "submit",
9730
9851
  disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
9731
9852
  $size: "md",
9732
9853
  $color: "primary",
9733
- children: /* @__PURE__ */ jsx7("span", { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
9854
+ children: /* @__PURE__ */ jsx9(Text, { id: "button-text", children: !isLoading ? "Loading" : "Save payment method" })
9734
9855
  }
9735
9856
  ) })
9736
9857
  ]
@@ -9739,355 +9860,7 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
9739
9860
  };
9740
9861
 
9741
9862
  // src/components/elements/plan-manager/CheckoutDialog.tsx
9742
- import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
9743
- var OverlayHeader = ({
9744
- children,
9745
- onClose
9746
- }) => {
9747
- const { setLayout } = useEmbed();
9748
- const handleClose = useCallback2(() => {
9749
- setLayout("portal");
9750
- onClose?.();
9751
- }, [setLayout, onClose]);
9752
- return /* @__PURE__ */ jsxs4(
9753
- Flex,
9754
- {
9755
- $paddingLeft: "2.5rem",
9756
- $paddingRight: "2.5rem",
9757
- $padding: ".75rem 2.5rem",
9758
- $flexDirection: "row",
9759
- $justifyContent: "space-between",
9760
- $alignItems: "center",
9761
- $borderBottom: "1px solid #DEDEDE",
9762
- $gap: "1rem",
9763
- $backgroundColor: "#FFFFFF",
9764
- $borderRadius: ".5rem .5rem 0 0",
9765
- children: [
9766
- children,
9767
- /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ jsx8(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } }) }) })
9768
- ]
9769
- }
9770
- );
9771
- };
9772
- var OverlayWrapper = ({
9773
- children,
9774
- size = "lg",
9775
- onClose
9776
- }) => {
9777
- const { setLayout } = useEmbed();
9778
- const ref = useRef2(null);
9779
- const sizeWidthMap = {
9780
- md: "700px",
9781
- lg: "75%"
9782
- };
9783
- const sizeHeighthMap = {
9784
- md: "auto",
9785
- lg: "75%"
9786
- };
9787
- const sizeMaxWidthMap = {
9788
- md: "auto",
9789
- lg: "1140px"
9790
- };
9791
- const handleClose = useCallback2(() => {
9792
- setLayout("portal");
9793
- onClose?.();
9794
- }, [setLayout, onClose]);
9795
- useEffect4(() => {
9796
- ref.current?.focus();
9797
- }, []);
9798
- return /* @__PURE__ */ jsx8(
9799
- Box,
9800
- {
9801
- ref,
9802
- tabIndex: 0,
9803
- onClick: (event) => {
9804
- if (event.target === event.currentTarget) {
9805
- handleClose();
9806
- }
9807
- },
9808
- onKeyDown: (event) => {
9809
- if (event.key === "Escape") {
9810
- handleClose();
9811
- }
9812
- },
9813
- $position: "absolute",
9814
- $top: "50%",
9815
- $left: "50%",
9816
- $zIndex: "999999",
9817
- $transform: "translate(-50%, -50%)",
9818
- $width: "100%",
9819
- $height: "100%",
9820
- $backgroundColor: "#D9D9D9",
9821
- $overflow: "hidden",
9822
- children: /* @__PURE__ */ jsx8(
9823
- Flex,
9824
- {
9825
- $position: "relative",
9826
- $top: "50%",
9827
- $left: "50%",
9828
- $transform: "translate(-50%, -50%)",
9829
- $flexDirection: "column",
9830
- $maxWidth: sizeMaxWidthMap[size],
9831
- $width: sizeWidthMap[size],
9832
- $height: sizeHeighthMap[size],
9833
- $backgroundColor: "#FBFBFB",
9834
- $borderBottom: "1px solid #DEDEDE",
9835
- $borderRadius: "8px",
9836
- $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
9837
- id: "select-plan-dialog",
9838
- role: "dialog",
9839
- "aria-labelledby": "select-plan-dialog-label",
9840
- "aria-modal": "true",
9841
- children
9842
- }
9843
- )
9844
- }
9845
- );
9846
- };
9847
- var OverlaySideBar = ({
9848
- pricePeriod,
9849
- setPricePeriod,
9850
- checkoutStage,
9851
- setCheckoutStage,
9852
- currentPlan,
9853
- selectedPlan,
9854
- paymentMethodId
9855
- }) => {
9856
- const { api } = useEmbed();
9857
- const savingsPercentage = useMemo2(() => {
9858
- if (selectedPlan && pricePeriod === "month") {
9859
- const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
9860
- const yearly = selectedPlan?.yearlyPrice?.price || 0;
9861
- return Math.round((monthly - yearly) / monthly * 1e4) / 100;
9862
- }
9863
- return 0;
9864
- }, [selectedPlan, pricePeriod]);
9865
- return /* @__PURE__ */ jsxs4(
9866
- Flex,
9867
- {
9868
- $flexDirection: "column",
9869
- $background: "white",
9870
- $borderRadius: "0 0 0.5rem",
9871
- $maxWidth: "275px",
9872
- $height: "100%",
9873
- $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
9874
- children: [
9875
- /* @__PURE__ */ jsxs4(
9876
- Flex,
9877
- {
9878
- $flexDirection: "column",
9879
- $position: "relative",
9880
- $gap: "1rem",
9881
- $width: "100%",
9882
- $height: "auto",
9883
- $padding: "1.5rem",
9884
- $borderBottom: "1px solid #DEDEDE",
9885
- children: [
9886
- /* @__PURE__ */ jsx8(Flex, { $flexDirection: "row", $justifyContent: "space-between", children: /* @__PURE__ */ jsx8(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
9887
- /* @__PURE__ */ jsxs4(
9888
- Flex,
9889
- {
9890
- $flexDirection: "row",
9891
- $border: "1px solid #D9D9D9",
9892
- $borderRadius: "40px",
9893
- $fontSize: "12px",
9894
- $textAlign: "center",
9895
- $cursor: "pointer",
9896
- children: [
9897
- /* @__PURE__ */ jsx8(
9898
- Box,
9899
- {
9900
- onClick: () => setPricePeriod("month"),
9901
- $padding: ".25rem .5rem",
9902
- $flex: "1",
9903
- $fontWeight: pricePeriod === "month" ? "600" : "400",
9904
- $backgroundColor: pricePeriod === "month" ? "#DDDDDD" : "white",
9905
- $borderRadius: "40px",
9906
- children: "Billed monthly"
9907
- }
9908
- ),
9909
- /* @__PURE__ */ jsx8(
9910
- Box,
9911
- {
9912
- onClick: () => setPricePeriod("year"),
9913
- $padding: ".25rem .5rem",
9914
- $flex: "1",
9915
- $fontWeight: pricePeriod === "year" ? "600" : "400",
9916
- $backgroundColor: pricePeriod === "year" ? "#DDDDDD" : "white",
9917
- $borderRadius: "40px",
9918
- children: "Billed yearly"
9919
- }
9920
- )
9921
- ]
9922
- }
9923
- ),
9924
- savingsPercentage > 0 && /* @__PURE__ */ jsxs4(Box, { $fontSize: "11px", $color: "#194BFB", children: [
9925
- "Save up to ",
9926
- savingsPercentage,
9927
- "% with yearly billing"
9928
- ] })
9929
- ]
9930
- }
9931
- ),
9932
- /* @__PURE__ */ jsxs4(
9933
- Flex,
9934
- {
9935
- $flexDirection: "column",
9936
- $position: "relative",
9937
- $gap: "1rem",
9938
- $width: "100%",
9939
- $height: "auto",
9940
- $padding: "1.5rem",
9941
- $flex: "1",
9942
- $borderBottom: "1px solid #DEDEDE",
9943
- children: [
9944
- /* @__PURE__ */ jsx8(Box, { $fontSize: "14px", $color: "#5D5D5D", children: "Plan" }),
9945
- /* @__PURE__ */ jsxs4(
9946
- Flex,
9947
- {
9948
- $flexDirection: "column",
9949
- $fontSize: "14px",
9950
- $color: "#5D5D5D",
9951
- $gap: ".5rem",
9952
- children: [
9953
- currentPlan && /* @__PURE__ */ jsxs4(
9954
- Flex,
9955
- {
9956
- $flexDirection: "row",
9957
- $alignItems: "center",
9958
- $justifyContent: "space-between",
9959
- $fontSize: "14px",
9960
- $color: "#5D5D5D",
9961
- children: [
9962
- /* @__PURE__ */ jsx8(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: currentPlan.name }),
9963
- typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs4(Flex, { $fontSize: "12px", $color: "#000000", children: [
9964
- formatCurrency(currentPlan.planPrice),
9965
- "/",
9966
- currentPlan.planPeriod
9967
- ] })
9968
- ]
9969
- }
9970
- ),
9971
- selectedPlan && /* @__PURE__ */ jsxs4(Fragment, { children: [
9972
- /* @__PURE__ */ jsx8(
9973
- Box,
9974
- {
9975
- $width: "100%",
9976
- $textAlign: "left",
9977
- $opacity: "50%",
9978
- $marginBottom: "-.25rem",
9979
- $marginTop: "-.25rem",
9980
- children: /* @__PURE__ */ jsx8(
9981
- Icon2,
9982
- {
9983
- name: "arrow-down",
9984
- style: {
9985
- display: "inline-block"
9986
- }
9987
- }
9988
- )
9989
- }
9990
- ),
9991
- /* @__PURE__ */ jsxs4(
9992
- Flex,
9993
- {
9994
- $flexDirection: "row",
9995
- $alignItems: "center",
9996
- $justifyContent: "space-between",
9997
- $fontSize: "14px",
9998
- $color: "#5D5D5D",
9999
- children: [
10000
- /* @__PURE__ */ jsx8(Flex, { $fontSize: "14px", $color: "#000000", $fontWeight: "600", children: selectedPlan.name }),
10001
- /* @__PURE__ */ jsxs4(Flex, { $fontSize: "12px", $color: "#000000", children: [
10002
- formatCurrency(
10003
- (pricePeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10004
- ),
10005
- "/",
10006
- pricePeriod
10007
- ] })
10008
- ]
10009
- }
10010
- )
10011
- ] })
10012
- ]
10013
- }
10014
- )
10015
- ]
10016
- }
10017
- ),
10018
- /* @__PURE__ */ jsxs4(
10019
- Flex,
10020
- {
10021
- $flexDirection: "column",
10022
- $position: "relative",
10023
- $gap: ".75rem",
10024
- $width: "100%",
10025
- $height: "auto",
10026
- $padding: "1.5rem",
10027
- children: [
10028
- selectedPlan && /* @__PURE__ */ jsxs4(
10029
- Flex,
10030
- {
10031
- $fontSize: "12px",
10032
- $color: "#5D5D5D",
10033
- $justifyContent: "space-between",
10034
- children: [
10035
- /* @__PURE__ */ jsxs4(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
10036
- "Monthly total:",
10037
- " "
10038
- ] }),
10039
- /* @__PURE__ */ jsxs4(Box, { $fontSize: "12px", $color: "#000000", children: [
10040
- formatCurrency(
10041
- (pricePeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10042
- ),
10043
- "/",
10044
- pricePeriod
10045
- ] })
10046
- ]
10047
- }
10048
- ),
10049
- checkoutStage === "plan" ? /* @__PURE__ */ jsx8(
10050
- StyledButton,
10051
- {
10052
- $size: "sm",
10053
- onClick: () => {
10054
- setCheckoutStage("checkout");
10055
- },
10056
- ...!selectedPlan && { disabled: true },
10057
- children: /* @__PURE__ */ jsxs4(Flex, { $gap: "0.5rem", $alignItems: "center", $justifyContent: "center", children: [
10058
- /* @__PURE__ */ jsx8("span", { children: "Next: Checkout" }),
10059
- /* @__PURE__ */ jsx8(Icon2, { name: "arrow-right" })
10060
- ] })
10061
- }
10062
- ) : /* @__PURE__ */ jsx8(
10063
- StyledButton,
10064
- {
10065
- disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId,
10066
- onClick: async () => {
10067
- const priceId = (pricePeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
10068
- if (!api || !selectedPlan || !priceId || !paymentMethodId) {
10069
- return;
10070
- }
10071
- await api.checkout({
10072
- changeSubscriptionRequestBody: {
10073
- newPlanId: selectedPlan.id,
10074
- newPriceId: priceId,
10075
- paymentMethodId
10076
- }
10077
- });
10078
- },
10079
- $size: "md",
10080
- children: "Pay now"
10081
- }
10082
- ),
10083
- /* @__PURE__ */ jsx8(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
10084
- ]
10085
- }
10086
- )
10087
- ]
10088
- }
10089
- );
10090
- };
9863
+ import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
10091
9864
  var CheckoutDialog = () => {
10092
9865
  const [checkoutStage, setCheckoutStage] = useState5(
10093
9866
  "plan"
@@ -10095,40 +9868,52 @@ var CheckoutDialog = () => {
10095
9868
  const [planPeriod, setPlanPeriod] = useState5("month");
10096
9869
  const [selectedPlan, setSelectedPlan] = useState5();
10097
9870
  const [paymentMethodId, setPaymentMethodId] = useState5();
10098
- const { data } = useEmbed();
9871
+ const [isLoading, setIsLoading] = useState5(false);
9872
+ const [isCheckoutComplete, setIsCheckoutComplete] = useState5(false);
9873
+ const theme = nt();
9874
+ const { api, data, settings } = useEmbed();
10099
9875
  const { currentPlan, availablePlans } = useMemo2(() => {
10100
9876
  return {
10101
9877
  currentPlan: data.company?.plan,
10102
9878
  availablePlans: data.activePlans
10103
9879
  };
10104
9880
  }, [data.company, data.activePlans]);
10105
- return /* @__PURE__ */ jsxs4(OverlayWrapper, { children: [
10106
- /* @__PURE__ */ jsx8(OverlayHeader, { children: /* @__PURE__ */ jsxs4(Flex, { $gap: "1rem", children: [
10107
- /* @__PURE__ */ jsxs4(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
10108
- checkoutStage === "plan" ? /* @__PURE__ */ jsx8(
9881
+ const savingsPercentage = useMemo2(() => {
9882
+ if (selectedPlan) {
9883
+ const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
9884
+ const yearly = selectedPlan?.yearlyPrice?.price || 0;
9885
+ return Math.round((monthly - yearly) / monthly * 1e4) / 100;
9886
+ }
9887
+ return 0;
9888
+ }, [selectedPlan]);
9889
+ return /* @__PURE__ */ jsxs5(Modal, { children: [
9890
+ /* @__PURE__ */ jsx10(ModalHeader, { children: /* @__PURE__ */ jsx10(Flex, { $gap: "1rem", children: !isCheckoutComplete && /* @__PURE__ */ jsxs5(Fragment, { children: [
9891
+ /* @__PURE__ */ jsxs5(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
9892
+ checkoutStage === "plan" ? /* @__PURE__ */ jsx10(
10109
9893
  Box,
10110
9894
  {
10111
- $width: "15px",
10112
- $height: "15px",
10113
- $backgroundColor: "white",
10114
- $border: "2px solid #DDDDDD",
10115
- $borderRadius: "999px"
9895
+ $width: "0.9375rem",
9896
+ $height: "0.9375rem",
9897
+ $borderWidth: "2px",
9898
+ $borderStyle: "solid",
9899
+ $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
9900
+ $borderRadius: "9999px"
10116
9901
  }
10117
- ) : /* @__PURE__ */ jsx8(
9902
+ ) : /* @__PURE__ */ jsx10(
10118
9903
  IconRound,
10119
9904
  {
10120
9905
  name: "check",
10121
9906
  style: {
10122
- color: "#FFFFFF",
10123
- backgroundColor: "#DDDDDD",
9907
+ color: theme.card.background,
9908
+ backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
10124
9909
  fontSize: 16,
10125
9910
  width: "1rem",
10126
9911
  height: "1rem"
10127
9912
  }
10128
9913
  }
10129
9914
  ),
10130
- /* @__PURE__ */ jsx8(
10131
- "div",
9915
+ /* @__PURE__ */ jsx10(
9916
+ Box,
10132
9917
  {
10133
9918
  tabIndex: 0,
10134
9919
  ...checkoutStage === "plan" ? {
@@ -10141,30 +9926,34 @@ var CheckoutDialog = () => {
10141
9926
  },
10142
9927
  onClick: () => setCheckoutStage("plan")
10143
9928
  },
10144
- children: "1. Select plan"
9929
+ children: /* @__PURE__ */ jsx10(Text, { children: "1. Select plan" })
10145
9930
  }
10146
9931
  ),
10147
- /* @__PURE__ */ jsx8(
9932
+ /* @__PURE__ */ jsx10(
10148
9933
  Icon2,
10149
9934
  {
10150
9935
  name: "chevron-right",
10151
- style: { fontSize: 16, color: "#D0D0D0" }
9936
+ style: {
9937
+ fontSize: 16,
9938
+ color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5)
9939
+ }
10152
9940
  }
10153
9941
  )
10154
9942
  ] }),
10155
- /* @__PURE__ */ jsxs4(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
10156
- /* @__PURE__ */ jsx8(
9943
+ /* @__PURE__ */ jsxs5(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
9944
+ /* @__PURE__ */ jsx10(
10157
9945
  Box,
10158
9946
  {
10159
- $width: "15px",
10160
- $height: "15px",
10161
- $border: "2px solid #DDDDDD",
10162
- $borderRadius: "999px",
10163
- $backgroundColor: "white"
9947
+ $width: "0.9375rem",
9948
+ $height: "0.9375rem",
9949
+ $borderWidth: "2px",
9950
+ $borderStyle: "solid",
9951
+ $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
9952
+ $borderRadius: "9999px"
10164
9953
  }
10165
9954
  ),
10166
- /* @__PURE__ */ jsx8(
10167
- "div",
9955
+ /* @__PURE__ */ jsx10(
9956
+ Box,
10168
9957
  {
10169
9958
  tabIndex: 0,
10170
9959
  ...checkoutStage === "checkout" && {
@@ -10172,36 +9961,51 @@ var CheckoutDialog = () => {
10172
9961
  fontWeight: "700"
10173
9962
  }
10174
9963
  },
10175
- children: "2. Checkout"
9964
+ children: /* @__PURE__ */ jsx10(Text, { children: "2. Checkout" })
10176
9965
  }
10177
9966
  )
10178
9967
  ] })
10179
- ] }) }),
10180
- /* @__PURE__ */ jsxs4(Flex, { $flexDirection: "row", $height: "100%", children: [
10181
- /* @__PURE__ */ jsxs4(
9968
+ ] }) }) }),
9969
+ isCheckoutComplete && /* @__PURE__ */ jsx10(Flex, { $justifyContent: "center", $alignItems: "center", $flexGrow: "1", children: /* @__PURE__ */ jsx10(
9970
+ Text,
9971
+ {
9972
+ as: "h1",
9973
+ $font: theme.typography.heading1.fontFamily,
9974
+ $size: theme.typography.heading1.fontSize,
9975
+ $weight: theme.typography.heading1.fontWeight,
9976
+ $color: theme.typography.heading1.color,
9977
+ children: "Subscription updated!"
9978
+ }
9979
+ ) }),
9980
+ !isCheckoutComplete && /* @__PURE__ */ jsxs5(Flex, { $position: "relative", $flexGrow: "1", children: [
9981
+ /* @__PURE__ */ jsxs5(
10182
9982
  Flex,
10183
9983
  {
9984
+ $position: "absolute",
9985
+ $top: "0",
9986
+ $left: "0",
10184
9987
  $flexDirection: "column",
10185
9988
  $gap: "1rem",
10186
9989
  $padding: "2rem 2.5rem 2rem 2.5rem",
10187
- $backgroundColor: "#FBFBFB",
10188
- $borderRadius: "0 0.5rem 0",
9990
+ $backgroundColor: darken(settings.theme.card.background, 2.5),
10189
9991
  $flex: "1",
9992
+ $width: "72.5%",
10190
9993
  $height: "100%",
9994
+ $overflow: "auto",
10191
9995
  children: [
10192
- checkoutStage === "plan" && /* @__PURE__ */ jsxs4(Fragment, { children: [
10193
- /* @__PURE__ */ jsxs4(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
10194
- /* @__PURE__ */ jsx8(
9996
+ checkoutStage === "plan" && /* @__PURE__ */ jsxs5(Fragment, { children: [
9997
+ /* @__PURE__ */ jsxs5(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
9998
+ /* @__PURE__ */ jsx10(
10195
9999
  Text,
10196
10000
  {
10197
10001
  as: "h1",
10198
10002
  id: "select-plan-dialog-label",
10199
10003
  $size: 18,
10200
- $marginBottom: ".5rem",
10004
+ $marginBottom: "0.5rem",
10201
10005
  children: "Select plan"
10202
10006
  }
10203
10007
  ),
10204
- /* @__PURE__ */ jsx8(
10008
+ /* @__PURE__ */ jsx10(
10205
10009
  Text,
10206
10010
  {
10207
10011
  as: "p",
@@ -10212,19 +10016,23 @@ var CheckoutDialog = () => {
10212
10016
  }
10213
10017
  )
10214
10018
  ] }),
10215
- /* @__PURE__ */ jsx8(Flex, { $flexDirection: "row", $gap: "1rem", $flex: "1", $height: "100%", children: availablePlans?.map((plan) => {
10216
- return /* @__PURE__ */ jsxs4(
10019
+ /* @__PURE__ */ jsx10(Flex, { $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
10020
+ return /* @__PURE__ */ jsxs5(
10217
10021
  Flex,
10218
10022
  {
10219
10023
  $height: "100%",
10220
10024
  $flexDirection: "column",
10221
- $backgroundColor: "white",
10025
+ $backgroundColor: settings.theme.card.background,
10222
10026
  $flex: "1",
10223
- $border: `2px solid ${plan.id === selectedPlan?.id ? "#194BFB" : "transparent"}`,
10224
- $borderRadius: ".5rem",
10225
- $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)",
10027
+ $outlineWidth: "2px",
10028
+ $outlineStyle: "solid",
10029
+ $outlineColor: plan.id === selectedPlan?.id ? theme.primary : "transparent",
10030
+ $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
10031
+ ...settings.theme.card.hasShadow && {
10032
+ $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)"
10033
+ },
10226
10034
  children: [
10227
- /* @__PURE__ */ jsxs4(
10035
+ /* @__PURE__ */ jsxs5(
10228
10036
  Flex,
10229
10037
  {
10230
10038
  $flexDirection: "column",
@@ -10232,38 +10040,40 @@ var CheckoutDialog = () => {
10232
10040
  $gap: "1rem",
10233
10041
  $width: "100%",
10234
10042
  $height: "auto",
10235
- $padding: "2rem 1.5rem 1.5rem",
10236
- $borderBottom: "1px solid #DEDEDE",
10043
+ $padding: `${settings.theme.card.padding / 16}rem`,
10044
+ $borderBottomWidth: "1px",
10045
+ $borderStyle: "solid",
10046
+ $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5),
10237
10047
  children: [
10238
- /* @__PURE__ */ jsx8(Text, { $size: 20, $weight: 600, children: plan.name }),
10239
- /* @__PURE__ */ jsx8(Text, { $size: 14, children: plan.description }),
10240
- /* @__PURE__ */ jsxs4(Text, { children: [
10241
- /* @__PURE__ */ jsx8(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
10048
+ /* @__PURE__ */ jsx10(Text, { $size: 20, $weight: 600, children: plan.name }),
10049
+ /* @__PURE__ */ jsx10(Text, { $size: 14, children: plan.description }),
10050
+ /* @__PURE__ */ jsxs5(Text, { children: [
10051
+ /* @__PURE__ */ jsx10(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
10242
10052
  (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
10243
10053
  ) }),
10244
- /* @__PURE__ */ jsxs4(Box, { $display: "inline-block", $fontSize: ".75rem", children: [
10054
+ /* @__PURE__ */ jsxs5(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
10245
10055
  "/",
10246
10056
  planPeriod
10247
10057
  ] })
10248
10058
  ] }),
10249
- (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ jsx8(
10059
+ (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ jsx10(
10250
10060
  Flex,
10251
10061
  {
10252
10062
  $position: "absolute",
10253
10063
  $right: "1rem",
10254
10064
  $top: "1rem",
10255
- $fontSize: ".625rem",
10256
- $color: "white",
10257
- $backgroundColor: "#194BFB",
10258
- $borderRadius: "999px",
10259
- $padding: ".125rem .85rem",
10065
+ $fontSize: "0.625rem",
10066
+ $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
10067
+ $backgroundColor: theme.primary,
10068
+ $borderRadius: "9999px",
10069
+ $padding: "0.125rem 0.85rem",
10260
10070
  children: "Current plan"
10261
10071
  }
10262
10072
  )
10263
10073
  ]
10264
10074
  }
10265
10075
  ),
10266
- /* @__PURE__ */ jsx8(
10076
+ /* @__PURE__ */ jsx10(
10267
10077
  Flex,
10268
10078
  {
10269
10079
  $flexDirection: "column",
@@ -10274,21 +10084,32 @@ var CheckoutDialog = () => {
10274
10084
  $height: "auto",
10275
10085
  $padding: "1.5rem",
10276
10086
  children: plan.features.map((feature) => {
10277
- return /* @__PURE__ */ jsxs4(Flex, { $flexShrink: "0", $gap: "1rem", children: [
10278
- /* @__PURE__ */ jsx8(
10279
- IconRound,
10280
- {
10281
- name: feature.icon,
10282
- size: "tn",
10283
- colors: ["#000000", "#F5F5F5"]
10284
- }
10285
- ),
10286
- /* @__PURE__ */ jsx8(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx8(Text, { $size: ".75rem", $color: "#00000", children: feature.name }) })
10287
- ] }, feature.id);
10087
+ return /* @__PURE__ */ jsxs5(
10088
+ Flex,
10089
+ {
10090
+ $flexShrink: "0",
10091
+ $gap: "1rem",
10092
+ children: [
10093
+ /* @__PURE__ */ jsx10(
10094
+ IconRound,
10095
+ {
10096
+ name: feature.icon,
10097
+ size: "tn",
10098
+ colors: [
10099
+ settings.theme.primary,
10100
+ `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`
10101
+ ]
10102
+ }
10103
+ ),
10104
+ /* @__PURE__ */ jsx10(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx10(Text, { $size: 12, children: feature.name }) })
10105
+ ]
10106
+ },
10107
+ feature.id
10108
+ );
10288
10109
  })
10289
10110
  }
10290
10111
  ),
10291
- /* @__PURE__ */ jsxs4(
10112
+ /* @__PURE__ */ jsxs5(
10292
10113
  Flex,
10293
10114
  {
10294
10115
  $flexDirection: "column",
@@ -10298,7 +10119,7 @@ var CheckoutDialog = () => {
10298
10119
  $height: "auto",
10299
10120
  $padding: "1.5rem",
10300
10121
  children: [
10301
- plan.id === selectedPlan?.id && /* @__PURE__ */ jsxs4(
10122
+ plan.id === selectedPlan?.id && /* @__PURE__ */ jsxs5(
10302
10123
  Flex,
10303
10124
  {
10304
10125
  $justifyContent: "center",
@@ -10307,22 +10128,22 @@ var CheckoutDialog = () => {
10307
10128
  $fontSize: "0.9375rem",
10308
10129
  $padding: "0.625rem 0",
10309
10130
  children: [
10310
- /* @__PURE__ */ jsx8(
10131
+ /* @__PURE__ */ jsx10(
10311
10132
  Icon2,
10312
10133
  {
10313
10134
  name: "check-rounded",
10314
10135
  style: {
10315
10136
  fontSize: 20,
10316
10137
  lineHeight: "1",
10317
- color: "#194BFB"
10138
+ color: theme.primary
10318
10139
  }
10319
10140
  }
10320
10141
  ),
10321
- /* @__PURE__ */ jsx8(
10322
- "span",
10142
+ /* @__PURE__ */ jsx10(
10143
+ Text,
10323
10144
  {
10324
10145
  style: {
10325
- color: "#7B7B7B",
10146
+ color: hexToHSL(theme.card.background).l > 50 ? "#000000" : "#FFFFFF",
10326
10147
  lineHeight: "1.4"
10327
10148
  },
10328
10149
  children: "Selected"
@@ -10331,9 +10152,10 @@ var CheckoutDialog = () => {
10331
10152
  ]
10332
10153
  }
10333
10154
  ),
10334
- !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ jsx8(
10155
+ !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ jsx10(
10335
10156
  StyledButton,
10336
10157
  {
10158
+ disabled: plan.valid === false,
10337
10159
  $size: "sm",
10338
10160
  $color: "primary",
10339
10161
  $variant: "outline",
@@ -10352,7 +10174,7 @@ var CheckoutDialog = () => {
10352
10174
  );
10353
10175
  }) })
10354
10176
  ] }),
10355
- selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ jsx8(
10177
+ selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ jsx10(
10356
10178
  PaymentForm,
10357
10179
  {
10358
10180
  plan: selectedPlan,
@@ -10365,16 +10187,253 @@ var CheckoutDialog = () => {
10365
10187
  ]
10366
10188
  }
10367
10189
  ),
10368
- /* @__PURE__ */ jsx8(
10369
- OverlaySideBar,
10190
+ /* @__PURE__ */ jsxs5(
10191
+ Flex,
10370
10192
  {
10371
- pricePeriod: planPeriod,
10372
- setPricePeriod: setPlanPeriod,
10373
- checkoutStage,
10374
- setCheckoutStage,
10375
- currentPlan,
10376
- selectedPlan,
10377
- paymentMethodId
10193
+ $position: "absolute",
10194
+ $top: "0",
10195
+ $right: "0",
10196
+ $flexDirection: "column",
10197
+ $background: settings.theme.card.background,
10198
+ $borderRadius: "0 0 0.5rem",
10199
+ $width: "27.5%",
10200
+ $height: "100%",
10201
+ $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
10202
+ children: [
10203
+ /* @__PURE__ */ jsxs5(
10204
+ Flex,
10205
+ {
10206
+ $flexDirection: "column",
10207
+ $position: "relative",
10208
+ $gap: "1rem",
10209
+ $width: "100%",
10210
+ $height: "auto",
10211
+ $padding: "1.5rem",
10212
+ $borderBottom: "1px solid #DEDEDE",
10213
+ children: [
10214
+ /* @__PURE__ */ jsx10(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx10(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
10215
+ /* @__PURE__ */ jsxs5(
10216
+ Flex,
10217
+ {
10218
+ $border: "1px solid #D9D9D9",
10219
+ $borderRadius: "2.5rem",
10220
+ $cursor: "pointer",
10221
+ children: [
10222
+ /* @__PURE__ */ jsx10(
10223
+ Flex,
10224
+ {
10225
+ onClick: () => setPlanPeriod("month"),
10226
+ $justifyContent: "center",
10227
+ $alignItems: "center",
10228
+ $padding: "0.25rem 0.5rem",
10229
+ $flex: "1",
10230
+ $backgroundColor: planPeriod === "month" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
10231
+ $borderRadius: "2.5rem",
10232
+ children: /* @__PURE__ */ jsx10(Text, { $size: 12, $weight: planPeriod === "month" ? 600 : 400, children: "Billed monthly" })
10233
+ }
10234
+ ),
10235
+ /* @__PURE__ */ jsx10(
10236
+ Flex,
10237
+ {
10238
+ onClick: () => setPlanPeriod("year"),
10239
+ $justifyContent: "center",
10240
+ $alignItems: "center",
10241
+ $padding: "0.25rem 0.5rem",
10242
+ $flex: "1",
10243
+ $backgroundColor: planPeriod === "year" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
10244
+ $borderRadius: "2.5rem",
10245
+ children: /* @__PURE__ */ jsx10(Text, { $size: 12, $weight: planPeriod === "year" ? 600 : 400, children: "Billed yearly" })
10246
+ }
10247
+ )
10248
+ ]
10249
+ }
10250
+ ),
10251
+ savingsPercentage > 0 && /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(Text, { $size: 11, $color: "#194BFB", children: planPeriod === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing` }) })
10252
+ ]
10253
+ }
10254
+ ),
10255
+ /* @__PURE__ */ jsxs5(
10256
+ Flex,
10257
+ {
10258
+ $flexDirection: "column",
10259
+ $position: "relative",
10260
+ $gap: "1rem",
10261
+ $width: "100%",
10262
+ $height: "auto",
10263
+ $padding: "1.5rem",
10264
+ $flex: "1",
10265
+ $borderBottom: "1px solid #DEDEDE",
10266
+ children: [
10267
+ /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(Text, { $size: 14, $color: "#5D5D5D", children: "Plan" }) }),
10268
+ /* @__PURE__ */ jsxs5(
10269
+ Flex,
10270
+ {
10271
+ $flexDirection: "column",
10272
+ $fontSize: "0.875rem",
10273
+ $color: "#5D5D5D",
10274
+ $gap: "0.5rem",
10275
+ children: [
10276
+ currentPlan && /* @__PURE__ */ jsxs5(
10277
+ Flex,
10278
+ {
10279
+ $alignItems: "center",
10280
+ $justifyContent: "space-between",
10281
+ $fontSize: "0.875rem",
10282
+ $color: "#5D5D5D",
10283
+ children: [
10284
+ /* @__PURE__ */ jsx10(Flex, { $fontSize: "0.875rem", $color: "#5D5D5D", children: currentPlan.name }),
10285
+ typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs5(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
10286
+ formatCurrency(currentPlan.planPrice),
10287
+ "/",
10288
+ currentPlan.planPeriod
10289
+ ] })
10290
+ ]
10291
+ }
10292
+ ),
10293
+ selectedPlan && /* @__PURE__ */ jsxs5(Fragment, { children: [
10294
+ /* @__PURE__ */ jsx10(
10295
+ Box,
10296
+ {
10297
+ $width: "100%",
10298
+ $textAlign: "left",
10299
+ $opacity: "50%",
10300
+ $marginBottom: "-0.25rem",
10301
+ $marginTop: "-0.25rem",
10302
+ children: /* @__PURE__ */ jsx10(
10303
+ Icon2,
10304
+ {
10305
+ name: "arrow-down",
10306
+ style: {
10307
+ display: "inline-block"
10308
+ }
10309
+ }
10310
+ )
10311
+ }
10312
+ ),
10313
+ /* @__PURE__ */ jsxs5(
10314
+ Flex,
10315
+ {
10316
+ $alignItems: "center",
10317
+ $justifyContent: "space-between",
10318
+ $fontSize: "0.875rem",
10319
+ $color: "#5D5D5D",
10320
+ children: [
10321
+ /* @__PURE__ */ jsx10(
10322
+ Flex,
10323
+ {
10324
+ $fontSize: "0.875rem",
10325
+ $color: "#000000",
10326
+ $fontWeight: "600",
10327
+ children: selectedPlan.name
10328
+ }
10329
+ ),
10330
+ /* @__PURE__ */ jsxs5(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
10331
+ formatCurrency(
10332
+ (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10333
+ ),
10334
+ "/",
10335
+ planPeriod
10336
+ ] })
10337
+ ]
10338
+ }
10339
+ )
10340
+ ] })
10341
+ ]
10342
+ }
10343
+ )
10344
+ ]
10345
+ }
10346
+ ),
10347
+ /* @__PURE__ */ jsxs5(
10348
+ Flex,
10349
+ {
10350
+ $flexDirection: "column",
10351
+ $position: "relative",
10352
+ $gap: "0.75rem",
10353
+ $width: "100%",
10354
+ $height: "auto",
10355
+ $padding: "1.5rem",
10356
+ children: [
10357
+ selectedPlan && /* @__PURE__ */ jsxs5(
10358
+ Flex,
10359
+ {
10360
+ $fontSize: "0.75rem",
10361
+ $color: "#5D5D5D",
10362
+ $justifyContent: "space-between",
10363
+ children: [
10364
+ /* @__PURE__ */ jsxs5(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: [
10365
+ planPeriod === "month" ? "Monthly" : "Yearly",
10366
+ " total:",
10367
+ " "
10368
+ ] }),
10369
+ /* @__PURE__ */ jsxs5(Box, { $fontSize: "0.75rem", $color: "#000000", children: [
10370
+ formatCurrency(
10371
+ (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10372
+ ),
10373
+ "/",
10374
+ planPeriod
10375
+ ] })
10376
+ ]
10377
+ }
10378
+ ),
10379
+ checkoutStage === "plan" ? /* @__PURE__ */ jsx10(
10380
+ StyledButton,
10381
+ {
10382
+ disabled: !selectedPlan,
10383
+ onClick: () => {
10384
+ setCheckoutStage("checkout");
10385
+ },
10386
+ $size: "sm",
10387
+ children: /* @__PURE__ */ jsxs5(
10388
+ Flex,
10389
+ {
10390
+ $gap: "0.5rem",
10391
+ $alignItems: "center",
10392
+ $justifyContent: "center",
10393
+ $padding: "0 1rem",
10394
+ children: [
10395
+ /* @__PURE__ */ jsx10(Text, { $align: "left", children: "Next: Checkout" }),
10396
+ /* @__PURE__ */ jsx10(Icon2, { name: "arrow-right" })
10397
+ ]
10398
+ }
10399
+ )
10400
+ }
10401
+ ) : /* @__PURE__ */ jsx10(
10402
+ StyledButton,
10403
+ {
10404
+ disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId || isLoading,
10405
+ onClick: async () => {
10406
+ const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
10407
+ if (!api || !selectedPlan || !priceId || !paymentMethodId) {
10408
+ return;
10409
+ }
10410
+ try {
10411
+ setIsLoading(true);
10412
+ setIsCheckoutComplete(false);
10413
+ await api.checkout({
10414
+ changeSubscriptionRequestBody: {
10415
+ newPlanId: selectedPlan.id,
10416
+ newPriceId: priceId,
10417
+ paymentMethodId
10418
+ }
10419
+ });
10420
+ setIsCheckoutComplete(true);
10421
+ } catch (error) {
10422
+ console.error(error);
10423
+ } finally {
10424
+ setIsCheckoutComplete(true);
10425
+ setIsLoading(false);
10426
+ }
10427
+ },
10428
+ $size: "md",
10429
+ children: "Pay now"
10430
+ }
10431
+ ),
10432
+ /* @__PURE__ */ jsx10(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
10433
+ ]
10434
+ }
10435
+ )
10436
+ ]
10378
10437
  }
10379
10438
  )
10380
10439
  ] })
@@ -10382,7 +10441,7 @@ var CheckoutDialog = () => {
10382
10441
  };
10383
10442
 
10384
10443
  // src/components/elements/plan-manager/PlanManager.tsx
10385
- import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
10444
+ import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
10386
10445
  var resolveDesignProps = (props) => {
10387
10446
  return {
10388
10447
  header: {
@@ -10420,14 +10479,14 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
10420
10479
  canChangePlan: stripe !== null
10421
10480
  };
10422
10481
  }, [data.company, stripe]);
10423
- return /* @__PURE__ */ jsxs5("div", { ref, className, children: [
10424
- /* @__PURE__ */ jsx9(
10482
+ return /* @__PURE__ */ jsxs6("div", { ref, className, children: [
10483
+ /* @__PURE__ */ jsx11(
10425
10484
  Flex,
10426
10485
  {
10427
10486
  $flexDirection: "column",
10428
10487
  $gap: "0.75rem",
10429
10488
  ...canChangePlan && { $margin: "0 0 0.5rem" },
10430
- children: props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs5(
10489
+ children: props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs6(
10431
10490
  Flex,
10432
10491
  {
10433
10492
  $justifyContent: "space-between",
@@ -10435,8 +10494,8 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
10435
10494
  $width: "100%",
10436
10495
  ...canChangePlan && { $margin: "0 0 1.5rem" },
10437
10496
  children: [
10438
- /* @__PURE__ */ jsxs5("div", { children: [
10439
- /* @__PURE__ */ jsx9(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx9(
10497
+ /* @__PURE__ */ jsxs6("div", { children: [
10498
+ /* @__PURE__ */ jsx11(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx11(
10440
10499
  Text,
10441
10500
  {
10442
10501
  $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
@@ -10447,7 +10506,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
10447
10506
  children: currentPlan.name
10448
10507
  }
10449
10508
  ) }),
10450
- props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx9(
10509
+ props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx11(
10451
10510
  Text,
10452
10511
  {
10453
10512
  $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
@@ -10458,7 +10517,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
10458
10517
  }
10459
10518
  )
10460
10519
  ] }),
10461
- props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs5(
10520
+ props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs6(
10462
10521
  Text,
10463
10522
  {
10464
10523
  $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
@@ -10477,7 +10536,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
10477
10536
  )
10478
10537
  }
10479
10538
  ),
10480
- canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ jsx9(
10539
+ canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ jsx11(
10481
10540
  StyledButton,
10482
10541
  {
10483
10542
  onClick: () => {
@@ -10485,7 +10544,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
10485
10544
  },
10486
10545
  $size: props.callToAction.buttonSize,
10487
10546
  $color: props.callToAction.buttonStyle,
10488
- children: /* @__PURE__ */ jsx9(
10547
+ children: /* @__PURE__ */ jsx11(
10489
10548
  Text,
10490
10549
  {
10491
10550
  $font: settings.theme.typography.text.fontFamily,
@@ -10496,13 +10555,13 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
10496
10555
  )
10497
10556
  }
10498
10557
  ),
10499
- canChangePlan && layout === "checkout" && createPortal(/* @__PURE__ */ jsx9(CheckoutDialog, {}), portal || document.body)
10558
+ canChangePlan && layout === "checkout" && createPortal(/* @__PURE__ */ jsx11(CheckoutDialog, {}), portal || document.body)
10500
10559
  ] });
10501
10560
  });
10502
10561
 
10503
10562
  // src/components/elements/included-features/IncludedFeatures.tsx
10504
10563
  import { forwardRef as forwardRef2, useMemo as useMemo4 } from "react";
10505
- import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
10564
+ import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
10506
10565
  function resolveDesignProps2(props) {
10507
10566
  return {
10508
10567
  header: {
@@ -10555,8 +10614,8 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10555
10614
  }
10556
10615
  );
10557
10616
  }, [data.featureUsage]);
10558
- return /* @__PURE__ */ jsxs6(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
10559
- props.header.isVisible && /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(
10617
+ return /* @__PURE__ */ jsxs7(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
10618
+ props.header.isVisible && /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
10560
10619
  Text,
10561
10620
  {
10562
10621
  $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10573,7 +10632,7 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10573
10632
  }
10574
10633
  return [
10575
10634
  ...acc,
10576
- /* @__PURE__ */ jsxs6(
10635
+ /* @__PURE__ */ jsxs7(
10577
10636
  Flex,
10578
10637
  {
10579
10638
  $flexWrap: "wrap",
@@ -10581,8 +10640,8 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10581
10640
  $alignItems: "center",
10582
10641
  $gap: "1rem",
10583
10642
  children: [
10584
- /* @__PURE__ */ jsxs6(Flex, { $gap: "1rem", children: [
10585
- props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx10(
10643
+ /* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
10644
+ props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx12(
10586
10645
  IconRound,
10587
10646
  {
10588
10647
  name: feature.icon,
@@ -10593,7 +10652,7 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10593
10652
  ]
10594
10653
  }
10595
10654
  ),
10596
- feature?.name && /* @__PURE__ */ jsx10(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx10(
10655
+ feature?.name && /* @__PURE__ */ jsx12(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx12(
10597
10656
  Text,
10598
10657
  {
10599
10658
  $font: settings.theme.typography[props.icons.fontStyle].fontFamily,
@@ -10604,8 +10663,8 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10604
10663
  }
10605
10664
  ) })
10606
10665
  ] }),
10607
- allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs6(Box, { $textAlign: "right", children: [
10608
- props.entitlement.isVisible && /* @__PURE__ */ jsx10(
10666
+ allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs7(Box, { $textAlign: "right", children: [
10667
+ props.entitlement.isVisible && /* @__PURE__ */ jsx12(
10609
10668
  Text,
10610
10669
  {
10611
10670
  as: Box,
@@ -10616,7 +10675,7 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10616
10675
  children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
10617
10676
  }
10618
10677
  ),
10619
- props.usage.isVisible && /* @__PURE__ */ jsx10(
10678
+ props.usage.isVisible && /* @__PURE__ */ jsx12(
10620
10679
  Text,
10621
10680
  {
10622
10681
  as: Box,
@@ -10641,7 +10700,7 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
10641
10700
 
10642
10701
  // src/components/elements/metered-features/MeteredFeatures.tsx
10643
10702
  import { forwardRef as forwardRef3, useMemo as useMemo5 } from "react";
10644
- import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
10703
+ import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
10645
10704
  function resolveDesignProps3(props) {
10646
10705
  return {
10647
10706
  isVisible: props.isVisible ?? true,
@@ -10700,19 +10759,19 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10700
10759
  }
10701
10760
  );
10702
10761
  }, [data.featureUsage]);
10703
- return /* @__PURE__ */ jsx11(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
10762
+ return /* @__PURE__ */ jsx13(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
10704
10763
  (acc, { allocation, allocationType, feature, usage }, index) => {
10705
10764
  if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
10706
10765
  return acc;
10707
10766
  }
10708
10767
  return [
10709
10768
  ...acc,
10710
- /* @__PURE__ */ jsxs7(Flex, { $gap: "1.5rem", children: [
10711
- props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx11(Box, { $flexShrink: "0", children: /* @__PURE__ */ jsx11(IconRound, { name: feature.icon, size: "sm" }) }),
10712
- /* @__PURE__ */ jsxs7(Box, { $flexGrow: "1", children: [
10713
- /* @__PURE__ */ jsxs7(Flex, { children: [
10714
- feature?.name && /* @__PURE__ */ jsxs7(Box, { $flexGrow: "1", children: [
10715
- /* @__PURE__ */ jsx11(
10769
+ /* @__PURE__ */ jsxs8(Flex, { $gap: "1.5rem", children: [
10770
+ props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx13(Box, { $flexShrink: "0", children: /* @__PURE__ */ jsx13(IconRound, { name: feature.icon, size: "sm" }) }),
10771
+ /* @__PURE__ */ jsxs8(Box, { $flexGrow: "1", children: [
10772
+ /* @__PURE__ */ jsxs8(Flex, { children: [
10773
+ feature?.name && /* @__PURE__ */ jsxs8(Box, { $flexGrow: "1", children: [
10774
+ /* @__PURE__ */ jsx13(
10716
10775
  Text,
10717
10776
  {
10718
10777
  as: Box,
@@ -10723,7 +10782,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10723
10782
  children: feature.name
10724
10783
  }
10725
10784
  ),
10726
- props.description.isVisible && /* @__PURE__ */ jsx11(
10785
+ props.description.isVisible && /* @__PURE__ */ jsx13(
10727
10786
  Text,
10728
10787
  {
10729
10788
  as: Box,
@@ -10735,8 +10794,8 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10735
10794
  }
10736
10795
  )
10737
10796
  ] }),
10738
- allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs7(Box, { $textAlign: "right", children: [
10739
- props.allocation.isVisible && /* @__PURE__ */ jsx11(
10797
+ allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs8(Box, { $textAlign: "right", children: [
10798
+ props.allocation.isVisible && /* @__PURE__ */ jsx13(
10740
10799
  Text,
10741
10800
  {
10742
10801
  as: Box,
@@ -10747,7 +10806,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10747
10806
  children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
10748
10807
  }
10749
10808
  ),
10750
- props.usage.isVisible && /* @__PURE__ */ jsx11(
10809
+ props.usage.isVisible && /* @__PURE__ */ jsx13(
10751
10810
  Text,
10752
10811
  {
10753
10812
  as: Box,
@@ -10760,7 +10819,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10760
10819
  )
10761
10820
  ] })
10762
10821
  ] }),
10763
- typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
10822
+ typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
10764
10823
  ProgressBar,
10765
10824
  {
10766
10825
  progress: usage / allocation * 100,
@@ -10779,7 +10838,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
10779
10838
 
10780
10839
  // src/components/elements/upcoming-bill/UpcomingBill.tsx
10781
10840
  import { forwardRef as forwardRef4, useMemo as useMemo6 } from "react";
10782
- import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
10841
+ import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
10783
10842
  function resolveDesignProps4(props) {
10784
10843
  return {
10785
10844
  header: {
@@ -10819,14 +10878,14 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
10819
10878
  if (!stripe || !data.upcomingInvoice) {
10820
10879
  return null;
10821
10880
  }
10822
- return /* @__PURE__ */ jsxs8("div", { ref, className, children: [
10823
- props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsx12(
10881
+ return /* @__PURE__ */ jsxs9("div", { ref, className, children: [
10882
+ props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsx14(
10824
10883
  Flex,
10825
10884
  {
10826
10885
  $justifyContent: "space-between",
10827
10886
  $alignItems: "center",
10828
10887
  $margin: "0 0 0.75rem",
10829
- children: /* @__PURE__ */ jsxs8(
10888
+ children: /* @__PURE__ */ jsxs9(
10830
10889
  Text,
10831
10890
  {
10832
10891
  $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10842,8 +10901,8 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
10842
10901
  )
10843
10902
  }
10844
10903
  ),
10845
- upcomingInvoice.amountDue && /* @__PURE__ */ jsxs8(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
10846
- props.price.isVisible && /* @__PURE__ */ jsx12(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx12(
10904
+ upcomingInvoice.amountDue && /* @__PURE__ */ jsxs9(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
10905
+ props.price.isVisible && /* @__PURE__ */ jsx14(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx14(
10847
10906
  Text,
10848
10907
  {
10849
10908
  $font: settings.theme.typography[props.price.fontStyle].fontFamily,
@@ -10854,7 +10913,7 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
10854
10913
  children: formatCurrency(upcomingInvoice.amountDue)
10855
10914
  }
10856
10915
  ) }),
10857
- /* @__PURE__ */ jsx12(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsx12(
10916
+ /* @__PURE__ */ jsx14(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsx14(
10858
10917
  Text,
10859
10918
  {
10860
10919
  $font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
@@ -10871,7 +10930,7 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
10871
10930
  // src/components/elements/payment-method/PaymentMethod.tsx
10872
10931
  import { forwardRef as forwardRef5, useMemo as useMemo7 } from "react";
10873
10932
  import { createPortal as createPortal2 } from "react-dom";
10874
- import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
10933
+ import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
10875
10934
  var resolveDesignProps5 = (props) => {
10876
10935
  return {
10877
10936
  header: {
@@ -10905,15 +10964,15 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10905
10964
  if (!stripe || !data.subscription?.paymentMethod) {
10906
10965
  return null;
10907
10966
  }
10908
- return /* @__PURE__ */ jsxs9("div", { ref, className, children: [
10909
- props.header.isVisible && /* @__PURE__ */ jsxs9(
10967
+ return /* @__PURE__ */ jsxs10("div", { ref, className, children: [
10968
+ props.header.isVisible && /* @__PURE__ */ jsxs10(
10910
10969
  Flex,
10911
10970
  {
10912
10971
  $justifyContent: "space-between",
10913
10972
  $alignItems: "center",
10914
10973
  $margin: "0 0 1rem",
10915
10974
  children: [
10916
- /* @__PURE__ */ jsx13(
10975
+ /* @__PURE__ */ jsx15(
10917
10976
  Text,
10918
10977
  {
10919
10978
  $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -10923,7 +10982,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10923
10982
  children: "Payment Method"
10924
10983
  }
10925
10984
  ),
10926
- typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ jsx13(
10985
+ typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ jsx15(
10927
10986
  Text,
10928
10987
  {
10929
10988
  $font: settings.theme.typography.text.fontFamily,
@@ -10935,7 +10994,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10935
10994
  ]
10936
10995
  }
10937
10996
  ),
10938
- paymentMethod.cardLast4 && /* @__PURE__ */ jsx13(
10997
+ paymentMethod.cardLast4 && /* @__PURE__ */ jsx15(
10939
10998
  Flex,
10940
10999
  {
10941
11000
  $justifyContent: "space-between",
@@ -10944,16 +11003,16 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10944
11003
  $background: `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`,
10945
11004
  $padding: "0.375rem 1rem",
10946
11005
  $borderRadius: "9999px",
10947
- children: /* @__PURE__ */ jsxs9(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
11006
+ children: /* @__PURE__ */ jsxs10(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
10948
11007
  "\u{1F4B3} Card ending in ",
10949
11008
  paymentMethod.cardLast4
10950
11009
  ] })
10951
11010
  }
10952
11011
  ),
10953
11012
  layout === "payment" && createPortal2(
10954
- /* @__PURE__ */ jsxs9(OverlayWrapper, { size: "md", children: [
10955
- /* @__PURE__ */ jsx13(OverlayHeader, { children: /* @__PURE__ */ jsx13(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
10956
- /* @__PURE__ */ jsxs9(
11013
+ /* @__PURE__ */ jsxs10(Modal, { size: "md", children: [
11014
+ /* @__PURE__ */ jsx15(ModalHeader, { children: /* @__PURE__ */ jsx15(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
11015
+ /* @__PURE__ */ jsxs10(
10957
11016
  Flex,
10958
11017
  {
10959
11018
  $flexDirection: "column",
@@ -10961,7 +11020,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10961
11020
  $height: "100%",
10962
11021
  $gap: "1.5rem",
10963
11022
  children: [
10964
- /* @__PURE__ */ jsx13(
11023
+ /* @__PURE__ */ jsx15(
10965
11024
  Flex,
10966
11025
  {
10967
11026
  $flexDirection: "column",
@@ -10970,8 +11029,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10970
11029
  $borderRadius: "0 0 0.5rem 0.5rem",
10971
11030
  $flex: "1",
10972
11031
  $height: "100%",
10973
- children: /* @__PURE__ */ jsxs9(Flex, { $flexDirection: "column", $height: "100%", children: [
10974
- /* @__PURE__ */ jsx13(
11032
+ children: /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $height: "100%", children: [
11033
+ /* @__PURE__ */ jsx15(
10975
11034
  Box,
10976
11035
  {
10977
11036
  $fontSize: "18px",
@@ -10981,8 +11040,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10981
11040
  children: "Default"
10982
11041
  }
10983
11042
  ),
10984
- /* @__PURE__ */ jsxs9(Flex, { $gap: "1rem", children: [
10985
- /* @__PURE__ */ jsx13(
11043
+ /* @__PURE__ */ jsxs10(Flex, { $gap: "1rem", children: [
11044
+ /* @__PURE__ */ jsx15(
10986
11045
  Flex,
10987
11046
  {
10988
11047
  $alignItems: "center",
@@ -10990,65 +11049,48 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
10990
11049
  $border: "1px solid #E2E5E9",
10991
11050
  $borderRadius: ".5rem",
10992
11051
  $backgroundColor: "#ffffff",
10993
- $flexDirection: "row",
10994
11052
  $gap: "1rem",
10995
11053
  $width: "100%",
10996
- children: /* @__PURE__ */ jsxs9(
10997
- Flex,
10998
- {
10999
- $flexDirection: "row",
11000
- $justifyContent: "space-between",
11001
- $flex: "1",
11002
- children: [
11003
- /* @__PURE__ */ jsxs9(
11004
- Flex,
11005
- {
11006
- $flexDirection: "row",
11007
- $alignItems: "center",
11008
- $gap: "1rem",
11009
- children: [
11010
- /* @__PURE__ */ jsx13(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx13(
11011
- "svg",
11012
- {
11013
- viewBox: "0 0 24 16",
11014
- fill: "none",
11015
- xmlns: "http://www.w3.org/2000/svg",
11016
- width: "26px",
11017
- height: "auto",
11018
- children: /* @__PURE__ */ jsxs9("g", { children: [
11019
- /* @__PURE__ */ jsx13(
11020
- "rect",
11021
- {
11022
- stroke: "#DDD",
11023
- fill: "#FFF",
11024
- x: ".25",
11025
- y: ".25",
11026
- width: "23",
11027
- height: "15.5",
11028
- rx: "2"
11029
- }
11030
- ),
11031
- /* @__PURE__ */ jsx13(
11032
- "path",
11033
- {
11034
- d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
11035
- fill: "#1434CB"
11036
- }
11037
- )
11038
- ] })
11039
- }
11040
- ) }),
11041
- /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
11042
- ]
11043
- }
11044
- ),
11045
- /* @__PURE__ */ jsx13(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx13(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
11046
- ]
11047
- }
11048
- )
11054
+ children: /* @__PURE__ */ jsxs10(Flex, { $justifyContent: "space-between", $flex: "1", children: [
11055
+ /* @__PURE__ */ jsxs10(Flex, { $alignItems: "center", $gap: "1rem", children: [
11056
+ /* @__PURE__ */ jsx15(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx15(
11057
+ "svg",
11058
+ {
11059
+ viewBox: "0 0 24 16",
11060
+ fill: "none",
11061
+ xmlns: "http://www.w3.org/2000/svg",
11062
+ width: "26px",
11063
+ height: "auto",
11064
+ children: /* @__PURE__ */ jsxs10("g", { children: [
11065
+ /* @__PURE__ */ jsx15(
11066
+ "rect",
11067
+ {
11068
+ stroke: "#DDD",
11069
+ fill: "#FFF",
11070
+ x: ".25",
11071
+ y: ".25",
11072
+ width: "23",
11073
+ height: "15.5",
11074
+ rx: "2"
11075
+ }
11076
+ ),
11077
+ /* @__PURE__ */ jsx15(
11078
+ "path",
11079
+ {
11080
+ d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
11081
+ fill: "#1434CB"
11082
+ }
11083
+ )
11084
+ ] })
11085
+ }
11086
+ ) }),
11087
+ /* @__PURE__ */ jsx15(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
11088
+ ] }),
11089
+ /* @__PURE__ */ jsx15(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx15(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
11090
+ ] })
11049
11091
  }
11050
11092
  ),
11051
- /* @__PURE__ */ jsx13(Flex, { children: /* @__PURE__ */ jsx13(
11093
+ /* @__PURE__ */ jsx15(Flex, { children: /* @__PURE__ */ jsx15(
11052
11094
  StyledButton,
11053
11095
  {
11054
11096
  $size: "sm",
@@ -11066,7 +11108,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
11066
11108
  ] })
11067
11109
  }
11068
11110
  ),
11069
- /* @__PURE__ */ jsx13(
11111
+ /* @__PURE__ */ jsx15(
11070
11112
  Flex,
11071
11113
  {
11072
11114
  $flexDirection: "column",
@@ -11075,8 +11117,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
11075
11117
  $borderRadius: "0 0 0.5rem 0.5rem",
11076
11118
  $flex: "1",
11077
11119
  $height: "100%",
11078
- children: /* @__PURE__ */ jsxs9(Flex, { $flexDirection: "column", $height: "100%", children: [
11079
- /* @__PURE__ */ jsx13(
11120
+ children: /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $height: "100%", children: [
11121
+ /* @__PURE__ */ jsx15(
11080
11122
  Box,
11081
11123
  {
11082
11124
  $fontSize: "18px",
@@ -11086,8 +11128,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
11086
11128
  children: "Others"
11087
11129
  }
11088
11130
  ),
11089
- /* @__PURE__ */ jsxs9(Flex, { $gap: "1rem", children: [
11090
- /* @__PURE__ */ jsx13(
11131
+ /* @__PURE__ */ jsxs10(Flex, { $gap: "1rem", children: [
11132
+ /* @__PURE__ */ jsx15(
11091
11133
  Flex,
11092
11134
  {
11093
11135
  $alignItems: "center",
@@ -11095,66 +11137,49 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
11095
11137
  $border: "1px solid #E2E5E9",
11096
11138
  $borderRadius: ".5rem",
11097
11139
  $backgroundColor: "#ffffff",
11098
- $flexDirection: "row",
11099
11140
  $gap: "1rem",
11100
11141
  $width: "100%",
11101
- children: /* @__PURE__ */ jsxs9(
11102
- Flex,
11103
- {
11104
- $flexDirection: "row",
11105
- $justifyContent: "space-between",
11106
- $flex: "1",
11107
- children: [
11108
- /* @__PURE__ */ jsxs9(
11109
- Flex,
11110
- {
11111
- $flexDirection: "row",
11112
- $alignItems: "center",
11113
- $gap: "1rem",
11114
- children: [
11115
- /* @__PURE__ */ jsx13(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx13(
11116
- "svg",
11117
- {
11118
- viewBox: "0 0 24 16",
11119
- fill: "none",
11120
- xmlns: "http://www.w3.org/2000/svg",
11121
- width: "26px",
11122
- height: "auto",
11123
- children: /* @__PURE__ */ jsxs9("g", { children: [
11124
- /* @__PURE__ */ jsx13(
11125
- "rect",
11126
- {
11127
- stroke: "#DDD",
11128
- fill: "#FFF",
11129
- x: ".25",
11130
- y: ".25",
11131
- width: "23",
11132
- height: "15.5",
11133
- rx: "2"
11134
- }
11135
- ),
11136
- /* @__PURE__ */ jsx13(
11137
- "path",
11138
- {
11139
- d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
11140
- fill: "#1434CB"
11141
- }
11142
- )
11143
- ] })
11144
- }
11145
- ) }),
11146
- /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
11147
- ]
11148
- }
11149
- ),
11150
- /* @__PURE__ */ jsx13(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx13(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
11151
- ]
11152
- }
11153
- )
11142
+ children: /* @__PURE__ */ jsxs10(Flex, { $justifyContent: "space-between", $flex: "1", children: [
11143
+ /* @__PURE__ */ jsxs10(Flex, { $alignItems: "center", $gap: "1rem", children: [
11144
+ /* @__PURE__ */ jsx15(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx15(
11145
+ "svg",
11146
+ {
11147
+ viewBox: "0 0 24 16",
11148
+ fill: "none",
11149
+ xmlns: "http://www.w3.org/2000/svg",
11150
+ width: "26px",
11151
+ height: "auto",
11152
+ children: /* @__PURE__ */ jsxs10("g", { children: [
11153
+ /* @__PURE__ */ jsx15(
11154
+ "rect",
11155
+ {
11156
+ stroke: "#DDD",
11157
+ fill: "#FFF",
11158
+ x: ".25",
11159
+ y: ".25",
11160
+ width: "23",
11161
+ height: "15.5",
11162
+ rx: "2"
11163
+ }
11164
+ ),
11165
+ /* @__PURE__ */ jsx15(
11166
+ "path",
11167
+ {
11168
+ d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
11169
+ fill: "#1434CB"
11170
+ }
11171
+ )
11172
+ ] })
11173
+ }
11174
+ ) }),
11175
+ /* @__PURE__ */ jsx15(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
11176
+ ] }),
11177
+ /* @__PURE__ */ jsx15(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx15(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
11178
+ ] })
11154
11179
  }
11155
11180
  ),
11156
- /* @__PURE__ */ jsxs9(Flex, { $gap: "1rem", children: [
11157
- /* @__PURE__ */ jsx13(
11181
+ /* @__PURE__ */ jsxs10(Flex, { $gap: "1rem", children: [
11182
+ /* @__PURE__ */ jsx15(
11158
11183
  StyledButton,
11159
11184
  {
11160
11185
  $size: "sm",
@@ -11168,7 +11193,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
11168
11193
  children: "Make Default"
11169
11194
  }
11170
11195
  ),
11171
- /* @__PURE__ */ jsx13(
11196
+ /* @__PURE__ */ jsx15(
11172
11197
  StyledButton,
11173
11198
  {
11174
11199
  $size: "sm",
@@ -11198,7 +11223,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
11198
11223
 
11199
11224
  // src/components/elements/invoices/Invoices.tsx
11200
11225
  import { forwardRef as forwardRef6, useMemo as useMemo8 } from "react";
11201
- import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
11226
+ import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
11202
11227
  function resolveDesignProps6(props) {
11203
11228
  return {
11204
11229
  header: {
@@ -11240,8 +11265,8 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
11240
11265
  ]
11241
11266
  };
11242
11267
  }, []);
11243
- return /* @__PURE__ */ jsx14("div", { ref, className, children: /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $gap: "1rem", children: [
11244
- props.header.isVisible && /* @__PURE__ */ jsx14(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx14(
11268
+ return /* @__PURE__ */ jsx16("div", { ref, className, children: /* @__PURE__ */ jsxs11(Flex, { $flexDirection: "column", $gap: "1rem", children: [
11269
+ props.header.isVisible && /* @__PURE__ */ jsx16(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx16(
11245
11270
  Text,
11246
11271
  {
11247
11272
  $font: settings.theme.typography[props.header.fontStyle].fontFamily,
@@ -11251,12 +11276,12 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
11251
11276
  children: "Invoices"
11252
11277
  }
11253
11278
  ) }),
11254
- /* @__PURE__ */ jsx14(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
11279
+ /* @__PURE__ */ jsx16(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
11255
11280
  0,
11256
11281
  props.limit.isVisible && props.limit.number || invoices.length
11257
11282
  ).map(({ date, amount }, index) => {
11258
- return /* @__PURE__ */ jsxs10(Flex, { $justifyContent: "space-between", children: [
11259
- props.date.isVisible && /* @__PURE__ */ jsx14(
11283
+ return /* @__PURE__ */ jsxs11(Flex, { $justifyContent: "space-between", children: [
11284
+ props.date.isVisible && /* @__PURE__ */ jsx16(
11260
11285
  Text,
11261
11286
  {
11262
11287
  $font: settings.theme.typography[props.date.fontStyle].fontFamily,
@@ -11266,7 +11291,7 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
11266
11291
  children: toPrettyDate(date)
11267
11292
  }
11268
11293
  ),
11269
- props.amount.isVisible && /* @__PURE__ */ jsxs10(
11294
+ props.amount.isVisible && /* @__PURE__ */ jsxs11(
11270
11295
  Text,
11271
11296
  {
11272
11297
  $font: settings.theme.typography[props.amount.fontStyle].fontFamily,
@@ -11281,9 +11306,9 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
11281
11306
  )
11282
11307
  ] }, index);
11283
11308
  }) }),
11284
- props.collapse.isVisible && /* @__PURE__ */ jsxs10(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
11285
- /* @__PURE__ */ jsx14(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
11286
- /* @__PURE__ */ jsx14(
11309
+ props.collapse.isVisible && /* @__PURE__ */ jsxs11(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
11310
+ /* @__PURE__ */ jsx16(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
11311
+ /* @__PURE__ */ jsx16(
11287
11312
  Text,
11288
11313
  {
11289
11314
  $font: settings.theme.typography[props.collapse.fontStyle].fontFamily,
@@ -11305,10 +11330,10 @@ import { createElement } from "react";
11305
11330
 
11306
11331
  // src/components/layout/root/Root.tsx
11307
11332
  import { forwardRef as forwardRef7 } from "react";
11308
- import { jsx as jsx15 } from "react/jsx-runtime";
11333
+ import { jsx as jsx17 } from "react/jsx-runtime";
11309
11334
  var Root = forwardRef7(
11310
11335
  (props, ref) => {
11311
- return /* @__PURE__ */ jsx15("div", { ref, ...props });
11336
+ return /* @__PURE__ */ jsx17("div", { ref, ...props });
11312
11337
  }
11313
11338
  );
11314
11339
 
@@ -11324,17 +11349,53 @@ var StyledViewport = dt.div`
11324
11349
  `;
11325
11350
 
11326
11351
  // src/components/layout/viewport/Viewport.tsx
11327
- import { jsx as jsx16 } from "react/jsx-runtime";
11352
+ import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
11328
11353
  var Viewport = forwardRef8(
11329
11354
  ({ children, ...props }, ref) => {
11330
11355
  const { settings, layout } = useEmbed();
11331
- return /* @__PURE__ */ jsx16(
11356
+ return /* @__PURE__ */ jsx18(
11332
11357
  StyledViewport,
11333
11358
  {
11334
11359
  ref,
11335
11360
  $numberOfColumns: settings.theme.numberOfColumns,
11336
11361
  ...props,
11337
- children: layout === "disabled" ? /* @__PURE__ */ jsx16("div", { className: "", children: "DISABLED" }) : children
11362
+ children: layout === "disabled" ? /* @__PURE__ */ jsx18(Box, { $width: "100%", children: /* @__PURE__ */ jsxs12(
11363
+ Flex,
11364
+ {
11365
+ $flexDirection: "column",
11366
+ $padding: `${settings.theme.card.padding / 16}rem`,
11367
+ $width: "100%",
11368
+ $height: "auto",
11369
+ $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
11370
+ $backgroundColor: settings.theme.card.background,
11371
+ $alignItems: "center",
11372
+ $justifyContent: "center",
11373
+ children: [
11374
+ /* @__PURE__ */ jsx18(
11375
+ Box,
11376
+ {
11377
+ $marginBottom: "8px",
11378
+ $fontSize: `${settings.theme.typography.heading1.fontSize / 16}rem`,
11379
+ $fontFamily: settings.theme.typography.heading1.fontFamily,
11380
+ $fontWeight: settings.theme.typography.heading1.fontWeight,
11381
+ $color: settings.theme.typography.heading1.color,
11382
+ children: "Coming soon"
11383
+ }
11384
+ ),
11385
+ /* @__PURE__ */ jsx18(
11386
+ Box,
11387
+ {
11388
+ $marginBottom: "8px",
11389
+ $fontSize: `${settings.theme.typography.text.fontSize / 16}rem`,
11390
+ $fontFamily: settings.theme.typography.text.fontFamily,
11391
+ $fontWeight: settings.theme.typography.text.fontWeight,
11392
+ $color: settings.theme.typography.text.color,
11393
+ children: "The plan manager will be back very soon."
11394
+ }
11395
+ )
11396
+ ]
11397
+ }
11398
+ ) }) : children
11338
11399
  }
11339
11400
  );
11340
11401
  }
@@ -11373,7 +11434,7 @@ var StyledCard = dt.div(
11373
11434
 
11374
11435
  ${() => {
11375
11436
  const { l: l2 } = hexToHSL(theme.card.background);
11376
- const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
11437
+ const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 20);
11377
11438
  const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
11378
11439
  const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
11379
11440
  if ($sectionLayout === "merged") {
@@ -11405,11 +11466,11 @@ var StyledCard = dt.div(
11405
11466
  );
11406
11467
 
11407
11468
  // src/components/layout/card/Card.tsx
11408
- import { jsx as jsx17 } from "react/jsx-runtime";
11469
+ import { jsx as jsx19 } from "react/jsx-runtime";
11409
11470
  var Card = forwardRef9(
11410
11471
  ({ children, className }, ref) => {
11411
11472
  const { settings } = useEmbed();
11412
- return /* @__PURE__ */ jsx17(
11473
+ return /* @__PURE__ */ jsx19(
11413
11474
  StyledCard,
11414
11475
  {
11415
11476
  ref,
@@ -11431,10 +11492,10 @@ var StyledColumn = dt.div`
11431
11492
  `;
11432
11493
 
11433
11494
  // src/components/layout/column/Column.tsx
11434
- import { jsx as jsx18 } from "react/jsx-runtime";
11495
+ import { jsx as jsx20 } from "react/jsx-runtime";
11435
11496
  var Column = forwardRef10(
11436
11497
  ({ children, ...props }, ref) => {
11437
- return /* @__PURE__ */ jsx18(StyledColumn, { ref, ...props, children: /* @__PURE__ */ jsx18(Card, { children }) });
11498
+ return /* @__PURE__ */ jsx20(StyledColumn, { ref, ...props, children: /* @__PURE__ */ jsx20(Card, { children }) });
11438
11499
  }
11439
11500
  );
11440
11501
 
@@ -11480,31 +11541,101 @@ function createRenderer(options) {
11480
11541
  };
11481
11542
  }
11482
11543
 
11544
+ // src/components/ui/loader/styles.ts
11545
+ var spin = mt`
11546
+ 0% {
11547
+ transform: rotate(0deg);
11548
+ }
11549
+ 100% {
11550
+ transform: rotate(360deg);
11551
+ }
11552
+ `;
11553
+ var Loader = dt.div(() => {
11554
+ const { settings } = useEmbed();
11555
+ return lt`
11556
+ border: 4px solid rgba(0, 0, 0, 0.1);
11557
+ border-top: 4px solid ${settings.theme.primary};
11558
+ border-radius: 50%;
11559
+ width: 40px;
11560
+ height: 40px;
11561
+ animation: ${spin} 1.5s linear infinite;
11562
+ display: inline-block;
11563
+ `;
11564
+ });
11565
+
11483
11566
  // src/components/embed/ComponentTree.tsx
11484
- import { Fragment as Fragment2, jsx as jsx19 } from "react/jsx-runtime";
11567
+ import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
11485
11568
  var ComponentTree = () => {
11486
- const [children, setChildren] = useState6("Loading");
11487
- const { error, nodes } = useEmbed();
11569
+ const { error, nodes, settings } = useEmbed();
11570
+ const [children, setChildren] = useState6(
11571
+ /* @__PURE__ */ jsx21(
11572
+ Flex,
11573
+ {
11574
+ $width: "100%",
11575
+ $height: "100%",
11576
+ $alignItems: "center",
11577
+ $justifyContent: "center",
11578
+ $padding: `${settings.theme.card.padding / 16}rem`,
11579
+ children: /* @__PURE__ */ jsx21(Loader, {})
11580
+ }
11581
+ )
11582
+ );
11488
11583
  useEffect5(() => {
11489
11584
  const renderer = createRenderer();
11490
11585
  setChildren(nodes.map(renderer));
11491
11586
  }, [nodes]);
11492
11587
  if (error) {
11493
- return /* @__PURE__ */ jsx19("div", { children: error.message });
11588
+ return /* @__PURE__ */ jsxs13(
11589
+ Flex,
11590
+ {
11591
+ $flexDirection: "column",
11592
+ $padding: `${settings.theme.card.padding / 16}rem`,
11593
+ $width: "100%",
11594
+ $height: "auto",
11595
+ $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
11596
+ $backgroundColor: settings.theme.card.background,
11597
+ $alignItems: "center",
11598
+ $justifyContent: "center",
11599
+ children: [
11600
+ /* @__PURE__ */ jsx21(
11601
+ Box,
11602
+ {
11603
+ $marginBottom: "8px",
11604
+ $fontSize: `${settings.theme.typography.heading1.fontSize / 16}rem`,
11605
+ $fontFamily: settings.theme.typography.heading1.fontFamily,
11606
+ $fontWeight: settings.theme.typography.heading1.fontWeight,
11607
+ $color: settings.theme.typography.heading1.color,
11608
+ children: "404 Error"
11609
+ }
11610
+ ),
11611
+ /* @__PURE__ */ jsx21(
11612
+ Box,
11613
+ {
11614
+ $marginBottom: "8px",
11615
+ $fontSize: `${settings.theme.typography.text.fontSize / 16}rem`,
11616
+ $fontFamily: settings.theme.typography.text.fontFamily,
11617
+ $fontWeight: settings.theme.typography.text.fontWeight,
11618
+ $color: settings.theme.typography.text.color,
11619
+ children: error.message
11620
+ }
11621
+ )
11622
+ ]
11623
+ }
11624
+ );
11494
11625
  }
11495
- return /* @__PURE__ */ jsx19(Fragment2, { children });
11626
+ return /* @__PURE__ */ jsx21(Fragment2, { children });
11496
11627
  };
11497
11628
 
11498
11629
  // src/components/embed/Embed.tsx
11499
- import { jsx as jsx20 } from "react/jsx-runtime";
11630
+ import { jsx as jsx22 } from "react/jsx-runtime";
11500
11631
  var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
11501
11632
  if (accessToken?.length === 0) {
11502
- return /* @__PURE__ */ jsx20("div", { children: "Please provide an access token." });
11633
+ return /* @__PURE__ */ jsx22("div", { children: "Please provide an access token." });
11503
11634
  }
11504
11635
  if (!accessToken?.startsWith("token_")) {
11505
- return /* @__PURE__ */ jsx20("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
11636
+ return /* @__PURE__ */ jsx22("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
11506
11637
  }
11507
- return /* @__PURE__ */ jsx20(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ jsx20(ComponentTree, {}) });
11638
+ return /* @__PURE__ */ jsx22(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ jsx22(ComponentTree, {}) });
11508
11639
  };
11509
11640
  export {
11510
11641
  Box,
@@ -11519,9 +11650,8 @@ export {
11519
11650
  IncludedFeatures,
11520
11651
  Invoices,
11521
11652
  MeteredFeatures,
11522
- OverlayHeader,
11523
- OverlaySideBar,
11524
- OverlayWrapper,
11653
+ Modal,
11654
+ ModalHeader,
11525
11655
  PaymentMethod,
11526
11656
  PlanManager,
11527
11657
  ProgressBar,