@schematichq/schematic-components 0.3.10 → 0.3.11
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.
|
@@ -8936,7 +8936,7 @@ var EmbedProvider = ({
|
|
|
8936
8936
|
(0, import_react2.useEffect)(() => {
|
|
8937
8937
|
if (accessToken) {
|
|
8938
8938
|
const { headers = {} } = apiConfig ?? {};
|
|
8939
|
-
headers["X-Schematic-Components-Version"] = "0.3.
|
|
8939
|
+
headers["X-Schematic-Components-Version"] = "0.3.11";
|
|
8940
8940
|
headers["X-Schematic-Session-ID"] = sessionIdRef.current;
|
|
8941
8941
|
const config = new Configuration({
|
|
8942
8942
|
...apiConfig,
|
|
@@ -11059,7 +11059,9 @@ function resolveDesignProps(props) {
|
|
|
11059
11059
|
usage: {
|
|
11060
11060
|
isVisible: props.usage?.isVisible ?? true,
|
|
11061
11061
|
fontStyle: props.usage?.fontStyle ?? "heading6"
|
|
11062
|
-
}
|
|
11062
|
+
},
|
|
11063
|
+
// there is a typescript bug with `RecursivePartial` so we must cast to `string[] | undefined`
|
|
11064
|
+
visibleFeatures: props.visibleFeatures
|
|
11063
11065
|
};
|
|
11064
11066
|
}
|
|
11065
11067
|
var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, ref) => {
|
|
@@ -11069,7 +11071,16 @@ var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, r
|
|
|
11069
11071
|
const elements = (0, import_react14.useRef)([]);
|
|
11070
11072
|
const shouldWrapChildren = useWrapChildren(elements.current);
|
|
11071
11073
|
const isLightBackground = useIsLightBackground();
|
|
11072
|
-
const
|
|
11074
|
+
const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
|
|
11075
|
+
const mappedFeatureUsage = data.featureUsage?.features.find(
|
|
11076
|
+
(usage) => usage.feature?.id === id
|
|
11077
|
+
);
|
|
11078
|
+
if (mappedFeatureUsage) {
|
|
11079
|
+
acc.push(mappedFeatureUsage);
|
|
11080
|
+
}
|
|
11081
|
+
return acc;
|
|
11082
|
+
}, []) : data.featureUsage?.features || [];
|
|
11083
|
+
const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
|
|
11073
11084
|
if (!shouldShowFeatures) {
|
|
11074
11085
|
return null;
|
|
11075
11086
|
}
|
|
@@ -11092,82 +11103,76 @@ var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, r
|
|
|
11092
11103
|
children: props.header.text
|
|
11093
11104
|
}
|
|
11094
11105
|
) }),
|
|
11095
|
-
(
|
|
11096
|
-
|
|
11097
|
-
|
|
11098
|
-
|
|
11099
|
-
|
|
11100
|
-
|
|
11101
|
-
|
|
11102
|
-
|
|
11103
|
-
|
|
11104
|
-
|
|
11105
|
-
|
|
11106
|
-
|
|
11107
|
-
|
|
11108
|
-
|
|
11109
|
-
|
|
11110
|
-
|
|
11106
|
+
featureUsage.map(({ allocation, feature, usage }, index) => {
|
|
11107
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
11108
|
+
Flex,
|
|
11109
|
+
{
|
|
11110
|
+
ref: (el) => el && elements.current.push(el),
|
|
11111
|
+
$flexWrap: "wrap",
|
|
11112
|
+
$justifyContent: "space-between",
|
|
11113
|
+
$alignItems: "center",
|
|
11114
|
+
$gap: "1rem",
|
|
11115
|
+
children: [
|
|
11116
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexGrow: "1", $flexBasis: "min-content", $gap: "1rem", children: [
|
|
11117
|
+
props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
11118
|
+
IconRound,
|
|
11119
|
+
{
|
|
11120
|
+
name: feature.icon,
|
|
11121
|
+
size: "sm",
|
|
11122
|
+
colors: [
|
|
11123
|
+
theme.primary,
|
|
11124
|
+
isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
|
|
11125
|
+
]
|
|
11126
|
+
}
|
|
11127
|
+
),
|
|
11128
|
+
feature?.name && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
11129
|
+
Text,
|
|
11130
|
+
{
|
|
11131
|
+
$font: theme.typography[props.icons.fontStyle].fontFamily,
|
|
11132
|
+
$size: theme.typography[props.icons.fontStyle].fontSize,
|
|
11133
|
+
$weight: theme.typography[props.icons.fontStyle].fontWeight,
|
|
11134
|
+
$color: theme.typography[props.icons.fontStyle].color,
|
|
11135
|
+
children: feature.name
|
|
11136
|
+
}
|
|
11137
|
+
) })
|
|
11138
|
+
] }),
|
|
11139
|
+
(feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
11140
|
+
Box,
|
|
11141
|
+
{
|
|
11142
|
+
$flexBasis: "min-content",
|
|
11143
|
+
$flexGrow: "1",
|
|
11144
|
+
$textAlign: shouldWrapChildren ? "left" : "right",
|
|
11145
|
+
children: [
|
|
11146
|
+
props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
11147
|
+
Text,
|
|
11111
11148
|
{
|
|
11112
|
-
|
|
11113
|
-
size:
|
|
11114
|
-
|
|
11115
|
-
|
|
11116
|
-
|
|
11117
|
-
|
|
11149
|
+
$font: theme.typography[props.entitlement.fontStyle].fontFamily,
|
|
11150
|
+
$size: theme.typography[props.entitlement.fontStyle].fontSize,
|
|
11151
|
+
$weight: theme.typography[props.entitlement.fontStyle].fontWeight,
|
|
11152
|
+
$lineHeight: 1.25,
|
|
11153
|
+
$color: theme.typography[props.entitlement.fontStyle].color,
|
|
11154
|
+
children: typeof allocation === "number" ? `${formatNumber(allocation)} ${(0, import_pluralize2.default)(feature.name, allocation)}` : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
|
|
11118
11155
|
}
|
|
11119
|
-
),
|
|
11120
|
-
|
|
11156
|
+
) }),
|
|
11157
|
+
props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
11121
11158
|
Text,
|
|
11122
11159
|
{
|
|
11123
|
-
$font: theme.typography[props.
|
|
11124
|
-
$size: theme.typography[props.
|
|
11125
|
-
$weight: theme.typography[props.
|
|
11126
|
-
$
|
|
11127
|
-
|
|
11160
|
+
$font: theme.typography[props.usage.fontStyle].fontFamily,
|
|
11161
|
+
$size: theme.typography[props.usage.fontStyle].fontSize,
|
|
11162
|
+
$weight: theme.typography[props.usage.fontStyle].fontWeight,
|
|
11163
|
+
$lineHeight: 1.5,
|
|
11164
|
+
$color: theme.typography[props.usage.fontStyle].color,
|
|
11165
|
+
children: typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: typeof allocation === "number" ? `${formatNumber(usage)} of ${formatNumber(allocation)} used` : `${formatNumber(usage)} used` })
|
|
11128
11166
|
}
|
|
11129
11167
|
) })
|
|
11130
|
-
]
|
|
11131
|
-
|
|
11132
|
-
|
|
11133
|
-
|
|
11134
|
-
|
|
11135
|
-
|
|
11136
|
-
|
|
11137
|
-
|
|
11138
|
-
props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
11139
|
-
Text,
|
|
11140
|
-
{
|
|
11141
|
-
$font: theme.typography[props.entitlement.fontStyle].fontFamily,
|
|
11142
|
-
$size: theme.typography[props.entitlement.fontStyle].fontSize,
|
|
11143
|
-
$weight: theme.typography[props.entitlement.fontStyle].fontWeight,
|
|
11144
|
-
$lineHeight: 1.25,
|
|
11145
|
-
$color: theme.typography[props.entitlement.fontStyle].color,
|
|
11146
|
-
children: typeof allocation === "number" ? `${formatNumber(allocation)} ${(0, import_pluralize2.default)(feature.name, allocation)}` : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
|
|
11147
|
-
}
|
|
11148
|
-
) }),
|
|
11149
|
-
props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
11150
|
-
Text,
|
|
11151
|
-
{
|
|
11152
|
-
$font: theme.typography[props.usage.fontStyle].fontFamily,
|
|
11153
|
-
$size: theme.typography[props.usage.fontStyle].fontSize,
|
|
11154
|
-
$weight: theme.typography[props.usage.fontStyle].fontWeight,
|
|
11155
|
-
$lineHeight: 1.5,
|
|
11156
|
-
$color: theme.typography[props.usage.fontStyle].color,
|
|
11157
|
-
children: typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: typeof allocation === "number" ? `${formatNumber(usage)} of ${formatNumber(allocation)} used` : `${formatNumber(usage)} used` })
|
|
11158
|
-
}
|
|
11159
|
-
) })
|
|
11160
|
-
]
|
|
11161
|
-
}
|
|
11162
|
-
)
|
|
11163
|
-
]
|
|
11164
|
-
},
|
|
11165
|
-
index
|
|
11166
|
-
)
|
|
11167
|
-
];
|
|
11168
|
-
},
|
|
11169
|
-
[]
|
|
11170
|
-
)
|
|
11168
|
+
]
|
|
11169
|
+
}
|
|
11170
|
+
)
|
|
11171
|
+
]
|
|
11172
|
+
},
|
|
11173
|
+
index
|
|
11174
|
+
);
|
|
11175
|
+
})
|
|
11171
11176
|
]
|
|
11172
11177
|
}
|
|
11173
11178
|
);
|
|
@@ -11312,7 +11317,9 @@ function resolveDesignProps3(props) {
|
|
|
11312
11317
|
usage: {
|
|
11313
11318
|
isVisible: props.usage?.isVisible ?? true,
|
|
11314
11319
|
fontStyle: props.usage?.fontStyle ?? "heading5"
|
|
11315
|
-
}
|
|
11320
|
+
},
|
|
11321
|
+
// there is a typescript bug with `RecursivePartial` so we must cast to `string[] | undefined`
|
|
11322
|
+
visibleFeatures: props.visibleFeatures
|
|
11316
11323
|
};
|
|
11317
11324
|
}
|
|
11318
11325
|
var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, ref) => {
|
|
@@ -11322,13 +11329,22 @@ var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, re
|
|
|
11322
11329
|
const theme = nt();
|
|
11323
11330
|
const { data } = useEmbed();
|
|
11324
11331
|
const isLightBackground = useIsLightBackground();
|
|
11325
|
-
const
|
|
11326
|
-
|
|
11327
|
-
|
|
11328
|
-
|
|
11332
|
+
const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
|
|
11333
|
+
const mappedFeatureUsage = data.featureUsage?.features.find(
|
|
11334
|
+
(usage) => usage.feature?.id === id
|
|
11335
|
+
);
|
|
11336
|
+
if (mappedFeatureUsage?.feature?.featureType === "event" || mappedFeatureUsage?.feature?.featureType === "trait") {
|
|
11337
|
+
acc.push(mappedFeatureUsage);
|
|
11338
|
+
}
|
|
11339
|
+
return acc;
|
|
11340
|
+
}, []) : (data.featureUsage?.features || []).filter(
|
|
11341
|
+
(usage) => usage.feature?.featureType === "event" || usage.feature?.featureType === "trait"
|
|
11342
|
+
);
|
|
11343
|
+
const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
|
|
11344
|
+
if (!shouldShowFeatures) {
|
|
11329
11345
|
return null;
|
|
11330
11346
|
}
|
|
11331
|
-
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Flex, { ref, className, $flexDirection: "column", children:
|
|
11347
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Flex, { ref, className, $flexDirection: "column", children: featureUsage.map(({ allocation, feature, usage }, index) => {
|
|
11332
11348
|
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
|
|
11333
11349
|
props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
11334
11350
|
IconRound,
|
|
@@ -1290,6 +1290,7 @@ declare interface DesignProps {
|
|
|
1290
1290
|
isVisible: boolean;
|
|
1291
1291
|
fontStyle: FontStyle;
|
|
1292
1292
|
};
|
|
1293
|
+
visibleFeatures?: string[];
|
|
1293
1294
|
}
|
|
1294
1295
|
|
|
1295
1296
|
declare interface DesignProps_2 {
|
|
@@ -1335,6 +1336,7 @@ declare interface DesignProps_3 {
|
|
|
1335
1336
|
isVisible: boolean;
|
|
1336
1337
|
fontStyle: FontStyle;
|
|
1337
1338
|
};
|
|
1339
|
+
visibleFeatures?: string[];
|
|
1338
1340
|
}
|
|
1339
1341
|
|
|
1340
1342
|
declare interface DesignProps_4 {
|
|
@@ -8896,7 +8896,7 @@ var EmbedProvider = ({
|
|
|
8896
8896
|
useEffect(() => {
|
|
8897
8897
|
if (accessToken) {
|
|
8898
8898
|
const { headers = {} } = apiConfig ?? {};
|
|
8899
|
-
headers["X-Schematic-Components-Version"] = "0.3.
|
|
8899
|
+
headers["X-Schematic-Components-Version"] = "0.3.11";
|
|
8900
8900
|
headers["X-Schematic-Session-ID"] = sessionIdRef.current;
|
|
8901
8901
|
const config = new Configuration({
|
|
8902
8902
|
...apiConfig,
|
|
@@ -11019,7 +11019,9 @@ function resolveDesignProps(props) {
|
|
|
11019
11019
|
usage: {
|
|
11020
11020
|
isVisible: props.usage?.isVisible ?? true,
|
|
11021
11021
|
fontStyle: props.usage?.fontStyle ?? "heading6"
|
|
11022
|
-
}
|
|
11022
|
+
},
|
|
11023
|
+
// there is a typescript bug with `RecursivePartial` so we must cast to `string[] | undefined`
|
|
11024
|
+
visibleFeatures: props.visibleFeatures
|
|
11023
11025
|
};
|
|
11024
11026
|
}
|
|
11025
11027
|
var IncludedFeatures = forwardRef5(({ className, ...rest }, ref) => {
|
|
@@ -11029,7 +11031,16 @@ var IncludedFeatures = forwardRef5(({ className, ...rest }, ref) => {
|
|
|
11029
11031
|
const elements = useRef3([]);
|
|
11030
11032
|
const shouldWrapChildren = useWrapChildren(elements.current);
|
|
11031
11033
|
const isLightBackground = useIsLightBackground();
|
|
11032
|
-
const
|
|
11034
|
+
const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
|
|
11035
|
+
const mappedFeatureUsage = data.featureUsage?.features.find(
|
|
11036
|
+
(usage) => usage.feature?.id === id
|
|
11037
|
+
);
|
|
11038
|
+
if (mappedFeatureUsage) {
|
|
11039
|
+
acc.push(mappedFeatureUsage);
|
|
11040
|
+
}
|
|
11041
|
+
return acc;
|
|
11042
|
+
}, []) : data.featureUsage?.features || [];
|
|
11043
|
+
const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
|
|
11033
11044
|
if (!shouldShowFeatures) {
|
|
11034
11045
|
return null;
|
|
11035
11046
|
}
|
|
@@ -11052,82 +11063,76 @@ var IncludedFeatures = forwardRef5(({ className, ...rest }, ref) => {
|
|
|
11052
11063
|
children: props.header.text
|
|
11053
11064
|
}
|
|
11054
11065
|
) }),
|
|
11055
|
-
(
|
|
11056
|
-
|
|
11057
|
-
|
|
11058
|
-
|
|
11059
|
-
|
|
11060
|
-
|
|
11061
|
-
|
|
11062
|
-
|
|
11063
|
-
|
|
11064
|
-
|
|
11065
|
-
|
|
11066
|
-
|
|
11067
|
-
|
|
11068
|
-
|
|
11069
|
-
|
|
11070
|
-
|
|
11066
|
+
featureUsage.map(({ allocation, feature, usage }, index) => {
|
|
11067
|
+
return /* @__PURE__ */ jsxs8(
|
|
11068
|
+
Flex,
|
|
11069
|
+
{
|
|
11070
|
+
ref: (el) => el && elements.current.push(el),
|
|
11071
|
+
$flexWrap: "wrap",
|
|
11072
|
+
$justifyContent: "space-between",
|
|
11073
|
+
$alignItems: "center",
|
|
11074
|
+
$gap: "1rem",
|
|
11075
|
+
children: [
|
|
11076
|
+
/* @__PURE__ */ jsxs8(Flex, { $flexGrow: "1", $flexBasis: "min-content", $gap: "1rem", children: [
|
|
11077
|
+
props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx15(
|
|
11078
|
+
IconRound,
|
|
11079
|
+
{
|
|
11080
|
+
name: feature.icon,
|
|
11081
|
+
size: "sm",
|
|
11082
|
+
colors: [
|
|
11083
|
+
theme.primary,
|
|
11084
|
+
isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
|
|
11085
|
+
]
|
|
11086
|
+
}
|
|
11087
|
+
),
|
|
11088
|
+
feature?.name && /* @__PURE__ */ jsx15(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx15(
|
|
11089
|
+
Text,
|
|
11090
|
+
{
|
|
11091
|
+
$font: theme.typography[props.icons.fontStyle].fontFamily,
|
|
11092
|
+
$size: theme.typography[props.icons.fontStyle].fontSize,
|
|
11093
|
+
$weight: theme.typography[props.icons.fontStyle].fontWeight,
|
|
11094
|
+
$color: theme.typography[props.icons.fontStyle].color,
|
|
11095
|
+
children: feature.name
|
|
11096
|
+
}
|
|
11097
|
+
) })
|
|
11098
|
+
] }),
|
|
11099
|
+
(feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ jsxs8(
|
|
11100
|
+
Box,
|
|
11101
|
+
{
|
|
11102
|
+
$flexBasis: "min-content",
|
|
11103
|
+
$flexGrow: "1",
|
|
11104
|
+
$textAlign: shouldWrapChildren ? "left" : "right",
|
|
11105
|
+
children: [
|
|
11106
|
+
props.entitlement.isVisible && /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(
|
|
11107
|
+
Text,
|
|
11071
11108
|
{
|
|
11072
|
-
|
|
11073
|
-
size:
|
|
11074
|
-
|
|
11075
|
-
|
|
11076
|
-
|
|
11077
|
-
|
|
11109
|
+
$font: theme.typography[props.entitlement.fontStyle].fontFamily,
|
|
11110
|
+
$size: theme.typography[props.entitlement.fontStyle].fontSize,
|
|
11111
|
+
$weight: theme.typography[props.entitlement.fontStyle].fontWeight,
|
|
11112
|
+
$lineHeight: 1.25,
|
|
11113
|
+
$color: theme.typography[props.entitlement.fontStyle].color,
|
|
11114
|
+
children: typeof allocation === "number" ? `${formatNumber(allocation)} ${(0, import_pluralize2.default)(feature.name, allocation)}` : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
|
|
11078
11115
|
}
|
|
11079
|
-
),
|
|
11080
|
-
|
|
11116
|
+
) }),
|
|
11117
|
+
props.usage.isVisible && /* @__PURE__ */ jsx15(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx15(
|
|
11081
11118
|
Text,
|
|
11082
11119
|
{
|
|
11083
|
-
$font: theme.typography[props.
|
|
11084
|
-
$size: theme.typography[props.
|
|
11085
|
-
$weight: theme.typography[props.
|
|
11086
|
-
$
|
|
11087
|
-
|
|
11120
|
+
$font: theme.typography[props.usage.fontStyle].fontFamily,
|
|
11121
|
+
$size: theme.typography[props.usage.fontStyle].fontSize,
|
|
11122
|
+
$weight: theme.typography[props.usage.fontStyle].fontWeight,
|
|
11123
|
+
$lineHeight: 1.5,
|
|
11124
|
+
$color: theme.typography[props.usage.fontStyle].color,
|
|
11125
|
+
children: typeof usage === "number" && /* @__PURE__ */ jsx15(Fragment2, { children: typeof allocation === "number" ? `${formatNumber(usage)} of ${formatNumber(allocation)} used` : `${formatNumber(usage)} used` })
|
|
11088
11126
|
}
|
|
11089
11127
|
) })
|
|
11090
|
-
]
|
|
11091
|
-
|
|
11092
|
-
|
|
11093
|
-
|
|
11094
|
-
|
|
11095
|
-
|
|
11096
|
-
|
|
11097
|
-
|
|
11098
|
-
props.entitlement.isVisible && /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(
|
|
11099
|
-
Text,
|
|
11100
|
-
{
|
|
11101
|
-
$font: theme.typography[props.entitlement.fontStyle].fontFamily,
|
|
11102
|
-
$size: theme.typography[props.entitlement.fontStyle].fontSize,
|
|
11103
|
-
$weight: theme.typography[props.entitlement.fontStyle].fontWeight,
|
|
11104
|
-
$lineHeight: 1.25,
|
|
11105
|
-
$color: theme.typography[props.entitlement.fontStyle].color,
|
|
11106
|
-
children: typeof allocation === "number" ? `${formatNumber(allocation)} ${(0, import_pluralize2.default)(feature.name, allocation)}` : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
|
|
11107
|
-
}
|
|
11108
|
-
) }),
|
|
11109
|
-
props.usage.isVisible && /* @__PURE__ */ jsx15(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx15(
|
|
11110
|
-
Text,
|
|
11111
|
-
{
|
|
11112
|
-
$font: theme.typography[props.usage.fontStyle].fontFamily,
|
|
11113
|
-
$size: theme.typography[props.usage.fontStyle].fontSize,
|
|
11114
|
-
$weight: theme.typography[props.usage.fontStyle].fontWeight,
|
|
11115
|
-
$lineHeight: 1.5,
|
|
11116
|
-
$color: theme.typography[props.usage.fontStyle].color,
|
|
11117
|
-
children: typeof usage === "number" && /* @__PURE__ */ jsx15(Fragment2, { children: typeof allocation === "number" ? `${formatNumber(usage)} of ${formatNumber(allocation)} used` : `${formatNumber(usage)} used` })
|
|
11118
|
-
}
|
|
11119
|
-
) })
|
|
11120
|
-
]
|
|
11121
|
-
}
|
|
11122
|
-
)
|
|
11123
|
-
]
|
|
11124
|
-
},
|
|
11125
|
-
index
|
|
11126
|
-
)
|
|
11127
|
-
];
|
|
11128
|
-
},
|
|
11129
|
-
[]
|
|
11130
|
-
)
|
|
11128
|
+
]
|
|
11129
|
+
}
|
|
11130
|
+
)
|
|
11131
|
+
]
|
|
11132
|
+
},
|
|
11133
|
+
index
|
|
11134
|
+
);
|
|
11135
|
+
})
|
|
11131
11136
|
]
|
|
11132
11137
|
}
|
|
11133
11138
|
);
|
|
@@ -11272,7 +11277,9 @@ function resolveDesignProps3(props) {
|
|
|
11272
11277
|
usage: {
|
|
11273
11278
|
isVisible: props.usage?.isVisible ?? true,
|
|
11274
11279
|
fontStyle: props.usage?.fontStyle ?? "heading5"
|
|
11275
|
-
}
|
|
11280
|
+
},
|
|
11281
|
+
// there is a typescript bug with `RecursivePartial` so we must cast to `string[] | undefined`
|
|
11282
|
+
visibleFeatures: props.visibleFeatures
|
|
11276
11283
|
};
|
|
11277
11284
|
}
|
|
11278
11285
|
var MeteredFeatures = forwardRef7(({ className, ...rest }, ref) => {
|
|
@@ -11282,13 +11289,22 @@ var MeteredFeatures = forwardRef7(({ className, ...rest }, ref) => {
|
|
|
11282
11289
|
const theme = nt();
|
|
11283
11290
|
const { data } = useEmbed();
|
|
11284
11291
|
const isLightBackground = useIsLightBackground();
|
|
11285
|
-
const
|
|
11286
|
-
|
|
11287
|
-
|
|
11288
|
-
|
|
11292
|
+
const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
|
|
11293
|
+
const mappedFeatureUsage = data.featureUsage?.features.find(
|
|
11294
|
+
(usage) => usage.feature?.id === id
|
|
11295
|
+
);
|
|
11296
|
+
if (mappedFeatureUsage?.feature?.featureType === "event" || mappedFeatureUsage?.feature?.featureType === "trait") {
|
|
11297
|
+
acc.push(mappedFeatureUsage);
|
|
11298
|
+
}
|
|
11299
|
+
return acc;
|
|
11300
|
+
}, []) : (data.featureUsage?.features || []).filter(
|
|
11301
|
+
(usage) => usage.feature?.featureType === "event" || usage.feature?.featureType === "trait"
|
|
11302
|
+
);
|
|
11303
|
+
const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
|
|
11304
|
+
if (!shouldShowFeatures) {
|
|
11289
11305
|
return null;
|
|
11290
11306
|
}
|
|
11291
|
-
return /* @__PURE__ */ jsx17(Flex, { ref, className, $flexDirection: "column", children:
|
|
11307
|
+
return /* @__PURE__ */ jsx17(Flex, { ref, className, $flexDirection: "column", children: featureUsage.map(({ allocation, feature, usage }, index) => {
|
|
11292
11308
|
return /* @__PURE__ */ jsxs10(Element, { as: Flex, $gap: "1.5rem", children: [
|
|
11293
11309
|
props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx17(
|
|
11294
11310
|
IconRound,
|