@schematichq/schematic-components 0.4.10 → 0.5.0

package/dist/schematic-components.cjs.js

@@ -10590,6 +10590,7 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
     ),
     productId: json["product_id"],
     quantity: json["quantity"],
+    subscriptionCount: json["subscription_count"],
     updatedAt: new Date(json["updated_at"])
   };
 }
@@ -10662,6 +10663,7 @@ function BillingSubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator)
     createdAt: new Date(json["created_at"]),
     currency: json["currency"],
     customerExternalId: json["customer_external_id"],
+    defaultPaymentMethodId: json["default_payment_method_id"] == null ? void 0 : json["default_payment_method_id"],
     expiredAt: json["expired_at"] == null ? void 0 : new Date(json["expired_at"]),
     id: json["id"],
     interval: json["interval"],
@@ -10730,7 +10732,6 @@ function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     externalId: json["external_id"],
     id: json["id"],
     paymentMethodType: json["payment_method_type"],
-    subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
     updatedAt: new Date(json["updated_at"])
   };
 }
@@ -10750,6 +10751,7 @@ function BillingSubscriptionViewFromJSONTyped(json, ignoreDiscriminator) {
     createdAt: new Date(json["created_at"]),
     currency: json["currency"],
     customerExternalId: json["customer_external_id"],
+    defaultPaymentMethodId: json["default_payment_method_id"] == null ? void 0 : json["default_payment_method_id"],
     discounts: json["discounts"].map(
       BillingSubscriptionDiscountViewFromJSON
     ),
@@ -11019,6 +11021,9 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       CompanyEventPeriodMetricsResponseDataFromJSON
     ),
     name: json["name"],
+    paymentMethods: json["payment_methods"].map(
+      PaymentMethodResponseDataFromJSON
+    ),
     plan: json["plan"] == null ? void 0 : CompanyPlanWithBillingSubViewFromJSON(json["plan"]),
     plans: json["plans"].map(GenericPreviewObjectFromJSON),
     traits: json["traits"] == null ? void 0 : json["traits"],
@@ -11181,6 +11186,8 @@ function FeatureResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     lifecyclePhase: json["lifecycle_phase"] == null ? void 0 : json["lifecycle_phase"],
     maintainerId: json["maintainer_id"] == null ? void 0 : json["maintainer_id"],
     name: json["name"],
+    pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
+    singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     traitId: json["trait_id"] == null ? void 0 : json["trait_id"],
     updatedAt: new Date(json["updated_at"])
   };
@@ -11232,6 +11239,8 @@ function FeatureDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     maintainerId: json["maintainer_id"] == null ? void 0 : json["maintainer_id"],
     name: json["name"],
     plans: json["plans"].map(PreviewObjectFromJSON),
+    pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
+    singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     trait: json["trait"] == null ? void 0 : EntityTraitDefinitionResponseDataFromJSON(json["trait"]),
     traitId: json["trait_id"] == null ? void 0 : json["trait_id"],
     updatedAt: new Date(json["updated_at"])
@@ -11281,6 +11290,7 @@ function PlanEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     priceBehavior: json["price_behavior"] == null ? void 0 : json["price_behavior"],
     ruleId: json["rule_id"],
     ruleIdUsageExceeded: json["rule_id_usage_exceeded"] == null ? void 0 : json["rule_id_usage_exceeded"],
+    softLimit: json["soft_limit"] == null ? void 0 : json["soft_limit"],
     updatedAt: new Date(json["updated_at"]),
     valueBool: json["value_bool"] == null ? void 0 : json["value_bool"],
     valueNumeric: json["value_numeric"] == null ? void 0 : json["value_numeric"],
@@ -11384,6 +11394,7 @@ function ComponentCapabilitiesFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    badgeVisibility: json["badge_visibility"],
     checkout: json["checkout"]
   };
 }
@@ -11482,6 +11493,7 @@ function FeatureUsageResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     period: json["period"] == null ? void 0 : json["period"],
     plan: json["plan"] == null ? void 0 : PlanResponseDataFromJSON(json["plan"]),
     priceBehavior: json["price_behavior"] == null ? void 0 : json["price_behavior"],
+    softLimit: json["soft_limit"] == null ? void 0 : json["soft_limit"],
     usage: json["usage"] == null ? void 0 : json["usage"],
     yearlyUsageBasedPrice: json["yearly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["yearly_usage_based_price"])
   };
@@ -11544,6 +11556,20 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/models/DeletePaymentMethodResponse.ts
+function DeletePaymentMethodResponseFromJSON(json) {
+  return DeletePaymentMethodResponseFromJSONTyped(json, false);
+}
+function DeletePaymentMethodResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: DeleteResponseFromJSON(json["data"]),
+    params: json["params"]
+  };
+}
+
 // src/api/models/SetupIntentResponseData.ts
 function SetupIntentResponseDataFromJSON(json) {
   return SetupIntentResponseDataFromJSONTyped(json, false);
@@ -11748,6 +11774,50 @@ var CheckoutexternalApi = class extends BaseAPI {
     const response = await this.checkoutUnsubscribeRaw(initOverrides);
     return await response.value();
   }
+  /**
+   * Delete payment method
+   */
+  async deletePaymentMethodRaw(requestParameters, initOverrides) {
+    if (requestParameters["checkoutId"] == null) {
+      throw new RequiredError(
+        "checkoutId",
+        'Required parameter "checkoutId" was null or undefined when calling deletePaymentMethod().'
+      );
+    }
+    const queryParameters = {};
+    const headerParameters = {};
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/checkout/paymentmethod/{checkout_id}`.replace(
+          `{${"checkout_id"}}`,
+          encodeURIComponent(String(requestParameters["checkoutId"]))
+        ),
+        method: "DELETE",
+        headers: headerParameters,
+        query: queryParameters
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => DeletePaymentMethodResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Delete payment method
+   */
+  async deletePaymentMethod(requestParameters, initOverrides) {
+    const response = await this.deletePaymentMethodRaw(
+      requestParameters,
+      initOverrides
+    );
+    return await response.value();
+  }
   /**
    * Get setup intent
    */
@@ -12025,6 +12095,8 @@ var en_default = {
     "Not ready to cancel?": "Not ready to cancel?",
     "Optionally add features to your subscription": "Optionally add features to your subscription",
     "Other existing payment method": "Other existing payment method",
+    Overage: "Overage",
+    "Overage fee": "Overage fee",
     "Over usage limit": "Over usage limit",
     "Pay now": "Pay now",
     "Payment Method": "Payment Method",
@@ -12062,12 +12134,14 @@ var en_default = {
     "Use existing payment method": "Use existing payment method",
     "X% off": "{{percent}}% off",
     "X off": "{{amount}} off",
+    "X over the limit": "{{amount}} over the limit",
     Yearly: "Yearly",
     "You will retain access to your plan until the end of the billing period, on": "You will retain access to your plan until the end of the billing period, on",
     day: "day",
     month: "month",
     per: "per",
     year: "year",
+    "overage fee": "overage fee",
     used: "used",
     usage: {
       limited: "{{amount}} of {{allocation}} used",
@@ -12824,7 +12898,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.4.10";
+      headers["X-Schematic-Components-Version"] = "0.5.0";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13834,6 +13908,9 @@ var Modal = (0, import_react17.forwardRef)(
       setLayout("portal");
       onClose?.();
     }, [setLayout, onClose]);
+    (0, import_react17.useLayoutEffect)(() => {
+      contentRef?.current?.focus({ preventScroll: true });
+    }, [contentRef]);
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Container2,
       {
@@ -13867,6 +13944,9 @@ var Modal = (0, import_react17.forwardRef)(
           Flex,
           {
             ref: contentRef,
+            tabIndex: 0,
+            role: "dialog",
+            "aria-modal": "true",
             $position: "relative",
             $top: "50%",
             $left: "50%",
@@ -13877,8 +13957,6 @@ var Modal = (0, import_react17.forwardRef)(
             $height: "100vh",
             $backgroundColor: theme.card.background,
             $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
-            role: "dialog",
-            "aria-modal": "true",
             $viewport: {
               md: {
                 ...size === "auto" ? { $width: "fit-content", $height: "fit-content" } : {
@@ -13979,6 +14057,7 @@ var ProgressBar = ({
   value,
   total = 0,
   color = "gray",
+  bgColor = "#F2F4F7",
   barWidth = "100%",
   ...props
 }) => {
@@ -14010,7 +14089,7 @@ var ProgressBar = ({
                 $overflow: "hidden",
                 $width: "100%",
                 $height: `${8 / TEXT_BASE_SIZE}rem`,
-                $backgroundColor: "#F2F4F7",
+                $backgroundColor: bgColor,
                 $borderRadius: "9999px",
                 children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   Box,
@@ -14277,114 +14356,12 @@ var import_react_dom2 = require("react-dom");
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
 var import_react24 = require("react");
 
-// src/components/shared/checkout-dialog/Navigation.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Navigation = ({
-  name,
-  index,
-  activeIndex,
-  isLast,
-  onClick
-}) => {
-  const theme = nt();
-  const isLightBackground = useIsLightBackground();
-  const showFullContent = index === activeIndex || index === activeIndex + 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      Flex,
-      {
-        $gap: "0.5rem",
-        $alignItems: "center",
-        ...!showFullContent && { $flexGrow: 1, $minWidth: 0 },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            Box,
-            {
-              $display: "none",
-              $viewport: {
-                md: {
-                  $display: "block"
-                }
-              },
-              children: index >= activeIndex ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                Box,
-                {
-                  $width: `${20 / TEXT_BASE_SIZE}rem`,
-                  $height: `${20 / TEXT_BASE_SIZE}rem`,
-                  $borderWidth: "2px",
-                  $borderStyle: "solid",
-                  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
-                  $borderRadius: "9999px"
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                IconRound,
-                {
-                  name: "check",
-                  colors: [
-                    theme.card.background,
-                    isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
-                  ],
-                  style: {
-                    fontSize: `${16 / TEXT_BASE_SIZE}rem`,
-                    width: `${20 / TEXT_BASE_SIZE}rem`,
-                    height: `${20 / TEXT_BASE_SIZE}rem`
-                  }
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-            Box,
-            {
-              tabIndex: 0,
-              $fontSize: `${16 / TEXT_BASE_SIZE}rem`,
-              $fontFamily: theme.typography.text.fontFamily,
-              $fontWeight: index === activeIndex ? 600 : 400,
-              $color: theme.typography.text.color,
-              ...!showFullContent && {
-                $overflow: "hidden",
-                $whiteSpace: "nowrap",
-                $textOverflow: "ellipsis"
-              },
-              ...index !== activeIndex && { $opacity: "0.6375" },
-              ...index < activeIndex && {
-                onClick,
-                $cursor: "pointer"
-              },
-              $viewport: {
-                md: {
-                  $fontSize: `${19 / TEXT_BASE_SIZE}rem`
-                }
-              },
-              children: [
-                index + 1,
-                ". ",
-                name
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    !isLast && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Icon2,
-      {
-        name: "chevron-right",
-        style: {
-          fontSize: 16,
-          color: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.35)"
-        }
-      }
-    )
-  ] });
-};
-
 // src/components/shared/sidebar/Sidebar.tsx
 var import_react21 = require("react");
 var import_pluralize = __toESM(require_pluralize());
 
 // src/components/shared/sidebar/StageButton.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var StageButton = ({
   canTrial,
   canCheckout,
@@ -14401,7 +14378,7 @@ var StageButton = ({
 }) => {
   const { t: t2 } = useTranslation();
   const NoPaymentRequired = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       EmbedButton,
       {
         type: "button",
@@ -14415,7 +14392,7 @@ var StageButton = ({
   if (checkoutStage === "plan") {
     if (canTrial) {
       if (trialPaymentMethodRequired) {
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           EmbedButton,
           {
             type: "button",
@@ -14424,7 +14401,7 @@ var StageButton = ({
               setCheckoutStage?.("checkout");
             },
             isLoading,
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               Flex,
               {
                 $gap: "0.5rem",
@@ -14435,14 +14412,14 @@ var StageButton = ({
                   t2("Next"),
                   ": ",
                   t2("Checkout"),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: "arrow-right" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
                 ]
               }
             )
           }
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         EmbedButton,
         {
           type: "button",
@@ -14451,7 +14428,7 @@ var StageButton = ({
             checkout();
           },
           isLoading,
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             Flex,
             {
               $gap: "0.5rem",
@@ -14460,7 +14437,7 @@ var StageButton = ({
               $padding: "0 1rem",
               children: [
                 t2("Subscribe and close"),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: "arrow-right" })
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
               ]
             }
           )
@@ -14470,9 +14447,9 @@ var StageButton = ({
     if (!requiresPayment && !checkoutStages?.some(
       (stage) => stage.id === "addons" || stage.id === "usage"
     )) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NoPaymentRequired, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       EmbedButton,
       {
         type: "button",
@@ -14483,7 +14460,7 @@ var StageButton = ({
           );
         },
         isLoading,
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           Flex,
           {
             $gap: "0.5rem",
@@ -14495,7 +14472,7 @@ var StageButton = ({
               ":",
               " ",
               hasPayInAdvanceEntitlements ? t2("Usage") : hasAddOns ? t2("Addons") : t2("Checkout"),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: "arrow-right" })
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
             ]
           }
         )
@@ -14504,9 +14481,9 @@ var StageButton = ({
   }
   if (checkoutStage === "usage") {
     if (!requiresPayment) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NoPaymentRequired, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       EmbedButton,
       {
         type: "button",
@@ -14515,7 +14492,7 @@ var StageButton = ({
           setCheckoutStage?.(hasAddOns ? "addons" : "checkout");
         },
         isLoading,
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           Flex,
           {
             $gap: "0.5rem",
@@ -14526,7 +14503,7 @@ var StageButton = ({
               t2("Next"),
               ": ",
               hasAddOns ? t2("Addons") : t2("Checkout"),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: "arrow-right" })
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
             ]
           }
         )
@@ -14535,9 +14512,9 @@ var StageButton = ({
   }
   if (checkoutStage === "addons") {
     if (!requiresPayment) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NoPaymentRequired, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       EmbedButton,
       {
         type: "button",
@@ -14546,7 +14523,7 @@ var StageButton = ({
           setCheckoutStage?.("checkout");
         },
         isLoading,
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           Flex,
           {
             $gap: "0.5rem",
@@ -14557,7 +14534,7 @@ var StageButton = ({
               t2("Next"),
               ": ",
               t2("Checkout"),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: "arrow-right" })
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
             ]
           }
         )
@@ -14566,9 +14543,9 @@ var StageButton = ({
   }
   if (checkoutStage === "checkout") {
     if (!requiresPayment) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NoPaymentRequired, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NoPaymentRequired, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       EmbedButton,
       {
         type: "button",
@@ -14582,7 +14559,7 @@ var StageButton = ({
 };
 
 // src/components/shared/sidebar/Sidebar.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Sidebar = ({
   planPeriod,
   selectedPlan,
@@ -14815,7 +14792,7 @@ var Sidebar = ({
   if (isTrialable && selectedPlan.trialDays) {
     trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     Flex,
     {
       ref: checkoutRef,
@@ -14832,7 +14809,7 @@ var Sidebar = ({
         }
       },
       children: [
-        showHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        showHeader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Flex,
           {
             $position: "relative",
@@ -14844,7 +14821,7 @@ var Sidebar = ({
             $borderBottomWidth: "1px",
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               Text,
               {
                 as: "h3",
@@ -14857,7 +14834,7 @@ var Sidebar = ({
             ) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           Flex,
           {
             $position: "relative",
@@ -14871,7 +14848,7 @@ var Sidebar = ({
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -14881,8 +14858,8 @@ var Sidebar = ({
                   children: t2("Plan")
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                data.company?.plan && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                data.company?.plan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
@@ -14894,7 +14871,7 @@ var Sidebar = ({
                       $color: theme.typography.heading4.color
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         Text,
                         {
                           $font: theme.typography.heading4.fontFamily,
@@ -14904,7 +14881,7 @@ var Sidebar = ({
                           children: data.company.plan.name
                         }
                       ) }),
-                      typeof data.company.plan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                      typeof data.company.plan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -14916,7 +14893,7 @@ var Sidebar = ({
                               data.company.plan.planPrice,
                               data.company.billingSubscription?.currency
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
                               "/",
                               shortenPeriod(
                                 data.company.plan.planPeriod || planPeriod
@@ -14928,8 +14905,8 @@ var Sidebar = ({
                     ]
                   }
                 ),
-                willPlanChange && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                willPlanChange && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     Box,
                     {
                       $width: "100%",
@@ -14937,7 +14914,7 @@ var Sidebar = ({
                       $opacity: "50%",
                       $marginBottom: "0.25rem",
                       $marginTop: "-0.25rem",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         Icon2,
                         {
                           name: "arrow-down",
@@ -14949,14 +14926,14 @@ var Sidebar = ({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                     Flex,
                     {
                       $justifyContent: "space-between",
                       $alignItems: "center",
                       $gap: "1rem",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                           Text,
                           {
                             $font: theme.typography.heading4.fontFamily,
@@ -14966,7 +14943,7 @@ var Sidebar = ({
                             children: selectedPlan.name
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                           Text,
                           {
                             $font: theme.typography.text.fontFamily,
@@ -14978,7 +14955,7 @@ var Sidebar = ({
                                 (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0,
                                 (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.currency
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
                                 "/",
                                 shortenPeriod(planPeriod)
                               ] })
@@ -14990,8 +14967,8 @@ var Sidebar = ({
                   )
                 ] })
               ] }),
-              willUsageBasedEntitlementsChange && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              willUsageBasedEntitlementsChange && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -15006,7 +14983,7 @@ var Sidebar = ({
                     if (typeof allocation === "number" && usage.feature?.name) {
                       const price = (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.price;
                       acc.push(
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                           Flex,
                           {
                             $justifyContent: "space-between",
@@ -15016,21 +14993,21 @@ var Sidebar = ({
                             $textDecoration: "line-through",
                             $color: theme.typography.heading4.color,
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                 Text,
                                 {
                                   $font: theme.typography.heading4.fontFamily,
                                   $size: theme.typography.heading4.fontSize,
                                   $weight: theme.typography.heading4.fontWeight,
                                   $color: theme.typography.heading4.color,
-                                  children: usage.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                                  children: usage.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
                                     quantity,
                                     " ",
                                     (0, import_pluralize.default)(usage.feature.name, quantity)
                                   ] }) : usage.feature.name
                                 }
                               ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                                 Text,
                                 {
                                   $font: theme.typography.text.fontFamily,
@@ -15038,22 +15015,22 @@ var Sidebar = ({
                                   $weight: theme.typography.text.fontWeight,
                                   $color: theme.typography.text.color,
                                   children: [
-                                    usage.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                                    usage.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
                                       formatCurrency(
                                         price * quantity,
                                         (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.currency
                                       ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
                                         "/",
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
-                                    usage.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                                    usage.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
                                       formatCurrency(
                                         price,
                                         (planPeriod === "month" ? usage.monthlyUsageBasedPrice : usage.yearlyUsageBasedPrice)?.currency
                                       ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
                                         "/",
                                         (0, import_pluralize.default)(
                                           usage.feature.name.toLowerCase(),
@@ -15078,8 +15055,8 @@ var Sidebar = ({
                   (acc, { entitlement, previous, next: next2 }) => {
                     if (entitlement?.feature?.name) {
                       acc.push(
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                             Flex,
                             {
                               $justifyContent: "space-between",
@@ -15089,7 +15066,7 @@ var Sidebar = ({
                               $textDecoration: "line-through",
                               $color: theme.typography.heading4.color,
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                                   Text,
                                   {
                                     $font: theme.typography.heading4.fontFamily,
@@ -15103,7 +15080,7 @@ var Sidebar = ({
                                     ]
                                   }
                                 ) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                                   Text,
                                   {
                                     $font: theme.typography.text.fontFamily,
@@ -15115,7 +15092,7 @@ var Sidebar = ({
                                         ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * previous.quantity,
                                         (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
                                       ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
                                         "/",
                                         shortenPeriod(planPeriod)
                                       ] })
@@ -15125,14 +15102,14 @@ var Sidebar = ({
                               ]
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                             Flex,
                             {
                               $justifyContent: "space-between",
                               $alignItems: "center",
                               $gap: "1rem",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                                   Text,
                                   {
                                     $font: theme.typography.heading4.fontFamily,
@@ -15146,7 +15123,7 @@ var Sidebar = ({
                                     ]
                                   }
                                 ) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                                   Text,
                                   {
                                     $font: theme.typography.text.fontFamily,
@@ -15158,7 +15135,7 @@ var Sidebar = ({
                                         ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * next2.quantity,
                                         (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
                                       ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
                                         "/",
                                         shortenPeriod(planPeriod)
                                       ] })
@@ -15180,28 +15157,28 @@ var Sidebar = ({
                     if (entitlement.feature?.name) {
                       const price = (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price;
                       acc.push(
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                           Flex,
                           {
                             $justifyContent: "space-between",
                             $alignItems: "center",
                             $gap: "1rem",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                 Text,
                                 {
                                   $font: theme.typography.heading4.fontFamily,
                                   $size: theme.typography.heading4.fontSize,
                                   $weight: theme.typography.heading4.fontWeight,
                                   $color: theme.typography.heading4.color,
-                                  children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                                  children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
                                     quantity,
                                     " ",
                                     (0, import_pluralize.default)(entitlement.feature.name, quantity)
                                   ] }) : entitlement.feature.name
                                 }
                               ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                                 Text,
                                 {
                                   $font: theme.typography.text.fontFamily,
@@ -15209,22 +15186,22 @@ var Sidebar = ({
                                   $weight: theme.typography.text.fontWeight,
                                   $color: theme.typography.text.color,
                                   children: [
-                                    entitlement.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                                    entitlement.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
                                       formatCurrency(
                                         price * quantity,
                                         (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
                                       ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
                                         "/",
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
-                                    entitlement.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                                    entitlement.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
                                       formatCurrency(
                                         price,
                                         (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
                                       ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
                                         "/",
                                         (0, import_pluralize.default)(
                                           entitlement.feature.name.toLowerCase(),
@@ -15246,8 +15223,8 @@ var Sidebar = ({
                   []
                 )
               ] }),
-              selectedPlan && isTrialable && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              selectedPlan && isTrialable && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -15257,14 +15234,14 @@ var Sidebar = ({
                     children: t2("Trial")
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         Text,
                         {
                           $font: theme.typography.heading4.fontFamily,
@@ -15274,7 +15251,7 @@ var Sidebar = ({
                           children: t2("Ends on", { date: trialEndsOn.toLocaleDateString() })
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -15288,7 +15265,7 @@ var Sidebar = ({
                               (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.currency
                             ),
                             "/",
-                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("sub", { children: shortenPeriod(planPeriod) })
+                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("sub", { children: shortenPeriod(planPeriod) })
                           ]
                         }
                       ) })
@@ -15296,8 +15273,8 @@ var Sidebar = ({
                   }
                 )
               ] }),
-              (willAddOnsChange || selectedAddOns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              (willAddOnsChange || selectedAddOns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -15307,7 +15284,7 @@ var Sidebar = ({
                     children: t2("Add-ons")
                   }
                 ) }),
-                removedAddOns.map((addOn) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                removedAddOns.map((addOn) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
@@ -15317,7 +15294,7 @@ var Sidebar = ({
                     $textDecoration: "line-through",
                     $color: theme.typography.heading4.color,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         Text,
                         {
                           $font: theme.typography.heading4.fontFamily,
@@ -15327,7 +15304,7 @@ var Sidebar = ({
                           children: addOn.name
                         }
                       ) }),
-                      typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                      typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -15339,7 +15316,7 @@ var Sidebar = ({
                               addOn.planPrice,
                               (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
                               "/",
                               shortenPeriod(addOn.planPeriod)
                             ] })
@@ -15350,14 +15327,14 @@ var Sidebar = ({
                   },
                   addOn.id
                 )),
-                selectedAddOns.map((addOn) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                selectedAddOns.map((addOn) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         Text,
                         {
                           $font: theme.typography.heading4.fontFamily,
@@ -15367,7 +15344,7 @@ var Sidebar = ({
                           children: addOn.name
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -15378,7 +15355,7 @@ var Sidebar = ({
                             formatCurrency(
                               (planPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
                               "/",
                               shortenPeriod(planPeriod)
                             ] })
@@ -15390,8 +15367,8 @@ var Sidebar = ({
                   addOn.id
                 ))
               ] }),
-              proration !== 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              proration !== 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -15401,14 +15378,14 @@ var Sidebar = ({
                     children: proration > 0 ? t2("Proration") : !selectedPlan?.companyCanTrial && t2("Credits")
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
                     $alignItems: "center",
                     $gap: "1rem",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         Text,
                         {
                           $font: theme.typography.heading4.fontFamily,
@@ -15418,7 +15395,7 @@ var Sidebar = ({
                           children: t2("Unused time")
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -15438,7 +15415,7 @@ var Sidebar = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           Flex,
           {
             $flexDirection: "column",
@@ -15447,14 +15424,14 @@ var Sidebar = ({
             $width: "100%",
             $padding: "1.5rem",
             children: [
-              promoCode && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              promoCode && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -15464,7 +15441,7 @@ var Sidebar = ({
                         children: t2("Discount")
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                       Flex,
                       {
                         $alignItems: "center",
@@ -15474,7 +15451,7 @@ var Sidebar = ({
                         $outlineColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
                         $borderRadius: "0.3125rem",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                             Text,
                             {
                               $font: theme.typography.text.fontFamily,
@@ -15484,14 +15461,14 @@ var Sidebar = ({
                               children: promoCode
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                             Box,
                             {
                               $cursor: "pointer",
                               onClick: () => {
                                 updatePromoCode?.(void 0);
                               },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                 Icon2,
                                 {
                                   name: "close",
@@ -15508,14 +15485,14 @@ var Sidebar = ({
                   ]
                 }
               ),
-              percentOff > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              percentOff > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -15525,7 +15502,7 @@ var Sidebar = ({
                         children: t2("X% off", { percent: percentOff })
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -15541,14 +15518,14 @@ var Sidebar = ({
                   ]
                 }
               ),
-              amountOff > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              amountOff > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -15563,7 +15540,7 @@ var Sidebar = ({
                         })
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -15582,14 +15559,14 @@ var Sidebar = ({
                   ]
                 }
               ),
-              subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -15602,7 +15579,7 @@ var Sidebar = ({
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -15611,7 +15588,7 @@ var Sidebar = ({
                         $color: theme.typography.text.color,
                         children: [
                           subscriptionPrice,
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("sub", { children: [
                             "/",
                             shortenPeriod(planPeriod)
                           ] })
@@ -15621,14 +15598,14 @@ var Sidebar = ({
                   ]
                 }
               ),
-              charges && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              charges && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
                   $alignItems: "center",
                   $gap: "1rem",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -15641,7 +15618,7 @@ var Sidebar = ({
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       Text,
                       {
                         $font: theme.typography.text.fontFamily,
@@ -15657,8 +15634,8 @@ var Sidebar = ({
                   ]
                 }
               ),
-              dueNow < 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              dueNow < 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $gap: "1rem", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", $lineHeight: 1.15, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -15671,7 +15648,7 @@ var Sidebar = ({
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text,
                   {
                     $font: theme.typography.text.fontFamily,
@@ -15685,7 +15662,7 @@ var Sidebar = ({
                   }
                 ) })
               ] }),
-              layout === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              layout === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 StageButton,
                 {
                   canTrial: selectedPlan?.companyCanTrial === true,
@@ -15702,8 +15679,8 @@ var Sidebar = ({
                   trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
                 }
               ),
-              layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EmbedButton, { onClick: unsubscribe, isLoading, children: t2("Cancel subscription") }),
-              !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(EmbedButton, { onClick: unsubscribe, isLoading, children: t2("Cancel subscription") }),
+              !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -15713,7 +15690,7 @@ var Sidebar = ({
                   children: error
                 }
               ) }),
-              layout !== "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              layout !== "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 Text,
                 {
                   $font: theme.typography.text.fontFamily,
@@ -15733,6 +15710,108 @@ var Sidebar = ({
   );
 };
 
+// src/components/shared/checkout-dialog/Navigation.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Navigation = ({
+  name,
+  index,
+  activeIndex,
+  isLast,
+  onClick
+}) => {
+  const theme = nt();
+  const isLightBackground = useIsLightBackground();
+  const showFullContent = index === activeIndex || index === activeIndex + 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      Flex,
+      {
+        $gap: "0.5rem",
+        $alignItems: "center",
+        ...!showFullContent && { $flexGrow: 1, $minWidth: 0 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Box,
+            {
+              $display: "none",
+              $viewport: {
+                md: {
+                  $display: "block"
+                }
+              },
+              children: index >= activeIndex ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                Box,
+                {
+                  $width: `${20 / TEXT_BASE_SIZE}rem`,
+                  $height: `${20 / TEXT_BASE_SIZE}rem`,
+                  $borderWidth: "2px",
+                  $borderStyle: "solid",
+                  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
+                  $borderRadius: "9999px"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                IconRound,
+                {
+                  name: "check",
+                  colors: [
+                    theme.card.background,
+                    isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
+                  ],
+                  style: {
+                    fontSize: `${16 / TEXT_BASE_SIZE}rem`,
+                    width: `${20 / TEXT_BASE_SIZE}rem`,
+                    height: `${20 / TEXT_BASE_SIZE}rem`
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            Box,
+            {
+              tabIndex: 0,
+              $fontSize: `${16 / TEXT_BASE_SIZE}rem`,
+              $fontFamily: theme.typography.text.fontFamily,
+              $fontWeight: index === activeIndex ? 600 : 400,
+              $color: theme.typography.text.color,
+              ...!showFullContent && {
+                $overflow: "hidden",
+                $whiteSpace: "nowrap",
+                $textOverflow: "ellipsis"
+              },
+              ...index !== activeIndex && { $opacity: "0.6375" },
+              ...index < activeIndex && {
+                onClick,
+                $cursor: "pointer"
+              },
+              $viewport: {
+                md: {
+                  $fontSize: `${19 / TEXT_BASE_SIZE}rem`
+                }
+              },
+              children: [
+                index + 1,
+                ". ",
+                name
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    !isLast && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      Icon2,
+      {
+        name: "chevron-right",
+        style: {
+          fontSize: 16,
+          color: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.35)"
+        }
+      }
+    )
+  ] });
+};
+
 // src/components/shared/checkout-dialog/Plan.tsx
 var import_react22 = require("react");
 var import_pluralize2 = __toESM(require_pluralize());
@@ -15902,7 +15981,7 @@ var Plan = ({
                       plan.entitlements.reduce((acc, entitlement) => {
                         const hasNumericValue = entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait";
                         let metricPeriodText;
-                        if (hasNumericValue && entitlement.metricPeriod) {
+                        if (hasNumericValue && entitlement.metricPeriod && entitlement.priceBehavior !== "overage") {
                           metricPeriodText = {
                             billing: t2("billing period"),
                             current_day: t2("day"),
@@ -15910,6 +15989,7 @@ var Plan = ({
                             current_year: t2("year")
                           }[entitlement.metricPeriod];
                         }
+                        const limit = entitlement.softLimit || entitlement.valueNumeric;
                         const price = (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price;
                         const currency = (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency;
                         if (entitlement.priceBehavior && typeof price !== "number") {
@@ -15935,41 +16015,92 @@ var Plan = ({
                                     ]
                                   }
                                 ),
-                                entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                                  Text,
+                                entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                                  Flex,
                                   {
-                                    $font: theme.typography.text.fontFamily,
-                                    $size: theme.typography.text.fontSize,
-                                    $weight: theme.typography.text.fontWeight,
-                                    $color: theme.typography.text.color,
-                                    children: typeof price !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                                      formatCurrency(price, currency),
-                                      " ",
-                                      t2("per"),
-                                      " ",
-                                      (0, import_pluralize2.default)(entitlement.feature.name, 1),
-                                      entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                                        " ",
-                                        t2("per"),
-                                        " ",
-                                        period
-                                      ] })
-                                    ] }) : hasNumericValue ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                                      entitlement.valueType === "unlimited" ? t2("Unlimited", {
-                                        item: (0, import_pluralize2.default)(
-                                          entitlement.feature.name
-                                        )
-                                      }) : typeof entitlement.valueNumeric === "number" && `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize2.default)(entitlement.feature.name, entitlement.valueNumeric)}`,
-                                      metricPeriodText && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                                        " ",
-                                        t2("per"),
-                                        " ",
-                                        metricPeriodText
-                                      ] })
-                                    ] }) : entitlement.feature.name
-                                  }
-                                ) })
-                              ] })
+                                    $flexDirection: "column",
+                                    $justifyContent: "center",
+                                    $gap: "0.5rem",
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                        Text,
+                                        {
+                                          $font: theme.typography.text.fontFamily,
+                                          $size: theme.typography.text.fontSize,
+                                          $weight: theme.typography.text.fontWeight,
+                                          $color: theme.typography.text.color,
+                                          $leading: 1.35,
+                                          children: typeof price === "number" && (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "pay_as_you_go") ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                            formatCurrency(price, currency),
+                                            " ",
+                                            t2("per"),
+                                            " ",
+                                            (0, import_pluralize2.default)(entitlement.feature.name, 1),
+                                            entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                              " ",
+                                              t2("per"),
+                                              " ",
+                                              period
+                                            ] })
+                                          ] }) : hasNumericValue ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                            entitlement.valueType === "unlimited" ? t2("Unlimited", {
+                                              item: (0, import_pluralize2.default)(
+                                                entitlement.feature.name
+                                              )
+                                            }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                              formatNumber(limit),
+                                              " ",
+                                              (0, import_pluralize2.default)(
+                                                entitlement.feature.name,
+                                                limit
+                                              )
+                                            ] }),
+                                            metricPeriodText ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                              " ",
+                                              t2("per"),
+                                              " ",
+                                              metricPeriodText
+                                            ] }) : entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                              "/",
+                                              shortenPeriod(period)
+                                            ] })
+                                          ] }) : entitlement.feature.name
+                                        }
+                                      ),
+                                      entitlement.priceBehavior === "overage" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                                        Text,
+                                        {
+                                          $font: theme.typography.text.fontFamily,
+                                          $size: 0.875 * theme.typography.text.fontSize,
+                                          $weight: theme.typography.text.fontWeight,
+                                          $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(
+                                            theme.typography.text.color,
+                                            0.46
+                                          ) : lighten(
+                                            theme.typography.text.color,
+                                            0.46
+                                          ),
+                                          $leading: 1.35,
+                                          children: [
+                                            formatCurrency(price),
+                                            "/",
+                                            (0, import_pluralize2.default)(
+                                              entitlement.feature.name.toLowerCase(),
+                                              1
+                                            ),
+                                            entitlement.feature.featureType === "event" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                                              "/",
+                                              shortenPeriod(period)
+                                            ] }),
+                                            " ",
+                                            t2("overage fee")
+                                          ]
+                                        }
+                                      )
+                                    ]
+                                  }
+                                )
+                              ] })
                             },
                             entitlement.id
                           )
@@ -16392,12 +16523,12 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
 var import_react23 = require("react");
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
-var RELEASE_TRAIN = "v3";
+var RELEASE_TRAIN = "acacia";
 var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
   return version === 3 ? "v3" : version;
 };
 var ORIGIN = "https://js.stripe.com";
-var STRIPE_JS_URL = "".concat(ORIGIN, "/v3");
+var STRIPE_JS_URL = "".concat(ORIGIN, "/").concat(RELEASE_TRAIN, "/stripe.js");
 var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
 var STRIPE_JS_URL_REGEX = /^https:\/\/js\.stripe\.com\/(v3|[a-z]+)\/stripe\.js(\?.*)?$/;
 var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
@@ -16432,7 +16563,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "5.10.0",
+    version: "6.0.0",
     startTime
   });
 };
@@ -16507,7 +16638,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("5.10.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("6.0.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -17393,10 +17524,11 @@ var PeriodToggle = ({
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
 var import_react27 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var UnsubscribeDialog = () => {
+var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
+  const contentRef = (0, import_react27.useRef)(null);
   const [error, setError] = (0, import_react27.useState)();
   const [isLoading, setIsLoading] = (0, import_react27.useState)(false);
   const planPeriod = (0, import_react27.useMemo)(
@@ -17443,136 +17575,145 @@ var UnsubscribeDialog = () => {
   const handleClose = (0, import_react27.useCallback)(() => {
     setLayout("portal");
   }, [setLayout]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Modal, { id: "unsubscribe-dialog", size: "auto", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      Box,
-      {
-        $display: "inline-flex",
-        $position: "absolute",
-        $top: 0,
-        $right: 0,
-        $zIndex: 1,
-        $cursor: "pointer",
-        onClick: handleClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          Icon2,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    Modal,
+    {
+      id: "unsubscribe-dialog",
+      size: "auto",
+      top,
+      contentRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          Box,
           {
-            name: "close",
-            style: {
-              fontSize: 36,
-              color: isLightBackground ? "hsla(0, 0%, 0%, 0.275)" : "hsla(0, 0%, 100%, 0.275)"
-            }
+            $display: "inline-flex",
+            $position: "absolute",
+            $top: 0,
+            $right: 0,
+            $zIndex: 1,
+            $cursor: "pointer",
+            onClick: handleClose,
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              Icon2,
+              {
+                name: "close",
+                style: {
+                  fontSize: 36,
+                  color: isLightBackground ? "hsla(0, 0%, 0%, 0.275)" : "hsla(0, 0%, 100%, 0.275)"
+                }
+              }
+            )
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-      Flex,
-      {
-        $position: "relative",
-        $flexDirection: "column",
-        $height: "auto",
-        $viewport: {
-          md: {
-            $flexDirection: "row",
-            $height: "calc(100% - 5rem)"
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          Flex,
+          {
+            $position: "relative",
+            $flexDirection: "column",
+            $height: "auto",
+            $viewport: {
+              md: {
+                $flexDirection: "row",
+                $height: "calc(100% - 5rem)"
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                Flex,
+                {
+                  $flexDirection: "column",
+                  $flexWrap: "wrap",
+                  $justifyContent: "space-around",
+                  $gap: "5rem",
+                  $padding: "2.5rem",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        Text,
+                        {
+                          as: "h2",
+                          $font: theme.typography.heading2.fontFamily,
+                          $size: theme.typography.heading2.fontSize,
+                          $weight: theme.typography.heading2.fontWeight,
+                          $color: theme.typography.heading2.color,
+                          children: t2("Cancel subscription")
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                        Text,
+                        {
+                          as: "p",
+                          $font: theme.typography.text.fontFamily,
+                          $size: theme.typography.text.fontSize,
+                          $weight: theme.typography.text.fontWeight,
+                          $color: theme.typography.text.color,
+                          children: [
+                            t2(
+                              "You will retain access to your plan until the end of the billing period, on"
+                            ),
+                            " ",
+                            cancelDate ? toPrettyDate(cancelDate, {
+                              month: "numeric"
+                            }) : ""
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        Text,
+                        {
+                          as: "p",
+                          $font: theme.typography.text.fontFamily,
+                          $size: theme.typography.text.fontSize,
+                          $weight: theme.typography.text.fontWeight,
+                          $color: theme.typography.text.color,
+                          children: t2("Not ready to cancel?")
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        EmbedButton,
+                        {
+                          onClick: () => {
+                            setSelected({
+                              planId: data.company?.plan?.id,
+                              addOnId: void 0,
+                              usage: false
+                            });
+                            setLayout("checkout");
+                          },
+                          $size: "sm",
+                          $color: "secondary",
+                          $variant: "ghost",
+                          $fullWidth: false,
+                          children: t2("Manage plan")
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                Sidebar,
+                {
+                  planPeriod,
+                  addOns,
+                  usageBasedEntitlements,
+                  error,
+                  isLoading,
+                  showHeader: false,
+                  showPaymentForm: false,
+                  requiresPayment: false,
+                  setError: (msg) => setError(msg),
+                  setIsLoading
+                }
+              )
+            ]
           }
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            Flex,
-            {
-              $flexDirection: "column",
-              $flexWrap: "wrap",
-              $justifyContent: "space-around",
-              $gap: "5rem",
-              $padding: "2.5rem",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    Text,
-                    {
-                      as: "h2",
-                      $font: theme.typography.heading2.fontFamily,
-                      $size: theme.typography.heading2.fontSize,
-                      $weight: theme.typography.heading2.fontWeight,
-                      $color: theme.typography.heading2.color,
-                      children: t2("Cancel subscription")
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-                    Text,
-                    {
-                      as: "p",
-                      $font: theme.typography.text.fontFamily,
-                      $size: theme.typography.text.fontSize,
-                      $weight: theme.typography.text.fontWeight,
-                      $color: theme.typography.text.color,
-                      children: [
-                        t2(
-                          "You will retain access to your plan until the end of the billing period, on"
-                        ),
-                        " ",
-                        cancelDate ? toPrettyDate(cancelDate, {
-                          month: "numeric"
-                        }) : ""
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $flexWrap: "wrap", $gap: "0.5rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    Text,
-                    {
-                      as: "p",
-                      $font: theme.typography.text.fontFamily,
-                      $size: theme.typography.text.fontSize,
-                      $weight: theme.typography.text.fontWeight,
-                      $color: theme.typography.text.color,
-                      children: t2("Not ready to cancel?")
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    EmbedButton,
-                    {
-                      onClick: () => {
-                        setSelected({
-                          planId: data.company?.plan?.id,
-                          addOnId: void 0,
-                          usage: false
-                        });
-                        setLayout("checkout");
-                      },
-                      $size: "sm",
-                      $color: "secondary",
-                      $variant: "ghost",
-                      $fullWidth: false,
-                      children: t2("Manage plan")
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            Sidebar,
-            {
-              planPeriod,
-              addOns,
-              usageBasedEntitlements,
-              error,
-              isLoading,
-              showHeader: false,
-              showPaymentForm: false,
-              requiresPayment: false,
-              setError: (msg) => setError(msg),
-              setIsLoading
-            }
-          )
-        ]
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 };
 
 // src/components/ui/badge/Badge.tsx
@@ -17732,9 +17873,9 @@ var RenderLayout = ({ children }) => {
 
 // src/components/layout/viewport/styles.ts
 var StyledViewport = dt(Box).attrs(({ theme }) => ({
-  $gridTemplateColumns: `repeat(auto-fit, minmax(300px, 1fr))`,
+  $gridTemplateColumns: "repeat(1, minmax(300px, 1fr))",
   $viewport: {
-    xl: {
+    md: {
       $gridTemplateColumns: `repeat(${theme.numberOfColumns}, minmax(300px, 1fr))`
     }
   }
@@ -17756,15 +17897,13 @@ var Viewport = (0, import_react28.forwardRef)(
     const [top, setTop] = (0, import_react28.useState)(0);
     const canCheckout = data.capabilities?.checkout ?? true;
     (0, import_react28.useLayoutEffect)(() => {
-      if (layout !== "checkout" && layout !== "unsubscribe") {
-        return;
-      }
       const parent = portal || document.body;
-      const value = Math.abs(
-        (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
+      setTop(
+        Math.abs(
+          (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
+        )
       );
-      setTop(value);
-      parent.style.overflow = "hidden";
+      parent.style.overflow = layout === "checkout" || layout === "unsubscribe" ? "hidden" : "";
       return () => {
         parent.style.overflow = "";
       };
@@ -17775,7 +17914,10 @@ var Viewport = (0, import_react28.forwardRef)(
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Badge, {})
       ] }),
       canCheckout && layout === "checkout" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CheckoutDialog, { top }), portal || document.body),
-      layout === "unsubscribe" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UnsubscribeDialog, {}), portal || document.body)
+      layout === "unsubscribe" && (0, import_react_dom2.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UnsubscribeDialog, { top }),
+        portal || document.body
+      )
     ] });
   }
 );
@@ -17885,11 +18027,12 @@ var Details = ({
   const {
     allocation,
     feature,
+    priceBehavior,
     usage,
+    softLimit,
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   } = featureUsage || {};
-  const { priceBehavior } = usageData || {};
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
@@ -17927,13 +18070,16 @@ var Details = ({
     if (priceBehavior === "pay_as_you_go" && typeof price === "number") {
       return `${formatCurrency(price, currency)} ${t2("per")} ${(0, import_pluralize4.default)(feature.name.toLowerCase(), 1)}`;
     }
+    if (priceBehavior === "overage" && typeof softLimit === "number") {
+      return `${formatNumber(softLimit)} ${(0, import_pluralize4.default)(feature.name, softLimit)}`;
+    }
     if (!priceBehavior && typeof allocation === "number") {
       return `${formatNumber(allocation)} ${(0, import_pluralize4.default)(feature.name, allocation)}`;
     }
     if (!priceBehavior) {
       return t2("Unlimited", { item: (0, import_pluralize4.default)(feature.name) });
     }
-  }, [t2, allocation, feature?.name, price, priceBehavior, currency]);
+  }, [t2, allocation, feature?.name, price, priceBehavior, currency, softLimit]);
   const usageText = (0, import_react31.useMemo)(() => {
     if (!feature?.name) {
       return;
@@ -17942,14 +18088,18 @@ var Details = ({
       let acc;
       if (priceBehavior === "pay_in_advance" && typeof data.company?.plan?.planPeriod === "string" && typeof price === "number") {
         acc = `${formatCurrency(price, currency)}/${(0, import_pluralize4.default)(feature.name.toLowerCase(), 1)}/${shortenPeriod(data.company.plan.planPeriod)}`;
-      } else if (priceBehavior === "pay_as_you_go" && typeof usage === "number") {
+      } else if ((priceBehavior === "pay_as_you_go" || priceBehavior === "overage") && typeof usage === "number") {
         acc = `${usage} ${(0, import_pluralize4.default)(feature.name.toLowerCase(), usage)} ${t2("used")}`;
       }
       if (acc) {
-        if (usageData?.priceBehavior === "pay_in_advance" && typeof price === "number" && typeof allocation === "number") {
+        if (priceBehavior === "pay_in_advance" && typeof price === "number" && typeof allocation === "number") {
           acc += ` \u2022 ${formatCurrency(price * allocation, currency)}`;
-        } else if (usageData?.priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
+        } else if (priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
           acc += ` \u2022 ${formatCurrency(price * usage, currency)}`;
+        } else if (priceBehavior === "overage" && typeof price === "number" && typeof usage === "number" && typeof softLimit === "number") {
+          const cost = price * (usage - softLimit);
+          const period = feature.featureType === "event" && typeof data.company?.plan?.planPeriod === "string" ? `/${shortenPeriod(data.company.plan.planPeriod)}` : "";
+          acc += cost > 0 ? ` \u2022 ${t2("Overage")}: ${formatCurrency(cost)}${period}` : ` \u2022 ${`${formatCurrency(price)}/${(0, import_pluralize4.default)(feature.name.toLowerCase(), 1)}`} ${t2("overage fee")}`;
         }
         return acc;
       }
@@ -17964,14 +18114,16 @@ var Details = ({
     }
   }, [
     t2,
-    allocation,
     data.company?.plan?.planPeriod,
     feature?.name,
-    price,
+    feature?.featureType,
     priceBehavior,
+    allocation,
+    price,
+    currency,
+    softLimit,
     usage,
-    usageData,
-    currency
+    usageData
   ]);
   if (!text) {
     return null;
@@ -18411,11 +18563,14 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
       allocation,
       feature,
       usage,
+      softLimit,
       priceBehavior,
       metricResetAt,
       monthlyUsageBasedPrice,
       yearlyUsageBasedPrice
     }, index) => {
+      const limit = allocation || softLimit || 0;
+      const isOverage = priceBehavior === "overage" && typeof softLimit === "number" && typeof usage === "number" && usage > softLimit;
       let price;
       let currency;
       if (planPeriod === "month") {
@@ -18425,137 +18580,193 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
         price = yearlyUsageBasedPrice?.price;
         currency = yearlyUsageBasedPrice?.currency;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
-        props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          IconRound,
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column-reverse", children: [
+        priceBehavior === "overage" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          Flex,
           {
-            name: feature.icon,
-            size: "sm",
-            colors: [
-              theme.primary,
-              isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
+            $justifyContent: "space-between",
+            $alignItems: "center",
+            $padding: `${0.4375 * theme.card.padding / TEXT_BASE_SIZE}rem ${theme.card.padding / TEXT_BASE_SIZE}rem`,
+            $backgroundColor: isLightBackground ? darken(theme.card.background, 0.05) : lighten(theme.card.background, 0.1),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                Text,
+                {
+                  $font: theme.typography.text.fontFamily,
+                  $size: theme.typography.text.fontSize,
+                  $weight: theme.typography.text.fontWeight,
+                  $color: theme.typography.text.color,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+                    t2("Overage fee"),
+                    ": ",
+                    formatCurrency(price, currency),
+                    feature && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("sub", { children: [
+                      "/",
+                      (0, import_pluralize5.default)(feature.name.toLowerCase(), 1),
+                      feature.featureType === "event" && data.company?.plan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+                        "/",
+                        shortenPeriod(data.company.plan.planPeriod)
+                      ] })
+                    ] })
+                  ] })
+                }
+              ),
+              isOverage && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                Text,
+                {
+                  $font: theme.typography.text.fontFamily,
+                  $size: theme.typography.text.fontSize,
+                  $weight: theme.typography.text.fontWeight,
+                  $color: theme.typography.text.color,
+                  children: [
+                    t2("X over the limit", {
+                      amount: usage - softLimit
+                    }),
+                    " \xB7 ",
+                    formatCurrency(price * (usage - softLimit), currency),
+                    feature?.featureType === "event" && typeof data.company?.plan?.planPeriod === "string" && `/${shortenPeriod(data.company.plan.planPeriod)}`
+                  ]
+                }
+              )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: "1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-            Flex,
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
+          props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            IconRound,
             {
-              ref: (el) => {
-                if (el) {
-                  elements.current.push(el);
-                }
-              },
-              $flexWrap: "wrap",
-              $gap: "1rem",
-              children: [
-                feature?.name && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                    Text,
-                    {
-                      as: Box,
-                      $font: theme.typography[props.header.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.fontStyle].color,
-                      children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-                        formatNumber(usage),
-                        " ",
-                        (0, import_pluralize5.default)(feature.name, usage)
-                      ] }) : feature.name
-                    }
-                  ),
-                  props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                    Text,
-                    {
-                      as: Box,
-                      $font: theme.typography[props.description.fontStyle].fontFamily,
-                      $size: theme.typography[props.description.fontStyle].fontSize,
-                      $weight: theme.typography[props.description.fontStyle].fontWeight,
-                      $color: theme.typography[props.description.fontStyle].color,
-                      children: feature.description
-                    }
-                  )
-                ] }),
-                (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-                  Box,
-                  {
-                    $flexBasis: "min-content",
-                    $flexGrow: "1",
-                    $textAlign: shouldWrapChildren ? "left" : "right",
-                    children: [
-                      props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                        Text,
-                        {
-                          as: Box,
-                          $font: theme.typography[props.usage.fontStyle].fontFamily,
-                          $size: theme.typography[props.usage.fontStyle].fontSize,
-                          $weight: theme.typography[props.usage.fontStyle].fontWeight,
-                          $leading: 1.25,
-                          $color: theme.typography[props.usage.fontStyle].color,
-                          children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-                            formatNumber(allocation),
-                            " ",
-                            (0, import_pluralize5.default)(feature.name, allocation)
-                          ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-                            formatNumber(usage),
-                            " ",
-                            (0, import_pluralize5.default)(feature.name, usage)
-                          ] })
-                        }
-                      ),
-                      props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                        Text,
-                        {
-                          $font: theme.typography[props.allocation.fontStyle].fontFamily,
-                          $size: theme.typography[props.allocation.fontStyle].fontSize,
-                          $weight: theme.typography[props.allocation.fontStyle].fontWeight,
-                          $color: theme.typography[props.allocation.fontStyle].color,
-                          children: priceBehavior && metricResetAt ? t2("Resets", {
-                            date: toPrettyDate(metricResetAt, {
-                              month: "short",
-                              day: "numeric",
-                              year: void 0
-                            })
-                          }) : typeof allocation === "number" ? t2("Limit of", {
-                            amount: formatNumber(allocation)
-                          }) : t2("No limit")
-                        }
-                      ) })
-                    ]
-                  }
-                )
+              name: feature.icon,
+              size: "sm",
+              colors: [
+                theme.primary,
+                isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
               ]
             }
           ),
-          props.isVisible && typeof usage === "number" && typeof allocation === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $gap: "2rem", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              ProgressBar,
-              {
-                progress: usage / allocation * 100,
-                value: usage,
-                total: allocation,
-                color: progressColorMap[Math.floor(
-                  Math.min(usage, allocation) / allocation * (progressColorMap.length - 1)
-                )],
-                $flexGrow: "1"
-              }
-            ),
-            priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              EmbedButton,
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", $flexGrow: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+              Flex,
               {
-                type: "button",
-                onClick: () => {
-                  setSelected({ usage: true });
-                  setLayout("checkout");
-                },
-                style: {
-                  width: "fit-content",
-                  padding: "0 1rem 0 0.5rem"
+                ref: (el) => {
+                  if (el) {
+                    elements.current.push(el);
+                  }
                 },
-                children: t2("Add More")
+                $flexWrap: "wrap",
+                $gap: "1rem",
+                children: [
+                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $flexGrow: "1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      Text,
+                      {
+                        as: Box,
+                        $font: theme.typography[props.header.fontStyle].fontFamily,
+                        $size: theme.typography[props.header.fontStyle].fontSize,
+                        $weight: theme.typography[props.header.fontStyle].fontWeight,
+                        $color: theme.typography[props.header.fontStyle].color,
+                        children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+                          formatNumber(usage),
+                          " ",
+                          (0, import_pluralize5.default)(feature.name, usage)
+                        ] }) : feature.name
+                      }
+                    ),
+                    props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      Text,
+                      {
+                        as: Box,
+                        $font: theme.typography[props.description.fontStyle].fontFamily,
+                        $size: theme.typography[props.description.fontStyle].fontSize,
+                        $weight: theme.typography[props.description.fontStyle].fontWeight,
+                        $color: theme.typography[props.description.fontStyle].color,
+                        children: feature.description
+                      }
+                    )
+                  ] }),
+                  (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                    Box,
+                    {
+                      $flexBasis: "min-content",
+                      $flexGrow: "1",
+                      $textAlign: shouldWrapChildren ? "left" : "right",
+                      children: [
+                        props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                          Text,
+                          {
+                            as: Box,
+                            $font: theme.typography[props.usage.fontStyle].fontFamily,
+                            $size: theme.typography[props.usage.fontStyle].fontSize,
+                            $weight: theme.typography[props.usage.fontStyle].fontWeight,
+                            $leading: 1.35,
+                            $color: theme.typography[props.usage.fontStyle].color,
+                            children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+                              formatNumber(allocation),
+                              " ",
+                              (0, import_pluralize5.default)(feature.name, allocation)
+                            ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+                              formatNumber(usage),
+                              " ",
+                              (0, import_pluralize5.default)(feature.name, usage),
+                              priceBehavior === "overage" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+                                " ",
+                                t2("used")
+                              ] })
+                            ] })
+                          }
+                        ),
+                        props.allocation.isVisible && priceBehavior !== "overage" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                          Text,
+                          {
+                            $font: theme.typography[props.allocation.fontStyle].fontFamily,
+                            $size: theme.typography[props.allocation.fontStyle].fontSize,
+                            $weight: theme.typography[props.allocation.fontStyle].fontWeight,
+                            $color: theme.typography[props.allocation.fontStyle].color,
+                            children: priceBehavior && priceBehavior !== "overage" && metricResetAt ? t2("Resets", {
+                              date: toPrettyDate(metricResetAt, {
+                                month: "short",
+                                day: "numeric",
+                                year: void 0
+                              })
+                            }) : typeof allocation === "number" || typeof softLimit === "number" ? t2("Limit of", {
+                              amount: formatNumber(limit)
+                            }) : t2("No limit")
+                          }
+                        ) })
+                      ]
+                    }
+                  )
+                ]
               }
-            )
+            ),
+            props.isVisible && typeof usage === "number" && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { $gap: "2rem", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                ProgressBar,
+                {
+                  progress: (isOverage ? softLimit / usage : usage / limit) * 100,
+                  value: usage,
+                  total: isOverage ? softLimit : limit,
+                  color: isOverage ? "blue" : progressColorMap[Math.floor(
+                    Math.min(usage, limit) / limit * (progressColorMap.length - 1)
+                  )],
+                  ...isOverage && { bgColor: "#EF4444" },
+                  $flexGrow: "1"
+                }
+              ),
+              priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                EmbedButton,
+                {
+                  onClick: () => {
+                    setSelected({ usage: true });
+                    setLayout("checkout");
+                  },
+                  style: {
+                    width: "fit-content",
+                    padding: "0 1rem 0 0.5rem"
+                  },
+                  children: t2("Add More")
+                }
+              )
+            ] })
           ] })
         ] })
       ] }, index);
@@ -18983,7 +19194,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
   };
   const usageBasedEntitlements = (featureUsage?.features || []).reduce(
     (acc, usage) => {
-      const quantity = usage?.allocation ?? 0;
+      const quantity = usage.allocation || usage.softLimit || 0;
       let price;
       let currencyCode;
       if (currentPlan?.planPeriod === "month") {
@@ -18993,7 +19204,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
         price = usage.yearlyUsageBasedPrice?.price;
         currencyCode = usage.yearlyUsageBasedPrice?.currency;
       }
-      if (usage.priceBehavior && typeof price === "number" && quantity > 0) {
+      if (usage.priceBehavior && typeof price === "number") {
         acc.push({ ...usage, price, quantity, currencyCode });
       }
       return acc;
@@ -19223,6 +19434,8 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
             ),
             usageBasedEntitlements.reduce(
               (acc, entitlement) => {
+                const overageAmount = entitlement.priceBehavior === "overage" && (entitlement?.usage ?? 0) - (entitlement?.softLimit ?? 0);
+                const amount = entitlement.quantity || Math.max(entitlement?.softLimit || 0, 0);
                 if (entitlement.feature?.name) {
                   acc.push(
                     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
@@ -19240,17 +19453,45 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                               $size: theme.typography[props.addOns.fontStyle].fontSize,
                               $weight: theme.typography[props.addOns.fontStyle].fontWeight,
                               $color: theme.typography[props.addOns.fontStyle].color,
-                              children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-                                entitlement.quantity,
+                              children: entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && amount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+                                amount,
                                 " ",
-                                (0, import_pluralize6.default)(
-                                  entitlement.feature.name,
-                                  entitlement.quantity
-                                )
+                                (0, import_pluralize6.default)(entitlement.feature.name, amount)
                               ] }) : entitlement.feature.name
                             }
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
+                            entitlement.priceBehavior === "overage" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                              Text,
+                              {
+                                $font: theme.typography.text.fontFamily,
+                                $size: 0.875 * theme.typography.text.fontSize,
+                                $weight: theme.typography.text.fontWeight,
+                                $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
+                                children: typeof overageAmount === "number" && overageAmount > 0 ? t2("X over the limit", {
+                                  amount: overageAmount
+                                }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+                                  t2("Overage fee"),
+                                  ":",
+                                  " ",
+                                  formatCurrency(
+                                    entitlement.price,
+                                    entitlement.currencyCode
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("sub", { children: [
+                                    "/",
+                                    (0, import_pluralize6.default)(
+                                      entitlement.feature.name.toLowerCase(),
+                                      1
+                                    ),
+                                    entitlement.feature.featureType === "event" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+                                      "/",
+                                      shortenPeriod(currentPlan.planPeriod)
+                                    ] })
+                                  ] })
+                                ] })
+                              }
+                            ),
                             entitlement.priceBehavior === "pay_in_advance" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                               Text,
                               {
@@ -19275,7 +19516,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                            amount > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                               Text,
                               {
                                 $font: theme.typography.text.fontFamily,
@@ -19284,10 +19525,10 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                                 $color: theme.typography.text.color,
                                 children: [
                                   formatCurrency(
-                                    entitlement.price * (entitlement.priceBehavior === "pay_in_advance" ? entitlement.quantity : 1),
+                                    entitlement.price * amount,
                                     entitlement.currencyCode
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("sub", { children: [
+                                  (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("sub", { children: [
                                     "/",
                                     currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : (0, import_pluralize6.default)(
                                       entitlement.feature.name.toLowerCase(),
@@ -19585,6 +19826,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                 }
                               ) }),
                               plan.entitlements.reduce((acc, entitlement) => {
+                                const limit = entitlement.softLimit || entitlement.valueNumeric;
                                 let price;
                                 let currency;
                                 if (selectedPeriod === "month") {
@@ -19610,49 +19852,101 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                         ]
                                       }
                                     ),
-                                    entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                                      Text,
+                                    entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                                      Flex,
                                       {
-                                        $font: theme.typography.text.fontFamily,
-                                        $size: theme.typography.text.fontSize,
-                                        $weight: theme.typography.text.fontWeight,
-                                        $color: theme.typography.text.color,
-                                        $leading: 1.35,
-                                        children: typeof price !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                                          formatCurrency(price, currency),
-                                          " ",
-                                          t2("per"),
-                                          " ",
-                                          (0, import_pluralize7.default)(
-                                            entitlement.feature.name,
-                                            1
+                                        $flexDirection: "column",
+                                        $justifyContent: "center",
+                                        $gap: "0.5rem",
+                                        children: [
+                                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                                            Text,
+                                            {
+                                              $font: theme.typography.text.fontFamily,
+                                              $size: theme.typography.text.fontSize,
+                                              $weight: theme.typography.text.fontWeight,
+                                              $color: theme.typography.text.color,
+                                              $leading: 1.35,
+                                              children: typeof price === "number" && (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "pay_as_you_go") ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                                                formatCurrency(price, currency),
+                                                " ",
+                                                t2("per"),
+                                                " ",
+                                                (0, import_pluralize7.default)(
+                                                  entitlement.feature.name,
+                                                  1
+                                                ),
+                                                entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                                                  " ",
+                                                  t2("per"),
+                                                  " ",
+                                                  selectedPeriod
+                                                ] })
+                                              ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                                                entitlement.valueType === "unlimited" ? t2("Unlimited", {
+                                                  item: (0, import_pluralize7.default)(
+                                                    entitlement.feature.name
+                                                  )
+                                                }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                                                  formatNumber(limit),
+                                                  " ",
+                                                  (0, import_pluralize7.default)(
+                                                    entitlement.feature.name,
+                                                    limit
+                                                  )
+                                                ] }),
+                                                entitlement.metricPeriod ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                                                  " ",
+                                                  t2("per"),
+                                                  " ",
+                                                  {
+                                                    billing: "billing period",
+                                                    current_day: "day",
+                                                    current_month: "month",
+                                                    current_year: "year"
+                                                  }[entitlement.metricPeriod]
+                                                ] }) : entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                                                  "/",
+                                                  shortenPeriod(selectedPeriod)
+                                                ] })
+                                              ] }) : entitlement.feature.name
+                                            }
                                           ),
-                                          entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                                            " ",
-                                            t2("per"),
-                                            " ",
-                                            selectedPeriod
-                                          ] })
-                                        ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                                          entitlement.valueType === "unlimited" ? t2("Unlimited", {
-                                            item: (0, import_pluralize7.default)(
-                                              entitlement.feature.name
-                                            )
-                                          }) : typeof entitlement.valueNumeric === "number" && `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize7.default)(entitlement.feature.name, entitlement.valueNumeric)}`,
-                                          entitlement.metricPeriod && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                                            " ",
-                                            t2("per"),
-                                            " ",
+                                          entitlement.priceBehavior === "overage" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                                            Text,
                                             {
-                                              billing: "billing period",
-                                              current_day: "day",
-                                              current_month: "month",
-                                              current_year: "year"
-                                            }[entitlement.metricPeriod]
-                                          ] })
-                                        ] }) : entitlement.feature.name
+                                              $font: theme.typography.text.fontFamily,
+                                              $size: 0.875 * theme.typography.text.fontSize,
+                                              $weight: theme.typography.text.fontWeight,
+                                              $color: hexToHSL(
+                                                theme.typography.text.color
+                                              ).l > 50 ? darken(
+                                                theme.typography.text.color,
+                                                0.46
+                                              ) : lighten(
+                                                theme.typography.text.color,
+                                                0.46
+                                              ),
+                                              $leading: 1.35,
+                                              children: [
+                                                formatCurrency(price),
+                                                "/",
+                                                (0, import_pluralize7.default)(
+                                                  entitlement.feature.name.toLowerCase(),
+                                                  1
+                                                ),
+                                                entitlement.feature.featureType === "event" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                                                  "/",
+                                                  shortenPeriod(selectedPeriod)
+                                                ] }),
+                                                " ",
+                                                t2("overage fee")
+                                              ]
+                                            }
+                                          )
+                                        ]
                                       }
-                                    ) })
+                                    )
                                   ] }, entitlement.id)
                                 );
                                 return acc;