@schematichq/schematic-components 0.7.5 → 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
  1. package/dist/schematic-components.cjs.js +113 -221
  2. package/dist/schematic-components.d.ts +4 -3
  3. package/dist/schematic-components.esm.js +113 -221
  4. package/package.json +1 -1
package/dist/schematic-components.cjs.js CHANGED
@@ -13193,7 +13193,7 @@ var EmbedProvider = ({
13193
13193
  (0, import_react11.useEffect)(() => {
13194
13194
  if (accessToken) {
13195
13195
  const { headers = {} } = apiConfig ?? {};
13196
- headers["X-Schematic-Components-Version"] = "0.7.5";
13196
+ headers["X-Schematic-Components-Version"] = "0.7.6";
13197
13197
  headers["X-Schematic-Session-ID"] = sessionIdRef.current;
13198
13198
  const config = new Configuration({
13199
13199
  ...apiConfig,
@@ -14450,43 +14450,61 @@ var ProgressBar = ({
14450
14450
 
14451
14451
  // src/components/ui/text/styles.ts
14452
14452
  var TextPropNames = /* @__PURE__ */ ((TextPropNames2) => {
14453
- TextPropNames2["Align"] = "$align";
14454
14453
  TextPropNames2["Font"] = "$font";
14455
14454
  TextPropNames2["Size"] = "$size";
14456
14455
  TextPropNames2["Weight"] = "$weight";
14457
14456
  TextPropNames2["Color"] = "$color";
14458
14457
  TextPropNames2["Leading"] = "$leading";
14458
+ TextPropNames2["Align"] = "$align";
14459
14459
  return TextPropNames2;
14460
14460
  })(TextPropNames || {});
14461
- var Text = dt.span.attrs(({ onClick }) => ({
14461
+ var Text = dt.span.withConfig({
14462
+ shouldForwardProp: (prop) => prop !== "display"
14463
+ }).attrs(({ onClick }) => ({
14462
14464
  ...onClick && { tabIndex: 0 }
14463
- }))`
14464
- ${({ $font }) => $font && lt`
14465
- font-family: ${$font}, sans-serif;
14466
- `};
14467
- ${({ $size }) => typeof $size !== "undefined" && lt`
14468
- font-size: ${typeof $size === "number" ? `${$size / TEXT_BASE_SIZE}rem` : $size};
14469
- `};
14470
- ${({ $weight }) => typeof $weight !== "undefined" && lt`
14471
- font-weight: ${$weight};
14472
- font-variation-settings: "wght" ${$weight};
14473
- `};
14474
- ${({ $leading }) => attr("line-height", $leading)};
14475
- ${({ $align }) => attr("text-align", $align)};
14476
- color: ${({ $color, theme }) => $color || theme.typography.text.color};
14477
-
14478
- &:focus-visible {
14479
- outline: 2px solid ${({ theme }) => theme.primary};
14480
- outline-offset: 2px;
14481
- }
14482
-
14483
- ${({ onClick }) => onClick && lt`
14484
- &:hover {
14485
- cursor: pointer;
14486
- text-decoration: underline;
14465
+ }))(
14466
+ ({
14467
+ display = "text",
14468
+ theme,
14469
+ onClick,
14470
+ $font,
14471
+ $size,
14472
+ $weight,
14473
+ $color,
14474
+ $leading = 1.35,
14475
+ $align
14476
+ }) => {
14477
+ const settings = theme.typography[display];
14478
+ const fontFamily = $font || settings.fontFamily;
14479
+ const fontSize = $size || settings.fontSize;
14480
+ const fontWeight = $weight || settings.fontWeight;
14481
+ const color = $color || settings.color;
14482
+ return lt`
14483
+ font-family: ${fontFamily}, sans-serif;
14484
+ font-size: ${typeof fontSize === "number" ? `${fontSize / TEXT_BASE_SIZE}rem` : fontSize};
14485
+ font-weight: ${fontWeight};
14486
+ font-variation-settings: "wght" ${fontWeight};
14487
+ line-height: ${$leading};
14488
+ color: ${color};
14489
+
14490
+ ${$align && lt`
14491
+ text-align: ${$align};
14492
+ `};
14493
+
14494
+ ${onClick && lt`
14495
+ &:hover {
14496
+ cursor: pointer;
14497
+ text-decoration: underline;
14498
+ }
14499
+ `}
14500
+
14501
+ &:focus-visible {
14502
+ outline: 2px solid ${({ theme: theme2 }) => theme2.primary};
14503
+ outline-offset: 2px;
14487
14504
  }
14488
- `}
14489
- `;
14505
+ `;
14506
+ }
14507
+ );
14490
14508
 
14491
14509
  // src/components/ui/tooltip/Tooltip.tsx
14492
14510
  var import_debounce = __toESM(require_debounce());
@@ -14773,7 +14791,7 @@ var Container2 = dt.div`
14773
14791
  all: initial;
14774
14792
  box-sizing: border-box;
14775
14793
  display: block;
14776
- font-size: ${TEXT_BASE_SIZE}px;
14794
+ font-size: 1rem;
14777
14795
  line-height: 1.35;
14778
14796
  width: 100%;
14779
14797
  height: 100%;
@@ -14830,6 +14848,7 @@ var StageButton = ({
14830
14848
  checkoutStages,
14831
14849
  hasAddOns,
14832
14850
  hasPayInAdvanceEntitlements,
14851
+ hasUnstagedChanges,
14833
14852
  isLoading,
14834
14853
  requiresPayment,
14835
14854
  setCheckoutStage,
@@ -14841,7 +14860,7 @@ var StageButton = ({
14841
14860
  EmbedButton,
14842
14861
  {
14843
14862
  type: "button",
14844
- disabled: isLoading || !canUpdateSubscription,
14863
+ disabled: isLoading || !hasUnstagedChanges || !canUpdateSubscription,
14845
14864
  onClick: checkout,
14846
14865
  isLoading,
14847
14866
  children: t2("Subscribe and close")
@@ -14882,7 +14901,7 @@ var StageButton = ({
14882
14901
  EmbedButton,
14883
14902
  {
14884
14903
  type: "button",
14885
- disabled: !canUpdateSubscription,
14904
+ disabled: !hasUnstagedChanges || !canUpdateSubscription,
14886
14905
  onClick: async () => {
14887
14906
  checkout();
14888
14907
  },
@@ -15008,7 +15027,7 @@ var StageButton = ({
15008
15027
  EmbedButton,
15009
15028
  {
15010
15029
  type: "button",
15011
- disabled: isLoading || !canCheckout,
15030
+ disabled: isLoading || !hasUnstagedChanges || !canCheckout,
15012
15031
  onClick: checkout,
15013
15032
  isLoading,
15014
15033
  children: canTrial ? t2("Start trial") : t2("Pay now")
@@ -15212,14 +15231,6 @@ var Sidebar = ({
15212
15231
  }
15213
15232
  }, [t2, api, hydrate, setError, setIsLoading, setLayout]);
15214
15233
  const selectedAddOns = addOns.filter((addOn) => addOn.isSelected);
15215
- const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
15216
- const canUpdateSubscription = mode === "edit" || api !== null && (willPlanChange || // TODO: test add-on comparison for finding "changes"
15217
- selectedAddOns.length !== currentAddOns.length || !selectedAddOns.every(
15218
- (addOn) => currentAddOns.some((currentAddOn) => addOn.id === currentAddOn.id)
15219
- ) || payInAdvanceEntitlements.every(
15220
- ({ quantity, usage }) => quantity >= usage
15221
- )) && !isLoading;
15222
- const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
15223
15234
  const {
15224
15235
  changedUsageBasedEntitlements,
15225
15236
  addedUsageBasedEntitlements,
@@ -15276,6 +15287,7 @@ var Sidebar = ({
15276
15287
  currentUsageBasedEntitlements,
15277
15288
  usageBasedEntitlements
15278
15289
  ]);
15290
+ const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
15279
15291
  const removedAddOns = currentAddOns.filter(
15280
15292
  (current) => !selectedAddOns.some((selected) => current.id === selected.id)
15281
15293
  );
@@ -15283,6 +15295,10 @@ var Sidebar = ({
15283
15295
  (selected) => !currentAddOns.some((current) => selected.id === current.id)
15284
15296
  );
15285
15297
  const willAddOnsChange = removedAddOns.length > 0 || addedAddOns.length > 0;
15298
+ const willPayInAdvanceEntitlementsChange = payInAdvanceEntitlements.length > 0 && payInAdvanceEntitlements.some(({ quantity, usage }) => quantity !== usage);
15299
+ const hasUnstagedChanges = willPlanChange || willAddOnsChange || willPayInAdvanceEntitlementsChange;
15300
+ const canUpdateSubscription = mode === "edit" || api !== null && !isLoading;
15301
+ const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
15286
15302
  const isTrialable = selectedPlan?.companyCanTrial;
15287
15303
  const today = /* @__PURE__ */ new Date();
15288
15304
  const trialEndsOn = new Date(today);
@@ -16194,6 +16210,7 @@ var Sidebar = ({
16194
16210
  checkoutStages,
16195
16211
  hasAddOns: addOns.length > 0,
16196
16212
  hasPayInAdvanceEntitlements: payInAdvanceEntitlements.length > 0,
16213
+ hasUnstagedChanges,
16197
16214
  isLoading,
16198
16215
  requiresPayment,
16199
16216
  setCheckoutStage,
@@ -19950,7 +19967,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
19950
19967
  const isTrialSubscription = billingSubscription?.status === "trialing";
19951
19968
  const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
19952
19969
  const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
19953
- const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
19970
+ const headerPriceFontStyle = isUsageBasedPlan ? "heading3" : props.header.price.fontStyle;
19954
19971
  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
19955
19972
  isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
19956
19973
  Notice,
@@ -19962,32 +19979,12 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
19962
19979
  $textAlign: "center",
19963
19980
  $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
19964
19981
  children: [
19965
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
19966
- Text,
19967
- {
19968
- as: "h3",
19969
- $font: theme.typography.heading3.fontFamily,
19970
- $size: theme.typography.heading3.fontSize,
19971
- $weight: theme.typography.heading3.fontWeight,
19972
- $color: theme.typography.heading3.color,
19973
- children: t2("Trial ends in", { days: trialEndDays.toString() })
19974
- }
19975
- ),
19976
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
19977
- Text,
19978
- {
19979
- as: "p",
19980
- $font: theme.typography.text.fontFamily,
19981
- $size: 0.8125 * theme.typography.text.fontSize,
19982
- $weight: theme.typography.text.fontWeight,
19983
- $color: theme.typography.text.color,
19984
- children: data.trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
19985
- defaultPlanName: defaultPlan?.name
19986
- }) : t2("After the trial, cancel no default", {
19987
- planName: currentPlan?.name
19988
- })
19989
- }
19990
- )
19982
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "h3", display: "heading3", children: t2("Trial ends in", { days: trialEndDays.toString() }) }),
19983
+ /* @__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", {
19984
+ defaultPlanName: defaultPlan?.name
19985
+ }) : t2("After the trial, cancel no default", {
19986
+ planName: currentPlan?.name
19987
+ }) })
19991
19988
  ]
19992
19989
  }
19993
19990
  ) : willSubscriptionCancel && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -20000,35 +19997,15 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
20000
19997
  $textAlign: "center",
20001
19998
  $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
20002
19999
  children: [
20003
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
20004
- Text,
20005
- {
20006
- as: "h3",
20007
- $font: theme.typography.heading3.fontFamily,
20008
- $size: theme.typography.heading3.fontSize,
20009
- $weight: theme.typography.heading3.fontWeight,
20010
- $color: theme.typography.heading3.color,
20011
- children: t2("Subscription canceled")
20012
- }
20013
- ),
20014
- billingSubscription?.cancelAt && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
20015
- Text,
20016
- {
20017
- as: "p",
20018
- $font: theme.typography.text.fontFamily,
20019
- $size: 0.8125 * theme.typography.text.fontSize,
20020
- $weight: theme.typography.text.fontWeight,
20021
- $color: theme.typography.text.color,
20022
- children: t2("Access to plan will end on", {
20023
- date: toPrettyDate(
20024
- new Date(billingSubscription.cancelAt * 1e3),
20025
- {
20026
- month: "numeric"
20027
- }
20028
- )
20029
- })
20030
- }
20031
- )
20000
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
20001
+ 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", {
20002
+ date: toPrettyDate(
20003
+ new Date(billingSubscription.cancelAt * 1e3),
20004
+ {
20005
+ month: "numeric"
20006
+ }
20007
+ )
20008
+ }) })
20032
20009
  ]
20033
20010
  }
20034
20011
  ),
@@ -20050,57 +20027,18 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
20050
20027
  $gap: "1rem",
20051
20028
  children: [
20052
20029
  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
20053
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
20054
- Text,
20055
- {
20056
- as: Box,
20057
- $font: theme.typography[props.header.title.fontStyle].fontFamily,
20058
- $size: theme.typography[props.header.title.fontStyle].fontSize,
20059
- $weight: theme.typography[props.header.title.fontStyle].fontWeight,
20060
- $color: theme.typography[props.header.title.fontStyle].color,
20061
- $leading: 1,
20062
- children: currentPlan.name
20063
- }
20064
- ),
20065
- props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
20066
- Text,
20067
- {
20068
- as: Box,
20069
- $font: theme.typography[props.header.description.fontStyle].fontFamily,
20070
- $size: theme.typography[props.header.description.fontStyle].fontSize,
20071
- $weight: theme.typography[props.header.description.fontStyle].fontWeight,
20072
- $color: theme.typography[props.header.description.fontStyle].color,
20073
- children: currentPlan.description
20074
- }
20075
- )
20030
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
20031
+ props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
20076
20032
  ] }),
20077
20033
  props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Box, { children: [
20078
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
20079
- Text,
20080
- {
20081
- $font: headerPriceFontStyle.fontFamily,
20082
- $size: headerPriceFontStyle.fontSize,
20083
- $weight: headerPriceFontStyle.fontWeight,
20084
- $color: headerPriceFontStyle.color,
20085
- children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
20086
- currentPlan.planPrice,
20087
- subscriptionCurrency
20088
- )
20089
- }
20090
- ),
20091
- !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
20092
- Text,
20093
- {
20094
- $font: theme.typography[props.header.price.fontStyle].fontFamily,
20095
- $size: theme.typography[props.header.price.fontStyle].fontSize,
20096
- $weight: theme.typography[props.header.price.fontStyle].fontWeight,
20097
- $color: theme.typography[props.header.price.fontStyle].color,
20098
- children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
20099
- "/",
20100
- shortenPeriod(currentPlan.planPeriod)
20101
- ] })
20102
- }
20103
- )
20034
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: headerPriceFontStyle, children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
20035
+ currentPlan.planPrice,
20036
+ subscriptionCurrency
20037
+ ) }),
20038
+ !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
20039
+ "/",
20040
+ shortenPeriod(currentPlan.planPeriod)
20041
+ ] }) })
20104
20042
  ] })
20105
20043
  ]
20106
20044
  }
@@ -20109,9 +20047,6 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
20109
20047
  props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
20110
20048
  Text,
20111
20049
  {
20112
- $font: theme.typography.text.fontFamily,
20113
- $size: theme.typography.text.fontSize,
20114
- $weight: theme.typography.text.fontWeight,
20115
20050
  $color: isLightBackground ? darken(theme.card.background, 0.46) : lighten(theme.card.background, 0.46),
20116
20051
  $leading: 1,
20117
20052
  children: t2("Add-ons")
@@ -20125,32 +20060,14 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
20125
20060
  $flexWrap: "wrap",
20126
20061
  $gap: "1rem",
20127
20062
  children: [
20128
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
20129
- Text,
20130
- {
20131
- $font: theme.typography[props.addOns.fontStyle].fontFamily,
20132
- $size: theme.typography[props.addOns.fontStyle].fontSize,
20133
- $weight: theme.typography[props.addOns.fontStyle].fontWeight,
20134
- $color: theme.typography[props.addOns.fontStyle].color,
20135
- children: addOn.name
20136
- }
20137
- ),
20138
- addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
20139
- Text,
20140
- {
20141
- $font: theme.typography.text.fontFamily,
20142
- $size: theme.typography.text.fontSize,
20143
- $weight: theme.typography.text.fontWeight,
20144
- $color: theme.typography.text.color,
20145
- children: [
20146
- formatCurrency(addOn.planPrice, subscriptionCurrency),
20147
- /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
20148
- "/",
20149
- shortenPeriod(addOn.planPeriod)
20150
- ] })
20151
- ]
20152
- }
20153
- )
20063
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { display: props.addOns.fontStyle, children: addOn.name }),
20064
+ addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { children: [
20065
+ formatCurrency(addOn.planPrice, subscriptionCurrency),
20066
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
20067
+ "/",
20068
+ shortenPeriod(addOn.planPeriod)
20069
+ ] })
20070
+ ] })
20154
20071
  ]
20155
20072
  },
20156
20073
  addOnIndex
@@ -20160,9 +20077,6 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
20160
20077
  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
20161
20078
  Text,
20162
20079
  {
20163
- $font: theme.typography.text.fontFamily,
20164
- $size: theme.typography.text.fontSize,
20165
- $weight: theme.typography.text.fontWeight,
20166
20080
  $color: isLightBackground ? darken(theme.card.background, 0.46) : lighten(theme.card.background, 0.46),
20167
20081
  $leading: 1,
20168
20082
  children: t2("Usage-based")
@@ -20183,33 +20097,22 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
20183
20097
  $flexWrap: "wrap",
20184
20098
  $gap: "1rem",
20185
20099
  children: [
20186
- /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
20187
- Text,
20188
- {
20189
- $font: theme.typography[props.addOns.fontStyle].fontFamily,
20190
- $size: theme.typography[props.addOns.fontStyle].fontSize,
20191
- $weight: theme.typography[props.addOns.fontStyle].fontWeight,
20192
- $color: theme.typography[props.addOns.fontStyle].color,
20193
- children: [
20194
- entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
20195
- limit,
20196
- " ",
20197
- getFeatureName(entitlement.feature, limit)
20198
- ] }) : entitlement.feature.name,
20199
- entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
20200
- "/",
20201
- shortenPeriod(currentPlan.planPeriod)
20202
- ] })
20203
- ]
20204
- }
20205
- ),
20100
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { display: props.addOns.fontStyle, children: [
20101
+ entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
20102
+ limit,
20103
+ " ",
20104
+ getFeatureName(entitlement.feature, limit)
20105
+ ] }) : entitlement.feature.name,
20106
+ entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
20107
+ "/",
20108
+ shortenPeriod(currentPlan.planPeriod)
20109
+ ] })
20110
+ ] }),
20206
20111
  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
20207
20112
  entitlement.priceBehavior === "overage" && currentPlan?.planPeriod ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
20208
20113
  Text,
20209
20114
  {
20210
- $font: theme.typography.text.fontFamily,
20211
20115
  $size: 0.875 * theme.typography.text.fontSize,
20212
- $weight: theme.typography.text.fontWeight,
20213
20116
  $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
20214
20117
  children: typeof overageAmount === "number" && overageAmount > 0 ? t2("X over the limit", {
20215
20118
  amount: overageAmount
@@ -20234,9 +20137,7 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
20234
20137
  ) : entitlement.priceBehavior === "pay_in_advance" && currentPlan?.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
20235
20138
  Text,
20236
20139
  {
20237
- $font: theme.typography.text.fontFamily,
20238
20140
  $size: 0.875 * theme.typography.text.fontSize,
20239
- $weight: theme.typography.text.fontWeight,
20240
20141
  $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
20241
20142
  children: [
20242
20143
  formatCurrency(
@@ -20252,25 +20153,16 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
20252
20153
  ]
20253
20154
  }
20254
20155
  ),
20255
- amount > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
20256
- Text,
20257
- {
20258
- $font: theme.typography.text.fontFamily,
20259
- $size: theme.typography.text.fontSize,
20260
- $weight: theme.typography.text.fontWeight,
20261
- $color: theme.typography.text.color,
20262
- children: [
20263
- formatCurrency(
20264
- (entitlement.price ?? 0) * amount,
20265
- entitlement.currency
20266
- ),
20267
- (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
20268
- "/",
20269
- currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
20270
- ] })
20271
- ]
20272
- }
20273
- )
20156
+ amount > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Text, { children: [
20157
+ formatCurrency(
20158
+ (entitlement.price ?? 0) * amount,
20159
+ entitlement.currency
20160
+ ),
20161
+ (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
20162
+ "/",
20163
+ currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
20164
+ ] })
20165
+ ] })
20274
20166
  ] })
20275
20167
  ]
20276
20168
  },
package/dist/schematic-components.d.ts CHANGED
@@ -4740,23 +4740,24 @@ portal?: HTMLElement | null;
4740
4740
  export declare type TextElementProps = DesignProps_8;
4741
4741
 
4742
4742
  export declare enum TextPropNames {
4743
- Align = "$align",
4744
4743
  Font = "$font",
4745
4744
  Size = "$size",
4746
4745
  Weight = "$weight",
4747
4746
  Color = "$color",
4748
- Leading = "$leading"
4747
+ Leading = "$leading",
4748
+ Align = "$align"
4749
4749
  }
4750
4750
 
4751
4751
  export declare type TextPropNameTypes = `${TextPropNames}`;
4752
4752
 
4753
4753
  export declare interface TextProps {
4754
- $align?: ComponentProps["$textAlign"];
4754
+ display?: FontStyle;
4755
4755
  $font?: ComponentProps["$fontFamily"];
4756
4756
  $size?: ComponentProps["$fontSize"];
4757
4757
  $weight?: ComponentProps["$fontWeight"];
4758
4758
  $color?: ComponentProps["$color"];
4759
4759
  $leading?: ComponentProps["$lineHeight"];
4760
+ $align?: ComponentProps["$textAlign"];
4760
4761
  }
4761
4762
 
4762
4763
  export declare const Tooltip: ({ trigger, content, position, zIndex, ...rest }: TooltipProps) => JSX.Element;
package/dist/schematic-components.esm.js CHANGED
@@ -13140,7 +13140,7 @@ var EmbedProvider = ({
13140
13140
  useEffect2(() => {
13141
13141
  if (accessToken) {
13142
13142
  const { headers = {} } = apiConfig ?? {};
13143
- headers["X-Schematic-Components-Version"] = "0.7.5";
13143
+ headers["X-Schematic-Components-Version"] = "0.7.6";
13144
13144
  headers["X-Schematic-Session-ID"] = sessionIdRef.current;
13145
13145
  const config = new Configuration({
13146
13146
  ...apiConfig,
@@ -14397,43 +14397,61 @@ var ProgressBar = ({
14397
14397
 
14398
14398
  // src/components/ui/text/styles.ts
14399
14399
  var TextPropNames = /* @__PURE__ */ ((TextPropNames2) => {
14400
- TextPropNames2["Align"] = "$align";
14401
14400
  TextPropNames2["Font"] = "$font";
14402
14401
  TextPropNames2["Size"] = "$size";
14403
14402
  TextPropNames2["Weight"] = "$weight";
14404
14403
  TextPropNames2["Color"] = "$color";
14405
14404
  TextPropNames2["Leading"] = "$leading";
14405
+ TextPropNames2["Align"] = "$align";
14406
14406
  return TextPropNames2;
14407
14407
  })(TextPropNames || {});
14408
- var Text = dt.span.attrs(({ onClick }) => ({
14408
+ var Text = dt.span.withConfig({
14409
+ shouldForwardProp: (prop) => prop !== "display"
14410
+ }).attrs(({ onClick }) => ({
14409
14411
  ...onClick && { tabIndex: 0 }
14410
- }))`
14411
- ${({ $font }) => $font && lt`
14412
- font-family: ${$font}, sans-serif;
14413
- `};
14414
- ${({ $size }) => typeof $size !== "undefined" && lt`
14415
- font-size: ${typeof $size === "number" ? `${$size / TEXT_BASE_SIZE}rem` : $size};
14416
- `};
14417
- ${({ $weight }) => typeof $weight !== "undefined" && lt`
14418
- font-weight: ${$weight};
14419
- font-variation-settings: "wght" ${$weight};
14420
- `};
14421
- ${({ $leading }) => attr("line-height", $leading)};
14422
- ${({ $align }) => attr("text-align", $align)};
14423
- color: ${({ $color, theme }) => $color || theme.typography.text.color};
14424
-
14425
- &:focus-visible {
14426
- outline: 2px solid ${({ theme }) => theme.primary};
14427
- outline-offset: 2px;
14428
- }
14429
-
14430
- ${({ onClick }) => onClick && lt`
14431
- &:hover {
14432
- cursor: pointer;
14433
- text-decoration: underline;
14412
+ }))(
14413
+ ({
14414
+ display = "text",
14415
+ theme,
14416
+ onClick,
14417
+ $font,
14418
+ $size,
14419
+ $weight,
14420
+ $color,
14421
+ $leading = 1.35,
14422
+ $align
14423
+ }) => {
14424
+ const settings = theme.typography[display];
14425
+ const fontFamily = $font || settings.fontFamily;
14426
+ const fontSize = $size || settings.fontSize;
14427
+ const fontWeight = $weight || settings.fontWeight;
14428
+ const color = $color || settings.color;
14429
+ return lt`
14430
+ font-family: ${fontFamily}, sans-serif;
14431
+ font-size: ${typeof fontSize === "number" ? `${fontSize / TEXT_BASE_SIZE}rem` : fontSize};
14432
+ font-weight: ${fontWeight};
14433
+ font-variation-settings: "wght" ${fontWeight};
14434
+ line-height: ${$leading};
14435
+ color: ${color};
14436
+
14437
+ ${$align && lt`
14438
+ text-align: ${$align};
14439
+ `};
14440
+
14441
+ ${onClick && lt`
14442
+ &:hover {
14443
+ cursor: pointer;
14444
+ text-decoration: underline;
14445
+ }
14446
+ `}
14447
+
14448
+ &:focus-visible {
14449
+ outline: 2px solid ${({ theme: theme2 }) => theme2.primary};
14450
+ outline-offset: 2px;
14434
14451
  }
14435
- `}
14436
- `;
14452
+ `;
14453
+ }
14454
+ );
14437
14455
 
14438
14456
  // src/components/ui/tooltip/Tooltip.tsx
14439
14457
  var import_debounce = __toESM(require_debounce());
@@ -14720,7 +14738,7 @@ var Container2 = dt.div`
14720
14738
  all: initial;
14721
14739
  box-sizing: border-box;
14722
14740
  display: block;
14723
- font-size: ${TEXT_BASE_SIZE}px;
14741
+ font-size: 1rem;
14724
14742
  line-height: 1.35;
14725
14743
  width: 100%;
14726
14744
  height: 100%;
@@ -14787,6 +14805,7 @@ var StageButton = ({
14787
14805
  checkoutStages,
14788
14806
  hasAddOns,
14789
14807
  hasPayInAdvanceEntitlements,
14808
+ hasUnstagedChanges,
14790
14809
  isLoading,
14791
14810
  requiresPayment,
14792
14811
  setCheckoutStage,
@@ -14798,7 +14817,7 @@ var StageButton = ({
14798
14817
  EmbedButton,
14799
14818
  {
14800
14819
  type: "button",
14801
- disabled: isLoading || !canUpdateSubscription,
14820
+ disabled: isLoading || !hasUnstagedChanges || !canUpdateSubscription,
14802
14821
  onClick: checkout,
14803
14822
  isLoading,
14804
14823
  children: t2("Subscribe and close")
@@ -14839,7 +14858,7 @@ var StageButton = ({
14839
14858
  EmbedButton,
14840
14859
  {
14841
14860
  type: "button",
14842
- disabled: !canUpdateSubscription,
14861
+ disabled: !hasUnstagedChanges || !canUpdateSubscription,
14843
14862
  onClick: async () => {
14844
14863
  checkout();
14845
14864
  },
@@ -14965,7 +14984,7 @@ var StageButton = ({
14965
14984
  EmbedButton,
14966
14985
  {
14967
14986
  type: "button",
14968
- disabled: isLoading || !canCheckout,
14987
+ disabled: isLoading || !hasUnstagedChanges || !canCheckout,
14969
14988
  onClick: checkout,
14970
14989
  isLoading,
14971
14990
  children: canTrial ? t2("Start trial") : t2("Pay now")
@@ -15169,14 +15188,6 @@ var Sidebar = ({
15169
15188
  }
15170
15189
  }, [t2, api, hydrate, setError, setIsLoading, setLayout]);
15171
15190
  const selectedAddOns = addOns.filter((addOn) => addOn.isSelected);
15172
- const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
15173
- const canUpdateSubscription = mode === "edit" || api !== null && (willPlanChange || // TODO: test add-on comparison for finding "changes"
15174
- selectedAddOns.length !== currentAddOns.length || !selectedAddOns.every(
15175
- (addOn) => currentAddOns.some((currentAddOn) => addOn.id === currentAddOn.id)
15176
- ) || payInAdvanceEntitlements.every(
15177
- ({ quantity, usage }) => quantity >= usage
15178
- )) && !isLoading;
15179
- const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
15180
15191
  const {
15181
15192
  changedUsageBasedEntitlements,
15182
15193
  addedUsageBasedEntitlements,
@@ -15233,6 +15244,7 @@ var Sidebar = ({
15233
15244
  currentUsageBasedEntitlements,
15234
15245
  usageBasedEntitlements
15235
15246
  ]);
15247
+ const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
15236
15248
  const removedAddOns = currentAddOns.filter(
15237
15249
  (current) => !selectedAddOns.some((selected) => current.id === selected.id)
15238
15250
  );
@@ -15240,6 +15252,10 @@ var Sidebar = ({
15240
15252
  (selected) => !currentAddOns.some((current) => selected.id === current.id)
15241
15253
  );
15242
15254
  const willAddOnsChange = removedAddOns.length > 0 || addedAddOns.length > 0;
15255
+ const willPayInAdvanceEntitlementsChange = payInAdvanceEntitlements.length > 0 && payInAdvanceEntitlements.some(({ quantity, usage }) => quantity !== usage);
15256
+ const hasUnstagedChanges = willPlanChange || willAddOnsChange || willPayInAdvanceEntitlementsChange;
15257
+ const canUpdateSubscription = mode === "edit" || api !== null && !isLoading;
15258
+ const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
15243
15259
  const isTrialable = selectedPlan?.companyCanTrial;
15244
15260
  const today = /* @__PURE__ */ new Date();
15245
15261
  const trialEndsOn = new Date(today);
@@ -16151,6 +16167,7 @@ var Sidebar = ({
16151
16167
  checkoutStages,
16152
16168
  hasAddOns: addOns.length > 0,
16153
16169
  hasPayInAdvanceEntitlements: payInAdvanceEntitlements.length > 0,
16170
+ hasUnstagedChanges,
16154
16171
  isLoading,
16155
16172
  requiresPayment,
16156
16173
  setCheckoutStage,
@@ -19911,7 +19928,7 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
19911
19928
  const isTrialSubscription = billingSubscription?.status === "trialing";
19912
19929
  const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
19913
19930
  const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
19914
- const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
19931
+ const headerPriceFontStyle = isUsageBasedPlan ? "heading3" : props.header.price.fontStyle;
19915
19932
  return /* @__PURE__ */ jsxs27(Fragment11, { children: [
19916
19933
  isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs27(
19917
19934
  Notice,
@@ -19923,32 +19940,12 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
19923
19940
  $textAlign: "center",
19924
19941
  $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
19925
19942
  children: [
19926
- /* @__PURE__ */ jsx35(
19927
- Text,
19928
- {
19929
- as: "h3",
19930
- $font: theme.typography.heading3.fontFamily,
19931
- $size: theme.typography.heading3.fontSize,
19932
- $weight: theme.typography.heading3.fontWeight,
19933
- $color: theme.typography.heading3.color,
19934
- children: t2("Trial ends in", { days: trialEndDays.toString() })
19935
- }
19936
- ),
19937
- /* @__PURE__ */ jsx35(
19938
- Text,
19939
- {
19940
- as: "p",
19941
- $font: theme.typography.text.fontFamily,
19942
- $size: 0.8125 * theme.typography.text.fontSize,
19943
- $weight: theme.typography.text.fontWeight,
19944
- $color: theme.typography.text.color,
19945
- children: data.trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
19946
- defaultPlanName: defaultPlan?.name
19947
- }) : t2("After the trial, cancel no default", {
19948
- planName: currentPlan?.name
19949
- })
19950
- }
19951
- )
19943
+ /* @__PURE__ */ jsx35(Text, { as: "h3", display: "heading3", children: t2("Trial ends in", { days: trialEndDays.toString() }) }),
19944
+ /* @__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", {
19945
+ defaultPlanName: defaultPlan?.name
19946
+ }) : t2("After the trial, cancel no default", {
19947
+ planName: currentPlan?.name
19948
+ }) })
19952
19949
  ]
19953
19950
  }
19954
19951
  ) : willSubscriptionCancel && /* @__PURE__ */ jsxs27(
@@ -19961,35 +19958,15 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
19961
19958
  $textAlign: "center",
19962
19959
  $backgroundColor: isLightBackground ? darken(theme.card.background, 0.04) : lighten(theme.card.background, 0.04),
19963
19960
  children: [
19964
- /* @__PURE__ */ jsx35(
19965
- Text,
19966
- {
19967
- as: "h3",
19968
- $font: theme.typography.heading3.fontFamily,
19969
- $size: theme.typography.heading3.fontSize,
19970
- $weight: theme.typography.heading3.fontWeight,
19971
- $color: theme.typography.heading3.color,
19972
- children: t2("Subscription canceled")
19973
- }
19974
- ),
19975
- billingSubscription?.cancelAt && /* @__PURE__ */ jsx35(
19976
- Text,
19977
- {
19978
- as: "p",
19979
- $font: theme.typography.text.fontFamily,
19980
- $size: 0.8125 * theme.typography.text.fontSize,
19981
- $weight: theme.typography.text.fontWeight,
19982
- $color: theme.typography.text.color,
19983
- children: t2("Access to plan will end on", {
19984
- date: toPrettyDate(
19985
- new Date(billingSubscription.cancelAt * 1e3),
19986
- {
19987
- month: "numeric"
19988
- }
19989
- )
19990
- })
19991
- }
19992
- )
19961
+ /* @__PURE__ */ jsx35(Text, { as: "h3", display: "heading3", children: t2("Subscription canceled") }),
19962
+ billingSubscription?.cancelAt && /* @__PURE__ */ jsx35(Text, { as: "p", $size: 0.8125 * theme.typography.text.fontSize, children: t2("Access to plan will end on", {
19963
+ date: toPrettyDate(
19964
+ new Date(billingSubscription.cancelAt * 1e3),
19965
+ {
19966
+ month: "numeric"
19967
+ }
19968
+ )
19969
+ }) })
19993
19970
  ]
19994
19971
  }
19995
19972
  ),
@@ -20011,57 +19988,18 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
20011
19988
  $gap: "1rem",
20012
19989
  children: [
20013
19990
  /* @__PURE__ */ jsxs27(Flex, { $flexDirection: "column", $gap: "1rem", children: [
20014
- /* @__PURE__ */ jsx35(
20015
- Text,
20016
- {
20017
- as: Box,
20018
- $font: theme.typography[props.header.title.fontStyle].fontFamily,
20019
- $size: theme.typography[props.header.title.fontStyle].fontSize,
20020
- $weight: theme.typography[props.header.title.fontStyle].fontWeight,
20021
- $color: theme.typography[props.header.title.fontStyle].color,
20022
- $leading: 1,
20023
- children: currentPlan.name
20024
- }
20025
- ),
20026
- props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx35(
20027
- Text,
20028
- {
20029
- as: Box,
20030
- $font: theme.typography[props.header.description.fontStyle].fontFamily,
20031
- $size: theme.typography[props.header.description.fontStyle].fontSize,
20032
- $weight: theme.typography[props.header.description.fontStyle].fontWeight,
20033
- $color: theme.typography[props.header.description.fontStyle].color,
20034
- children: currentPlan.description
20035
- }
20036
- )
19991
+ /* @__PURE__ */ jsx35(Text, { display: props.header.title.fontStyle, $leading: 1, children: currentPlan.name }),
19992
+ props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx35(Text, { display: props.header.description.fontStyle, children: currentPlan.description })
20037
19993
  ] }),
20038
19994
  props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs27(Box, { children: [
20039
- /* @__PURE__ */ jsx35(
20040
- Text,
20041
- {
20042
- $font: headerPriceFontStyle.fontFamily,
20043
- $size: headerPriceFontStyle.fontSize,
20044
- $weight: headerPriceFontStyle.fontWeight,
20045
- $color: headerPriceFontStyle.color,
20046
- children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
20047
- currentPlan.planPrice,
20048
- subscriptionCurrency
20049
- )
20050
- }
20051
- ),
20052
- !isUsageBasedPlan && /* @__PURE__ */ jsx35(
20053
- Text,
20054
- {
20055
- $font: theme.typography[props.header.price.fontStyle].fontFamily,
20056
- $size: theme.typography[props.header.price.fontStyle].fontSize,
20057
- $weight: theme.typography[props.header.price.fontStyle].fontWeight,
20058
- $color: theme.typography[props.header.price.fontStyle].color,
20059
- children: /* @__PURE__ */ jsxs27("sub", { children: [
20060
- "/",
20061
- shortenPeriod(currentPlan.planPeriod)
20062
- ] })
20063
- }
20064
- )
19995
+ /* @__PURE__ */ jsx35(Text, { display: headerPriceFontStyle, children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
19996
+ currentPlan.planPrice,
19997
+ subscriptionCurrency
19998
+ ) }),
19999
+ !isUsageBasedPlan && /* @__PURE__ */ jsx35(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs27("sub", { children: [
20000
+ "/",
20001
+ shortenPeriod(currentPlan.planPeriod)
20002
+ ] }) })
20065
20003
  ] })
20066
20004
  ]
20067
20005
  }
@@ -20070,9 +20008,6 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
20070
20008
  props.addOns.showLabel && /* @__PURE__ */ jsx35(
20071
20009
  Text,
20072
20010
  {
20073
- $font: theme.typography.text.fontFamily,
20074
- $size: theme.typography.text.fontSize,
20075
- $weight: theme.typography.text.fontWeight,
20076
20011
  $color: isLightBackground ? darken(theme.card.background, 0.46) : lighten(theme.card.background, 0.46),
20077
20012
  $leading: 1,
20078
20013
  children: t2("Add-ons")
@@ -20086,32 +20021,14 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
20086
20021
  $flexWrap: "wrap",
20087
20022
  $gap: "1rem",
20088
20023
  children: [
20089
- /* @__PURE__ */ jsx35(
20090
- Text,
20091
- {
20092
- $font: theme.typography[props.addOns.fontStyle].fontFamily,
20093
- $size: theme.typography[props.addOns.fontStyle].fontSize,
20094
- $weight: theme.typography[props.addOns.fontStyle].fontWeight,
20095
- $color: theme.typography[props.addOns.fontStyle].color,
20096
- children: addOn.name
20097
- }
20098
- ),
20099
- addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ jsxs27(
20100
- Text,
20101
- {
20102
- $font: theme.typography.text.fontFamily,
20103
- $size: theme.typography.text.fontSize,
20104
- $weight: theme.typography.text.fontWeight,
20105
- $color: theme.typography.text.color,
20106
- children: [
20107
- formatCurrency(addOn.planPrice, subscriptionCurrency),
20108
- /* @__PURE__ */ jsxs27("sub", { children: [
20109
- "/",
20110
- shortenPeriod(addOn.planPeriod)
20111
- ] })
20112
- ]
20113
- }
20114
- )
20024
+ /* @__PURE__ */ jsx35(Text, { display: props.addOns.fontStyle, children: addOn.name }),
20025
+ addOn.planPrice && addOn.planPeriod && /* @__PURE__ */ jsxs27(Text, { children: [
20026
+ formatCurrency(addOn.planPrice, subscriptionCurrency),
20027
+ /* @__PURE__ */ jsxs27("sub", { children: [
20028
+ "/",
20029
+ shortenPeriod(addOn.planPeriod)
20030
+ ] })
20031
+ ] })
20115
20032
  ]
20116
20033
  },
20117
20034
  addOnIndex
@@ -20121,9 +20038,6 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
20121
20038
  /* @__PURE__ */ jsx35(
20122
20039
  Text,
20123
20040
  {
20124
- $font: theme.typography.text.fontFamily,
20125
- $size: theme.typography.text.fontSize,
20126
- $weight: theme.typography.text.fontWeight,
20127
20041
  $color: isLightBackground ? darken(theme.card.background, 0.46) : lighten(theme.card.background, 0.46),
20128
20042
  $leading: 1,
20129
20043
  children: t2("Usage-based")
@@ -20144,33 +20058,22 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
20144
20058
  $flexWrap: "wrap",
20145
20059
  $gap: "1rem",
20146
20060
  children: [
20147
- /* @__PURE__ */ jsxs27(
20148
- Text,
20149
- {
20150
- $font: theme.typography[props.addOns.fontStyle].fontFamily,
20151
- $size: theme.typography[props.addOns.fontStyle].fontSize,
20152
- $weight: theme.typography[props.addOns.fontStyle].fontWeight,
20153
- $color: theme.typography[props.addOns.fontStyle].color,
20154
- children: [
20155
- entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ jsxs27(Fragment11, { children: [
20156
- limit,
20157
- " ",
20158
- getFeatureName(entitlement.feature, limit)
20159
- ] }) : entitlement.feature.name,
20160
- entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(Fragment11, { children: [
20161
- "/",
20162
- shortenPeriod(currentPlan.planPeriod)
20163
- ] })
20164
- ]
20165
- }
20166
- ),
20061
+ /* @__PURE__ */ jsxs27(Text, { display: props.addOns.fontStyle, children: [
20062
+ entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ jsxs27(Fragment11, { children: [
20063
+ limit,
20064
+ " ",
20065
+ getFeatureName(entitlement.feature, limit)
20066
+ ] }) : entitlement.feature.name,
20067
+ entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(Fragment11, { children: [
20068
+ "/",
20069
+ shortenPeriod(currentPlan.planPeriod)
20070
+ ] })
20071
+ ] }),
20167
20072
  /* @__PURE__ */ jsxs27(Flex, { $alignItems: "center", $gap: "1rem", children: [
20168
20073
  entitlement.priceBehavior === "overage" && currentPlan?.planPeriod ? /* @__PURE__ */ jsx35(
20169
20074
  Text,
20170
20075
  {
20171
- $font: theme.typography.text.fontFamily,
20172
20076
  $size: 0.875 * theme.typography.text.fontSize,
20173
- $weight: theme.typography.text.fontWeight,
20174
20077
  $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
20175
20078
  children: typeof overageAmount === "number" && overageAmount > 0 ? t2("X over the limit", {
20176
20079
  amount: overageAmount
@@ -20195,9 +20098,7 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
20195
20098
  ) : entitlement.priceBehavior === "pay_in_advance" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(
20196
20099
  Text,
20197
20100
  {
20198
- $font: theme.typography.text.fontFamily,
20199
20101
  $size: 0.875 * theme.typography.text.fontSize,
20200
- $weight: theme.typography.text.fontWeight,
20201
20102
  $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
20202
20103
  children: [
20203
20104
  formatCurrency(
@@ -20213,25 +20114,16 @@ var PlanManager = forwardRef12(({ children, className, portal, ...rest }, ref) =
20213
20114
  ]
20214
20115
  }
20215
20116
  ),
20216
- amount > 0 && /* @__PURE__ */ jsxs27(
20217
- Text,
20218
- {
20219
- $font: theme.typography.text.fontFamily,
20220
- $size: theme.typography.text.fontSize,
20221
- $weight: theme.typography.text.fontWeight,
20222
- $color: theme.typography.text.color,
20223
- children: [
20224
- formatCurrency(
20225
- (entitlement.price ?? 0) * amount,
20226
- entitlement.currency
20227
- ),
20228
- (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ jsxs27("sub", { children: [
20229
- "/",
20230
- currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
20231
- ] })
20232
- ]
20233
- }
20234
- )
20117
+ amount > 0 && /* @__PURE__ */ jsxs27(Text, { children: [
20118
+ formatCurrency(
20119
+ (entitlement.price ?? 0) * amount,
20120
+ entitlement.currency
20121
+ ),
20122
+ (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ jsxs27("sub", { children: [
20123
+ "/",
20124
+ currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
20125
+ ] })
20126
+ ] })
20235
20127
  ] })
20236
20128
  ]
20237
20129
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@schematichq/schematic-components",
3
- "version": "0.7.5",
3
+ "version": "0.7.6",
4
4
  "main": "dist/schematic-components.cjs.js",
5
5
  "module": "dist/schematic-components.esm.js",
6
6
  "types": "dist/schematic-components.d.ts",