@schematichq/schematic-components 1.4.2 → 1.4.3

package/dist/schematic-components.esm.js

@@ -1852,7 +1852,7 @@ var HOURS_IN_MS = MINUTES_IN_MS * 60;
 var DAYS_IN_MS = HOURS_IN_MS * 24;
 
 // src/const/debounce.ts
-var debounceOptions = {
+var DEBOUNCE_SETTINGS = {
   leading: true,
   trailing: false
 };
@@ -4207,6 +4207,7 @@ var initialContext = {
   hydrateComponent: stub,
   hydrateExternal: stub,
   getUpcomingInvoice: stub,
+  getCustomerBalance: stub,
   listInvoices: stub,
   createSetupIntent: stub,
   updatePaymentMethod: stub,
@@ -4219,7 +4220,8 @@ var initialContext = {
   setLayout: stub,
   setCheckoutState: stub,
   setData: stub,
-  updateSettings: stub
+  updateSettings: stub,
+  debug: stub
 };
 var EmbedContext = createContext(initialContext);
 
@@ -6713,8 +6715,10 @@ var en_default = {
     "Choose add-on": "Choose add-on",
     "Choose plan": "Choose plan",
     "Choose your base plan": "Choose your base plan",
-    "Credits to be applied to future invoices": "Credits to be applied to future invoices",
+    "Credit bundles": "Credit bundles",
     Credits: "Credits",
+    "Credits in plan": "Credits in plan",
+    "Credits to be applied to future invoices": "Credits to be applied to future invoices",
     "Current plan": "Current plan",
     "Current usage exceeds the limit of this plan.": "Current usage exceeds the limit of this plan.",
     "Currently using": "Currently using {{quantity}} {{unit}}",
@@ -6765,8 +6769,10 @@ var en_default = {
     "Please provide an access token.": "Please provide an access token.",
     "Powered by": "Powered by",
     "Price by unit based on final tier reached.": "Price by unit based on final tier reached.",
+    "Promotional credits": "Promotional credits",
     Proration: "Proration",
     "Quantity to pay for in advance": "Quantity to pay for in advance",
+    "Remaining balance": "Remaining balance",
     "Remove add-on": "Remove add-on",
     Resets: "Resets {{date}}",
     "Save payment method": "Save payment method",
@@ -10462,7 +10468,7 @@ var EmbedProvider = ({
   });
   const customHeaders = useMemo3(
     () => ({
-      "X-Schematic-Components-Version": "1.4.2",
+      "X-Schematic-Components-Version": "1.4.3",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10495,7 +10501,7 @@ var EmbedProvider = ({
     }
   }, [api.public]);
   const debouncedHydratePublic = useMemo3(
-    () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydratePublic]
   );
   const hydrate = useCallback3(async () => {
@@ -10517,7 +10523,7 @@ var EmbedProvider = ({
     }
   }, [api.checkout]);
   const debouncedHydrate = useMemo3(
-    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydrate]
   );
   const hydrateComponent = useCallback3(
@@ -10544,7 +10550,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedHydrateComponent = useMemo3(
-    () => (0, import_debounce.default)(hydrateComponent, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydrateComponent, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydrateComponent]
   );
   const hydrateExternal = useCallback3(async function(fn) {
@@ -10564,14 +10570,14 @@ var EmbedProvider = ({
     }
   }, []);
   const debouncedHydrateExternal = useMemo3(
-    () => (0, import_debounce.default)(hydrateExternal, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydrateExternal, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydrateExternal]
   );
   const createSetupIntent = useCallback3(async () => {
     return api.checkout?.createSetupIntent();
   }, [api.checkout]);
   const debouncedCreateSetupIntent = useMemo3(
-    () => (0, import_debounce.default)(createSetupIntent, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(createSetupIntent, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [createSetupIntent]
   );
   const updatePaymentMethod = useCallback3(
@@ -10590,7 +10596,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedUpdatePaymentMethod = useMemo3(
-    () => (0, import_debounce.default)(updatePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(updatePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [updatePaymentMethod]
   );
   const deletePaymentMethod = useCallback3(
@@ -10609,7 +10615,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedDeletePaymentMethod = useMemo3(
-    () => (0, import_debounce.default)(deletePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(deletePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [deletePaymentMethod]
   );
   const checkout = useCallback3(
@@ -10628,7 +10634,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedCheckout = useMemo3(
-    () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [checkout]
   );
   const previewCheckout = useCallback3(
@@ -10638,7 +10644,12 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedPreviewCheckout = useMemo3(
-    () => (0, import_debounce.default)(previewCheckout, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(previewCheckout, FETCH_DEBOUNCE_TIMEOUT, {
+      // invoke immediately for minimal latency
+      leading: true,
+      // but also ensure latest data is fetched
+      trailing: true
+    }),
     [previewCheckout]
   );
   const unsubscribe = useCallback3(async () => {
@@ -10652,7 +10663,7 @@ var EmbedProvider = ({
     return response;
   }, [api.checkout]);
   const debouncedUnsubscribe = useMemo3(
-    () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [unsubscribe]
   );
   const getUpcomingInvoice = useCallback3(
@@ -10664,19 +10675,30 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedGetUpcomingInvoice = useMemo3(
-    () => (0, import_debounce.default)(getUpcomingInvoice, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(getUpcomingInvoice, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [getUpcomingInvoice]
   );
+  const getCustomerBalance = useCallback3(async () => {
+    return api.checkout?.fetchCustomerBalance();
+  }, [api.checkout]);
+  const debouncedGetCustomerBalance = useMemo3(
+    () => (0, import_debounce.default)(getCustomerBalance, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    [getCustomerBalance]
+  );
   const listInvoices = useCallback3(async () => {
     return api.checkout?.listInvoices();
   }, [api.checkout]);
   const debouncedListInvoices = useMemo3(
-    () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [listInvoices]
   );
-  const setError = useCallback3((error) => {
-    dispatch({ type: "ERROR", error });
-  }, []);
+  const setError = useCallback3(
+    (error) => {
+      debug(error.message);
+      dispatch({ type: "ERROR", error });
+    },
+    [debug]
+  );
   const setAccessToken = useCallback3((token2) => {
     dispatch({ type: "SET_ACCESS_TOKEN", token: token2 });
   }, []);
@@ -10701,13 +10723,13 @@ var EmbedProvider = ({
     );
     if (element) {
       styleRef.current = element;
-      return;
+    } else {
+      const style = document.createElement("link");
+      style.id = "schematic-fonts";
+      style.rel = "stylesheet";
+      document.head.appendChild(style);
+      styleRef.current = style;
     }
-    const style = document.createElement("link");
-    style.id = "schematic-fonts";
-    style.rel = "stylesheet";
-    document.head.appendChild(style);
-    styleRef.current = style;
     const darkModeQuery = matchMedia("(prefers-color-scheme: dark)");
     const colorMode = darkModeQuery.matches ? "dark" : "light";
     dispatch({
@@ -10718,13 +10740,17 @@ var EmbedProvider = ({
         }
       }
     });
-    darkModeQuery.addEventListener("change", (event) => {
+    function darkModeQueryHandler(event) {
       const newColorMode = event.matches ? "dark" : "light";
       dispatch({
         type: "UPDATE_SETTINGS",
         settings: { theme: { colorMode: newColorMode } }
       });
-    });
+    }
+    darkModeQuery.addEventListener("change", darkModeQueryHandler);
+    return () => {
+      darkModeQuery.removeEventListener("change", darkModeQueryHandler);
+    };
   }, []);
   useEffect2(() => {
     const fontSet = /* @__PURE__ */ new Set([]);
@@ -10770,24 +10796,19 @@ var EmbedProvider = ({
       }));
     }
   }, [state.accessToken, apiConfig, customHeaders]);
-  useEffect2(() => {
-    if (state.error) {
-      debug(state.error.message);
-    }
-  }, [debug, state.error]);
   useEffect2(() => {
     const providedSettings = { ...options.settings || {} };
     updateSettings(providedSettings, { update: false });
   }, [options.settings, updateSettings]);
   useEffect2(() => {
-    const planChanged = (event) => {
+    function planChangedHandler(event) {
       if (event instanceof CustomEvent) {
         debug("plan changed", event.detail);
       }
-    };
-    window.addEventListener("plan-changed", planChanged);
+    }
+    window.addEventListener("plan-changed", planChangedHandler);
     return () => {
-      window.removeEventListener("plan-changed", planChanged);
+      window.removeEventListener("plan-changed", planChangedHandler);
     };
   }, [debug]);
   return /* @__PURE__ */ jsx(
@@ -10812,13 +10833,15 @@ var EmbedProvider = ({
         previewCheckout: debouncedPreviewCheckout,
         unsubscribe: debouncedUnsubscribe,
         getUpcomingInvoice: debouncedGetUpcomingInvoice,
+        getCustomerBalance: debouncedGetCustomerBalance,
         listInvoices: debouncedListInvoices,
         setError,
         setAccessToken,
         setLayout,
         setCheckoutState,
         setData,
-        updateSettings
+        updateSettings,
+        debug
       },
       children: /* @__PURE__ */ jsxs(ot, { theme: state.settings.theme, children: [
         /* @__PURE__ */ jsx(IconStyles, {}),
@@ -14663,11 +14686,12 @@ var CheckoutDialog = ({ top = 0 }) => {
       const entitlements = plan.entitlements.reduce(
         (acc, entitlement) => {
           if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
+            const allocation = entitlement.valueNumeric || 0;
             acc.push({
               ...entitlement,
-              allocation: entitlement.valueNumeric || 0,
+              allocation,
               usage: 0,
-              quantity: 0
+              quantity: allocation
             });
           }
           return acc;
@@ -17757,11 +17781,29 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         featureUsage: featureUsage2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       } = data;
+      const creditGroups2 = groupCreditGrants(creditGrants, {
+        groupBy: "bundle"
+      }).reduce(
+        (acc, grant) => {
+          switch (grant.grantReason) {
+            case "plan" /* Plan */:
+              acc.plan.push(grant);
+              break;
+            case "purchased" /* Purchased */:
+              acc.bundles.push(grant);
+              break;
+            case "free" /* Free */:
+              acc.promotional.push(grant);
+          }
+          return acc;
+        },
+        { plan: [], bundles: [], promotional: [] }
+      );
       return {
         currentPlan: company?.plan,
         currentAddOns: company?.addOns || [],
         creditBundles: creditBundles2,
-        creditGroups: groupCreditGrants(creditGrants, { groupBy: "bundle" }),
+        creditGroups: creditGroups2,
         billingSubscription: company?.billingSubscription,
         canCheckout: capabilities?.checkout ?? true,
         defaultPlan: defaultPlan2,
@@ -17773,7 +17815,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
       currentPlan: void 0,
       currentAddOns: [],
       creditBundles: [],
-      creditGroups: [],
+      creditGroups: { plan: [], bundles: [], promotional: [] },
       billingSubscription: void 0,
       canCheckout: false,
       defaultPlan: void 0,
@@ -17930,77 +17972,151 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               );
             }) })
           ] }),
-          props.addOns.isVisible && creditGroups.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+          props.addOns.isVisible && creditGroups.plan.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
             props.addOns.showLabel && /* @__PURE__ */ jsx42(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
                 $leading: 1,
-                children: t2("Credits")
+                children: t2("Credits in plan")
               }
             ),
-            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.reduce(
-              (acc, group, groupIndex) => {
-                const bundle = group.grantReason === "purchased" /* Purchased */ && group?.bundleId ? creditBundles.find((b2) => b2.id === group.bundleId) : void 0;
-                acc.push(
-                  /* @__PURE__ */ jsxs34(
-                    Flex,
-                    {
-                      $justifyContent: "space-between",
-                      $alignItems: "center",
-                      $flexWrap: "wrap",
-                      $gap: "0.5rem",
-                      children: [
-                        group.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
-                          group.quantity,
-                          " ",
-                          getFeatureName(group, group.quantity),
+            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
+              return /* @__PURE__ */ jsxs34(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $flexWrap: "wrap",
+                  $gap: "0.5rem",
+                  children: [
+                    /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity),
+                      " ",
+                      subscriptionInterval && /* @__PURE__ */ jsxs34(Fragment20, { children: [
+                        t2("per"),
+                        " ",
+                        t2(subscriptionInterval)
+                      ] })
+                    ] }),
+                    group.total.used > 0 && /* @__PURE__ */ jsxs34(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          group.total.used,
                           " ",
-                          subscriptionInterval && /* @__PURE__ */ jsxs34(Fragment20, { children: [
-                            t2("per"),
-                            " ",
-                            t2(subscriptionInterval)
-                          ] })
-                        ] }) : bundle ? /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
-                          group.grants.length > 1 && /* @__PURE__ */ jsxs34(Text, { style: { opacity: 0.5 }, children: [
-                            "(",
-                            group.grants.length,
-                            ")",
-                            " "
-                          ] }),
-                          bundle.name,
-                          " (",
-                          group.quantity,
+                          t2("used")
+                        ]
+                      }
+                    )
+                  ]
+                },
+                groupIndex
+              );
+            }) })
+          ] }),
+          props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx42(
+              Text,
+              {
+                $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
+                $leading: 1,
+                children: t2("Credit bundles")
+              }
+            ),
+            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
+              const bundle = group?.bundleId ? creditBundles.find((b2) => b2.id === group.bundleId) : void 0;
+              return /* @__PURE__ */ jsxs34(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $flexWrap: "wrap",
+                  $gap: "0.5rem",
+                  children: [
+                    bundle ? /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
+                      group.grants.length > 1 && /* @__PURE__ */ jsxs34(Text, { style: { opacity: 0.5 }, children: [
+                        "(",
+                        group.grants.length,
+                        ")",
+                        " "
+                      ] }),
+                      bundle.name,
+                      " (",
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity),
+                      ")"
+                    ] }) : /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity)
+                    ] }),
+                    group.total.used > 0 && /* @__PURE__ */ jsxs34(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          group.total.used,
                           " ",
-                          getFeatureName(group, group.quantity),
-                          ")"
-                        ] }) : /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
-                          group.quantity,
+                          t2("used")
+                        ]
+                      }
+                    )
+                  ]
+                },
+                groupIndex
+              );
+            }) })
+          ] }),
+          props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ jsxs34(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ jsx42(
+              Text,
+              {
+                $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
+                $leading: 1,
+                children: t2("Promotional credits")
+              }
+            ),
+            /* @__PURE__ */ jsx42(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
+              return /* @__PURE__ */ jsxs34(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $flexWrap: "wrap",
+                  $gap: "0.5rem",
+                  children: [
+                    /* @__PURE__ */ jsxs34(Text, { display: props.addOns.fontStyle, children: [
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity)
+                    ] }),
+                    group.total.used > 0 && /* @__PURE__ */ jsxs34(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          group.total.used,
                           " ",
-                          getFeatureName(group, group.quantity)
-                        ] }),
-                        group.total.used > 0 && /* @__PURE__ */ jsxs34(
-                          Text,
-                          {
-                            style: { opacity: 0.54 },
-                            $size: 0.875 * settings.theme.typography.text.fontSize,
-                            $color: settings.theme.typography.text.color,
-                            children: [
-                              group.total.used,
-                              " ",
-                              t2("used")
-                            ]
-                          }
-                        )
-                      ]
-                    },
-                    groupIndex
-                  )
-                );
-                return acc;
-              },
-              []
-            ) })
+                          t2("used")
+                        ]
+                      }
+                    )
+                  ]
+                },
+                groupIndex
+              );
+            }) })
           ] }),
           canCheckout && props.callToAction.isVisible && /* @__PURE__ */ jsx42(
             Button,
@@ -19019,11 +19135,12 @@ function resolveDesignProps11(props) {
 var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
   const props = resolveDesignProps11(rest);
   const { t: t2 } = useTranslation();
-  const { data, settings, getUpcomingInvoice } = useEmbed();
+  const { data, settings, debug, getUpcomingInvoice, getCustomerBalance } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const [isLoading, setIsLoading] = useState18(false);
   const [error, setError] = useState18();
   const [upcomingInvoice, setUpcomingInvoice] = useState18();
+  const [balances, setBalances] = useState18([]);
   const discounts = useMemo28(() => {
     return (isCheckoutData(data) && data.subscription?.discounts || []).map(
       (discount) => ({
@@ -19052,9 +19169,22 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
       }
     }
   }, [data, getUpcomingInvoice]);
+  const getBalances = useCallback13(async () => {
+    try {
+      const response = await getCustomerBalance();
+      if (response) {
+        setBalances(response.data.balances);
+      }
+    } catch (err2) {
+      debug("Failed to fetch customer balance.", err2);
+    }
+  }, [debug, getCustomerBalance]);
   useEffect9(() => {
     getInvoice();
   }, [getInvoice]);
+  useEffect9(() => {
+    getBalances();
+  }, [getBalances]);
   if (!isCheckoutData(data) || !data.subscription || data.subscription.cancelAt) {
     return null;
   }
@@ -19104,6 +19234,19 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
           ]
         }
       ),
+      balances.length > 0 && /* @__PURE__ */ jsxs39(
+        Flex,
+        {
+          as: TransitionBox,
+          $justifyContent: "space-between",
+          $alignItems: "start",
+          $gap: "1rem",
+          children: [
+            /* @__PURE__ */ jsx49(Text, { $weight: 600, children: t2("Remaining balance") }),
+            /* @__PURE__ */ jsx49(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ jsx49(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
+          ]
+        }
+      ),
       discounts.length > 0 && /* @__PURE__ */ jsxs39(
         Flex,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -33,35 +33,35 @@
   },
   "dependencies": {
     "@schematichq/schematic-icons": "^0.5.2",
-    "@stripe/stripe-js": "^7.8.0",
-    "i18next": "^25.4.0",
+    "@stripe/stripe-js": "^7.9.0",
+    "i18next": "^25.4.2",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",
-    "react-i18next": "^15.7.1",
+    "react-i18next": "^15.7.3",
     "styled-components": "^6.1.19",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.33.0",
-    "@eslint/json": "^0.13.0",
+    "@eslint/js": "^9.34.0",
+    "@eslint/json": "^0.13.2",
     "@eslint/markdown": "^7.2.0",
     "@microsoft/api-extractor": "^7.52.11",
-    "@openapitools/openapi-generator-cli": "^2.23.0",
-    "@stripe/react-stripe-js": "^3.9.1",
+    "@openapitools/openapi-generator-cli": "^2.23.1",
+    "@stripe/react-stripe-js": "^3.9.2",
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.20",
     "@types/pako": "^2.0.4",
-    "@types/react": "^19.1.11",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "esbuild": "^0.25.9",
-    "eslint": "^9.33.0",
+    "eslint": "^9.34.0",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.3.0",
-    "jest": "^30.0.4",
-    "jest-environment-jsdom": "^30.0.4",
+    "jest": "^30.1.1",
+    "jest-environment-jsdom": "^30.1.1",
     "jest-esbuild": "^0.4.0",
     "jest-fetch-mock": "^3.0.3",
     "prettier": "^3.6.2",
@@ -69,7 +69,7 @@
     "react-dom": "^19.1.1",
     "ts-jest": "^29.4.1",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.40.0"
+    "typescript-eslint": "^8.41.0"
   },
   "peerDependencies": {
     "@stripe/react-stripe-js": ">=3",