@schematichq/schematic-components 1.9.0 → 1.9.1

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 (3) hide show
  1. package/dist/schematic-components.cjs.js +175 -82
  2. package/dist/schematic-components.esm.js +175 -82
  3. package/package.json +1 -1
package/dist/schematic-components.cjs.js CHANGED
@@ -10776,7 +10776,7 @@ var EmbedProvider = ({
10776
10776
  });
10777
10777
  const customHeaders = (0, import_react12.useMemo)(
10778
10778
  () => ({
10779
- "X-Schematic-Components-Version": "1.9.0",
10779
+ "X-Schematic-Components-Version": "1.9.1",
10780
10780
  "X-Schematic-Session-ID": sessionIdRef.current
10781
10781
  }),
10782
10782
  []
@@ -19047,6 +19047,49 @@ var import_react52 = require("react");
19047
19047
  // src/components/elements/pricing-table/AddOn.tsx
19048
19048
  var import_react50 = require("react");
19049
19049
  var import_jsx_runtime46 = require("react/jsx-runtime");
19050
+ function renderMeteredEntitlementPricing2({
19051
+ priceBehavior,
19052
+ softLimit,
19053
+ price,
19054
+ currency,
19055
+ packageSize,
19056
+ feature,
19057
+ featureName,
19058
+ isTiered
19059
+ }) {
19060
+ if (priceBehavior === "overage" /* Overage */ && softLimit) {
19061
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19062
+ "Additional: ",
19063
+ formatCurrency(price, currency),
19064
+ "/",
19065
+ feature ? getFeatureName(
19066
+ feature,
19067
+ packageSize
19068
+ ) : featureName || "unit"
19069
+ ] });
19070
+ }
19071
+ if (priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "pay_in_advance" /* PayInAdvance */) {
19072
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19073
+ formatCurrency(price, currency),
19074
+ "/",
19075
+ packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19076
+ packageSize,
19077
+ " "
19078
+ ] }),
19079
+ feature ? getFeatureName(
19080
+ feature,
19081
+ packageSize
19082
+ ) : featureName || "unit"
19083
+ ] });
19084
+ }
19085
+ if (isTiered) {
19086
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: "Tier-based pricing" });
19087
+ }
19088
+ return null;
19089
+ }
19090
+ function shouldShowUsageBased2(price, displayableEntitlements) {
19091
+ return price < 0.01 && displayableEntitlements.some((ent) => !ent.isUnlimited);
19092
+ }
19050
19093
  var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19051
19094
  const { layout } = sharedProps;
19052
19095
  const { t: t2 } = useTranslation();
@@ -19072,13 +19115,40 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19072
19115
  const isCurrentAddOn = isHydratedPlan(addOn) && addOn.current;
19073
19116
  const isActiveAddOn = isCurrentAddOn && selectedPeriod === currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
19074
19117
  const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, selectedPeriod) || {};
19118
+ const displayableEntitlements = addOn.entitlements?.filter(
19119
+ (entitlement) => entitlement.valueType === "unlimited" || entitlement.priceBehavior && [
19120
+ "pay_as_you_go" /* PayAsYouGo */,
19121
+ "pay_in_advance" /* PayInAdvance */,
19122
+ "overage" /* Overage */,
19123
+ "tier" /* Tiered */
19124
+ ].includes(entitlement.priceBehavior)
19125
+ ).map((entitlement) => {
19126
+ if (entitlement.valueType === "unlimited" && !entitlement.priceBehavior) {
19127
+ return {
19128
+ isUnlimited: true,
19129
+ featureName: entitlement.feature?.name,
19130
+ feature: entitlement.feature
19131
+ };
19132
+ }
19133
+ const priceData = getEntitlementPrice(entitlement, selectedPeriod);
19134
+ return {
19135
+ isUnlimited: false,
19136
+ priceBehavior: entitlement.priceBehavior,
19137
+ softLimit: entitlement.softLimit,
19138
+ price: priceData?.price ?? 0,
19139
+ currency: priceData?.currency || addOnCurrency,
19140
+ featureName: entitlement.feature?.name,
19141
+ feature: entitlement.feature,
19142
+ packageSize: priceData?.packageSize ?? 1,
19143
+ isTiered: entitlement.priceBehavior === "tier" /* Tiered */
19144
+ };
19145
+ }) || [];
19075
19146
  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
19076
19147
  Flex,
19077
19148
  {
19078
19149
  $position: "relative",
19079
19150
  $flexDirection: "column",
19080
- $gap: "2rem",
19081
- $padding: `${cardPadding}rem`,
19151
+ $padding: `${0.75 * cardPadding}rem 0`,
19082
19152
  $backgroundColor: settings.theme.card.background,
19083
19153
  $borderRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
19084
19154
  $outlineWidth: "2px",
@@ -19088,36 +19158,48 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19088
19158
  $boxShadow: cardBoxShadow
19089
19159
  },
19090
19160
  children: [
19091
- /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
19092
- /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
19093
- layout.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
19094
- /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Text, { display: layout.plans.name.fontStyle, children: [
19095
- formatCurrency(addOnPrice ?? 0, addOnCurrency),
19096
- /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("sub", { children: [
19097
- "/",
19098
- selectedPeriod
19099
- ] })
19100
- ] }) }),
19101
- isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19102
- Flex,
19103
- {
19104
- $position: "absolute",
19105
- $right: "1rem",
19106
- $top: "1rem",
19107
- $backgroundColor: settings.theme.primary,
19108
- $borderRadius: "9999px",
19109
- $padding: "0.125rem 0.85rem",
19110
- children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19111
- Text,
19161
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
19162
+ Flex,
19163
+ {
19164
+ $flexDirection: "column",
19165
+ $gap: "0.75rem",
19166
+ $padding: `0 ${cardPadding}rem ${displayableEntitlements.length > 0 ? 0.75 * cardPadding : 0}rem`,
19167
+ $borderWidth: "0",
19168
+ $borderBottomWidth: displayableEntitlements.length > 0 ? "1px" : "0",
19169
+ $borderStyle: "solid",
19170
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
19171
+ children: [
19172
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
19173
+ layout.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
19174
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.name.fontStyle, children: t2("Usage-based") }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Text, { display: layout.plans.name.fontStyle, children: [
19175
+ formatCurrency(addOnPrice ?? 0, addOnCurrency),
19176
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("sub", { children: [
19177
+ "/",
19178
+ selectedPeriod
19179
+ ] })
19180
+ ] }) }),
19181
+ isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19182
+ Flex,
19112
19183
  {
19113
- $size: 0.75 * settings.theme.typography.text.fontSize,
19114
- $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
19115
- children: t2("Active")
19184
+ $position: "absolute",
19185
+ $right: "1rem",
19186
+ $top: "1rem",
19187
+ $backgroundColor: settings.theme.primary,
19188
+ $borderRadius: "9999px",
19189
+ $padding: "0.125rem 0.85rem",
19190
+ children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19191
+ Text,
19192
+ {
19193
+ $size: 0.75 * settings.theme.typography.text.fontSize,
19194
+ $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
19195
+ children: t2("Active")
19196
+ }
19197
+ )
19116
19198
  }
19117
19199
  )
19118
- }
19119
- )
19120
- ] }),
19200
+ ]
19201
+ }
19202
+ ),
19121
19203
  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
19122
19204
  Flex,
19123
19205
  {
@@ -19125,25 +19207,20 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19125
19207
  $justifyContent: "end",
19126
19208
  $gap: `${cardPadding}rem`,
19127
19209
  $flexGrow: 1,
19210
+ $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
19128
19211
  children: [
19129
- layout.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19130
- Flex,
19131
- {
19132
- $flexDirection: "column",
19133
- $position: "relative",
19134
- $gap: "1rem",
19135
- $flexGrow: 1,
19136
- children: addOn.entitlements.map((entitlement, entitlementIndex) => {
19137
- const metricPeriodName = getMetricPeriodName(entitlement);
19138
- return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19139
- Flex,
19140
- {
19141
- $flexWrap: "wrap",
19142
- $justifyContent: "space-between",
19143
- $alignItems: "center",
19144
- $gap: "1rem",
19145
- children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $gap: "1rem", children: [
19146
- layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19212
+ displayableEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: displayableEntitlements.map((entitlement, idx) => {
19213
+ if (entitlement.isUnlimited) {
19214
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
19215
+ Flex,
19216
+ {
19217
+ $flexWrap: "wrap",
19218
+ $justifyContent: "space-between",
19219
+ $alignItems: "center",
19220
+ $gap: "1rem",
19221
+ children: [
19222
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $gap: "1rem", children: [
19223
+ entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19147
19224
  Icon3,
19148
19225
  {
19149
19226
  name: entitlement.feature.icon,
@@ -19152,41 +19229,57 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19152
19229
  rounded: true
19153
19230
  }
19154
19231
  ),
19155
- /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
19156
- entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19157
- entitlement.valueType === "unlimited" /* Unlimited */ ? t2("Unlimited", {
19158
- item: getFeatureName(entitlement.feature)
19159
- }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19160
- formatNumber(entitlement.valueNumeric),
19161
- " ",
19162
- getFeatureName(
19163
- entitlement.feature,
19164
- entitlement.valueNumeric
19165
- )
19166
- ] }),
19167
- metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19168
- " ",
19169
- t2("per"),
19170
- " ",
19171
- t2(metricPeriodName)
19172
- ] })
19173
- ] }) : entitlement.feature.name }) }),
19174
- layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19175
- Text,
19176
- {
19177
- $size: 0.875 * settings.theme.typography.text.fontSize,
19178
- $color: `color-mix(in oklch, ${settings.theme.typography.text.color}, ${settings.theme.card.background})`,
19179
- children: entitlement.feature.description
19180
- }
19181
- )
19182
- ] })
19183
- ] })
19184
- },
19185
- entitlementIndex
19186
- );
19187
- })
19232
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: entitlement.feature?.pluralName || entitlement.feature?.name || entitlement.featureName }) })
19233
+ ] }),
19234
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19235
+ Text,
19236
+ {
19237
+ style: { opacity: 0.54 },
19238
+ $size: 0.875 * settings.theme.typography.text.fontSize,
19239
+ $color: settings.theme.typography.text.color,
19240
+ children: "Unlimited"
19241
+ }
19242
+ )
19243
+ ]
19244
+ },
19245
+ idx
19246
+ );
19188
19247
  }
19189
- ),
19248
+ const meteredEntitlement = entitlement;
19249
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
19250
+ Flex,
19251
+ {
19252
+ $flexWrap: "wrap",
19253
+ $justifyContent: "space-between",
19254
+ $alignItems: "center",
19255
+ $gap: "1rem",
19256
+ children: [
19257
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $gap: "1rem", children: [
19258
+ meteredEntitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19259
+ Icon3,
19260
+ {
19261
+ name: meteredEntitlement.feature.icon,
19262
+ color: settings.theme.primary,
19263
+ background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
19264
+ rounded: true
19265
+ }
19266
+ ),
19267
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: meteredEntitlement.priceBehavior === "overage" /* Overage */ && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
19268
+ ] }),
19269
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19270
+ Text,
19271
+ {
19272
+ style: { opacity: 0.54 },
19273
+ $size: 0.875 * settings.theme.typography.text.fontSize,
19274
+ $color: settings.theme.typography.text.color,
19275
+ children: renderMeteredEntitlementPricing2(meteredEntitlement)
19276
+ }
19277
+ )
19278
+ ]
19279
+ },
19280
+ idx
19281
+ );
19282
+ }) }),
19190
19283
  showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19191
19284
  Button,
19192
19285
  {
package/dist/schematic-components.esm.js CHANGED
@@ -10716,7 +10716,7 @@ var EmbedProvider = ({
10716
10716
  });
10717
10717
  const customHeaders = useMemo3(
10718
10718
  () => ({
10719
- "X-Schematic-Components-Version": "1.9.0",
10719
+ "X-Schematic-Components-Version": "1.9.1",
10720
10720
  "X-Schematic-Session-ID": sessionIdRef.current
10721
10721
  }),
10722
10722
  []
@@ -19008,6 +19008,49 @@ import {
19008
19008
  // src/components/elements/pricing-table/AddOn.tsx
19009
19009
  import { useMemo as useMemo24 } from "react";
19010
19010
  import { Fragment as Fragment22, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
19011
+ function renderMeteredEntitlementPricing2({
19012
+ priceBehavior,
19013
+ softLimit,
19014
+ price,
19015
+ currency,
19016
+ packageSize,
19017
+ feature,
19018
+ featureName,
19019
+ isTiered
19020
+ }) {
19021
+ if (priceBehavior === "overage" /* Overage */ && softLimit) {
19022
+ return /* @__PURE__ */ jsxs35(Fragment22, { children: [
19023
+ "Additional: ",
19024
+ formatCurrency(price, currency),
19025
+ "/",
19026
+ feature ? getFeatureName(
19027
+ feature,
19028
+ packageSize
19029
+ ) : featureName || "unit"
19030
+ ] });
19031
+ }
19032
+ if (priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "pay_in_advance" /* PayInAdvance */) {
19033
+ return /* @__PURE__ */ jsxs35(Fragment22, { children: [
19034
+ formatCurrency(price, currency),
19035
+ "/",
19036
+ packageSize > 1 && /* @__PURE__ */ jsxs35(Fragment22, { children: [
19037
+ packageSize,
19038
+ " "
19039
+ ] }),
19040
+ feature ? getFeatureName(
19041
+ feature,
19042
+ packageSize
19043
+ ) : featureName || "unit"
19044
+ ] });
19045
+ }
19046
+ if (isTiered) {
19047
+ return /* @__PURE__ */ jsx45(Fragment22, { children: "Tier-based pricing" });
19048
+ }
19049
+ return null;
19050
+ }
19051
+ function shouldShowUsageBased2(price, displayableEntitlements) {
19052
+ return price < 0.01 && displayableEntitlements.some((ent) => !ent.isUnlimited);
19053
+ }
19011
19054
  var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19012
19055
  const { layout } = sharedProps;
19013
19056
  const { t: t2 } = useTranslation();
@@ -19033,13 +19076,40 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19033
19076
  const isCurrentAddOn = isHydratedPlan(addOn) && addOn.current;
19034
19077
  const isActiveAddOn = isCurrentAddOn && selectedPeriod === currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
19035
19078
  const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, selectedPeriod) || {};
19079
+ const displayableEntitlements = addOn.entitlements?.filter(
19080
+ (entitlement) => entitlement.valueType === "unlimited" || entitlement.priceBehavior && [
19081
+ "pay_as_you_go" /* PayAsYouGo */,
19082
+ "pay_in_advance" /* PayInAdvance */,
19083
+ "overage" /* Overage */,
19084
+ "tier" /* Tiered */
19085
+ ].includes(entitlement.priceBehavior)
19086
+ ).map((entitlement) => {
19087
+ if (entitlement.valueType === "unlimited" && !entitlement.priceBehavior) {
19088
+ return {
19089
+ isUnlimited: true,
19090
+ featureName: entitlement.feature?.name,
19091
+ feature: entitlement.feature
19092
+ };
19093
+ }
19094
+ const priceData = getEntitlementPrice(entitlement, selectedPeriod);
19095
+ return {
19096
+ isUnlimited: false,
19097
+ priceBehavior: entitlement.priceBehavior,
19098
+ softLimit: entitlement.softLimit,
19099
+ price: priceData?.price ?? 0,
19100
+ currency: priceData?.currency || addOnCurrency,
19101
+ featureName: entitlement.feature?.name,
19102
+ feature: entitlement.feature,
19103
+ packageSize: priceData?.packageSize ?? 1,
19104
+ isTiered: entitlement.priceBehavior === "tier" /* Tiered */
19105
+ };
19106
+ }) || [];
19036
19107
  return /* @__PURE__ */ jsxs35(
19037
19108
  Flex,
19038
19109
  {
19039
19110
  $position: "relative",
19040
19111
  $flexDirection: "column",
19041
- $gap: "2rem",
19042
- $padding: `${cardPadding}rem`,
19112
+ $padding: `${0.75 * cardPadding}rem 0`,
19043
19113
  $backgroundColor: settings.theme.card.background,
19044
19114
  $borderRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
19045
19115
  $outlineWidth: "2px",
@@ -19049,36 +19119,48 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19049
19119
  $boxShadow: cardBoxShadow
19050
19120
  },
19051
19121
  children: [
19052
- /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
19053
- /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
19054
- layout.addOns.showDescription && /* @__PURE__ */ jsx45(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
19055
- /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsxs35(Text, { display: layout.plans.name.fontStyle, children: [
19056
- formatCurrency(addOnPrice ?? 0, addOnCurrency),
19057
- /* @__PURE__ */ jsxs35("sub", { children: [
19058
- "/",
19059
- selectedPeriod
19060
- ] })
19061
- ] }) }),
19062
- isActiveAddOn && /* @__PURE__ */ jsx45(
19063
- Flex,
19064
- {
19065
- $position: "absolute",
19066
- $right: "1rem",
19067
- $top: "1rem",
19068
- $backgroundColor: settings.theme.primary,
19069
- $borderRadius: "9999px",
19070
- $padding: "0.125rem 0.85rem",
19071
- children: /* @__PURE__ */ jsx45(
19072
- Text,
19122
+ /* @__PURE__ */ jsxs35(
19123
+ Flex,
19124
+ {
19125
+ $flexDirection: "column",
19126
+ $gap: "0.75rem",
19127
+ $padding: `0 ${cardPadding}rem ${displayableEntitlements.length > 0 ? 0.75 * cardPadding : 0}rem`,
19128
+ $borderWidth: "0",
19129
+ $borderBottomWidth: displayableEntitlements.length > 0 ? "1px" : "0",
19130
+ $borderStyle: "solid",
19131
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
19132
+ children: [
19133
+ /* @__PURE__ */ jsx45(Box, { children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
19134
+ layout.addOns.showDescription && /* @__PURE__ */ jsx45(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx45(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
19135
+ /* @__PURE__ */ jsx45(Box, { children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? /* @__PURE__ */ jsx45(Text, { display: layout.plans.name.fontStyle, children: t2("Usage-based") }) : /* @__PURE__ */ jsxs35(Text, { display: layout.plans.name.fontStyle, children: [
19136
+ formatCurrency(addOnPrice ?? 0, addOnCurrency),
19137
+ /* @__PURE__ */ jsxs35("sub", { children: [
19138
+ "/",
19139
+ selectedPeriod
19140
+ ] })
19141
+ ] }) }),
19142
+ isActiveAddOn && /* @__PURE__ */ jsx45(
19143
+ Flex,
19073
19144
  {
19074
- $size: 0.75 * settings.theme.typography.text.fontSize,
19075
- $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
19076
- children: t2("Active")
19145
+ $position: "absolute",
19146
+ $right: "1rem",
19147
+ $top: "1rem",
19148
+ $backgroundColor: settings.theme.primary,
19149
+ $borderRadius: "9999px",
19150
+ $padding: "0.125rem 0.85rem",
19151
+ children: /* @__PURE__ */ jsx45(
19152
+ Text,
19153
+ {
19154
+ $size: 0.75 * settings.theme.typography.text.fontSize,
19155
+ $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
19156
+ children: t2("Active")
19157
+ }
19158
+ )
19077
19159
  }
19078
19160
  )
19079
- }
19080
- )
19081
- ] }),
19161
+ ]
19162
+ }
19163
+ ),
19082
19164
  /* @__PURE__ */ jsxs35(
19083
19165
  Flex,
19084
19166
  {
@@ -19086,25 +19168,20 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19086
19168
  $justifyContent: "end",
19087
19169
  $gap: `${cardPadding}rem`,
19088
19170
  $flexGrow: 1,
19171
+ $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
19089
19172
  children: [
19090
- layout.addOns.showEntitlements && /* @__PURE__ */ jsx45(
19091
- Flex,
19092
- {
19093
- $flexDirection: "column",
19094
- $position: "relative",
19095
- $gap: "1rem",
19096
- $flexGrow: 1,
19097
- children: addOn.entitlements.map((entitlement, entitlementIndex) => {
19098
- const metricPeriodName = getMetricPeriodName(entitlement);
19099
- return /* @__PURE__ */ jsx45(
19100
- Flex,
19101
- {
19102
- $flexWrap: "wrap",
19103
- $justifyContent: "space-between",
19104
- $alignItems: "center",
19105
- $gap: "1rem",
19106
- children: /* @__PURE__ */ jsxs35(Flex, { $gap: "1rem", children: [
19107
- layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx45(
19173
+ displayableEntitlements.length > 0 && /* @__PURE__ */ jsx45(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: displayableEntitlements.map((entitlement, idx) => {
19174
+ if (entitlement.isUnlimited) {
19175
+ return /* @__PURE__ */ jsxs35(
19176
+ Flex,
19177
+ {
19178
+ $flexWrap: "wrap",
19179
+ $justifyContent: "space-between",
19180
+ $alignItems: "center",
19181
+ $gap: "1rem",
19182
+ children: [
19183
+ /* @__PURE__ */ jsxs35(Flex, { $gap: "1rem", children: [
19184
+ entitlement.feature?.icon && /* @__PURE__ */ jsx45(
19108
19185
  Icon3,
19109
19186
  {
19110
19187
  name: entitlement.feature.icon,
@@ -19113,41 +19190,57 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19113
19190
  rounded: true
19114
19191
  }
19115
19192
  ),
19116
- /* @__PURE__ */ jsxs35(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
19117
- entitlement.feature?.name && /* @__PURE__ */ jsx45(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ jsx45(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ jsxs35(Fragment22, { children: [
19118
- entitlement.valueType === "unlimited" /* Unlimited */ ? t2("Unlimited", {
19119
- item: getFeatureName(entitlement.feature)
19120
- }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs35(Fragment22, { children: [
19121
- formatNumber(entitlement.valueNumeric),
19122
- " ",
19123
- getFeatureName(
19124
- entitlement.feature,
19125
- entitlement.valueNumeric
19126
- )
19127
- ] }),
19128
- metricPeriodName && /* @__PURE__ */ jsxs35(Fragment22, { children: [
19129
- " ",
19130
- t2("per"),
19131
- " ",
19132
- t2(metricPeriodName)
19133
- ] })
19134
- ] }) : entitlement.feature.name }) }),
19135
- layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ jsx45(
19136
- Text,
19137
- {
19138
- $size: 0.875 * settings.theme.typography.text.fontSize,
19139
- $color: `color-mix(in oklch, ${settings.theme.typography.text.color}, ${settings.theme.card.background})`,
19140
- children: entitlement.feature.description
19141
- }
19142
- )
19143
- ] })
19144
- ] })
19145
- },
19146
- entitlementIndex
19147
- );
19148
- })
19193
+ /* @__PURE__ */ jsx45(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ jsx45(Text, { children: entitlement.feature?.pluralName || entitlement.feature?.name || entitlement.featureName }) })
19194
+ ] }),
19195
+ /* @__PURE__ */ jsx45(
19196
+ Text,
19197
+ {
19198
+ style: { opacity: 0.54 },
19199
+ $size: 0.875 * settings.theme.typography.text.fontSize,
19200
+ $color: settings.theme.typography.text.color,
19201
+ children: "Unlimited"
19202
+ }
19203
+ )
19204
+ ]
19205
+ },
19206
+ idx
19207
+ );
19149
19208
  }
19150
- ),
19209
+ const meteredEntitlement = entitlement;
19210
+ return /* @__PURE__ */ jsxs35(
19211
+ Flex,
19212
+ {
19213
+ $flexWrap: "wrap",
19214
+ $justifyContent: "space-between",
19215
+ $alignItems: "center",
19216
+ $gap: "1rem",
19217
+ children: [
19218
+ /* @__PURE__ */ jsxs35(Flex, { $gap: "1rem", children: [
19219
+ meteredEntitlement.feature?.icon && /* @__PURE__ */ jsx45(
19220
+ Icon3,
19221
+ {
19222
+ name: meteredEntitlement.feature.icon,
19223
+ color: settings.theme.primary,
19224
+ background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
19225
+ rounded: true
19226
+ }
19227
+ ),
19228
+ /* @__PURE__ */ jsx45(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ jsx45(Text, { children: meteredEntitlement.priceBehavior === "overage" /* Overage */ && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
19229
+ ] }),
19230
+ /* @__PURE__ */ jsx45(
19231
+ Text,
19232
+ {
19233
+ style: { opacity: 0.54 },
19234
+ $size: 0.875 * settings.theme.typography.text.fontSize,
19235
+ $color: settings.theme.typography.text.color,
19236
+ children: renderMeteredEntitlementPricing2(meteredEntitlement)
19237
+ }
19238
+ )
19239
+ ]
19240
+ },
19241
+ idx
19242
+ );
19243
+ }) }),
19151
19244
  showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ jsx45(
19152
19245
  Button,
19153
19246
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@schematichq/schematic-components",
3
- "version": "1.9.0",
3
+ "version": "1.9.1",
4
4
  "main": "dist/schematic-components.cjs.js",
5
5
  "module": "dist/schematic-components.esm.js",
6
6
  "types": "dist/schematic-components.d.ts",