@schematichq/schematic-components 1.5.0 → 1.6.1

package/dist/schematic-components.cjs.js

@@ -6805,6 +6805,7 @@ var en_default = {
     Expired: "Expired",
     "Expires in X months": "Expires in {{months}} mo",
     Expires: "Expires {{date}}",
+    Free: "Free",
     "Hide all": "Hide all",
     "Hide balance details": "Hide balance details",
     "Hide details": "Hide details",
@@ -7096,7 +7097,7 @@ var import_debounce = __toESM(require_debounce());
 var import_merge2 = __toESM(require_merge());
 var import_react12 = require("react");
 
-// node_modules/uuid/dist/esm-browser/stringify.js
+// node_modules/uuid/dist/stringify.js
 var byteToHex = [];
 for (let i2 = 0; i2 < 256; ++i2) {
   byteToHex.push((i2 + 256).toString(16).slice(1));
@@ -7105,7 +7106,7 @@ function unsafeStringify(arr, offset = 0) {
   return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
 }
 
-// node_modules/uuid/dist/esm-browser/rng.js
+// node_modules/uuid/dist/rng.js
 var getRandomValues;
 var rnds8 = new Uint8Array(16);
 function rng() {
@@ -7118,15 +7119,12 @@ function rng() {
   return getRandomValues(rnds8);
 }
 
-// node_modules/uuid/dist/esm-browser/native.js
+// node_modules/uuid/dist/native.js
 var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
 var native_default = { randomUUID };
 
-// node_modules/uuid/dist/esm-browser/v4.js
-function v4(options, buf, offset) {
-  if (native_default.randomUUID && !buf && !options) {
-    return native_default.randomUUID();
-  }
+// node_modules/uuid/dist/v4.js
+function _v4(options, buf, offset) {
   options = options || {};
   const rnds = options.random ?? options.rng?.() ?? rng();
   if (rnds.length < 16) {
@@ -7146,6 +7144,12 @@ function v4(options, buf, offset) {
   }
   return unsafeStringify(rnds);
 }
+function v4(options, buf, offset) {
+  if (native_default.randomUUID && !buf && !options) {
+    return native_default.randomUUID();
+  }
+  return _v4(options, buf, offset);
+}
 var v4_default = v4;
 
 // src/api/checkoutexternal/runtime.ts
@@ -7533,6 +7537,30 @@ function BillingCreditResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/BillingPlanCreditGrantResponseData.ts
+function BillingPlanCreditGrantResponseDataFromJSON(json) {
+  return BillingPlanCreditGrantResponseDataFromJSONTyped(json, false);
+}
+function BillingPlanCreditGrantResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    createdAt: new Date(json["created_at"]),
+    creditAmount: json["credit_amount"],
+    creditId: json["credit_id"],
+    creditName: json["credit_name"],
+    creditPluralName: json["credit_plural_name"] == null ? void 0 : json["credit_plural_name"],
+    creditSingularName: json["credit_singular_name"] == null ? void 0 : json["credit_singular_name"],
+    id: json["id"],
+    planId: json["plan_id"],
+    planName: json["plan_name"],
+    resetCadence: json["reset_cadence"],
+    resetStart: json["reset_start"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
 // src/api/checkoutexternal/models/BillingProductPriceTierResponseData.ts
 function BillingProductPriceTierResponseDataFromJSON(json) {
   return BillingProductPriceTierResponseDataFromJSONTyped(json, false);
@@ -8447,6 +8475,63 @@ function CustomPlanConfigFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/CreditGrantDetail.ts
+function CreditGrantDetailFromJSON(json) {
+  return CreditGrantDetailFromJSONTyped(json, false);
+}
+function CreditGrantDetailFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    creditTypeIcon: json["credit_type_icon"] == null ? void 0 : json["credit_type_icon"],
+    expiresAt: json["expires_at"] == null ? void 0 : new Date(json["expires_at"]),
+    grantReason: json["grant_reason"],
+    quantity: json["quantity"]
+  };
+}
+
+// src/api/checkoutexternal/models/FeatureUsageResponseData.ts
+function FeatureUsageResponseDataFromJSON(json) {
+  return FeatureUsageResponseDataFromJSONTyped(json, false);
+}
+function FeatureUsageResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    access: json["access"],
+    allocation: json["allocation"] == null ? void 0 : json["allocation"],
+    allocationType: json["allocation_type"],
+    companyOverride: json["company_override"] == null ? void 0 : CompanyOverrideResponseDataFromJSON(json["company_override"]),
+    creditConsumptionRate: json["credit_consumption_rate"] == null ? void 0 : json["credit_consumption_rate"],
+    creditGrantCounts: json["credit_grant_counts"] == null ? void 0 : json["credit_grant_counts"],
+    creditGrantDetails: json["credit_grant_details"] == null ? void 0 : json["credit_grant_details"].map(
+      CreditGrantDetailFromJSON
+    ),
+    creditGrantReason: json["credit_grant_reason"] == null ? void 0 : json["credit_grant_reason"],
+    creditRemaining: json["credit_remaining"] == null ? void 0 : json["credit_remaining"],
+    creditTotal: json["credit_total"] == null ? void 0 : json["credit_total"],
+    creditTypeIcon: json["credit_type_icon"] == null ? void 0 : json["credit_type_icon"],
+    creditUsed: json["credit_used"] == null ? void 0 : json["credit_used"],
+    entitlementExpirationDate: json["entitlement_expiration_date"] == null ? void 0 : new Date(json["entitlement_expiration_date"]),
+    entitlementId: json["entitlement_id"],
+    entitlementSource: json["entitlement_source"] == null ? void 0 : json["entitlement_source"],
+    entitlementType: json["entitlement_type"],
+    feature: json["feature"] == null ? void 0 : FeatureDetailResponseDataFromJSON(json["feature"]),
+    metricResetAt: json["metric_reset_at"] == null ? void 0 : new Date(json["metric_reset_at"]),
+    monthReset: json["month_reset"] == null ? void 0 : json["month_reset"],
+    monthlyUsageBasedPrice: json["monthly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["monthly_usage_based_price"]),
+    period: json["period"] == null ? void 0 : json["period"],
+    plan: json["plan"] == null ? void 0 : PlanResponseDataFromJSON(json["plan"]),
+    planEntitlement: json["plan_entitlement"] == null ? void 0 : PlanEntitlementResponseDataFromJSON(json["plan_entitlement"]),
+    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"])
+  };
+}
+
 // src/api/checkoutexternal/models/CompanyPlanDetailResponseData.ts
 function CompanyPlanDetailResponseDataFromJSON(json) {
   return CompanyPlanDetailResponseDataFromJSONTyped(json, false);
@@ -8489,6 +8574,9 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     planType: json["plan_type"],
     trialDays: json["trial_days"] == null ? void 0 : json["trial_days"],
     updatedAt: new Date(json["updated_at"]),
+    usageViolations: json["usage_violations"].map(
+      FeatureUsageResponseDataFromJSON
+    ),
     valid: json["valid"],
     yearlyPrice: json["yearly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["yearly_price"])
   };
@@ -8588,6 +8676,9 @@ function PlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     icon: json["icon"],
     id: json["id"],
+    includedCreditGrants: json["included_credit_grants"] == null ? void 0 : json["included_credit_grants"].map(
+      BillingPlanCreditGrantResponseDataFromJSON
+    ),
     isDefault: json["is_default"],
     isFree: json["is_free"],
     isTrialable: json["is_trialable"],
@@ -8699,62 +8790,6 @@ function ComponentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
-// src/api/checkoutexternal/models/CreditGrantDetail.ts
-function CreditGrantDetailFromJSON(json) {
-  return CreditGrantDetailFromJSONTyped(json, false);
-}
-function CreditGrantDetailFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    creditTypeIcon: json["credit_type_icon"] == null ? void 0 : json["credit_type_icon"],
-    expiresAt: json["expires_at"] == null ? void 0 : new Date(json["expires_at"]),
-    grantReason: json["grant_reason"],
-    quantity: json["quantity"]
-  };
-}
-
-// src/api/checkoutexternal/models/FeatureUsageResponseData.ts
-function FeatureUsageResponseDataFromJSON(json) {
-  return FeatureUsageResponseDataFromJSONTyped(json, false);
-}
-function FeatureUsageResponseDataFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    access: json["access"],
-    allocation: json["allocation"] == null ? void 0 : json["allocation"],
-    allocationType: json["allocation_type"],
-    companyOverride: json["company_override"] == null ? void 0 : CompanyOverrideResponseDataFromJSON(json["company_override"]),
-    creditGrantCounts: json["credit_grant_counts"] == null ? void 0 : json["credit_grant_counts"],
-    creditGrantDetails: json["credit_grant_details"] == null ? void 0 : json["credit_grant_details"].map(
-      CreditGrantDetailFromJSON
-    ),
-    creditGrantReason: json["credit_grant_reason"] == null ? void 0 : json["credit_grant_reason"],
-    creditRemaining: json["credit_remaining"] == null ? void 0 : json["credit_remaining"],
-    creditTotal: json["credit_total"] == null ? void 0 : json["credit_total"],
-    creditTypeIcon: json["credit_type_icon"] == null ? void 0 : json["credit_type_icon"],
-    creditUsed: json["credit_used"] == null ? void 0 : json["credit_used"],
-    entitlementExpirationDate: json["entitlement_expiration_date"] == null ? void 0 : new Date(json["entitlement_expiration_date"]),
-    entitlementId: json["entitlement_id"],
-    entitlementSource: json["entitlement_source"] == null ? void 0 : json["entitlement_source"],
-    entitlementType: json["entitlement_type"],
-    feature: json["feature"] == null ? void 0 : FeatureDetailResponseDataFromJSON(json["feature"]),
-    metricResetAt: json["metric_reset_at"] == null ? void 0 : new Date(json["metric_reset_at"]),
-    monthReset: json["month_reset"] == null ? void 0 : json["month_reset"],
-    monthlyUsageBasedPrice: json["monthly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["monthly_usage_based_price"]),
-    period: json["period"] == null ? void 0 : json["period"],
-    plan: json["plan"] == null ? void 0 : PlanResponseDataFromJSON(json["plan"]),
-    planEntitlement: json["plan_entitlement"] == null ? void 0 : PlanEntitlementResponseDataFromJSON(json["plan_entitlement"]),
-    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"])
-  };
-}
-
 // src/api/checkoutexternal/models/FeatureUsageDetailResponseData.ts
 function FeatureUsageDetailResponseDataFromJSON(json) {
   return FeatureUsageDetailResponseDataFromJSONTyped(json, false);
@@ -8804,6 +8839,7 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     defaultPlan: json["default_plan"] == null ? void 0 : PlanDetailResponseDataFromJSON(json["default_plan"]),
     featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
     showPeriodToggle: json["show_period_toggle"],
+    showZeroPriceAsFree: json["show_zero_price_as_free"],
     stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
     subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"]),
     trialPaymentMethodRequired: json["trial_payment_method_required"] == null ? void 0 : json["trial_payment_method_required"],
@@ -10356,7 +10392,8 @@ function PublicPlansResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       CompatiblePlansFromJSON2
     ),
     capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON2(json["capabilities"]),
-    showPeriodToggle: json["show_period_toggle"]
+    showPeriodToggle: json["show_period_toggle"],
+    showZeroPriceAsFree: json["show_zero_price_as_free"]
   };
 }
 
@@ -10554,7 +10591,7 @@ var EmbedProvider = ({
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.5.0",
+      "X-Schematic-Components-Version": "1.6.1",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10820,17 +10857,15 @@ var EmbedProvider = ({
     const colorMode = darkModeQuery.matches ? "dark" : "light";
     dispatch({
       type: "UPDATE_SETTINGS",
-      settings: {
-        theme: {
-          colorMode
-        }
-      }
+      settings: { theme: { colorMode } },
+      update: true
     });
     function darkModeQueryHandler(event) {
       const newColorMode = event.matches ? "dark" : "light";
       dispatch({
         type: "UPDATE_SETTINGS",
-        settings: { theme: { colorMode: newColorMode } }
+        settings: { theme: { colorMode: newColorMode } },
+        update: true
       });
     }
     darkModeQuery.addEventListener("change", darkModeQueryHandler);
@@ -10883,8 +10918,9 @@ var EmbedProvider = ({
     }
   }, [state.accessToken, apiConfig, customHeaders]);
   (0, import_react12.useEffect)(() => {
-    const providedSettings = { ...options.settings || {} };
-    updateSettings(providedSettings, { update: false });
+    if (options.settings) {
+      updateSettings(options.settings, { update: true });
+    }
   }, [options.settings, updateSettings]);
   (0, import_react12.useEffect)(() => {
     function planChangedHandler(event) {
@@ -12779,6 +12815,10 @@ var Sidebar = ({
     () => creditBundles.filter((bundle) => bundle.count > 0),
     [creditBundles]
   );
+  const discountApplied = (0, import_react27.useMemo)(
+    () => promoCode && (amountOff > 0 || percentOff > 0),
+    [promoCode, amountOff, percentOff]
+  );
   const handleCheckout = (0, import_react27.useCallback)(async () => {
     const planId = selectedPlan?.id;
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
@@ -12845,7 +12885,7 @@ var Sidebar = ({
           },
           []
         ),
-        skipTrial: !willTrialWithoutPaymentMethod,
+        skipTrial: !shouldTrial,
         ...paymentMethodId && { paymentMethodId },
         ...promoCode && { promoCode }
       });
@@ -12871,7 +12911,7 @@ var Sidebar = ({
     setLayout,
     payInAdvanceEntitlements,
     addOnUsageBasedEntitlements,
-    willTrialWithoutPaymentMethod,
+    shouldTrial,
     promoCode
   ]);
   const handleUnsubscribe = (0, import_react27.useCallback)(async () => {
@@ -13248,7 +13288,7 @@ var Sidebar = ({
             $width: "100%",
             $padding: "1.5rem",
             children: [
-              promoCode && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              discountApplied && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -13920,10 +13960,18 @@ var Plan = ({
   const [entitlementCounts, setEntitlementCounts] = (0, import_react29.useState)(
     () => plans.reduce(entitlementCountsReducer, {})
   );
-  const isTrialing = (0, import_react29.useMemo)(
-    () => isCheckoutData(data) && data.subscription?.status === "trialing",
-    [data]
-  );
+  const { isTrialing, showZeroPriceAsFree } = (0, import_react29.useMemo)(() => {
+    if (isCheckoutData(data)) {
+      return {
+        isTrialing: data.subscription?.status === "trialing",
+        showZeroPriceAsFree: data.showZeroPriceAsFree
+      };
+    }
+    return {
+      isTrialing: false,
+      showZeroPriceAsFree: false
+    };
+  }, [data]);
   const handleToggleShowAll = (id) => {
     setEntitlementCounts((prev2) => {
       const count = prev2[id] ? { ...prev2[id] } : void 0;
@@ -13957,7 +14005,8 @@ var Plan = ({
         const hasUsageBasedEntitlements = plan.entitlements.some(
           (entitlement) => !!entitlement.priceBehavior
         );
-        const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+        const isFreePlan = planPrice === 0;
+        const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
         const headerPriceFontStyle = settings.theme.typography.heading2;
         const count = entitlementCounts[plan.id];
         const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
@@ -14002,10 +14051,10 @@ var Plan = ({
                           $size: headerPriceFontStyle.fontSize,
                           $weight: headerPriceFontStyle.fontWeight,
                           $color: headerPriceFontStyle.color,
-                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
+                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
-                      !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                      !plan.custom && !isFreePlan && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                         Text,
                         {
                           display: "heading2",
@@ -15206,7 +15255,7 @@ var Label = dt.label`
   transition:
     transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
     opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-  color: #cdd6f4;
+  color: ${({ theme }) => theme.colorMode === "dark" ? "#cdd6f4" : "#000000"};
   touch-action: manipulation;
 `;
 var Input2 = dt.input`
@@ -16826,7 +16875,7 @@ var MeteredFeatures = (0, import_react43.forwardRef)(({ className, ...rest }, re
       )
     );
   }, []);
-  const shouldShowFeatures = meteredFeatures.length > 0;
+  const shouldShowFeatures = meteredFeatures.length > 0 || creditGroups.length > 0;
   if (!shouldShowFeatures) {
     return null;
   }
@@ -17981,6 +18030,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
     canCheckout,
     defaultPlan,
     featureUsage,
+    showZeroPriceAsFree,
     trialPaymentMethodRequired
   } = (0, import_react48.useMemo)(() => {
     if (isCheckoutData(data)) {
@@ -17991,6 +18041,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
         capabilities,
         defaultPlan: defaultPlan2,
         featureUsage: featureUsage2,
+        showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       } = data;
       const creditGroups2 = groupCreditGrants(creditGrants, {
@@ -18020,6 +18071,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
         canCheckout: capabilities?.checkout ?? true,
         defaultPlan: defaultPlan2,
         featureUsage: featureUsage2?.features || [],
+        showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       };
     }
@@ -18032,6 +18084,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
       canCheckout: false,
       defaultPlan: void 0,
       featureUsage: [],
+      showZeroPriceAsFree: false,
       trialPaymentMethodRequired: false
     };
   }, [data]);
@@ -18056,7 +18109,8 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
       willSubscriptionCancel: willSubscriptionCancel2
     };
   }, [billingSubscription]);
-  const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
+  const isFreePlan = currentPlan?.planPrice === 0;
+  const isUsageBasedPlan = isFreePlan && usageBasedEntitlements.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       Notice,
@@ -18130,13 +18184,13 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
                     Text,
                     {
                       display: isUsageBasedPlan ? "heading3" : props.header.price.fontStyle,
-                      children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
+                      children: isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(
                         currentPlan.planPrice,
                         subscriptionCurrency
                       )
                     }
                   ),
-                  !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("sub", { children: [
+                  !isFreePlan && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("sub", { children: [
                     "/",
                     shortenPeriod(currentPlan.planPeriod)
                   ] }) })
@@ -18695,7 +18749,8 @@ var Plan2 = ({
     isTrialSubscription,
     willSubscriptionCancel,
     isStandalone,
-    showCallToAction
+    showCallToAction,
+    showZeroPriceAsFree
   } = (0, import_react50.useMemo)(() => {
     if (isCheckoutData(data)) {
       const billingSubscription = data.company?.billingSubscription;
@@ -18707,7 +18762,8 @@ var Plan2 = ({
         isTrialSubscription: isTrialSubscription2,
         willSubscriptionCancel: willSubscriptionCancel2,
         isStandalone: false,
-        showCallToAction: true
+        showCallToAction: true,
+        showZeroPriceAsFree: data.showZeroPriceAsFree
       };
     }
     return {
@@ -18716,7 +18772,8 @@ var Plan2 = ({
       isTrialSubscription: false,
       willSubscriptionCancel: false,
       isStandalone: true,
-      showCallToAction: typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function"
+      showCallToAction: typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function",
+      showZeroPriceAsFree: false
     };
   }, [data, sharedProps.callToActionUrl, sharedProps.onCallToAction]);
   const callToActionTarget = (0, import_react50.useMemo)(() => {
@@ -18744,7 +18801,8 @@ var Plan2 = ({
   const hasUsageBasedEntitlements = plan.entitlements.some(
     (entitlement) => !!entitlement.priceBehavior
   );
-  const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+  const isFreePlan = planPrice === 0;
+  const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
   const headerPriceFontStyle = settings.theme.typography[layout.plans.name.fontStyle];
   const count = entitlementCounts[plan.id];
   const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
@@ -18786,8 +18844,8 @@ var Plan2 = ({
                   $weight: headerPriceFontStyle.fontWeight,
                   $color: headerPriceFontStyle.color,
                   children: [
-                    plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency),
-                    !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("sub", { children: [
+                    plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(planPrice ?? 0, planCurrency),
+                    !plan.custom && !isFreePlan && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("sub", { children: [
                       "/",
                       selectedPeriod
                     ] })
@@ -19008,14 +19066,14 @@ var resolveDesignProps8 = (props) => {
       },
       showInclusionText: props.plans?.showInclusionText ?? true,
       showFeatureIcons: props.plans?.showFeatureIcons ?? true,
-      showFeatureDescriptions: props.plans?.showFeatureDescriptions ?? true,
+      showFeatureDescriptions: props.plans?.showFeatureDescriptions ?? false,
       showEntitlements: props.plans?.showEntitlements ?? true
     },
     addOns: {
       isVisible: props.addOns?.isVisible ?? true,
       showDescription: props.addOns?.showDescription ?? true,
       showFeatureIcons: props.addOns?.showFeatureIcons ?? true,
-      showFeatureDescriptions: props.plans?.showFeatureDescriptions ?? true,
+      showFeatureDescriptions: props.plans?.showFeatureDescriptions ?? false,
       showEntitlements: props.addOns?.showEntitlements ?? true
     },
     upgrade: {
@@ -23857,7 +23915,10 @@ var SchematicEmbed = ({ id, accessToken }) => {
         );
         const ast = getEditorState(json);
         if (ast) {
-          updateSettings({ ...ast.ROOT.props.settings }, { update: false });
+          const settings = ast.ROOT.props.settings;
+          const { colorMode, ...theme2 } = settings.theme;
+          const updated = { mode: settings.mode, theme: theme2, badge: settings.badge };
+          updateSettings(updated, { update: true });
           nodes.push(...parseEditorState(ast));
           setChildren(nodes.map(renderer));
         }

package/dist/schematic-components.d.ts

@@ -331,6 +331,97 @@ declare interface BillingCreditResponseData_2 {
     updatedAt: Date;
 }
 
+/**
+ * Schematic API
+ * Schematic API
+ *
+ * The version of the OpenAPI document: 0.1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ *
+ * @export
+ * @interface BillingPlanCreditGrantResponseData
+ */
+declare interface BillingPlanCreditGrantResponseData {
+    /**
+     *
+     * @type {Date}
+     * @memberof BillingPlanCreditGrantResponseData
+     */
+    createdAt: Date;
+    /**
+     *
+     * @type {number}
+     * @memberof BillingPlanCreditGrantResponseData
+     */
+    creditAmount: number;
+    /**
+     *
+     * @type {string}
+     * @memberof BillingPlanCreditGrantResponseData
+     */
+    creditId: string;
+    /**
+     *
+     * @type {string}
+     * @memberof BillingPlanCreditGrantResponseData
+     */
+    creditName: string;
+    /**
+     *
+     * @type {string}
+     * @memberof BillingPlanCreditGrantResponseData
+     */
+    creditPluralName?: string | null;
+    /**
+     *
+     * @type {string}
+     * @memberof BillingPlanCreditGrantResponseData
+     */
+    creditSingularName?: string | null;
+    /**
+     *
+     * @type {string}
+     * @memberof BillingPlanCreditGrantResponseData
+     */
+    id: string;
+    /**
+     *
+     * @type {string}
+     * @memberof BillingPlanCreditGrantResponseData
+     */
+    planId: string;
+    /**
+     *
+     * @type {string}
+     * @memberof BillingPlanCreditGrantResponseData
+     */
+    planName: string;
+    /**
+     *
+     * @type {string}
+     * @memberof BillingPlanCreditGrantResponseData
+     */
+    resetCadence: string;
+    /**
+     *
+     * @type {string}
+     * @memberof BillingPlanCreditGrantResponseData
+     */
+    resetStart: string;
+    /**
+     *
+     * @type {Date}
+     * @memberof BillingPlanCreditGrantResponseData
+     */
+    updatedAt: Date;
+}
+
 /**
  * Schematic API
  * Schematic API
@@ -1967,7 +2058,7 @@ export declare interface ColumnProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 /**
- * The returned resource
+ *
  * @export
  * @interface CompanyCustomerBalance
  */
@@ -2485,6 +2576,12 @@ declare interface CompanyPlanDetailResponseData {
      * @memberof CompanyPlanDetailResponseData
      */
     updatedAt: Date;
+    /**
+     *
+     * @type {Array<FeatureUsageResponseData>}
+     * @memberof CompanyPlanDetailResponseData
+     */
+    usageViolations: Array<FeatureUsageResponseData>;
     /**
      *
      * @type {boolean}
@@ -2826,7 +2923,7 @@ declare interface ComponentCheckoutSettings {
 }
 
 /**
- * The returned resource
+ *
  * @export
  * @interface ComponentHydrateResponseData
  */
@@ -2909,6 +3006,12 @@ declare interface ComponentHydrateResponseData {
      * @memberof ComponentHydrateResponseData
      */
     showPeriodToggle: boolean;
+    /**
+     *
+     * @type {boolean}
+     * @memberof ComponentHydrateResponseData
+     */
+    showZeroPriceAsFree: boolean;
     /**
      *
      * @type {StripeEmbedInfo}
@@ -4552,6 +4655,12 @@ declare interface FeatureUsageResponseData {
      * @memberof FeatureUsageResponseData
      */
     companyOverride?: CompanyOverrideResponseData;
+    /**
+     * The rate at which credits are consumed per unit of usage
+     * @type {number}
+     * @memberof FeatureUsageResponseData
+     */
+    creditConsumptionRate?: number | null;
     /**
      *
      * @type {{ [key: string]: number; }}
@@ -5252,7 +5361,7 @@ declare interface ListInvoicesParams {
  */
 declare interface ListInvoicesResponse {
     /**
-     * The returned resources
+     *
      * @type {Array<InvoiceResponseData>}
      * @memberof ListInvoicesResponse
      */
@@ -5344,7 +5453,7 @@ export declare type PaymentMethodProps = DesignProps_5;
  * Do not edit the class manually.
  */
 /**
- * The created resource
+ *
  * @export
  * @interface PaymentMethodResponseData
  */
@@ -5727,6 +5836,12 @@ declare interface PlanDetailResponseData {
      * @memberof PlanDetailResponseData
      */
     id: string;
+    /**
+     *
+     * @type {Array<BillingPlanCreditGrantResponseData>}
+     * @memberof PlanDetailResponseData
+     */
+    includedCreditGrants?: Array<BillingPlanCreditGrantResponseData>;
     /**
      *
      * @type {boolean}
@@ -6604,7 +6719,7 @@ declare interface PreviewObjectResponseData_2 {
 }
 
 /**
- * The created resource
+ *
  * @export
  * @interface PreviewSubscriptionChangeResponseData
  */
@@ -6819,7 +6934,7 @@ export declare interface ProgressBarProps extends React.ComponentPropsWithoutRef
 export declare const progressColorMap: ("blue" | "red" | "yellow")[];
 
 /**
- * The returned resource
+ *
  * @export
  * @interface PublicPlansResponseData
  */
@@ -6854,6 +6969,12 @@ declare interface PublicPlansResponseData {
      * @memberof PublicPlansResponseData
      */
     showPeriodToggle: boolean;
+    /**
+     *
+     * @type {boolean}
+     * @memberof PublicPlansResponseData
+     */
+    showZeroPriceAsFree: boolean;
 }
 
 declare interface RequestContext {
@@ -7452,7 +7573,7 @@ declare type SelectedPlan = Plan & {
  * Do not edit the class manually.
  */
 /**
- * The returned resource
+ *
  * @export
  * @interface SetupIntentResponseData
  */

package/dist/schematic-components.esm.js

@@ -6739,6 +6739,7 @@ var en_default = {
     Expired: "Expired",
     "Expires in X months": "Expires in {{months}} mo",
     Expires: "Expires {{date}}",
+    Free: "Free",
     "Hide all": "Hide all",
     "Hide balance details": "Hide balance details",
     "Hide details": "Hide details",
@@ -7037,7 +7038,7 @@ import {
   useState as useState2
 } from "react";
 
-// node_modules/uuid/dist/esm-browser/stringify.js
+// node_modules/uuid/dist/stringify.js
 var byteToHex = [];
 for (let i2 = 0; i2 < 256; ++i2) {
   byteToHex.push((i2 + 256).toString(16).slice(1));
@@ -7046,7 +7047,7 @@ function unsafeStringify(arr, offset = 0) {
   return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
 }
 
-// node_modules/uuid/dist/esm-browser/rng.js
+// node_modules/uuid/dist/rng.js
 var getRandomValues;
 var rnds8 = new Uint8Array(16);
 function rng() {
@@ -7059,15 +7060,12 @@ function rng() {
   return getRandomValues(rnds8);
 }
 
-// node_modules/uuid/dist/esm-browser/native.js
+// node_modules/uuid/dist/native.js
 var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
 var native_default = { randomUUID };
 
-// node_modules/uuid/dist/esm-browser/v4.js
-function v4(options, buf, offset) {
-  if (native_default.randomUUID && !buf && !options) {
-    return native_default.randomUUID();
-  }
+// node_modules/uuid/dist/v4.js
+function _v4(options, buf, offset) {
   options = options || {};
   const rnds = options.random ?? options.rng?.() ?? rng();
   if (rnds.length < 16) {
@@ -7087,6 +7085,12 @@ function v4(options, buf, offset) {
   }
   return unsafeStringify(rnds);
 }
+function v4(options, buf, offset) {
+  if (native_default.randomUUID && !buf && !options) {
+    return native_default.randomUUID();
+  }
+  return _v4(options, buf, offset);
+}
 var v4_default = v4;
 
 // src/api/checkoutexternal/runtime.ts
@@ -7474,6 +7478,30 @@ function BillingCreditResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/BillingPlanCreditGrantResponseData.ts
+function BillingPlanCreditGrantResponseDataFromJSON(json) {
+  return BillingPlanCreditGrantResponseDataFromJSONTyped(json, false);
+}
+function BillingPlanCreditGrantResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    createdAt: new Date(json["created_at"]),
+    creditAmount: json["credit_amount"],
+    creditId: json["credit_id"],
+    creditName: json["credit_name"],
+    creditPluralName: json["credit_plural_name"] == null ? void 0 : json["credit_plural_name"],
+    creditSingularName: json["credit_singular_name"] == null ? void 0 : json["credit_singular_name"],
+    id: json["id"],
+    planId: json["plan_id"],
+    planName: json["plan_name"],
+    resetCadence: json["reset_cadence"],
+    resetStart: json["reset_start"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
 // src/api/checkoutexternal/models/BillingProductPriceTierResponseData.ts
 function BillingProductPriceTierResponseDataFromJSON(json) {
   return BillingProductPriceTierResponseDataFromJSONTyped(json, false);
@@ -8388,6 +8416,63 @@ function CustomPlanConfigFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/CreditGrantDetail.ts
+function CreditGrantDetailFromJSON(json) {
+  return CreditGrantDetailFromJSONTyped(json, false);
+}
+function CreditGrantDetailFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    creditTypeIcon: json["credit_type_icon"] == null ? void 0 : json["credit_type_icon"],
+    expiresAt: json["expires_at"] == null ? void 0 : new Date(json["expires_at"]),
+    grantReason: json["grant_reason"],
+    quantity: json["quantity"]
+  };
+}
+
+// src/api/checkoutexternal/models/FeatureUsageResponseData.ts
+function FeatureUsageResponseDataFromJSON(json) {
+  return FeatureUsageResponseDataFromJSONTyped(json, false);
+}
+function FeatureUsageResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    access: json["access"],
+    allocation: json["allocation"] == null ? void 0 : json["allocation"],
+    allocationType: json["allocation_type"],
+    companyOverride: json["company_override"] == null ? void 0 : CompanyOverrideResponseDataFromJSON(json["company_override"]),
+    creditConsumptionRate: json["credit_consumption_rate"] == null ? void 0 : json["credit_consumption_rate"],
+    creditGrantCounts: json["credit_grant_counts"] == null ? void 0 : json["credit_grant_counts"],
+    creditGrantDetails: json["credit_grant_details"] == null ? void 0 : json["credit_grant_details"].map(
+      CreditGrantDetailFromJSON
+    ),
+    creditGrantReason: json["credit_grant_reason"] == null ? void 0 : json["credit_grant_reason"],
+    creditRemaining: json["credit_remaining"] == null ? void 0 : json["credit_remaining"],
+    creditTotal: json["credit_total"] == null ? void 0 : json["credit_total"],
+    creditTypeIcon: json["credit_type_icon"] == null ? void 0 : json["credit_type_icon"],
+    creditUsed: json["credit_used"] == null ? void 0 : json["credit_used"],
+    entitlementExpirationDate: json["entitlement_expiration_date"] == null ? void 0 : new Date(json["entitlement_expiration_date"]),
+    entitlementId: json["entitlement_id"],
+    entitlementSource: json["entitlement_source"] == null ? void 0 : json["entitlement_source"],
+    entitlementType: json["entitlement_type"],
+    feature: json["feature"] == null ? void 0 : FeatureDetailResponseDataFromJSON(json["feature"]),
+    metricResetAt: json["metric_reset_at"] == null ? void 0 : new Date(json["metric_reset_at"]),
+    monthReset: json["month_reset"] == null ? void 0 : json["month_reset"],
+    monthlyUsageBasedPrice: json["monthly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["monthly_usage_based_price"]),
+    period: json["period"] == null ? void 0 : json["period"],
+    plan: json["plan"] == null ? void 0 : PlanResponseDataFromJSON(json["plan"]),
+    planEntitlement: json["plan_entitlement"] == null ? void 0 : PlanEntitlementResponseDataFromJSON(json["plan_entitlement"]),
+    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"])
+  };
+}
+
 // src/api/checkoutexternal/models/CompanyPlanDetailResponseData.ts
 function CompanyPlanDetailResponseDataFromJSON(json) {
   return CompanyPlanDetailResponseDataFromJSONTyped(json, false);
@@ -8430,6 +8515,9 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     planType: json["plan_type"],
     trialDays: json["trial_days"] == null ? void 0 : json["trial_days"],
     updatedAt: new Date(json["updated_at"]),
+    usageViolations: json["usage_violations"].map(
+      FeatureUsageResponseDataFromJSON
+    ),
     valid: json["valid"],
     yearlyPrice: json["yearly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["yearly_price"])
   };
@@ -8529,6 +8617,9 @@ function PlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     icon: json["icon"],
     id: json["id"],
+    includedCreditGrants: json["included_credit_grants"] == null ? void 0 : json["included_credit_grants"].map(
+      BillingPlanCreditGrantResponseDataFromJSON
+    ),
     isDefault: json["is_default"],
     isFree: json["is_free"],
     isTrialable: json["is_trialable"],
@@ -8640,62 +8731,6 @@ function ComponentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
-// src/api/checkoutexternal/models/CreditGrantDetail.ts
-function CreditGrantDetailFromJSON(json) {
-  return CreditGrantDetailFromJSONTyped(json, false);
-}
-function CreditGrantDetailFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    creditTypeIcon: json["credit_type_icon"] == null ? void 0 : json["credit_type_icon"],
-    expiresAt: json["expires_at"] == null ? void 0 : new Date(json["expires_at"]),
-    grantReason: json["grant_reason"],
-    quantity: json["quantity"]
-  };
-}
-
-// src/api/checkoutexternal/models/FeatureUsageResponseData.ts
-function FeatureUsageResponseDataFromJSON(json) {
-  return FeatureUsageResponseDataFromJSONTyped(json, false);
-}
-function FeatureUsageResponseDataFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    access: json["access"],
-    allocation: json["allocation"] == null ? void 0 : json["allocation"],
-    allocationType: json["allocation_type"],
-    companyOverride: json["company_override"] == null ? void 0 : CompanyOverrideResponseDataFromJSON(json["company_override"]),
-    creditGrantCounts: json["credit_grant_counts"] == null ? void 0 : json["credit_grant_counts"],
-    creditGrantDetails: json["credit_grant_details"] == null ? void 0 : json["credit_grant_details"].map(
-      CreditGrantDetailFromJSON
-    ),
-    creditGrantReason: json["credit_grant_reason"] == null ? void 0 : json["credit_grant_reason"],
-    creditRemaining: json["credit_remaining"] == null ? void 0 : json["credit_remaining"],
-    creditTotal: json["credit_total"] == null ? void 0 : json["credit_total"],
-    creditTypeIcon: json["credit_type_icon"] == null ? void 0 : json["credit_type_icon"],
-    creditUsed: json["credit_used"] == null ? void 0 : json["credit_used"],
-    entitlementExpirationDate: json["entitlement_expiration_date"] == null ? void 0 : new Date(json["entitlement_expiration_date"]),
-    entitlementId: json["entitlement_id"],
-    entitlementSource: json["entitlement_source"] == null ? void 0 : json["entitlement_source"],
-    entitlementType: json["entitlement_type"],
-    feature: json["feature"] == null ? void 0 : FeatureDetailResponseDataFromJSON(json["feature"]),
-    metricResetAt: json["metric_reset_at"] == null ? void 0 : new Date(json["metric_reset_at"]),
-    monthReset: json["month_reset"] == null ? void 0 : json["month_reset"],
-    monthlyUsageBasedPrice: json["monthly_usage_based_price"] == null ? void 0 : BillingPriceViewFromJSON(json["monthly_usage_based_price"]),
-    period: json["period"] == null ? void 0 : json["period"],
-    plan: json["plan"] == null ? void 0 : PlanResponseDataFromJSON(json["plan"]),
-    planEntitlement: json["plan_entitlement"] == null ? void 0 : PlanEntitlementResponseDataFromJSON(json["plan_entitlement"]),
-    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"])
-  };
-}
-
 // src/api/checkoutexternal/models/FeatureUsageDetailResponseData.ts
 function FeatureUsageDetailResponseDataFromJSON(json) {
   return FeatureUsageDetailResponseDataFromJSONTyped(json, false);
@@ -8745,6 +8780,7 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     defaultPlan: json["default_plan"] == null ? void 0 : PlanDetailResponseDataFromJSON(json["default_plan"]),
     featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
     showPeriodToggle: json["show_period_toggle"],
+    showZeroPriceAsFree: json["show_zero_price_as_free"],
     stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
     subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"]),
     trialPaymentMethodRequired: json["trial_payment_method_required"] == null ? void 0 : json["trial_payment_method_required"],
@@ -10297,7 +10333,8 @@ function PublicPlansResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       CompatiblePlansFromJSON2
     ),
     capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON2(json["capabilities"]),
-    showPeriodToggle: json["show_period_toggle"]
+    showPeriodToggle: json["show_period_toggle"],
+    showZeroPriceAsFree: json["show_zero_price_as_free"]
   };
 }
 
@@ -10495,7 +10532,7 @@ var EmbedProvider = ({
   });
   const customHeaders = useMemo3(
     () => ({
-      "X-Schematic-Components-Version": "1.5.0",
+      "X-Schematic-Components-Version": "1.6.1",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10761,17 +10798,15 @@ var EmbedProvider = ({
     const colorMode = darkModeQuery.matches ? "dark" : "light";
     dispatch({
       type: "UPDATE_SETTINGS",
-      settings: {
-        theme: {
-          colorMode
-        }
-      }
+      settings: { theme: { colorMode } },
+      update: true
     });
     function darkModeQueryHandler(event) {
       const newColorMode = event.matches ? "dark" : "light";
       dispatch({
         type: "UPDATE_SETTINGS",
-        settings: { theme: { colorMode: newColorMode } }
+        settings: { theme: { colorMode: newColorMode } },
+        update: true
       });
     }
     darkModeQuery.addEventListener("change", darkModeQueryHandler);
@@ -10824,8 +10859,9 @@ var EmbedProvider = ({
     }
   }, [state.accessToken, apiConfig, customHeaders]);
   useEffect2(() => {
-    const providedSettings = { ...options.settings || {} };
-    updateSettings(providedSettings, { update: false });
+    if (options.settings) {
+      updateSettings(options.settings, { update: true });
+    }
   }, [options.settings, updateSettings]);
   useEffect2(() => {
     function planChangedHandler(event) {
@@ -12730,6 +12766,10 @@ var Sidebar = ({
     () => creditBundles.filter((bundle) => bundle.count > 0),
     [creditBundles]
   );
+  const discountApplied = useMemo7(
+    () => promoCode && (amountOff > 0 || percentOff > 0),
+    [promoCode, amountOff, percentOff]
+  );
   const handleCheckout = useCallback8(async () => {
     const planId = selectedPlan?.id;
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
@@ -12796,7 +12836,7 @@ var Sidebar = ({
           },
           []
         ),
-        skipTrial: !willTrialWithoutPaymentMethod,
+        skipTrial: !shouldTrial,
         ...paymentMethodId && { paymentMethodId },
         ...promoCode && { promoCode }
       });
@@ -12822,7 +12862,7 @@ var Sidebar = ({
     setLayout,
     payInAdvanceEntitlements,
     addOnUsageBasedEntitlements,
-    willTrialWithoutPaymentMethod,
+    shouldTrial,
     promoCode
   ]);
   const handleUnsubscribe = useCallback8(async () => {
@@ -13199,7 +13239,7 @@ var Sidebar = ({
             $width: "100%",
             $padding: "1.5rem",
             children: [
-              promoCode && /* @__PURE__ */ jsxs9(
+              discountApplied && /* @__PURE__ */ jsxs9(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -13871,10 +13911,18 @@ var Plan = ({
   const [entitlementCounts, setEntitlementCounts] = useState8(
     () => plans.reduce(entitlementCountsReducer, {})
   );
-  const isTrialing = useMemo8(
-    () => isCheckoutData(data) && data.subscription?.status === "trialing",
-    [data]
-  );
+  const { isTrialing, showZeroPriceAsFree } = useMemo8(() => {
+    if (isCheckoutData(data)) {
+      return {
+        isTrialing: data.subscription?.status === "trialing",
+        showZeroPriceAsFree: data.showZeroPriceAsFree
+      };
+    }
+    return {
+      isTrialing: false,
+      showZeroPriceAsFree: false
+    };
+  }, [data]);
   const handleToggleShowAll = (id) => {
     setEntitlementCounts((prev2) => {
       const count = prev2[id] ? { ...prev2[id] } : void 0;
@@ -13908,7 +13956,8 @@ var Plan = ({
         const hasUsageBasedEntitlements = plan.entitlements.some(
           (entitlement) => !!entitlement.priceBehavior
         );
-        const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+        const isFreePlan = planPrice === 0;
+        const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
         const headerPriceFontStyle = settings.theme.typography.heading2;
         const count = entitlementCounts[plan.id];
         const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
@@ -13953,10 +14002,10 @@ var Plan = ({
                           $size: headerPriceFontStyle.fontSize,
                           $weight: headerPriceFontStyle.fontWeight,
                           $color: headerPriceFontStyle.color,
-                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
+                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
-                      !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs14(
+                      !plan.custom && !isFreePlan && /* @__PURE__ */ jsxs14(
                         Text,
                         {
                           display: "heading2",
@@ -15162,7 +15211,7 @@ var Label = dt.label`
   transition:
     transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
     opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-  color: #cdd6f4;
+  color: ${({ theme }) => theme.colorMode === "dark" ? "#cdd6f4" : "#000000"};
   touch-action: manipulation;
 `;
 var Input2 = dt.input`
@@ -16782,7 +16831,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
       )
     );
   }, []);
-  const shouldShowFeatures = meteredFeatures.length > 0;
+  const shouldShowFeatures = meteredFeatures.length > 0 || creditGroups.length > 0;
   if (!shouldShowFeatures) {
     return null;
   }
@@ -17937,6 +17986,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     canCheckout,
     defaultPlan,
     featureUsage,
+    showZeroPriceAsFree,
     trialPaymentMethodRequired
   } = useMemo23(() => {
     if (isCheckoutData(data)) {
@@ -17947,6 +17997,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         capabilities,
         defaultPlan: defaultPlan2,
         featureUsage: featureUsage2,
+        showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       } = data;
       const creditGroups2 = groupCreditGrants(creditGrants, {
@@ -17976,6 +18027,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         canCheckout: capabilities?.checkout ?? true,
         defaultPlan: defaultPlan2,
         featureUsage: featureUsage2?.features || [],
+        showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       };
     }
@@ -17988,6 +18040,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
       canCheckout: false,
       defaultPlan: void 0,
       featureUsage: [],
+      showZeroPriceAsFree: false,
       trialPaymentMethodRequired: false
     };
   }, [data]);
@@ -18012,7 +18065,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
       willSubscriptionCancel: willSubscriptionCancel2
     };
   }, [billingSubscription]);
-  const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
+  const isFreePlan = currentPlan?.planPrice === 0;
+  const isUsageBasedPlan = isFreePlan && usageBasedEntitlements.length > 0;
   return /* @__PURE__ */ jsxs34(Fragment20, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs34(
       Notice,
@@ -18086,13 +18140,13 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                     Text,
                     {
                       display: isUsageBasedPlan ? "heading3" : props.header.price.fontStyle,
-                      children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
+                      children: isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(
                         currentPlan.planPrice,
                         subscriptionCurrency
                       )
                     }
                   ),
-                  !isUsageBasedPlan && /* @__PURE__ */ jsx43(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs34("sub", { children: [
+                  !isFreePlan && /* @__PURE__ */ jsx43(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs34("sub", { children: [
                     "/",
                     shortenPeriod(currentPlan.planPeriod)
                   ] }) })
@@ -18657,7 +18711,8 @@ var Plan2 = ({
     isTrialSubscription,
     willSubscriptionCancel,
     isStandalone,
-    showCallToAction
+    showCallToAction,
+    showZeroPriceAsFree
   } = useMemo25(() => {
     if (isCheckoutData(data)) {
       const billingSubscription = data.company?.billingSubscription;
@@ -18669,7 +18724,8 @@ var Plan2 = ({
         isTrialSubscription: isTrialSubscription2,
         willSubscriptionCancel: willSubscriptionCancel2,
         isStandalone: false,
-        showCallToAction: true
+        showCallToAction: true,
+        showZeroPriceAsFree: data.showZeroPriceAsFree
       };
     }
     return {
@@ -18678,7 +18734,8 @@ var Plan2 = ({
       isTrialSubscription: false,
       willSubscriptionCancel: false,
       isStandalone: true,
-      showCallToAction: typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function"
+      showCallToAction: typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function",
+      showZeroPriceAsFree: false
     };
   }, [data, sharedProps.callToActionUrl, sharedProps.onCallToAction]);
   const callToActionTarget = useMemo25(() => {
@@ -18706,7 +18763,8 @@ var Plan2 = ({
   const hasUsageBasedEntitlements = plan.entitlements.some(
     (entitlement) => !!entitlement.priceBehavior
   );
-  const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+  const isFreePlan = planPrice === 0;
+  const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
   const headerPriceFontStyle = settings.theme.typography[layout.plans.name.fontStyle];
   const count = entitlementCounts[plan.id];
   const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
@@ -18748,8 +18806,8 @@ var Plan2 = ({
                   $weight: headerPriceFontStyle.fontWeight,
                   $color: headerPriceFontStyle.color,
                   children: [
-                    plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency),
-                    !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs37("sub", { children: [
+                    plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(planPrice ?? 0, planCurrency),
+                    !plan.custom && !isFreePlan && /* @__PURE__ */ jsxs37("sub", { children: [
                       "/",
                       selectedPeriod
                     ] })
@@ -18970,14 +19028,14 @@ var resolveDesignProps8 = (props) => {
       },
       showInclusionText: props.plans?.showInclusionText ?? true,
       showFeatureIcons: props.plans?.showFeatureIcons ?? true,
-      showFeatureDescriptions: props.plans?.showFeatureDescriptions ?? true,
+      showFeatureDescriptions: props.plans?.showFeatureDescriptions ?? false,
       showEntitlements: props.plans?.showEntitlements ?? true
     },
     addOns: {
       isVisible: props.addOns?.isVisible ?? true,
       showDescription: props.addOns?.showDescription ?? true,
       showFeatureIcons: props.addOns?.showFeatureIcons ?? true,
-      showFeatureDescriptions: props.plans?.showFeatureDescriptions ?? true,
+      showFeatureDescriptions: props.plans?.showFeatureDescriptions ?? false,
       showEntitlements: props.addOns?.showEntitlements ?? true
     },
     upgrade: {
@@ -23819,7 +23877,10 @@ var SchematicEmbed = ({ id, accessToken }) => {
         );
         const ast = getEditorState(json);
         if (ast) {
-          updateSettings({ ...ast.ROOT.props.settings }, { update: false });
+          const settings = ast.ROOT.props.settings;
+          const { colorMode, ...theme2 } = settings.theme;
+          const updated = { mode: settings.mode, theme: theme2, badge: settings.badge };
+          updateSettings(updated, { update: true });
           nodes.push(...parseEditorState(ast));
           setChildren(nodes.map(renderer));
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -34,32 +34,32 @@
   "dependencies": {
     "@schematichq/schematic-icons": "^0.5.2",
     "@stripe/stripe-js": "^7.9.0",
-    "i18next": "^25.5.0",
+    "i18next": "^25.5.2",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",
     "react-i18next": "^15.7.3",
     "styled-components": "^6.1.19",
-    "uuid": "^11.1.0"
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.34.0",
+    "@eslint/js": "^9.35.0",
     "@eslint/json": "^0.13.2",
     "@eslint/markdown": "^7.2.0",
-    "@microsoft/api-extractor": "^7.52.11",
+    "@microsoft/api-extractor": "^7.52.12",
     "@openapitools/openapi-generator-cli": "^2.23.1",
-    "@stripe/react-stripe-js": "^4.0.0",
+    "@stripe/react-stripe-js": "^4.0.2",
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.20",
     "@types/pako": "^2.0.4",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
     "esbuild": "^0.25.9",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^16.3.0",
+    "globals": "^16.4.0",
     "jest": "^30.1.3",
     "jest-environment-jsdom": "^30.1.2",
     "jest-esbuild": "^0.4.0",
@@ -69,7 +69,7 @@
     "react-dom": "^19.1.1",
     "ts-jest": "^29.4.1",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.42.0"
+    "typescript-eslint": "^8.43.0"
   },
   "peerDependencies": {
     "@stripe/react-stripe-js": ">=3",