@molecule/app-billing-react 1.0.2 → 1.0.3

package/dist/PricingPage.js

@@ -181,21 +181,18 @@ function TierCard({ tier, period, cm, t, renderLimits, onUpgrade, starting, popu
                         zIndex: 1,
                     }, "data-mol-id": `pricing-tier-${tier.key}-popular-badge`, children: t('billing.pricing.mostPopular', undefined, { defaultValue: 'Most popular' }) })), _jsxs("header", { className: cm.cardHeader, children: [!popular && (_jsx("p", { className: cm.cn(cm.textSize('xs'), cm.textSubtle, cm.fontWeight('semibold'), cm.uppercase, cm.trackingWide, cm.sp('mb', 2)), "data-mol-id": `pricing-tier-${tier.key}-eyebrow`, children: t('billing.pricing.tierEyebrow', undefined, { defaultValue: 'Tier' }) })), _jsx("h2", { className: cm.cn(cm.textSize('2xl'), cm.italic, cm.fontWeight('semibold'), cm.sp('mb', 4)), style: headlineStyle, children: tier.name }), _jsxs("p", { children: [_jsx("span", { className: cm.cn(cm.textSize('5xl'), cm.fontWeight('bold'), popular && cm.textPrimary), style: headlineStyle, children: price?.price ?? '—' }), tier.perSeat && (_jsxs("span", { className: cm.cn(cm.textSize('sm'), cm.textMuted, cm.fontWeight('normal')), children: [' ', t('billing.pricing.perSeat', undefined, { defaultValue: 'per seat' })] }))] }), _jsxs("p", { className: cm.cn(cm.textSize('xs'), cm.textSubtle, cm.fontWeight('semibold'), cm.uppercase, cm.trackingWide, cm.sp('mt', 2)), children: [t(`billing.pricing.billed.${price?.period ?? 'month'}`, undefined, {
                                     defaultValue: price?.period === 'year' ? 'Billed annually' : 'Billed monthly',
-                                }), price?.savings && (_jsxs(_Fragment, { children: [' · ', _jsx("span", { className: cm.textSuccess, children: price.savings.toUpperCase() })] }))] })] }), _jsx("div", { className: cm.cn(cm.cardContent, cm.flex1), children: renderLimits ? (renderLimits(tier.limits)) : (_jsx(DefaultLimits, { limits: tier.limits, cm: cm })) }), _jsx("footer", { className: cm.cardFooter, children: _jsx("button", { type: "button", className: cm.cn(cm.button({
+                                }), price?.savings && (_jsxs(_Fragment, { children: [' · ', _jsx("span", { className: cm.textSuccess, children: price.savings.toUpperCase() })] }))] })] }), _jsx("div", { className: cm.cn(cm.cardContent, cm.flex1), children: renderLimits ? (renderLimits(tier.limits)) : (_jsx(DefaultLimits, { limits: tier.limits, cm: cm })) }), _jsx("footer", { className: cm.cardFooter, children: _jsx("button", { type: "button", 
+                        // A page-level CTA takes the design system's largest tier. It used
+                        // to hand-override height and padding inline, which silently beat
+                        // whatever the ClassMap resolved (AGENTS.md anti-pattern 12) and
+                        // made this button a different size from every other Upgrade CTA
+                        // in the fleet — `pricing-page-react`'s identical action included.
+                        className: cm.cn(cm.button({
                             variant: popular ? 'solid' : 'outline',
-                            size: 'md',
+                            color: popular ? 'primary' : undefined,
+                            size: 'lg',
                             fullWidth: true,
-                        }), popular && cm.gradientPrimary, cm.uppercase, cm.trackingWide, cm.fontWeight('semibold'), cm.textSize('sm')), 
-                        // Override the cramped default size — `cm.button({size: 'md'})`
-                        // gives `h-[30px] px-2.5` which feels like a tag, not a CTA.
-                        // Real button padding: ~14px vertical, ~20px horizontal.
-                        style: {
-                            height: 'auto',
-                            paddingTop: '0.875rem',
-                            paddingBottom: '0.875rem',
-                            paddingLeft: '1.25rem',
-                            paddingRight: '1.25rem',
-                        }, disabled: !price?.stripePriceId || starting, onClick: () => onUpgrade(price?.stripePriceId ?? null), "data-mol-id": `pricing-cta-${tier.key}`, children: price?.stripePriceId
+                        }), popular && cm.gradientPrimary, cm.uppercase, cm.trackingWide, cm.fontWeight('semibold'), cm.touchTargetCompact), disabled: !price?.stripePriceId || starting, onClick: () => onUpgrade(price?.stripePriceId ?? null), "data-mol-id": `pricing-cta-${tier.key}`, children: price?.stripePriceId
                             ? t('billing.pricing.upgradeCta', { tierName: tier.name }, { defaultValue: 'Upgrade to {{tierName}}' })
                             : t('billing.pricing.currentCta', undefined, { defaultValue: 'Current plan' }) }) })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molecule/app-billing-react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React pricing page + checkout flow that consumes /api/billing/* (provided by @molecule/api-entitlements + @molecule/api-payments-stripe)",
   "homepage": "https://www.molecule.dev/packages/app-billing-react",
   "type": "module",
@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@molecule/app-http": "1.0.2",
-    "@molecule/app-react": "1.5.1",
+    "@molecule/app-react": "1.6.0",
     "@molecule/app-ui": "1.1.1",
     "@molecule/app-ui-react": "1.0.2",
     "@types/node": "26.1.2",