npm - @schematichq/schematic-components - Versions diffs - 0.7.4 → 0.7.6 - Mend

@schematichq/schematic-components 0.7.4 → 0.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/schematic-components.cjs.js +143 -232
package/dist/schematic-components.d.ts +22 -3
package/dist/schematic-components.esm.js +143 -232
package/package.json +1 -1

package/dist/schematic-components.cjs.js CHANGED Viewed

@@ -10794,6 +10794,7 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
     currency: json["currency"],
     environmentId: json["environment_id"],
     externalId: json["external_id"],
+    isActive: json["is_active"],
     name: json["name"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
@@ -10853,6 +10854,7 @@ function BillingProductResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     currency: json["currency"],
     environmentId: json["environment_id"],
     externalId: json["external_id"],
+    isActive: json["is_active"],
     name: json["name"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
@@ -11249,6 +11251,7 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       BillingSubscriptionViewFromJSON
     ),
     createdAt: new Date(json["created_at"]),
+    defaultPaymentMethod: json["default_payment_method"] == null ? void 0 : PaymentMethodResponseDataFromJSON(json["default_payment_method"]),
     entityTraits: json["entity_traits"].map(
       EntityTraitDetailResponseDataFromJSON
     ),
@@ -13190,7 +13193,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.4";
+      headers["X-Schematic-Components-Version"] = "0.7.6";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -14447,43 +14450,61 @@ var ProgressBar = ({
 // src/components/ui/text/styles.ts
 var TextPropNames = /* @__PURE__ */ ((TextPropNames2) => {
-  TextPropNames2["Align"] = "$align";
   TextPropNames2["Font"] = "$font";
   TextPropNames2["Size"] = "$size";
   TextPropNames2["Weight"] = "$weight";
   TextPropNames2["Color"] = "$color";
   TextPropNames2["Leading"] = "$leading";
+  TextPropNames2["Align"] = "$align";
   return TextPropNames2;
 })(TextPropNames || {});
-var Text = dt.span.attrs(({ onClick }) => ({
+var Text = dt.span.withConfig({
+  shouldForwardProp: (prop) => prop !== "display"
+}).attrs(({ onClick }) => ({
   ...onClick && { tabIndex: 0 }
-}))`
-  ${({ $font }) => $font && lt`
-      font-family: ${$font}, sans-serif;
-    `};
-  ${({ $size }) => typeof $size !== "undefined" && lt`
-      font-size: ${typeof $size === "number" ? `${$size / TEXT_BASE_SIZE}rem` : $size};
-    `};
-  ${({ $weight }) => typeof $weight !== "undefined" && lt`
-      font-weight: ${$weight};
-      font-variation-settings: "wght" ${$weight};
-    `};
-  ${({ $leading }) => attr("line-height", $leading)};
-  ${({ $align }) => attr("text-align", $align)};
-  color: ${({ $color, theme }) => $color || theme.typography.text.color};
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.primary};
-    outline-offset: 2px;
-  }
-  ${({ onClick }) => onClick && lt`
-      &:hover {
-        cursor: pointer;
-        text-decoration: underline;
+}))(
+  ({
+    display = "text",
+    theme,
+    onClick,
+    $font,
+    $size,
+    $weight,
+    $color,
+    $leading = 1.35,
+    $align
+  }) => {
+    const settings = theme.typography[display];
+    const fontFamily = $font || settings.fontFamily;
+    const fontSize = $size || settings.fontSize;
+    const fontWeight = $weight || settings.fontWeight;
+    const color = $color || settings.color;
+    return lt`
+      font-family: ${fontFamily}, sans-serif;
+      font-size: ${typeof fontSize === "number" ? `${fontSize / TEXT_BASE_SIZE}rem` : fontSize};
+      font-weight: ${fontWeight};
+      font-variation-settings: "wght" ${fontWeight};
+      line-height: ${$leading};
+      color: ${color};
+      ${$align && lt`
+        text-align: ${$align};
+      `};
+      ${onClick && lt`
+        &:hover {
+          cursor: pointer;
+          text-decoration: underline;
+        }
+      `}
+      &:focus-visible {
+        outline: 2px solid ${({ theme: theme2 }) => theme2.primary};
+        outline-offset: 2px;
       }
-    `}
-`;
+    `;
+  }
+);
 // src/components/ui/tooltip/Tooltip.tsx
 var import_debounce = __toESM(require_debounce());
@@ -14770,7 +14791,7 @@ var Container2 = dt.div`
   all: initial;
   box-sizing: border-box;
   display: block;
-  font-size: ${TEXT_BASE_SIZE}px;
+  font-size: 1rem;
   line-height: 1.35;
   width: 100%;
   height: 100%;
@@ -14827,6 +14848,7 @@ var StageButton = ({
   checkoutStages,
   hasAddOns,
   hasPayInAdvanceEntitlements,
+  hasUnstagedChanges,
   isLoading,
   requiresPayment,
   setCheckoutStage,
@@ -14838,7 +14860,7 @@ var StageButton = ({
       EmbedButton,
       {
         type: "button",
-        disabled: isLoading || !canUpdateSubscription,
+        disabled: isLoading || !hasUnstagedChanges || !canUpdateSubscription,
         onClick: checkout,
         isLoading,
         children: t2("Subscribe and close")
@@ -14879,7 +14901,7 @@ var StageButton = ({
         EmbedButton,
         {
           type: "button",
-          disabled: !canUpdateSubscription,
+          disabled: !hasUnstagedChanges || !canUpdateSubscription,
           onClick: async () => {
             checkout();
           },
@@ -15005,7 +15027,7 @@ var StageButton = ({
       EmbedButton,
       {
         type: "button",
-        disabled: isLoading || !canCheckout,
+        disabled: isLoading || !hasUnstagedChanges || !canCheckout,
         onClick: checkout,
         isLoading,
         children: canTrial ? t2("Start trial") : t2("Pay now")
@@ -15209,14 +15231,6 @@ var Sidebar = ({
     }
   }, [t2, api, hydrate, setError, setIsLoading, setLayout]);
   const selectedAddOns = addOns.filter((addOn) => addOn.isSelected);
-  const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
-  const canUpdateSubscription = mode === "edit" || api !== null && (willPlanChange || // TODO: test add-on comparison for finding "changes"
-  selectedAddOns.length !== currentAddOns.length || !selectedAddOns.every(
-    (addOn) => currentAddOns.some((currentAddOn) => addOn.id === currentAddOn.id)
-  ) || payInAdvanceEntitlements.every(
-    ({ quantity, usage }) => quantity >= usage
-  )) && !isLoading;
-  const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
   const {
     changedUsageBasedEntitlements,
     addedUsageBasedEntitlements,
@@ -15273,6 +15287,7 @@ var Sidebar = ({
     currentUsageBasedEntitlements,
     usageBasedEntitlements
   ]);
+  const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
   const removedAddOns = currentAddOns.filter(
     (current) => !selectedAddOns.some((selected) => current.id === selected.id)
   );
@@ -15280,6 +15295,10 @@ var Sidebar = ({
     (selected) => !currentAddOns.some((current) => selected.id === current.id)
   );
   const willAddOnsChange = removedAddOns.length > 0 || addedAddOns.length > 0;
+  const willPayInAdvanceEntitlementsChange = payInAdvanceEntitlements.length > 0 && payInAdvanceEntitlements.some(({ quantity, usage }) => quantity !== usage);
+  const hasUnstagedChanges = willPlanChange || willAddOnsChange || willPayInAdvanceEntitlementsChange;
+  const canUpdateSubscription = mode === "edit" || api !== null && !isLoading;
+  const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
   const isTrialable = selectedPlan?.companyCanTrial;
   const today = /* @__PURE__ */ new Date();
   const trialEndsOn = new Date(today);
@@ -16191,6 +16210,7 @@ var Sidebar = ({
                   checkoutStages,
                   hasAddOns: addOns.length > 0,
                   hasPayInAdvanceEntitlements: payInAdvanceEntitlements.length > 0,
+                  hasUnstagedChanges,
                   isLoading,
                   requiresPayment,
                   setCheckoutStage,
@@ -19568,8 +19588,8 @@ var PaymentMethod = (0, import_react37.forwardRef)(({ children, className, porta
   const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
   const paymentMethod = (0, import_react37.useMemo)(() => {
-    return data.subscription?.paymentMethod;
-  }, [data.subscription?.paymentMethod]);
+    return data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
+  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
   const monthsToExpiration = (0, import_react37.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -19627,10 +19647,10 @@ var PaymentMethodDetails = ({
   const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react38.useState)(false);
   const [paymentMethod, setPaymentMethod] = (0, import_react38.useState)(void 0);
   (0, import_react38.useEffect)(() => {
-    if (data.subscription?.paymentMethod) {
-      setPaymentMethod(data.subscription.paymentMethod);
-    }
-  }, [data.subscription?.paymentMethod]);
+    setPaymentMethod(
+      data.subscription?.paymentMethod || data.company?.defaultPaymentMethod
+    );
+  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
   const monthsToExpiration = (0, import_react38.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -19687,15 +19707,31 @@ var PaymentMethodDetails = ({
         if (setPaymentMethodId) {
           setPaymentMethodId(updatePaymentMethodResponse.data.externalId);
         }
-        if (data.subscription) {
-          setData({
-            ...data,
+        setData({
+          ...data,
+          // Optimistic update
+          // If there is subscription - we have set payment method to subscription
+          ...data.subscription ? {
             subscription: {
               ...data.subscription,
               paymentMethod: updatePaymentMethodResponse.data
             }
-          });
-        }
+          } : {},
+          ...data.company ? {
+            company: {
+              ...data.company,
+              paymentMethods: [
+                updatePaymentMethodResponse.data,
+                ...data.company?.paymentMethods || []
+              ],
+              // Optimistic update
+              // If there is no subscription - we have updated default payment method in company
+              ...data.subscription ? {} : {
+                defaultPaymentMethod: updatePaymentMethodResponse.data
+              }
+            }
+          } : {}
+        });
       } catch {
         setError(t2("Error updating payment method. Please try again."));
       } finally {
@@ -19931,7 +19967,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
   const isTrialSubscription = billingSubscription?.status === "trialing";
   const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
   const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
-  const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
+  const headerPriceFontStyle = isUsageBasedPlan ? "heading3" : props.header.price.fontStyle;
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       Notice,
@@ -19943,32 +19979,12 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            Text,
-            {
-              as: "h3",
-              $font: theme.typography.heading3.fontFamily,
-              $size: theme.typography.heading3.fontSize,
-              $weight: theme.typography.heading3.fontWeight,
-              $color: theme.typography.heading3.color,
-              children: t2("Trial ends in", { days: trialEndDays.toString() })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            Text,
-            {
-              as: "p",
-              $font: theme.typography.text.fontFamily,
-              $size: 0.8125 * theme.typography.text.fontSize,
-              $weight: theme.typography.text.fontWeight,
-              $color: theme.typography.text.color,
-              children: data.trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
-                defaultPlanName: defaultPlan?.name
-              }) : t2("After the trial, cancel no default", {
-                planName: currentPlan?.name
-              })
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "h3", display: "heading3", children: t2("Trial ends in", { days: trialEndDays.toString() }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "p", $size: 0.8125 * theme.typography.text.fontSize, children: data.trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
+            defaultPlanName: defaultPlan?.name
+          }) : t2("After the trial, cancel no default", {
+            planName: currentPlan?.name
+          }) })
         ]
       }
     ) : willSubscriptionCancel && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -19981,35 +19997,15 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            Text,
-            {
-              as: "h3",
-              $font: theme.typography.heading3.fontFamily,
-              $size: theme.typography.heading3.fontSize,
-              $weight: theme.typography.heading3.fontWeight,
-              $color: theme.typography.heading3.color,
-              children: t2("Subscription canceled")
-            }
-          ),
-          billingSubscription?.cancelAt && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            Text,
-            {
-              as: "p",
-              $font: theme.typography.text.fontFamily,
-              $size: 0.8125 * theme.typography.text.fontSize,
-              $weight: theme.typography.text.fontWeight,
-              $color: theme.typography.text.color,
-              children: t2("Access to plan will end on", {
-                date: toPrettyDate(
-                  new Date(billingSubscription.cancelAt * 1e3),
-                  {
-                    month: "numeric"
-                  }
-                )
-              })
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
+          billingSubscription?.cancelAt && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "p", $size: 0.8125 * theme.typography.text.fontSize, children: t2("Access to plan will end on", {
+            date: toPrettyDate(
+              new Date(billingSubscription.cancelAt * 1e3),
+              {
+                month: "numeric"
+              }
+            )
+          }) })
         ]
       }
     ),
@@ -20031,57 +20027,18 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
               $gap: "1rem",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Text,
-                    {
-                      as: Box,
-                      $font: theme.typography[props.header.title.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.title.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.title.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.title.fontStyle].color,
-                      $leading: 1,
-                      children: currentPlan.name
-                    }
-                  ),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Text,
-                    {
-                      as: Box,
-                      $font: theme.typography[props.header.description.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.description.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.description.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.description.fontStyle].color,
-                      children: currentPlan.description
-                    }
-                  )
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
                 ] }),
                 props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Box, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Text,
-                    {
-                      $font: headerPriceFontStyle.fontFamily,
-                      $size: headerPriceFontStyle.fontSize,
-                      $weight: headerPriceFontStyle.fontWeight,
-                      $color: headerPriceFontStyle.color,
-                      children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
-                        currentPlan.planPrice,
-                        subscriptionCurrency
-                      )
-                    }
-                  ),
-                  !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Text,
-                    {
-                      $font: theme.typography[props.header.price.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.price.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.price.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.price.fontStyle].color,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
-                        "/",
-                        shortenPeriod(currentPlan.planPeriod)
-                      ] })
-                    }
-                  )
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: headerPriceFontStyle, children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
+                    currentPlan.planPrice,
+                    subscriptionCurrency
+                  ) }),
+                  !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
+                    "/",
+                    shortenPeriod(currentPlan.planPeriod)
+                  ] }) })
                 ] })
               ]
             }
@@ -20090,9 +20047,6 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
             props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               Text,
               {
-                $font: theme.typography.text.fontFamily,
-                $size: theme.typography.text.fontSize,
-                $weight: theme.typography.text.fontWeight,
                 $color: isLightBackground ? darken(theme.card.background, 0.46) : lighten(theme.card.background, 0.46),
                 $leading: 1,
                 children: t2("Add-ons")
@@ -20106,32 +20060,14 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                 $flexWrap: "wrap",
                 $gap: "1rem",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                    Text,
-                    {
-                      $font: theme.typography[props.addOns.fontStyle].fontFamily,
-                      $size: theme.typography[props.addOns.fontStyle].fontSize,
-                      $weight: theme.typography[props.addOns.fontStyle].fontWeight,
-                      $color: theme.typography[props.addOns.fontStyle].color,
-                      children: addOn.name
-                    }
-                  ),
-                  addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                    Text,
-                    {
-                      $font: theme.typography.text.fontFamily,
-                      $size: theme.typography.text.fontSize,
-                      $weight: theme.typography.text.fontWeight,
-                      $color: theme.typography.text.color,
-                      children: [
-                        formatCurrency(addOn.planPrice, subscriptionCurrency),
-                        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
-                          "/",
-                          shortenPeriod(addOn.planPeriod)
-                        ] })
-                      ]
-                    }
-                  )
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.addOns.fontStyle, children: addOn.name }),
+                  addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { children: [
+                    formatCurrency(addOn.planPrice, subscriptionCurrency),
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
+                      "/",
+                      shortenPeriod(addOn.planPeriod)
+                    ] })
+                  ] })
                 ]
               },
               addOnIndex
@@ -20141,9 +20077,6 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               Text,
               {
-                $font: theme.typography.text.fontFamily,
-                $size: theme.typography.text.fontSize,
-                $weight: theme.typography.text.fontWeight,
                 $color: isLightBackground ? darken(theme.card.background, 0.46) : lighten(theme.card.background, 0.46),
                 $leading: 1,
                 children: t2("Usage-based")
@@ -20164,33 +20097,22 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                         $flexWrap: "wrap",
                         $gap: "1rem",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                            Text,
-                            {
-                              $font: theme.typography[props.addOns.fontStyle].fontFamily,
-                              $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" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-                                  limit,
-                                  " ",
-                                  getFeatureName(entitlement.feature, limit)
-                                ] }) : entitlement.feature.name,
-                                entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-                                  "/",
-                                  shortenPeriod(currentPlan.planPeriod)
-                                ] })
-                              ]
-                            }
-                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                            entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                              limit,
+                              " ",
+                              getFeatureName(entitlement.feature, limit)
+                            ] }) : entitlement.feature.name,
+                            entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                              "/",
+                              shortenPeriod(currentPlan.planPeriod)
+                            ] })
+                          ] }),
                           /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
                             entitlement.priceBehavior === "overage" && currentPlan?.planPeriod ? /* @__PURE__ */ (0, import_jsx_runtime35.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
@@ -20215,9 +20137,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                             ) : entitlement.priceBehavior === "pay_in_advance" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.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),
                                 children: [
                                   formatCurrency(
@@ -20233,25 +20153,16 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
                                 ]
                               }
                             ),
-                            amount > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-                              Text,
-                              {
-                                $font: theme.typography.text.fontFamily,
-                                $size: theme.typography.text.fontSize,
-                                $weight: theme.typography.text.fontWeight,
-                                $color: theme.typography.text.color,
-                                children: [
-                                  formatCurrency(
-                                    (entitlement.price ?? 0) * amount,
-                                    entitlement.currency
-                                  ),
-                                  (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
-                                    "/",
-                                    currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
-                                  ] })
-                                ]
-                              }
-                            )
+                            amount > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { children: [
+                              formatCurrency(
+                                (entitlement.price ?? 0) * amount,
+                                entitlement.currency
+                              ),
+                              (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
+                                "/",
+                                currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
+                              ] })
+                            ] })
                           ] })
                         ]
                       },

package/dist/schematic-components.d.ts CHANGED Viewed

@@ -268,6 +268,12 @@ declare interface BillingProductDetailResponseData {
      * @memberof BillingProductDetailResponseData
      */
     externalId: string;
+    /**
+     *
+     * @type {boolean}
+     * @memberof BillingProductDetailResponseData
+     */
+    isActive: boolean;
     /**
      *
      * @type {string}
@@ -524,6 +530,12 @@ declare interface BillingProductResponseData {
      * @memberof BillingProductResponseData
      */
     externalId: string;
+    /**
+     *
+     * @type {boolean}
+     * @memberof BillingProductResponseData
+     */
+    isActive: boolean;
     /**
      *
      * @type {string}
@@ -1190,6 +1202,12 @@ declare interface CompanyDetailResponseData {
      * @memberof CompanyDetailResponseData
      */
     createdAt: Date;
+    /**
+     *
+     * @type {PaymentMethodResponseData}
+     * @memberof CompanyDetailResponseData
+     */
+    defaultPaymentMethod?: PaymentMethodResponseData;
     /**
      *
      * @type {Array<EntityTraitDetailResponseData>}
@@ -4722,23 +4740,24 @@ portal?: HTMLElement | null;
 export declare type TextElementProps = DesignProps_8;
 export declare enum TextPropNames {
-    Align = "$align",
     Font = "$font",
     Size = "$size",
     Weight = "$weight",
     Color = "$color",
-    Leading = "$leading"
+    Leading = "$leading",
+    Align = "$align"
 }
 export declare type TextPropNameTypes = `${TextPropNames}`;
 export declare interface TextProps {
-    $align?: ComponentProps["$textAlign"];
+    display?: FontStyle;
     $font?: ComponentProps["$fontFamily"];
     $size?: ComponentProps["$fontSize"];
     $weight?: ComponentProps["$fontWeight"];
     $color?: ComponentProps["$color"];
     $leading?: ComponentProps["$lineHeight"];
+    $align?: ComponentProps["$textAlign"];
 }
 export declare const Tooltip: ({ trigger, content, position, zIndex, ...rest }: TooltipProps) => JSX.Element;

package/dist/schematic-components.esm.js CHANGED Viewed

@@ -10741,6 +10741,7 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
     currency: json["currency"],
     environmentId: json["environment_id"],
     externalId: json["external_id"],
+    isActive: json["is_active"],
     name: json["name"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
@@ -10800,6 +10801,7 @@ function BillingProductResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     currency: json["currency"],
     environmentId: json["environment_id"],
     externalId: json["external_id"],
+    isActive: json["is_active"],
     name: json["name"],
     price: json["price"],
     priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
@@ -11196,6 +11198,7 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       BillingSubscriptionViewFromJSON
     ),
     createdAt: new Date(json["created_at"]),
+    defaultPaymentMethod: json["default_payment_method"] == null ? void 0 : PaymentMethodResponseDataFromJSON(json["default_payment_method"]),
     entityTraits: json["entity_traits"].map(
       EntityTraitDetailResponseDataFromJSON
     ),
@@ -13137,7 +13140,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.4";
+      headers["X-Schematic-Components-Version"] = "0.7.6";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -14394,43 +14397,61 @@ var ProgressBar = ({
 // src/components/ui/text/styles.ts
 var TextPropNames = /* @__PURE__ */ ((TextPropNames2) => {
-  TextPropNames2["Align"] = "$align";
   TextPropNames2["Font"] = "$font";
   TextPropNames2["Size"] = "$size";
   TextPropNames2["Weight"] = "$weight";
   TextPropNames2["Color"] = "$color";
   TextPropNames2["Leading"] = "$leading";
+  TextPropNames2["Align"] = "$align";
   return TextPropNames2;
 })(TextPropNames || {});
-var Text = dt.span.attrs(({ onClick }) => ({
+var Text = dt.span.withConfig({
+  shouldForwardProp: (prop) => prop !== "display"
+}).attrs(({ onClick }) => ({
   ...onClick && { tabIndex: 0 }
-}))`
-  ${({ $font }) => $font && lt`
-      font-family: ${$font}, sans-serif;
-    `};
-  ${({ $size }) => typeof $size !== "undefined" && lt`
-      font-size: ${typeof $size === "number" ? `${$size / TEXT_BASE_SIZE}rem` : $size};
-    `};
-  ${({ $weight }) => typeof $weight !== "undefined" && lt`
-      font-weight: ${$weight};
-      font-variation-settings: "wght" ${$weight};
-    `};
-  ${({ $leading }) => attr("line-height", $leading)};
-  ${({ $align }) => attr("text-align", $align)};
-  color: ${({ $color, theme }) => $color || theme.typography.text.color};
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.primary};
-    outline-offset: 2px;
-  }
-  ${({ onClick }) => onClick && lt`
-      &:hover {
-        cursor: pointer;
-        text-decoration: underline;
+}))(
+  ({
+    display = "text",
+    theme,
+    onClick,
+    $font,
+    $size,
+    $weight,
+    $color,
+    $leading = 1.35,
+    $align
+  }) => {
+    const settings = theme.typography[display];
+    const fontFamily = $font || settings.fontFamily;
+    const fontSize = $size || settings.fontSize;
+    const fontWeight = $weight || settings.fontWeight;
+    const color = $color || settings.color;
+    return lt`
+      font-family: ${fontFamily}, sans-serif;
+      font-size: ${typeof fontSize === "number" ? `${fontSize / TEXT_BASE_SIZE}rem` : fontSize};
+      font-weight: ${fontWeight};
+      font-variation-settings: "wght" ${fontWeight};
+      line-height: ${$leading};
+      color: ${color};
+      ${$align && lt`
+        text-align: ${$align};
+      `};
+      ${onClick && lt`
+        &:hover {
+          cursor: pointer;
+          text-decoration: underline;
+        }
+      `}
+      &:focus-visible {
+        outline: 2px solid ${({ theme: theme2 }) => theme2.primary};
+        outline-offset: 2px;
       }
-    `}
-`;
+    `;
+  }
+);
 // src/components/ui/tooltip/Tooltip.tsx
 var import_debounce = __toESM(require_debounce());
@@ -14717,7 +14738,7 @@ var Container2 = dt.div`
   all: initial;
   box-sizing: border-box;
   display: block;
-  font-size: ${TEXT_BASE_SIZE}px;
+  font-size: 1rem;
   line-height: 1.35;
   width: 100%;
   height: 100%;
@@ -14784,6 +14805,7 @@ var StageButton = ({
   checkoutStages,
   hasAddOns,
   hasPayInAdvanceEntitlements,
+  hasUnstagedChanges,
   isLoading,
   requiresPayment,
   setCheckoutStage,
@@ -14795,7 +14817,7 @@ var StageButton = ({
       EmbedButton,
       {
         type: "button",
-        disabled: isLoading || !canUpdateSubscription,
+        disabled: isLoading || !hasUnstagedChanges || !canUpdateSubscription,
         onClick: checkout,
         isLoading,
         children: t2("Subscribe and close")
@@ -14836,7 +14858,7 @@ var StageButton = ({
         EmbedButton,
         {
           type: "button",
-          disabled: !canUpdateSubscription,
+          disabled: !hasUnstagedChanges || !canUpdateSubscription,
           onClick: async () => {
             checkout();
           },
@@ -14962,7 +14984,7 @@ var StageButton = ({
       EmbedButton,
       {
         type: "button",
-        disabled: isLoading || !canCheckout,
+        disabled: isLoading || !hasUnstagedChanges || !canCheckout,
         onClick: checkout,
         isLoading,
         children: canTrial ? t2("Start trial") : t2("Pay now")
@@ -15166,14 +15188,6 @@ var Sidebar = ({
     }
   }, [t2, api, hydrate, setError, setIsLoading, setLayout]);
   const selectedAddOns = addOns.filter((addOn) => addOn.isSelected);
-  const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
-  const canUpdateSubscription = mode === "edit" || api !== null && (willPlanChange || // TODO: test add-on comparison for finding "changes"
-  selectedAddOns.length !== currentAddOns.length || !selectedAddOns.every(
-    (addOn) => currentAddOns.some((currentAddOn) => addOn.id === currentAddOn.id)
-  ) || payInAdvanceEntitlements.every(
-    ({ quantity, usage }) => quantity >= usage
-  )) && !isLoading;
-  const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
   const {
     changedUsageBasedEntitlements,
     addedUsageBasedEntitlements,
@@ -15230,6 +15244,7 @@ var Sidebar = ({
     currentUsageBasedEntitlements,
     usageBasedEntitlements
   ]);
+  const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
   const removedAddOns = currentAddOns.filter(
     (current) => !selectedAddOns.some((selected) => current.id === selected.id)
   );
@@ -15237,6 +15252,10 @@ var Sidebar = ({
     (selected) => !currentAddOns.some((current) => selected.id === current.id)
   );
   const willAddOnsChange = removedAddOns.length > 0 || addedAddOns.length > 0;
+  const willPayInAdvanceEntitlementsChange = payInAdvanceEntitlements.length > 0 && payInAdvanceEntitlements.some(({ quantity, usage }) => quantity !== usage);
+  const hasUnstagedChanges = willPlanChange || willAddOnsChange || willPayInAdvanceEntitlementsChange;
+  const canUpdateSubscription = mode === "edit" || api !== null && !isLoading;
+  const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
   const isTrialable = selectedPlan?.companyCanTrial;
   const today = /* @__PURE__ */ new Date();
   const trialEndsOn = new Date(today);
@@ -16148,6 +16167,7 @@ var Sidebar = ({
                   checkoutStages,
                   hasAddOns: addOns.length > 0,
                   hasPayInAdvanceEntitlements: payInAdvanceEntitlements.length > 0,
+                  hasUnstagedChanges,
                   isLoading,
                   requiresPayment,
                   setCheckoutStage,
@@ -19529,8 +19549,8 @@ var PaymentMethod = forwardRef11(({ children, className, portal, allowEdit = tru
   const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
   const paymentMethod = useMemo12(() => {
-    return data.subscription?.paymentMethod;
-  }, [data.subscription?.paymentMethod]);
+    return data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
+  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
   const monthsToExpiration = useMemo12(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -19588,10 +19608,10 @@ var PaymentMethodDetails = ({
   const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState14(false);
   const [paymentMethod, setPaymentMethod] = useState14(void 0);
   useEffect7(() => {
-    if (data.subscription?.paymentMethod) {
-      setPaymentMethod(data.subscription.paymentMethod);
-    }
-  }, [data.subscription?.paymentMethod]);
+    setPaymentMethod(
+      data.subscription?.paymentMethod || data.company?.defaultPaymentMethod
+    );
+  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
   const monthsToExpiration = useMemo13(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -19648,15 +19668,31 @@ var PaymentMethodDetails = ({
         if (setPaymentMethodId) {
           setPaymentMethodId(updatePaymentMethodResponse.data.externalId);
         }
-        if (data.subscription) {
-          setData({
-            ...data,
+        setData({
+          ...data,
+          // Optimistic update
+          // If there is subscription - we have set payment method to subscription
+          ...data.subscription ? {
             subscription: {
               ...data.subscription,
               paymentMethod: updatePaymentMethodResponse.data
             }
-          });
-        }
+          } : {},
+          ...data.company ? {
+            company: {
+              ...data.company,
+              paymentMethods: [
+                updatePaymentMethodResponse.data,
+                ...data.company?.paymentMethods || []
+              ],
+              // Optimistic update
+              // If there is no subscription - we have updated default payment method in company
+              ...data.subscription ? {} : {
+                defaultPaymentMethod: updatePaymentMethodResponse.data
+              }
+            }
+          } : {}
+        });
       } catch {
         setError(t2("Error updating payment method. Please try again."));
       } finally {
@@ -19892,7 +19928,7 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
   const isTrialSubscription = billingSubscription?.status === "trialing";
   const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
   const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
-  const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
+  const headerPriceFontStyle = isUsageBasedPlan ? "heading3" : props.header.price.fontStyle;
   return /* @__PURE__ */ jsxs27(Fragment11, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs27(
       Notice,
@@ -19904,32 +19940,12 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ jsx35(
-            Text,
-            {
-              as: "h3",
-              $font: theme.typography.heading3.fontFamily,
-              $size: theme.typography.heading3.fontSize,
-              $weight: theme.typography.heading3.fontWeight,
-              $color: theme.typography.heading3.color,
-              children: t2("Trial ends in", { days: trialEndDays.toString() })
-            }
-          ),
-          /* @__PURE__ */ jsx35(
-            Text,
-            {
-              as: "p",
-              $font: theme.typography.text.fontFamily,
-              $size: 0.8125 * theme.typography.text.fontSize,
-              $weight: theme.typography.text.fontWeight,
-              $color: theme.typography.text.color,
-              children: data.trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
-                defaultPlanName: defaultPlan?.name
-              }) : t2("After the trial, cancel no default", {
-                planName: currentPlan?.name
-              })
-            }
-          )
+          /* @__PURE__ */ jsx35(Text, { as: "h3", display: "heading3", children: t2("Trial ends in", { days: trialEndDays.toString() }) }),
+          /* @__PURE__ */ jsx35(Text, { as: "p", $size: 0.8125 * theme.typography.text.fontSize, children: data.trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
+            defaultPlanName: defaultPlan?.name
+          }) : t2("After the trial, cancel no default", {
+            planName: currentPlan?.name
+          }) })
         ]
       }
     ) : willSubscriptionCancel && /* @__PURE__ */ jsxs27(
@@ -19942,35 +19958,15 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
         $textAlign: "center",
         $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
         children: [
-          /* @__PURE__ */ jsx35(
-            Text,
-            {
-              as: "h3",
-              $font: theme.typography.heading3.fontFamily,
-              $size: theme.typography.heading3.fontSize,
-              $weight: theme.typography.heading3.fontWeight,
-              $color: theme.typography.heading3.color,
-              children: t2("Subscription canceled")
-            }
-          ),
-          billingSubscription?.cancelAt && /* @__PURE__ */ jsx35(
-            Text,
-            {
-              as: "p",
-              $font: theme.typography.text.fontFamily,
-              $size: 0.8125 * theme.typography.text.fontSize,
-              $weight: theme.typography.text.fontWeight,
-              $color: theme.typography.text.color,
-              children: t2("Access to plan will end on", {
-                date: toPrettyDate(
-                  new Date(billingSubscription.cancelAt * 1e3),
-                  {
-                    month: "numeric"
-                  }
-                )
-              })
-            }
-          )
+          /* @__PURE__ */ jsx35(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
+          billingSubscription?.cancelAt && /* @__PURE__ */ jsx35(Text, { as: "p", $size: 0.8125 * theme.typography.text.fontSize, children: t2("Access to plan will end on", {
+            date: toPrettyDate(
+              new Date(billingSubscription.cancelAt * 1e3),
+              {
+                month: "numeric"
+              }
+            )
+          }) })
         ]
       }
     ),
@@ -19992,57 +19988,18 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
               $gap: "1rem",
               children: [
                 /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
-                  /* @__PURE__ */ jsx35(
-                    Text,
-                    {
-                      as: Box,
-                      $font: theme.typography[props.header.title.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.title.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.title.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.title.fontStyle].color,
-                      $leading: 1,
-                      children: currentPlan.name
-                    }
-                  ),
-                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx35(
-                    Text,
-                    {
-                      as: Box,
-                      $font: theme.typography[props.header.description.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.description.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.description.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.description.fontStyle].color,
-                      children: currentPlan.description
-                    }
-                  )
+                  /* @__PURE__ */ jsx35(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
+                  props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx35(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
                 ] }),
                 props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs27(Box, { children: [
-                  /* @__PURE__ */ jsx35(
-                    Text,
-                    {
-                      $font: headerPriceFontStyle.fontFamily,
-                      $size: headerPriceFontStyle.fontSize,
-                      $weight: headerPriceFontStyle.fontWeight,
-                      $color: headerPriceFontStyle.color,
-                      children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
-                        currentPlan.planPrice,
-                        subscriptionCurrency
-                      )
-                    }
-                  ),
-                  !isUsageBasedPlan && /* @__PURE__ */ jsx35(
-                    Text,
-                    {
-                      $font: theme.typography[props.header.price.fontStyle].fontFamily,
-                      $size: theme.typography[props.header.price.fontStyle].fontSize,
-                      $weight: theme.typography[props.header.price.fontStyle].fontWeight,
-                      $color: theme.typography[props.header.price.fontStyle].color,
-                      children: /* @__PURE__ */ jsxs27("sub", { children: [
-                        "/",
-                        shortenPeriod(currentPlan.planPeriod)
-                      ] })
-                    }
-                  )
+                  /* @__PURE__ */ jsx35(Text, { display: headerPriceFontStyle, children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
+                    currentPlan.planPrice,
+                    subscriptionCurrency
+                  ) }),
+                  !isUsageBasedPlan && /* @__PURE__ */ jsx35(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs27("sub", { children: [
+                    "/",
+                    shortenPeriod(currentPlan.planPeriod)
+                  ] }) })
                 ] })
               ]
             }
@@ -20051,9 +20008,6 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
             props.addOns.showLabel && /* @__PURE__ */ jsx35(
               Text,
               {
-                $font: theme.typography.text.fontFamily,
-                $size: theme.typography.text.fontSize,
-                $weight: theme.typography.text.fontWeight,
                 $color: isLightBackground ? darken(theme.card.background, 0.46) : lighten(theme.card.background, 0.46),
                 $leading: 1,
                 children: t2("Add-ons")
@@ -20067,32 +20021,14 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
                 $flexWrap: "wrap",
                 $gap: "1rem",
                 children: [
-                  /* @__PURE__ */ jsx35(
-                    Text,
-                    {
-                      $font: theme.typography[props.addOns.fontStyle].fontFamily,
-                      $size: theme.typography[props.addOns.fontStyle].fontSize,
-                      $weight: theme.typography[props.addOns.fontStyle].fontWeight,
-                      $color: theme.typography[props.addOns.fontStyle].color,
-                      children: addOn.name
-                    }
-                  ),
-                  addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ jsxs27(
-                    Text,
-                    {
-                      $font: theme.typography.text.fontFamily,
-                      $size: theme.typography.text.fontSize,
-                      $weight: theme.typography.text.fontWeight,
-                      $color: theme.typography.text.color,
-                      children: [
-                        formatCurrency(addOn.planPrice, subscriptionCurrency),
-                        /* @__PURE__ */ jsxs27("sub", { children: [
-                          "/",
-                          shortenPeriod(addOn.planPeriod)
-                        ] })
-                      ]
-                    }
-                  )
+                  /* @__PURE__ */ jsx35(Text, { display: props.addOns.fontStyle, children: addOn.name }),
+                  addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ jsxs27(Text, { children: [
+                    formatCurrency(addOn.planPrice, subscriptionCurrency),
+                    /* @__PURE__ */ jsxs27("sub", { children: [
+                      "/",
+                      shortenPeriod(addOn.planPeriod)
+                    ] })
+                  ] })
                 ]
               },
               addOnIndex
@@ -20102,9 +20038,6 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
             /* @__PURE__ */ jsx35(
               Text,
               {
-                $font: theme.typography.text.fontFamily,
-                $size: theme.typography.text.fontSize,
-                $weight: theme.typography.text.fontWeight,
                 $color: isLightBackground ? darken(theme.card.background, 0.46) : lighten(theme.card.background, 0.46),
                 $leading: 1,
                 children: t2("Usage-based")
@@ -20125,33 +20058,22 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
                         $flexWrap: "wrap",
                         $gap: "1rem",
                         children: [
-                          /* @__PURE__ */ jsxs27(
-                            Text,
-                            {
-                              $font: theme.typography[props.addOns.fontStyle].fontFamily,
-                              $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" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ jsxs27(Fragment11, { children: [
-                                  limit,
-                                  " ",
-                                  getFeatureName(entitlement.feature, limit)
-                                ] }) : entitlement.feature.name,
-                                entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(Fragment11, { children: [
-                                  "/",
-                                  shortenPeriod(currentPlan.planPeriod)
-                                ] })
-                              ]
-                            }
-                          ),
+                          /* @__PURE__ */ jsxs27(Text, { display: props.addOns.fontStyle, children: [
+                            entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ jsxs27(Fragment11, { children: [
+                              limit,
+                              " ",
+                              getFeatureName(entitlement.feature, limit)
+                            ] }) : entitlement.feature.name,
+                            entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(Fragment11, { children: [
+                              "/",
+                              shortenPeriod(currentPlan.planPeriod)
+                            ] })
+                          ] }),
                           /* @__PURE__ */ jsxs27(Flex, { $alignItems: "center", $gap: "1rem", children: [
                             entitlement.priceBehavior === "overage" && currentPlan?.planPeriod ? /* @__PURE__ */ jsx35(
                               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
@@ -20176,9 +20098,7 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
                             ) : entitlement.priceBehavior === "pay_in_advance" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(
                               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: [
                                   formatCurrency(
@@ -20194,25 +20114,16 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
                                 ]
                               }
                             ),
-                            amount > 0 && /* @__PURE__ */ jsxs27(
-                              Text,
-                              {
-                                $font: theme.typography.text.fontFamily,
-                                $size: theme.typography.text.fontSize,
-                                $weight: theme.typography.text.fontWeight,
-                                $color: theme.typography.text.color,
-                                children: [
-                                  formatCurrency(
-                                    (entitlement.price ?? 0) * amount,
-                                    entitlement.currency
-                                  ),
-                                  (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ jsxs27("sub", { children: [
-                                    "/",
-                                    currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
-                                  ] })
-                                ]
-                              }
-                            )
+                            amount > 0 && /* @__PURE__ */ jsxs27(Text, { children: [
+                              formatCurrency(
+                                (entitlement.price ?? 0) * amount,
+                                entitlement.currency
+                              ),
+                              (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ jsxs27("sub", { children: [
+                                "/",
+                                currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
+                              ] })
+                            ] })
                           ] })
                         ]
                       },

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",