@schematichq/schematic-components 0.3.9 → 0.3.11

package/dist/schematic-components.cjs.js

@@ -2641,7 +2641,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "4.7.0",
+    version: "4.8.0",
     startTime
   });
 };
@@ -7264,9 +7264,6 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
     return json;
   }
   return {
-    prices: json["Prices"].map(
-      BillingPriceResponseDataFromJSON
-    ),
     accountId: json["account_id"],
     createdAt: new Date(json["created_at"]),
     currency: json["currency"],
@@ -7274,6 +7271,9 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
     externalId: json["external_id"],
     name: json["name"],
     price: json["price"],
+    prices: json["prices"].map(
+      BillingPriceResponseDataFromJSON
+    ),
     productId: json["product_id"],
     quantity: json["quantity"],
     updatedAt: new Date(json["updated_at"])
@@ -7289,7 +7289,6 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
     return json;
   }
   return {
-    accountId: json["account_id"],
     createdAt: new Date(json["created_at"]),
     currency: json["currency"],
     environmentId: json["environment_id"],
@@ -7314,16 +7313,111 @@ function BillingSubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator)
     return json;
   }
   return {
+    companyId: json["company_id"] == null ? void 0 : json["company_id"],
+    createdAt: new Date(json["created_at"]),
     currency: json["currency"],
+    customerExternalId: json["customer_external_id"],
     expiredAt: json["expired_at"] == null ? void 0 : new Date(json["expired_at"]),
-    externalId: json["external_id"],
     id: json["id"],
     interval: json["interval"],
-    totalPrice: json["total_price"],
+    metadata: json["metadata"] == null ? void 0 : json["metadata"],
+    periodEnd: json["period_end"],
+    periodStart: json["period_start"],
+    status: json["status"],
+    subscriptionExternalId: json["subscription_external_id"],
+    totalPrice: json["total_price"]
+  };
+}
+
+// src/api/models/InvoiceResponseData.ts
+function InvoiceResponseDataFromJSON(json) {
+  return InvoiceResponseDataFromJSONTyped(json, false);
+}
+function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    amountDue: json["amount_due"],
+    amountPaid: json["amount_paid"],
+    amountRemaining: json["amount_remaining"],
+    collectionMethod: json["collection_method"],
+    companyId: json["company_id"] == null ? void 0 : json["company_id"],
+    createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    customerExternalId: json["customer_external_id"],
+    dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
+    environmentId: json["environment_id"],
+    externalId: json["external_id"] == null ? void 0 : json["external_id"],
+    id: json["id"],
+    paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
+    subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
+    subtotal: json["subtotal"],
+    updatedAt: new Date(json["updated_at"]),
+    url: json["url"] == null ? void 0 : json["url"]
+  };
+}
+
+// src/api/models/PaymentMethodResponseData.ts
+function PaymentMethodResponseDataFromJSON(json) {
+  return PaymentMethodResponseDataFromJSONTyped(json, false);
+}
+function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    accountLast4: json["account_last4"] == null ? void 0 : json["account_last4"],
+    accountName: json["account_name"] == null ? void 0 : json["account_name"],
+    bankName: json["bank_name"] == null ? void 0 : json["bank_name"],
+    billingEmail: json["billing_email"] == null ? void 0 : json["billing_email"],
+    billingName: json["billing_name"] == null ? void 0 : json["billing_name"],
+    cardBrand: json["card_brand"] == null ? void 0 : json["card_brand"],
+    cardExpMonth: json["card_exp_month"] == null ? void 0 : json["card_exp_month"],
+    cardExpYear: json["card_exp_year"] == null ? void 0 : json["card_exp_year"],
+    cardLast4: json["card_last4"] == null ? void 0 : json["card_last4"],
+    companyId: json["company_id"] == null ? void 0 : json["company_id"],
+    createdAt: new Date(json["created_at"]),
+    customerExternalId: json["customer_external_id"],
+    environmentId: json["environment_id"],
+    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"])
   };
 }
 
+// src/api/models/BillingSubscriptionView.ts
+function BillingSubscriptionViewFromJSON(json) {
+  return BillingSubscriptionViewFromJSONTyped(json, false);
+}
+function BillingSubscriptionViewFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    companyId: json["company_id"] == null ? void 0 : json["company_id"],
+    createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    customerExternalId: json["customer_external_id"],
+    expiredAt: json["expired_at"] == null ? void 0 : new Date(json["expired_at"]),
+    id: json["id"],
+    interval: json["interval"],
+    latestInvoice: json["latest_invoice"] == null ? void 0 : InvoiceResponseDataFromJSON(json["latest_invoice"]),
+    metadata: json["metadata"] == null ? void 0 : json["metadata"],
+    paymentMethod: json["payment_method"] == null ? void 0 : PaymentMethodResponseDataFromJSON(json["payment_method"]),
+    periodEnd: json["period_end"],
+    periodStart: json["period_start"],
+    products: json["products"].map(
+      BillingProductForSubscriptionResponseDataFromJSON
+    ),
+    status: json["status"],
+    subscriptionExternalId: json["subscription_external_id"],
+    totalPrice: json["total_price"]
+  };
+}
+
 // src/api/models/ChangeSubscriptionRequestBody.ts
 function ChangeSubscriptionRequestBodyToJSON(value) {
   if (value == null) {
@@ -7475,7 +7569,7 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       CompanyPlanWithBillingSubViewFromJSON
     ),
     billingSubscriptions: json["billing_subscriptions"].map(
-      BillingSubscriptionResponseDataFromJSON
+      BillingSubscriptionViewFromJSON
     ),
     createdAt: new Date(json["created_at"]),
     entityTraits: json["entity_traits"].map(
@@ -7783,65 +7877,6 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
-// src/api/models/InvoiceResponseData.ts
-function InvoiceResponseDataFromJSON(json) {
-  return InvoiceResponseDataFromJSONTyped(json, false);
-}
-function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    amountDue: json["amount_due"],
-    amountPaid: json["amount_paid"],
-    amountRemaining: json["amount_remaining"],
-    collectionMethod: json["collection_method"],
-    companyId: json["company_id"] == null ? void 0 : json["company_id"],
-    createdAt: new Date(json["created_at"]),
-    currency: json["currency"],
-    customerExternalId: json["customer_external_id"],
-    dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
-    environmentId: json["environment_id"],
-    externalId: json["external_id"] == null ? void 0 : json["external_id"],
-    id: json["id"],
-    paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
-    subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
-    subtotal: json["subtotal"],
-    updatedAt: new Date(json["updated_at"]),
-    url: json["url"] == null ? void 0 : json["url"]
-  };
-}
-
-// src/api/models/PaymentMethodResponseData.ts
-function PaymentMethodResponseDataFromJSON(json) {
-  return PaymentMethodResponseDataFromJSONTyped(json, false);
-}
-function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    accountLast4: json["account_last4"] == null ? void 0 : json["account_last4"],
-    accountName: json["account_name"] == null ? void 0 : json["account_name"],
-    bankName: json["bank_name"] == null ? void 0 : json["bank_name"],
-    billingEmail: json["billing_email"] == null ? void 0 : json["billing_email"],
-    billingName: json["billing_name"] == null ? void 0 : json["billing_name"],
-    cardBrand: json["card_brand"] == null ? void 0 : json["card_brand"],
-    cardExpMonth: json["card_exp_month"] == null ? void 0 : json["card_exp_month"],
-    cardExpYear: json["card_exp_year"] == null ? void 0 : json["card_exp_year"],
-    cardLast4: json["card_last4"] == null ? void 0 : json["card_last4"],
-    companyId: json["company_id"] == null ? void 0 : json["company_id"],
-    createdAt: new Date(json["created_at"]),
-    customerExternalId: json["customer_external_id"],
-    environmentId: json["environment_id"],
-    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"])
-  };
-}
-
 // src/api/models/CompanySubscriptionResponseData.ts
 function CompanySubscriptionResponseDataFromJSON(json) {
   return CompanySubscriptionResponseDataFromJSONTyped(json, false);
@@ -7866,6 +7901,19 @@ function CompanySubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator)
   };
 }
 
+// src/api/models/ComponentCapabilities.ts
+function ComponentCapabilitiesFromJSON(json) {
+  return ComponentCapabilitiesFromJSONTyped(json, false);
+}
+function ComponentCapabilitiesFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    checkout: json["checkout"]
+  };
+}
+
 // src/api/models/ComponentResponseData.ts
 function ComponentResponseDataFromJSON(json) {
   return ComponentResponseDataFromJSONTyped(json, false);
@@ -7944,9 +7992,13 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    activeAddOns: json["active_add_ons"].map(
+      CompanyPlanDetailResponseDataFromJSON
+    ),
     activePlans: json["active_plans"].map(
       CompanyPlanDetailResponseDataFromJSON
     ),
+    capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON(json["capabilities"]),
     company: json["company"] == null ? void 0 : CompanyDetailResponseDataFromJSON(json["company"]),
     component: json["component"] == null ? void 0 : ComponentResponseDataFromJSON(json["component"]),
     featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
@@ -8751,6 +8803,7 @@ function parseEditorState(data) {
 var EmbedContext = (0, import_react2.createContext)({
   api: null,
   data: {
+    activeAddOns: [],
     activePlans: []
   },
   nodes: [],
@@ -8781,6 +8834,7 @@ var EmbedProvider = ({
     return {
       api: null,
       data: {
+        activeAddOns: [],
         activePlans: []
       },
       nodes: [],
@@ -8882,7 +8936,7 @@ var EmbedProvider = ({
   (0, import_react2.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.3.9";
+      headers["X-Schematic-Components-Version"] = "0.3.11";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -9946,7 +10000,8 @@ var CheckoutDialog = () => {
       document.body.style.overflow = "";
     };
   }, []);
-  const allowCheckout = api && selectedPlan && (selectedPlan.id !== currentPlan?.id || planPeriod !== currentPlan.planPeriod) && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
+  const canUpdateSubscription = api && selectedPlan && (selectedPlan.id !== currentPlan?.id || planPeriod !== currentPlan.planPeriod) && !isLoading;
+  const canCheckout = canUpdateSubscription && (paymentMethod && !showPaymentForm || paymentMethodId);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Modal, { size: "lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "1rem", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
@@ -10467,7 +10522,7 @@ var CheckoutDialog = () => {
                           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             Flex,
                             {
-                              ...allowCheckout && {
+                              ...canCheckout && {
                                 $opacity: "0.625",
                                 $textDecoration: "line-through"
                               },
@@ -10500,7 +10555,7 @@ var CheckoutDialog = () => {
                         ]
                       }
                     ),
-                    allowCheckout && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { $marginBottom: "1rem", children: [
+                    canCheckout && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { $marginBottom: "1rem", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                         Box,
                         {
@@ -10693,7 +10748,7 @@ var CheckoutDialog = () => {
                     EmbedButton,
                     {
                       isLoading,
-                      ...allowCheckout ? {
+                      ...canUpdateSubscription ? {
                         onClick: async () => {
                           if (!data.component?.id) {
                             return;
@@ -10722,9 +10777,9 @@ var CheckoutDialog = () => {
                   ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     EmbedButton,
                     {
-                      disabled: isLoading || !allowCheckout,
+                      disabled: isLoading || !canCheckout,
                       isLoading,
-                      ...allowCheckout && { onClick: checkout },
+                      ...canCheckout && { onClick: checkout },
                       children: "Pay now"
                     }
                   ),
@@ -11004,7 +11059,9 @@ function resolveDesignProps(props) {
     usage: {
       isVisible: props.usage?.isVisible ?? true,
       fontStyle: props.usage?.fontStyle ?? "heading6"
-    }
+    },
+    // there is a typescript bug with `RecursivePartial` so we must cast to `string[] | undefined`
+    visibleFeatures: props.visibleFeatures
   };
 }
 var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, ref) => {
@@ -11014,7 +11071,16 @@ var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, r
   const elements = (0, import_react14.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const shouldShowFeatures = (data.featureUsage?.features ?? []).length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
+  const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
+    const mappedFeatureUsage = data.featureUsage?.features.find(
+      (usage) => usage.feature?.id === id
+    );
+    if (mappedFeatureUsage) {
+      acc.push(mappedFeatureUsage);
+    }
+    return acc;
+  }, []) : data.featureUsage?.features || [];
+  const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
   if (!shouldShowFeatures) {
     return null;
   }
@@ -11037,82 +11103,76 @@ var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, r
             children: props.header.text
           }
         ) }),
-        (data.featureUsage?.features || []).reduce(
-          (acc, { allocation, feature, usage }, index) => {
-            return [
-              ...acc,
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                Flex,
-                {
-                  ref: (el) => el && elements.current.push(el),
-                  $flexWrap: "wrap",
-                  $justifyContent: "space-between",
-                  $alignItems: "center",
-                  $gap: "1rem",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexGrow: "1", $flexBasis: "min-content", $gap: "1rem", children: [
-                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                        IconRound,
+        featureUsage.map(({ allocation, feature, usage }, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            Flex,
+            {
+              ref: (el) => el && elements.current.push(el),
+              $flexWrap: "wrap",
+              $justifyContent: "space-between",
+              $alignItems: "center",
+              $gap: "1rem",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexGrow: "1", $flexBasis: "min-content", $gap: "1rem", children: [
+                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    IconRound,
+                    {
+                      name: feature.icon,
+                      size: "sm",
+                      colors: [
+                        theme.primary,
+                        isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
+                      ]
+                    }
+                  ),
+                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    Text,
+                    {
+                      $font: theme.typography[props.icons.fontStyle].fontFamily,
+                      $size: theme.typography[props.icons.fontStyle].fontSize,
+                      $weight: theme.typography[props.icons.fontStyle].fontWeight,
+                      $color: theme.typography[props.icons.fontStyle].color,
+                      children: feature.name
+                    }
+                  ) })
+                ] }),
+                (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                  Box,
+                  {
+                    $flexBasis: "min-content",
+                    $flexGrow: "1",
+                    $textAlign: shouldWrapChildren ? "left" : "right",
+                    children: [
+                      props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                        Text,
                         {
-                          name: feature.icon,
-                          size: "sm",
-                          colors: [
-                            theme.primary,
-                            isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
-                          ]
+                          $font: theme.typography[props.entitlement.fontStyle].fontFamily,
+                          $size: theme.typography[props.entitlement.fontStyle].fontSize,
+                          $weight: theme.typography[props.entitlement.fontStyle].fontWeight,
+                          $lineHeight: 1.25,
+                          $color: theme.typography[props.entitlement.fontStyle].color,
+                          children: typeof allocation === "number" ? `${formatNumber(allocation)} ${(0, import_pluralize2.default)(feature.name, allocation)}` : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
                         }
-                      ),
-                      feature?.name && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      ) }),
+                      props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         Text,
                         {
-                          $font: theme.typography[props.icons.fontStyle].fontFamily,
-                          $size: theme.typography[props.icons.fontStyle].fontSize,
-                          $weight: theme.typography[props.icons.fontStyle].fontWeight,
-                          $color: theme.typography[props.icons.fontStyle].color,
-                          children: feature.name
+                          $font: theme.typography[props.usage.fontStyle].fontFamily,
+                          $size: theme.typography[props.usage.fontStyle].fontSize,
+                          $weight: theme.typography[props.usage.fontStyle].fontWeight,
+                          $lineHeight: 1.5,
+                          $color: theme.typography[props.usage.fontStyle].color,
+                          children: typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: typeof allocation === "number" ? `${formatNumber(usage)} of ${formatNumber(allocation)} used` : `${formatNumber(usage)} used` })
                         }
                       ) })
-                    ] }),
-                    (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                      Box,
-                      {
-                        $flexBasis: "min-content",
-                        $flexGrow: "1",
-                        $textAlign: shouldWrapChildren ? "left" : "right",
-                        children: [
-                          props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                            Text,
-                            {
-                              $font: theme.typography[props.entitlement.fontStyle].fontFamily,
-                              $size: theme.typography[props.entitlement.fontStyle].fontSize,
-                              $weight: theme.typography[props.entitlement.fontStyle].fontWeight,
-                              $lineHeight: 1.25,
-                              $color: theme.typography[props.entitlement.fontStyle].color,
-                              children: typeof allocation === "number" ? `${formatNumber(allocation)} ${(0, import_pluralize2.default)(feature.name, allocation)}` : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
-                            }
-                          ) }),
-                          props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                            Text,
-                            {
-                              $font: theme.typography[props.usage.fontStyle].fontFamily,
-                              $size: theme.typography[props.usage.fontStyle].fontSize,
-                              $weight: theme.typography[props.usage.fontStyle].fontWeight,
-                              $lineHeight: 1.5,
-                              $color: theme.typography[props.usage.fontStyle].color,
-                              children: typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: typeof allocation === "number" ? `${formatNumber(usage)} of ${formatNumber(allocation)} used` : `${formatNumber(usage)} used` })
-                            }
-                          ) })
-                        ]
-                      }
-                    )
-                  ]
-                },
-                index
-              )
-            ];
-          },
-          []
-        )
+                    ]
+                  }
+                )
+              ]
+            },
+            index
+          );
+        })
       ]
     }
   );
@@ -11257,7 +11317,9 @@ function resolveDesignProps3(props) {
     usage: {
       isVisible: props.usage?.isVisible ?? true,
       fontStyle: props.usage?.fontStyle ?? "heading5"
-    }
+    },
+    // there is a typescript bug with `RecursivePartial` so we must cast to `string[] | undefined`
+    visibleFeatures: props.visibleFeatures
   };
 }
 var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, ref) => {
@@ -11267,13 +11329,22 @@ var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, re
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const features = (data.featureUsage?.features || []).filter(({ feature }) => {
-    return feature?.featureType === "event" || feature?.featureType === "trait";
-  });
-  if (features.length === 0) {
+  const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
+    const mappedFeatureUsage = data.featureUsage?.features.find(
+      (usage) => usage.feature?.id === id
+    );
+    if (mappedFeatureUsage?.feature?.featureType === "event" || mappedFeatureUsage?.feature?.featureType === "trait") {
+      acc.push(mappedFeatureUsage);
+    }
+    return acc;
+  }, []) : (data.featureUsage?.features || []).filter(
+    (usage) => usage.feature?.featureType === "event" || usage.feature?.featureType === "trait"
+  );
+  const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
+  if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Flex, { ref, className, $flexDirection: "column", children: features.map(({ allocation, feature, usage }, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Flex, { ref, className, $flexDirection: "column", children: featureUsage.map(({ allocation, feature, usage }, index) => {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
       props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         IconRound,
@@ -11752,12 +11823,12 @@ var resolveDesignProps5 = (props) => {
 var PlanManager = (0, import_react19.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const theme = nt();
-  const { data, layout, mode, setLayout } = useEmbed();
+  const { data, layout, setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const { currentPlan, canChangePlan, addOns } = {
-    currentPlan: data.company?.plan,
-    canChangePlan: (mode === "edit" || data.stripeEmbed?.publishableKey && data.company?.plan?.billingProductId) && data.activePlans.length > 0,
-    addOns: data.company?.addOns || []
+    addOns: data.company?.addOns || [],
+    canChangePlan: data.capabilities?.checkout ?? true,
+    currentPlan: data.company?.plan
   };
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     Element,
@@ -12088,6 +12159,7 @@ var ComponentTree = () => {
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
+    console.error(error);
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Error2, { message: error.message });
   }
   if (import_react22.Children.count(children) === 0) {