@schematichq/schematic-components 0.4.11 → 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.11";
+      headers["X-Schematic-Components-Version"] = "0.5.0";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13983,6 +14057,7 @@ var ProgressBar = ({
   value,
   total = 0,
   color = "gray",
+  bgColor = "#F2F4F7",
   barWidth = "100%",
   ...props
 }) => {
@@ -14014,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,
@@ -15906,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"),
@@ -15914,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") {
@@ -15939,40 +16015,91 @@ 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
@@ -16396,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";
@@ -16436,7 +16563,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "5.10.0",
+    version: "6.0.0",
     startTime
   });
 };
@@ -16511,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);
@@ -17746,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))`
     }
   }
@@ -17900,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();
@@ -17942,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;
@@ -17957,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;
       }
@@ -17979,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;
@@ -18426,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") {
@@ -18440,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);
@@ -18998,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") {
@@ -19008,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;
@@ -19238,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)(
@@ -19255,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,
                               {
@@ -19290,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,
@@ -19299,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(),
@@ -19600,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") {
@@ -19625,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;