@schematichq/schematic-components 0.6.3 → 0.6.4
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.
|
@@ -3946,6 +3946,7 @@ var VISIBLE_ENTITLEMENT_COUNT = 4;
|
|
|
3946
3946
|
var MAX_VISIBLE_INVOICE_COUNT = 12;
|
|
3947
3947
|
var DEBOUNCE_TIMEOUT = 250;
|
|
3948
3948
|
var DEFAULT_CURRENCY = "USD";
|
|
3949
|
+
var MAXIMUM_SIGNIFICANT_DIGITS = 6;
|
|
3949
3950
|
|
|
3950
3951
|
// src/hooks/useAvailablePlans.ts
|
|
3951
3952
|
var import_react10 = require("react");
|
|
@@ -12249,8 +12250,7 @@ var en_default = {
|
|
|
12249
12250
|
"Current plan": "Current plan",
|
|
12250
12251
|
"Current usage exceeds the limit of this plan.": "Current usage exceeds the limit of this plan.",
|
|
12251
12252
|
"Currently using": "Currently using {{quantity}} {{unit}}",
|
|
12252
|
-
"Custom
|
|
12253
|
-
"Custom Plan CTA": "Talk to support",
|
|
12253
|
+
"Custom price": "Custom price",
|
|
12254
12254
|
Discount: "Discount",
|
|
12255
12255
|
"Due today": "Due today",
|
|
12256
12256
|
"Edit payment method": "Edit payment method",
|
|
@@ -12306,6 +12306,7 @@ var en_default = {
|
|
|
12306
12306
|
"Subscribe and close": "Subscribe and close",
|
|
12307
12307
|
Subscription: "Subscription",
|
|
12308
12308
|
"Subscription canceled": "Subscription canceled",
|
|
12309
|
+
"Talk to support": "Talk to support",
|
|
12309
12310
|
Trial: "Trial",
|
|
12310
12311
|
"Trial ends in": "Trial ends in {{days}} days",
|
|
12311
12312
|
"Trial plan": "Try free for {{days}} days",
|
|
@@ -13106,7 +13107,7 @@ var EmbedProvider = ({
|
|
|
13106
13107
|
(0, import_react11.useEffect)(() => {
|
|
13107
13108
|
if (accessToken) {
|
|
13108
13109
|
const { headers = {} } = apiConfig ?? {};
|
|
13109
|
-
headers["X-Schematic-Components-Version"] = "0.6.
|
|
13110
|
+
headers["X-Schematic-Components-Version"] = "0.6.4";
|
|
13110
13111
|
headers["X-Schematic-Session-ID"] = sessionIdRef.current;
|
|
13111
13112
|
const config = new Configuration({
|
|
13112
13113
|
...apiConfig,
|
|
@@ -13321,17 +13322,21 @@ function formatCurrency(amount, currency) {
|
|
|
13321
13322
|
return `$${formatted}${symbol}`;
|
|
13322
13323
|
};
|
|
13323
13324
|
if (dollars >= 1e6) {
|
|
13324
|
-
|
|
13325
|
-
}
|
|
13325
|
+
formatValue(dollars / 1e6, "M");
|
|
13326
|
+
}
|
|
13327
|
+
if (dollars >= 1e3) {
|
|
13326
13328
|
return formatValue(dollars / 1e3, "k");
|
|
13327
|
-
} else {
|
|
13328
|
-
return new Intl.NumberFormat("en-US", {
|
|
13329
|
-
style: "currency",
|
|
13330
|
-
currency: resolvedCurrency,
|
|
13331
|
-
minimumSignificantDigits: 1,
|
|
13332
|
-
maximumSignificantDigits: 4
|
|
13333
|
-
}).format(dollars);
|
|
13334
13329
|
}
|
|
13330
|
+
const hasManySignificantDigits = /[1-9]/.test(
|
|
13331
|
+
(amount % 1).toFixed(MAXIMUM_SIGNIFICANT_DIGITS)
|
|
13332
|
+
);
|
|
13333
|
+
return new Intl.NumberFormat("en-US", {
|
|
13334
|
+
style: "currency",
|
|
13335
|
+
currency: resolvedCurrency,
|
|
13336
|
+
...hasManySignificantDigits && {
|
|
13337
|
+
minimumSignificantDigits: 1
|
|
13338
|
+
}
|
|
13339
|
+
}).format(dollars);
|
|
13335
13340
|
} catch (error) {
|
|
13336
13341
|
console.error("Error formatting currency", error);
|
|
13337
13342
|
return new Intl.NumberFormat("en-US", {
|
|
@@ -16147,12 +16152,19 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
|
|
|
16147
16152
|
$position: "absolute",
|
|
16148
16153
|
$right: "1rem",
|
|
16149
16154
|
$top: "1rem",
|
|
16150
|
-
$fontSize: "0.75rem",
|
|
16151
|
-
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
16152
16155
|
$backgroundColor: theme.primary,
|
|
16153
16156
|
$borderRadius: "9999px",
|
|
16154
16157
|
$padding: "0.125rem 0.85rem",
|
|
16155
|
-
children:
|
|
16158
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
16159
|
+
Text,
|
|
16160
|
+
{
|
|
16161
|
+
$font: theme.typography.text.fontFamily,
|
|
16162
|
+
$size: 0.75 * theme.typography.text.fontSize,
|
|
16163
|
+
$weight: theme.typography.text.fontWeight,
|
|
16164
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
16165
|
+
children: t2("Active")
|
|
16166
|
+
}
|
|
16167
|
+
)
|
|
16156
16168
|
}
|
|
16157
16169
|
)
|
|
16158
16170
|
] }),
|
|
@@ -16621,6 +16633,7 @@ var Plan = ({
|
|
|
16621
16633
|
(entitlement) => !!entitlement.priceBehavior
|
|
16622
16634
|
);
|
|
16623
16635
|
const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
|
|
16636
|
+
const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography.heading2;
|
|
16624
16637
|
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
16625
16638
|
Flex,
|
|
16626
16639
|
{
|
|
@@ -16674,11 +16687,11 @@ var Plan = ({
|
|
|
16674
16687
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
16675
16688
|
Text,
|
|
16676
16689
|
{
|
|
16677
|
-
$font:
|
|
16678
|
-
$size:
|
|
16679
|
-
$weight:
|
|
16680
|
-
$color:
|
|
16681
|
-
children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom
|
|
16690
|
+
$font: headerPriceFontStyle.fontFamily,
|
|
16691
|
+
$size: headerPriceFontStyle.fontSize,
|
|
16692
|
+
$weight: headerPriceFontStyle.fontWeight,
|
|
16693
|
+
$color: headerPriceFontStyle.color,
|
|
16694
|
+
children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
|
|
16682
16695
|
}
|
|
16683
16696
|
),
|
|
16684
16697
|
!plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
@@ -16701,12 +16714,19 @@ var Plan = ({
|
|
|
16701
16714
|
$position: "absolute",
|
|
16702
16715
|
$right: "1rem",
|
|
16703
16716
|
$top: "1rem",
|
|
16704
|
-
$fontSize: "0.75rem",
|
|
16705
|
-
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
16706
16717
|
$backgroundColor: theme.primary,
|
|
16707
16718
|
$borderRadius: "9999px",
|
|
16708
16719
|
$padding: "0.125rem 0.85rem",
|
|
16709
|
-
children:
|
|
16720
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
16721
|
+
Text,
|
|
16722
|
+
{
|
|
16723
|
+
$font: theme.typography.text.fontFamily,
|
|
16724
|
+
$size: 0.75 * theme.typography.text.fontSize,
|
|
16725
|
+
$weight: theme.typography.text.fontWeight,
|
|
16726
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
16727
|
+
children: t2("Active")
|
|
16728
|
+
}
|
|
16729
|
+
)
|
|
16710
16730
|
}
|
|
16711
16731
|
)
|
|
16712
16732
|
]
|
|
@@ -16948,7 +16968,7 @@ var Plan = ({
|
|
|
16948
16968
|
{
|
|
16949
16969
|
href: plan.customPlanConfig?.ctaWebSite ?? "#",
|
|
16950
16970
|
target: "_blank",
|
|
16951
|
-
children: plan.customPlanConfig?.ctaText ?? t2("
|
|
16971
|
+
children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
|
|
16952
16972
|
}
|
|
16953
16973
|
) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
16954
16974
|
Tooltip,
|
|
@@ -18724,6 +18744,7 @@ var import_react34 = require("react");
|
|
|
18724
18744
|
// src/components/elements/metered-features/styles.ts
|
|
18725
18745
|
var Container4 = dt(Flex)`
|
|
18726
18746
|
flex-direction: column;
|
|
18747
|
+
gap: 1rem;
|
|
18727
18748
|
|
|
18728
18749
|
&:last-child {
|
|
18729
18750
|
overflow: hidden;
|
|
@@ -18748,6 +18769,15 @@ var Container4 = dt(Flex)`
|
|
|
18748
18769
|
`;
|
|
18749
18770
|
}}
|
|
18750
18771
|
}
|
|
18772
|
+
|
|
18773
|
+
${({ theme }) => {
|
|
18774
|
+
return theme.sectionLayout === "separate" && lt`
|
|
18775
|
+
${Element}:not(:is(${FussyChild})) {
|
|
18776
|
+
border-bottom-left-radius: 0;
|
|
18777
|
+
border-bottom-right-radius: 0;
|
|
18778
|
+
}
|
|
18779
|
+
`;
|
|
18780
|
+
}}
|
|
18751
18781
|
`;
|
|
18752
18782
|
|
|
18753
18783
|
// src/components/elements/metered-features/MeteredFeatures.tsx
|
|
@@ -18842,6 +18872,10 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
|
|
|
18842
18872
|
$alignItems: "center",
|
|
18843
18873
|
$padding: `${0.4375 * theme.card.padding / TEXT_BASE_SIZE}rem ${theme.card.padding / TEXT_BASE_SIZE}rem`,
|
|
18844
18874
|
$backgroundColor: isLightBackground ? darken(theme.card.background, 0.05) : lighten(theme.card.background, 0.1),
|
|
18875
|
+
...theme.sectionLayout === "separate" && {
|
|
18876
|
+
$borderBottomLeftRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
|
|
18877
|
+
$borderBottomRightRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`
|
|
18878
|
+
},
|
|
18845
18879
|
children: [
|
|
18846
18880
|
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
18847
18881
|
Text,
|
|
@@ -19700,6 +19734,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
|
|
|
19700
19734
|
const isTrialSubscription = billingSubscription?.status === "trialing";
|
|
19701
19735
|
const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
|
|
19702
19736
|
const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
|
|
19737
|
+
const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
|
|
19703
19738
|
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
19704
19739
|
isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
19705
19740
|
Box,
|
|
@@ -19821,10 +19856,10 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
|
|
|
19821
19856
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
19822
19857
|
Text,
|
|
19823
19858
|
{
|
|
19824
|
-
$font:
|
|
19825
|
-
$size:
|
|
19826
|
-
$weight:
|
|
19827
|
-
$color:
|
|
19859
|
+
$font: headerPriceFontStyle.fontFamily,
|
|
19860
|
+
$size: headerPriceFontStyle.fontSize,
|
|
19861
|
+
$weight: headerPriceFontStyle.fontWeight,
|
|
19862
|
+
$color: headerPriceFontStyle.color,
|
|
19828
19863
|
children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
|
|
19829
19864
|
currentPlan.planPrice,
|
|
19830
19865
|
subscriptionCurrency
|
|
@@ -20191,6 +20226,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20191
20226
|
(entitlement) => !!entitlement.priceBehavior
|
|
20192
20227
|
);
|
|
20193
20228
|
const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
|
|
20229
|
+
const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.plans.name.fontStyle];
|
|
20194
20230
|
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20195
20231
|
Flex,
|
|
20196
20232
|
{
|
|
@@ -20239,11 +20275,11 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20239
20275
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20240
20276
|
Text,
|
|
20241
20277
|
{
|
|
20242
|
-
$font:
|
|
20243
|
-
$size:
|
|
20244
|
-
$weight:
|
|
20245
|
-
$color:
|
|
20246
|
-
children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom
|
|
20278
|
+
$font: headerPriceFontStyle.fontFamily,
|
|
20279
|
+
$size: headerPriceFontStyle.fontSize,
|
|
20280
|
+
$weight: headerPriceFontStyle.fontWeight,
|
|
20281
|
+
$color: headerPriceFontStyle.color,
|
|
20282
|
+
children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
|
|
20247
20283
|
}
|
|
20248
20284
|
),
|
|
20249
20285
|
!plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
@@ -20266,12 +20302,19 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20266
20302
|
$position: "absolute",
|
|
20267
20303
|
$right: "1rem",
|
|
20268
20304
|
$top: "1rem",
|
|
20269
|
-
$fontSize: "0.75rem",
|
|
20270
|
-
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
20271
20305
|
$backgroundColor: theme.primary,
|
|
20272
20306
|
$borderRadius: "9999px",
|
|
20273
20307
|
$padding: "0.125rem 0.85rem",
|
|
20274
|
-
children:
|
|
20308
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20309
|
+
Text,
|
|
20310
|
+
{
|
|
20311
|
+
$font: theme.typography.text.fontFamily,
|
|
20312
|
+
$size: 0.75 * theme.typography.text.fontSize,
|
|
20313
|
+
$weight: theme.typography.text.fontWeight,
|
|
20314
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
20315
|
+
children: trialEndDays ? t2("Trial ends in", { days: trialEndDays }) : t2("Active")
|
|
20316
|
+
}
|
|
20317
|
+
)
|
|
20275
20318
|
}
|
|
20276
20319
|
)
|
|
20277
20320
|
]
|
|
@@ -20528,7 +20571,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20528
20571
|
{
|
|
20529
20572
|
href: plan.customPlanConfig?.ctaWebSite ?? "#",
|
|
20530
20573
|
target: "_blank",
|
|
20531
|
-
children: plan.customPlanConfig?.ctaText ?? t2("
|
|
20574
|
+
children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
|
|
20532
20575
|
}
|
|
20533
20576
|
) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20534
20577
|
Tooltip,
|
|
@@ -20646,12 +20689,19 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20646
20689
|
$position: "absolute",
|
|
20647
20690
|
$right: "1rem",
|
|
20648
20691
|
$top: "1rem",
|
|
20649
|
-
$fontSize: "0.75rem",
|
|
20650
|
-
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
20651
20692
|
$backgroundColor: theme.primary,
|
|
20652
20693
|
$borderRadius: "9999px",
|
|
20653
20694
|
$padding: "0.125rem 0.85rem",
|
|
20654
|
-
children:
|
|
20695
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20696
|
+
Text,
|
|
20697
|
+
{
|
|
20698
|
+
$font: theme.typography.text.fontFamily,
|
|
20699
|
+
$size: 0.75 * theme.typography.text.fontSize,
|
|
20700
|
+
$weight: theme.typography.text.fontWeight,
|
|
20701
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
20702
|
+
children: t2("Active")
|
|
20703
|
+
}
|
|
20704
|
+
)
|
|
20655
20705
|
}
|
|
20656
20706
|
)
|
|
20657
20707
|
] }),
|
|
@@ -3896,6 +3896,7 @@ var VISIBLE_ENTITLEMENT_COUNT = 4;
|
|
|
3896
3896
|
var MAX_VISIBLE_INVOICE_COUNT = 12;
|
|
3897
3897
|
var DEBOUNCE_TIMEOUT = 250;
|
|
3898
3898
|
var DEFAULT_CURRENCY = "USD";
|
|
3899
|
+
var MAXIMUM_SIGNIFICANT_DIGITS = 6;
|
|
3899
3900
|
|
|
3900
3901
|
// src/hooks/useAvailablePlans.ts
|
|
3901
3902
|
import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
|
|
@@ -12199,8 +12200,7 @@ var en_default = {
|
|
|
12199
12200
|
"Current plan": "Current plan",
|
|
12200
12201
|
"Current usage exceeds the limit of this plan.": "Current usage exceeds the limit of this plan.",
|
|
12201
12202
|
"Currently using": "Currently using {{quantity}} {{unit}}",
|
|
12202
|
-
"Custom
|
|
12203
|
-
"Custom Plan CTA": "Talk to support",
|
|
12203
|
+
"Custom price": "Custom price",
|
|
12204
12204
|
Discount: "Discount",
|
|
12205
12205
|
"Due today": "Due today",
|
|
12206
12206
|
"Edit payment method": "Edit payment method",
|
|
@@ -12256,6 +12256,7 @@ var en_default = {
|
|
|
12256
12256
|
"Subscribe and close": "Subscribe and close",
|
|
12257
12257
|
Subscription: "Subscription",
|
|
12258
12258
|
"Subscription canceled": "Subscription canceled",
|
|
12259
|
+
"Talk to support": "Talk to support",
|
|
12259
12260
|
Trial: "Trial",
|
|
12260
12261
|
"Trial ends in": "Trial ends in {{days}} days",
|
|
12261
12262
|
"Trial plan": "Try free for {{days}} days",
|
|
@@ -13056,7 +13057,7 @@ var EmbedProvider = ({
|
|
|
13056
13057
|
useEffect2(() => {
|
|
13057
13058
|
if (accessToken) {
|
|
13058
13059
|
const { headers = {} } = apiConfig ?? {};
|
|
13059
|
-
headers["X-Schematic-Components-Version"] = "0.6.
|
|
13060
|
+
headers["X-Schematic-Components-Version"] = "0.6.4";
|
|
13060
13061
|
headers["X-Schematic-Session-ID"] = sessionIdRef.current;
|
|
13061
13062
|
const config = new Configuration({
|
|
13062
13063
|
...apiConfig,
|
|
@@ -13271,17 +13272,21 @@ function formatCurrency(amount, currency) {
|
|
|
13271
13272
|
return `$${formatted}${symbol}`;
|
|
13272
13273
|
};
|
|
13273
13274
|
if (dollars >= 1e6) {
|
|
13274
|
-
|
|
13275
|
-
}
|
|
13275
|
+
formatValue(dollars / 1e6, "M");
|
|
13276
|
+
}
|
|
13277
|
+
if (dollars >= 1e3) {
|
|
13276
13278
|
return formatValue(dollars / 1e3, "k");
|
|
13277
|
-
} else {
|
|
13278
|
-
return new Intl.NumberFormat("en-US", {
|
|
13279
|
-
style: "currency",
|
|
13280
|
-
currency: resolvedCurrency,
|
|
13281
|
-
minimumSignificantDigits: 1,
|
|
13282
|
-
maximumSignificantDigits: 4
|
|
13283
|
-
}).format(dollars);
|
|
13284
13279
|
}
|
|
13280
|
+
const hasManySignificantDigits = /[1-9]/.test(
|
|
13281
|
+
(amount % 1).toFixed(MAXIMUM_SIGNIFICANT_DIGITS)
|
|
13282
|
+
);
|
|
13283
|
+
return new Intl.NumberFormat("en-US", {
|
|
13284
|
+
style: "currency",
|
|
13285
|
+
currency: resolvedCurrency,
|
|
13286
|
+
...hasManySignificantDigits && {
|
|
13287
|
+
minimumSignificantDigits: 1
|
|
13288
|
+
}
|
|
13289
|
+
}).format(dollars);
|
|
13285
13290
|
} catch (error) {
|
|
13286
13291
|
console.error("Error formatting currency", error);
|
|
13287
13292
|
return new Intl.NumberFormat("en-US", {
|
|
@@ -16107,12 +16112,19 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
|
|
|
16107
16112
|
$position: "absolute",
|
|
16108
16113
|
$right: "1rem",
|
|
16109
16114
|
$top: "1rem",
|
|
16110
|
-
$fontSize: "0.75rem",
|
|
16111
|
-
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
16112
16115
|
$backgroundColor: theme.primary,
|
|
16113
16116
|
$borderRadius: "9999px",
|
|
16114
16117
|
$padding: "0.125rem 0.85rem",
|
|
16115
|
-
children:
|
|
16118
|
+
children: /* @__PURE__ */ jsx14(
|
|
16119
|
+
Text,
|
|
16120
|
+
{
|
|
16121
|
+
$font: theme.typography.text.fontFamily,
|
|
16122
|
+
$size: 0.75 * theme.typography.text.fontSize,
|
|
16123
|
+
$weight: theme.typography.text.fontWeight,
|
|
16124
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
16125
|
+
children: t2("Active")
|
|
16126
|
+
}
|
|
16127
|
+
)
|
|
16116
16128
|
}
|
|
16117
16129
|
)
|
|
16118
16130
|
] }),
|
|
@@ -16581,6 +16593,7 @@ var Plan = ({
|
|
|
16581
16593
|
(entitlement) => !!entitlement.priceBehavior
|
|
16582
16594
|
);
|
|
16583
16595
|
const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
|
|
16596
|
+
const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography.heading2;
|
|
16584
16597
|
return /* @__PURE__ */ jsxs12(
|
|
16585
16598
|
Flex,
|
|
16586
16599
|
{
|
|
@@ -16634,11 +16647,11 @@ var Plan = ({
|
|
|
16634
16647
|
/* @__PURE__ */ jsx17(
|
|
16635
16648
|
Text,
|
|
16636
16649
|
{
|
|
16637
|
-
$font:
|
|
16638
|
-
$size:
|
|
16639
|
-
$weight:
|
|
16640
|
-
$color:
|
|
16641
|
-
children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom
|
|
16650
|
+
$font: headerPriceFontStyle.fontFamily,
|
|
16651
|
+
$size: headerPriceFontStyle.fontSize,
|
|
16652
|
+
$weight: headerPriceFontStyle.fontWeight,
|
|
16653
|
+
$color: headerPriceFontStyle.color,
|
|
16654
|
+
children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
|
|
16642
16655
|
}
|
|
16643
16656
|
),
|
|
16644
16657
|
!plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs12(
|
|
@@ -16661,12 +16674,19 @@ var Plan = ({
|
|
|
16661
16674
|
$position: "absolute",
|
|
16662
16675
|
$right: "1rem",
|
|
16663
16676
|
$top: "1rem",
|
|
16664
|
-
$fontSize: "0.75rem",
|
|
16665
|
-
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
16666
16677
|
$backgroundColor: theme.primary,
|
|
16667
16678
|
$borderRadius: "9999px",
|
|
16668
16679
|
$padding: "0.125rem 0.85rem",
|
|
16669
|
-
children:
|
|
16680
|
+
children: /* @__PURE__ */ jsx17(
|
|
16681
|
+
Text,
|
|
16682
|
+
{
|
|
16683
|
+
$font: theme.typography.text.fontFamily,
|
|
16684
|
+
$size: 0.75 * theme.typography.text.fontSize,
|
|
16685
|
+
$weight: theme.typography.text.fontWeight,
|
|
16686
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
16687
|
+
children: t2("Active")
|
|
16688
|
+
}
|
|
16689
|
+
)
|
|
16670
16690
|
}
|
|
16671
16691
|
)
|
|
16672
16692
|
]
|
|
@@ -16908,7 +16928,7 @@ var Plan = ({
|
|
|
16908
16928
|
{
|
|
16909
16929
|
href: plan.customPlanConfig?.ctaWebSite ?? "#",
|
|
16910
16930
|
target: "_blank",
|
|
16911
|
-
children: plan.customPlanConfig?.ctaText ?? t2("
|
|
16931
|
+
children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
|
|
16912
16932
|
}
|
|
16913
16933
|
) : !plan.valid ? /* @__PURE__ */ jsx17(
|
|
16914
16934
|
Tooltip,
|
|
@@ -18688,6 +18708,7 @@ import { forwardRef as forwardRef9, useMemo as useMemo10, useRef as useRef8 } fr
|
|
|
18688
18708
|
// src/components/elements/metered-features/styles.ts
|
|
18689
18709
|
var Container4 = dt(Flex)`
|
|
18690
18710
|
flex-direction: column;
|
|
18711
|
+
gap: 1rem;
|
|
18691
18712
|
|
|
18692
18713
|
&:last-child {
|
|
18693
18714
|
overflow: hidden;
|
|
@@ -18712,6 +18733,15 @@ var Container4 = dt(Flex)`
|
|
|
18712
18733
|
`;
|
|
18713
18734
|
}}
|
|
18714
18735
|
}
|
|
18736
|
+
|
|
18737
|
+
${({ theme }) => {
|
|
18738
|
+
return theme.sectionLayout === "separate" && lt`
|
|
18739
|
+
${Element}:not(:is(${FussyChild})) {
|
|
18740
|
+
border-bottom-left-radius: 0;
|
|
18741
|
+
border-bottom-right-radius: 0;
|
|
18742
|
+
}
|
|
18743
|
+
`;
|
|
18744
|
+
}}
|
|
18715
18745
|
`;
|
|
18716
18746
|
|
|
18717
18747
|
// src/components/elements/metered-features/MeteredFeatures.tsx
|
|
@@ -18806,6 +18836,10 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
|
|
|
18806
18836
|
$alignItems: "center",
|
|
18807
18837
|
$padding: `${0.4375 * theme.card.padding / TEXT_BASE_SIZE}rem ${theme.card.padding / TEXT_BASE_SIZE}rem`,
|
|
18808
18838
|
$backgroundColor: isLightBackground ? darken(theme.card.background, 0.05) : lighten(theme.card.background, 0.1),
|
|
18839
|
+
...theme.sectionLayout === "separate" && {
|
|
18840
|
+
$borderBottomLeftRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
|
|
18841
|
+
$borderBottomRightRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`
|
|
18842
|
+
},
|
|
18809
18843
|
children: [
|
|
18810
18844
|
/* @__PURE__ */ jsx30(
|
|
18811
18845
|
Text,
|
|
@@ -19664,6 +19698,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
|
|
|
19664
19698
|
const isTrialSubscription = billingSubscription?.status === "trialing";
|
|
19665
19699
|
const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
|
|
19666
19700
|
const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
|
|
19701
|
+
const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
|
|
19667
19702
|
return /* @__PURE__ */ jsxs27(Fragment11, { children: [
|
|
19668
19703
|
isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs27(
|
|
19669
19704
|
Box,
|
|
@@ -19785,10 +19820,10 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
|
|
|
19785
19820
|
/* @__PURE__ */ jsx34(
|
|
19786
19821
|
Text,
|
|
19787
19822
|
{
|
|
19788
|
-
$font:
|
|
19789
|
-
$size:
|
|
19790
|
-
$weight:
|
|
19791
|
-
$color:
|
|
19823
|
+
$font: headerPriceFontStyle.fontFamily,
|
|
19824
|
+
$size: headerPriceFontStyle.fontSize,
|
|
19825
|
+
$weight: headerPriceFontStyle.fontWeight,
|
|
19826
|
+
$color: headerPriceFontStyle.color,
|
|
19792
19827
|
children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
|
|
19793
19828
|
currentPlan.planPrice,
|
|
19794
19829
|
subscriptionCurrency
|
|
@@ -20155,6 +20190,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
|
|
|
20155
20190
|
(entitlement) => !!entitlement.priceBehavior
|
|
20156
20191
|
);
|
|
20157
20192
|
const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
|
|
20193
|
+
const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.plans.name.fontStyle];
|
|
20158
20194
|
return /* @__PURE__ */ jsxs28(
|
|
20159
20195
|
Flex,
|
|
20160
20196
|
{
|
|
@@ -20203,11 +20239,11 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
|
|
|
20203
20239
|
/* @__PURE__ */ jsx35(
|
|
20204
20240
|
Text,
|
|
20205
20241
|
{
|
|
20206
|
-
$font:
|
|
20207
|
-
$size:
|
|
20208
|
-
$weight:
|
|
20209
|
-
$color:
|
|
20210
|
-
children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom
|
|
20242
|
+
$font: headerPriceFontStyle.fontFamily,
|
|
20243
|
+
$size: headerPriceFontStyle.fontSize,
|
|
20244
|
+
$weight: headerPriceFontStyle.fontWeight,
|
|
20245
|
+
$color: headerPriceFontStyle.color,
|
|
20246
|
+
children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
|
|
20211
20247
|
}
|
|
20212
20248
|
),
|
|
20213
20249
|
!plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs28(
|
|
@@ -20230,12 +20266,19 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
|
|
|
20230
20266
|
$position: "absolute",
|
|
20231
20267
|
$right: "1rem",
|
|
20232
20268
|
$top: "1rem",
|
|
20233
|
-
$fontSize: "0.75rem",
|
|
20234
|
-
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
20235
20269
|
$backgroundColor: theme.primary,
|
|
20236
20270
|
$borderRadius: "9999px",
|
|
20237
20271
|
$padding: "0.125rem 0.85rem",
|
|
20238
|
-
children:
|
|
20272
|
+
children: /* @__PURE__ */ jsx35(
|
|
20273
|
+
Text,
|
|
20274
|
+
{
|
|
20275
|
+
$font: theme.typography.text.fontFamily,
|
|
20276
|
+
$size: 0.75 * theme.typography.text.fontSize,
|
|
20277
|
+
$weight: theme.typography.text.fontWeight,
|
|
20278
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
20279
|
+
children: trialEndDays ? t2("Trial ends in", { days: trialEndDays }) : t2("Active")
|
|
20280
|
+
}
|
|
20281
|
+
)
|
|
20239
20282
|
}
|
|
20240
20283
|
)
|
|
20241
20284
|
]
|
|
@@ -20492,7 +20535,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
|
|
|
20492
20535
|
{
|
|
20493
20536
|
href: plan.customPlanConfig?.ctaWebSite ?? "#",
|
|
20494
20537
|
target: "_blank",
|
|
20495
|
-
children: plan.customPlanConfig?.ctaText ?? t2("
|
|
20538
|
+
children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
|
|
20496
20539
|
}
|
|
20497
20540
|
) : !plan.valid ? /* @__PURE__ */ jsx35(
|
|
20498
20541
|
Tooltip,
|
|
@@ -20610,12 +20653,19 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
|
|
|
20610
20653
|
$position: "absolute",
|
|
20611
20654
|
$right: "1rem",
|
|
20612
20655
|
$top: "1rem",
|
|
20613
|
-
$fontSize: "0.75rem",
|
|
20614
|
-
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
20615
20656
|
$backgroundColor: theme.primary,
|
|
20616
20657
|
$borderRadius: "9999px",
|
|
20617
20658
|
$padding: "0.125rem 0.85rem",
|
|
20618
|
-
children:
|
|
20659
|
+
children: /* @__PURE__ */ jsx35(
|
|
20660
|
+
Text,
|
|
20661
|
+
{
|
|
20662
|
+
$font: theme.typography.text.fontFamily,
|
|
20663
|
+
$size: 0.75 * theme.typography.text.fontSize,
|
|
20664
|
+
$weight: theme.typography.text.fontWeight,
|
|
20665
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
20666
|
+
children: t2("Active")
|
|
20667
|
+
}
|
|
20668
|
+
)
|
|
20619
20669
|
}
|
|
20620
20670
|
)
|
|
20621
20671
|
] }),
|