alicia-design-system 1.76.4 → 1.76.5
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.
|
@@ -19,15 +19,15 @@ const CardV2 = ({ header = undefined, headerIcon = undefined, tag = undefined, p
|
|
|
19
19
|
} : {
|
|
20
20
|
mt: (0, polished_1.rem)(16),
|
|
21
21
|
mb: (0, polished_1.rem)((checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) ? 8 : 0)
|
|
22
|
-
} }, { children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: (_e = header === null || header === void 0 ? void 0 : header.descriptionColor) !== null && _e !== void 0 ? _e : "#000000", fontSize: (0, polished_1.rem)(
|
|
22
|
+
} }, { children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: (_e = header === null || header === void 0 ? void 0 : header.descriptionColor) !== null && _e !== void 0 ? _e : "#000000", fontSize: (0, polished_1.rem)(18), lineHeight: (0, polished_1.rem)(24), mb: (0, polished_1.rem)((checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) ? 8 : 0), dangerouslySetInnerHTML: {
|
|
23
23
|
__html: header.description
|
|
24
|
-
} }) }))), (checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) && Boolean((_f = checklist === null || checklist === void 0 ? void 0 : checklist.data) === null || _f === void 0 ? void 0 : _f.length) && (0, jsx_runtime_1.jsx)(react_1.Flex, Object.assign({ direction: "column" }, { children: (_g = checklist === null || checklist === void 0 ? void 0 : checklist.data) === null || _g === void 0 ? void 0 : _g.map((list, index) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ mt: (0, polished_1.rem)((index === 0) ? 18 : 12), direction: "row", fontSize: (0, polished_1.rem)(14), fontWeight: 400, lineHeight: (0, polished_1.rem)(20) }, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, Object.assign({ mr: (0, polished_1.rem)(8) }, { children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: list.icon, w: (0, polished_1.rem)(14), height: (0, polished_1.rem)(14) }) })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: (0, polished_1.rem)(
|
|
24
|
+
} }) }))), (checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) && Boolean((_f = checklist === null || checklist === void 0 ? void 0 : checklist.data) === null || _f === void 0 ? void 0 : _f.length) && (0, jsx_runtime_1.jsx)(react_1.Flex, Object.assign({ direction: "column" }, { children: (_g = checklist === null || checklist === void 0 ? void 0 : checklist.data) === null || _g === void 0 ? void 0 : _g.map((list, index) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ mt: (0, polished_1.rem)((index === 0) ? 18 : 12), direction: "row", fontSize: (0, polished_1.rem)(14), fontWeight: 400, lineHeight: (0, polished_1.rem)(20) }, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, Object.assign({ mr: (0, polished_1.rem)(8) }, { children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: list.icon, w: (0, polished_1.rem)(14), height: (0, polished_1.rem)(14) }) })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: (0, polished_1.rem)(18), lineHeight: (0, polished_1.rem)(24), dangerouslySetInnerHTML: {
|
|
25
25
|
__html: list.label
|
|
26
|
-
} })] }), list.id))) })), ((checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) && (addons === null || addons === void 0 ? void 0 : addons.isVisible)) && ((0, jsx_runtime_1.jsx)(react_1.Divider, { mt: (0, polished_1.rem)(18), mb: (0, polished_1.rem)(16) })), (addons === null || addons === void 0 ? void 0 : addons.isVisible) && Boolean((_h = addons === null || addons === void 0 ? void 0 : addons.data) === null || _h === void 0 ? void 0 : _h.length) && (0, jsx_runtime_1.jsx)(react_1.Flex, Object.assign({ direction: "column" }, { children: (_j = addons === null || addons === void 0 ? void 0 : addons.data) === null || _j === void 0 ? void 0 : _j.map((list, index) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ mt: (0, polished_1.rem)(((checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) && (addons === null || addons === void 0 ? void 0 : addons.isVisible) && index === 0) ? 0 : (index === 0) ? 18 : 12), direction: "row", width: "100%", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, Object.assign({ mr: (0, polished_1.rem)(8) }, { children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: list.icon, w: (0, polished_1.rem)(14), height: (0, polished_1.rem)(14) }) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ justifyContent: "space-between", direction: "row", width: "inherit", fontSize: (0, polished_1.rem)(14), fontWeight: 400, lineHeight: (0, polished_1.rem)(20) }, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: (0, polished_1.rem)(
|
|
26
|
+
} })] }), list.id))) })), ((checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) && (addons === null || addons === void 0 ? void 0 : addons.isVisible)) && ((0, jsx_runtime_1.jsx)(react_1.Divider, { mt: (0, polished_1.rem)(18), mb: (0, polished_1.rem)(16) })), (addons === null || addons === void 0 ? void 0 : addons.isVisible) && Boolean((_h = addons === null || addons === void 0 ? void 0 : addons.data) === null || _h === void 0 ? void 0 : _h.length) && (0, jsx_runtime_1.jsx)(react_1.Flex, Object.assign({ direction: "column" }, { children: (_j = addons === null || addons === void 0 ? void 0 : addons.data) === null || _j === void 0 ? void 0 : _j.map((list, index) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ mt: (0, polished_1.rem)(((checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) && (addons === null || addons === void 0 ? void 0 : addons.isVisible) && index === 0) ? 0 : (index === 0) ? 18 : 12), direction: "row", width: "100%", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, Object.assign({ mr: (0, polished_1.rem)(8) }, { children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: list.icon, w: (0, polished_1.rem)(14), height: (0, polished_1.rem)(14) }) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ justifyContent: "space-between", direction: "row", width: "inherit", fontSize: (0, polished_1.rem)(14), fontWeight: 400, lineHeight: (0, polished_1.rem)(20) }, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: (0, polished_1.rem)(18), lineHeight: (0, polished_1.rem)(24), dangerouslySetInnerHTML: {
|
|
27
27
|
__html: list.text
|
|
28
|
-
} }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: (0, polished_1.rem)(
|
|
28
|
+
} }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: (0, polished_1.rem)(18), lineHeight: (0, polished_1.rem)(24), dangerouslySetInnerHTML: {
|
|
29
29
|
__html: list.price
|
|
30
|
-
} })] }))] }), list.id))) })), ((_k = readMore === null || readMore === void 0 ? void 0 : readMore.isVisible) !== null && _k !== void 0 ? _k : readMore === null || readMore === void 0 ? void 0 : readMore.isPriceVisible) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ justifyContent: "space-between", w: !(readMore === null || readMore === void 0 ? void 0 : readMore.isVisible) && (readMore === null || readMore === void 0 ? void 0 : readMore.isPriceVisible) ? "100%" : undefined, mt: (0, polished_1.rem)(16), cursor: "pointer" }, { children: [(readMore === null || readMore === void 0 ? void 0 : readMore.isVisible) && (0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ direction: "row", alignItems: "center", paddingBottom: (0, polished_1.rem)(6), gap: (0, polished_1.rem)(7), borderBottom: "1px solid", sx: (_l = readMore === null || readMore === void 0 ? void 0 : readMore.sx) !== null && _l !== void 0 ? _l : { borderColor: (_m = readMore === null || readMore === void 0 ? void 0 : readMore.color) !== null && _m !== void 0 ? _m : "#00000033" } }, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, Object.assign({ fontSize: (0, polished_1.rem)(
|
|
30
|
+
} })] }))] }), list.id))) })), ((_k = readMore === null || readMore === void 0 ? void 0 : readMore.isVisible) !== null && _k !== void 0 ? _k : readMore === null || readMore === void 0 ? void 0 : readMore.isPriceVisible) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ justifyContent: "space-between", w: !(readMore === null || readMore === void 0 ? void 0 : readMore.isVisible) && (readMore === null || readMore === void 0 ? void 0 : readMore.isPriceVisible) ? "100%" : undefined, mt: (0, polished_1.rem)(16), cursor: "pointer" }, { children: [(readMore === null || readMore === void 0 ? void 0 : readMore.isVisible) && (0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ direction: "row", alignItems: "center", paddingBottom: (0, polished_1.rem)(6), gap: (0, polished_1.rem)(7), borderBottom: "1px solid", sx: (_l = readMore === null || readMore === void 0 ? void 0 : readMore.sx) !== null && _l !== void 0 ? _l : { borderColor: (_m = readMore === null || readMore === void 0 ? void 0 : readMore.color) !== null && _m !== void 0 ? _m : "#00000033" } }, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, Object.assign({ fontSize: (0, polished_1.rem)(18), color: (_o = readMore === null || readMore === void 0 ? void 0 : readMore.color) !== null && _o !== void 0 ? _o : "#000000", lineHeight: (0, polished_1.rem)(24), fontWeight: 400, "data-testid": "read-more", onClick: readMore === null || readMore === void 0 ? void 0 : readMore.action }, { children: readMore === null || readMore === void 0 ? void 0 : readMore.text })), (0, jsx_runtime_1.jsx)(react_1.Icon, { color: (_p = readMore === null || readMore === void 0 ? void 0 : readMore.color) !== null && _p !== void 0 ? _p : "#000000", as: readMore.icon, w: (0, polished_1.rem)(10), height: (0, polished_1.rem)(10) })] })), (readMore === null || readMore === void 0 ? void 0 : readMore.isPriceVisible) && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (_q = price === null || price === void 0 ? void 0 : price.customPriceTag) !== null && _q !== void 0 ? _q : ((price === null || price === void 0 ? void 0 : price.label) && (price === null || price === void 0 ? void 0 : price.perMonthText) && (0, jsx_runtime_1.jsxs)(react_1.Text, Object.assign({ fontSize: (0, polished_1.rem)(14), lineHeight: (0, polished_1.rem)(24), fontWeight: 400, textAlign: "right", width: "inherit" }, { children: [price === null || price === void 0 ? void 0 : price.fromText, " ", (0, jsx_runtime_1.jsx)("b", Object.assign({ style: { fontSize: (0, polished_1.rem)(16), fontWeight: "bold" } }, { children: price.label })), " ", price === null || price === void 0 ? void 0 : price.perMonthText] }))) })] }))), (CTA === null || CTA === void 0 ? void 0 : CTA.isVisible) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ height: "100%", mt: (0, polished_1.rem)(22), direction: "row", wrap: ["wrap", "wrap", "wrap", "inherit"], gap: 2, justifyContent: "start", alignItems: "end", w: CTA.isPriceVisible ? "100%" : undefined }, { children: [((_r = CTA.primary) === null || _r === void 0 ? void 0 : _r.isVisible) &&
|
|
31
31
|
(0, jsx_runtime_1.jsx)(react_1.Flex, { children: (0, jsx_runtime_1.jsx)(react_1.Button, Object.assign({ "data-testid": "primary-action", onClick: (_s = CTA.primary) === null || _s === void 0 ? void 0 : _s.onClick, outline: "none", isDisabled: (_t = CTA.primary) === null || _t === void 0 ? void 0 : _t.isDisabled, isLoading: (_u = CTA.primary) === null || _u === void 0 ? void 0 : _u.isLoading, rightIcon: (((_v = CTA.primary) === null || _v === void 0 ? void 0 : _v.iconPosition) === "right" && ((_w = CTA.primary) === null || _w === void 0 ? void 0 : _w.icon)) ? (0, jsx_runtime_1.jsx)(react_1.Icon, { as: (_x = CTA.primary) === null || _x === void 0 ? void 0 : _x.icon }) : undefined, leftIcon: (((_y = CTA.primary) === null || _y === void 0 ? void 0 : _y.iconPosition) === "left" && ((_z = CTA.primary) === null || _z === void 0 ? void 0 : _z.icon)) ? (0, jsx_runtime_1.jsx)(react_1.Icon, { as: (_0 = CTA.primary) === null || _0 === void 0 ? void 0 : _0.icon }) : undefined, variant: (_1 = CTA.primary) === null || _1 === void 0 ? void 0 : _1.variant, color: (_2 = CTA === null || CTA === void 0 ? void 0 : CTA.primary) === null || _2 === void 0 ? void 0 : _2.color, fill: (_3 = CTA === null || CTA === void 0 ? void 0 : CTA.primary) === null || _3 === void 0 ? void 0 : _3.color, stroke: (_4 = CTA === null || CTA === void 0 ? void 0 : CTA.primary) === null || _4 === void 0 ? void 0 : _4.color, borderRadius: (0, polished_1.rem)(56), _hover: {
|
|
32
32
|
bg: (_5 = CTA.primary) === null || _5 === void 0 ? void 0 : _5.hoverBG,
|
|
33
33
|
color: (_6 = CTA.primary) === null || _6 === void 0 ? void 0 : _6.hoverColor,
|
|
@@ -16,15 +16,15 @@ export const CardV2 = ({ header = undefined, headerIcon = undefined, tag = undef
|
|
|
16
16
|
} : {
|
|
17
17
|
mt: rem(16),
|
|
18
18
|
mb: rem((checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) ? 8 : 0)
|
|
19
|
-
} }, { children: _jsx(Text, { color: (_e = header === null || header === void 0 ? void 0 : header.descriptionColor) !== null && _e !== void 0 ? _e : "#000000", fontSize: rem(
|
|
19
|
+
} }, { children: _jsx(Text, { color: (_e = header === null || header === void 0 ? void 0 : header.descriptionColor) !== null && _e !== void 0 ? _e : "#000000", fontSize: rem(18), lineHeight: rem(24), mb: rem((checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) ? 8 : 0), dangerouslySetInnerHTML: {
|
|
20
20
|
__html: header.description
|
|
21
|
-
} }) }))), (checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) && Boolean((_f = checklist === null || checklist === void 0 ? void 0 : checklist.data) === null || _f === void 0 ? void 0 : _f.length) && _jsx(Flex, Object.assign({ direction: "column" }, { children: (_g = checklist === null || checklist === void 0 ? void 0 : checklist.data) === null || _g === void 0 ? void 0 : _g.map((list, index) => (_jsxs(Flex, Object.assign({ mt: rem((index === 0) ? 18 : 12), direction: "row", fontSize: rem(14), fontWeight: 400, lineHeight: rem(20) }, { children: [_jsx(Box, Object.assign({ mr: rem(8) }, { children: _jsx(Icon, { as: list.icon, w: rem(14), height: rem(14) }) })), _jsx(Text, { fontSize: rem(
|
|
21
|
+
} }) }))), (checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) && Boolean((_f = checklist === null || checklist === void 0 ? void 0 : checklist.data) === null || _f === void 0 ? void 0 : _f.length) && _jsx(Flex, Object.assign({ direction: "column" }, { children: (_g = checklist === null || checklist === void 0 ? void 0 : checklist.data) === null || _g === void 0 ? void 0 : _g.map((list, index) => (_jsxs(Flex, Object.assign({ mt: rem((index === 0) ? 18 : 12), direction: "row", fontSize: rem(14), fontWeight: 400, lineHeight: rem(20) }, { children: [_jsx(Box, Object.assign({ mr: rem(8) }, { children: _jsx(Icon, { as: list.icon, w: rem(14), height: rem(14) }) })), _jsx(Text, { fontSize: rem(18), lineHeight: rem(24), dangerouslySetInnerHTML: {
|
|
22
22
|
__html: list.label
|
|
23
|
-
} })] }), list.id))) })), ((checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) && (addons === null || addons === void 0 ? void 0 : addons.isVisible)) && (_jsx(Divider, { mt: rem(18), mb: rem(16) })), (addons === null || addons === void 0 ? void 0 : addons.isVisible) && Boolean((_h = addons === null || addons === void 0 ? void 0 : addons.data) === null || _h === void 0 ? void 0 : _h.length) && _jsx(Flex, Object.assign({ direction: "column" }, { children: (_j = addons === null || addons === void 0 ? void 0 : addons.data) === null || _j === void 0 ? void 0 : _j.map((list, index) => (_jsxs(Flex, Object.assign({ mt: rem(((checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) && (addons === null || addons === void 0 ? void 0 : addons.isVisible) && index === 0) ? 0 : (index === 0) ? 18 : 12), direction: "row", width: "100%", alignItems: "center" }, { children: [_jsx(Box, Object.assign({ mr: rem(8) }, { children: _jsx(Icon, { as: list.icon, w: rem(14), height: rem(14) }) })), _jsxs(Flex, Object.assign({ justifyContent: "space-between", direction: "row", width: "inherit", fontSize: rem(14), fontWeight: 400, lineHeight: rem(20) }, { children: [_jsx(Text, { fontSize: rem(
|
|
23
|
+
} })] }), list.id))) })), ((checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) && (addons === null || addons === void 0 ? void 0 : addons.isVisible)) && (_jsx(Divider, { mt: rem(18), mb: rem(16) })), (addons === null || addons === void 0 ? void 0 : addons.isVisible) && Boolean((_h = addons === null || addons === void 0 ? void 0 : addons.data) === null || _h === void 0 ? void 0 : _h.length) && _jsx(Flex, Object.assign({ direction: "column" }, { children: (_j = addons === null || addons === void 0 ? void 0 : addons.data) === null || _j === void 0 ? void 0 : _j.map((list, index) => (_jsxs(Flex, Object.assign({ mt: rem(((checklist === null || checklist === void 0 ? void 0 : checklist.isVisible) && (addons === null || addons === void 0 ? void 0 : addons.isVisible) && index === 0) ? 0 : (index === 0) ? 18 : 12), direction: "row", width: "100%", alignItems: "center" }, { children: [_jsx(Box, Object.assign({ mr: rem(8) }, { children: _jsx(Icon, { as: list.icon, w: rem(14), height: rem(14) }) })), _jsxs(Flex, Object.assign({ justifyContent: "space-between", direction: "row", width: "inherit", fontSize: rem(14), fontWeight: 400, lineHeight: rem(20) }, { children: [_jsx(Text, { fontSize: rem(18), lineHeight: rem(24), dangerouslySetInnerHTML: {
|
|
24
24
|
__html: list.text
|
|
25
|
-
} }), _jsx(Text, { fontSize: rem(
|
|
25
|
+
} }), _jsx(Text, { fontSize: rem(18), lineHeight: rem(24), dangerouslySetInnerHTML: {
|
|
26
26
|
__html: list.price
|
|
27
|
-
} })] }))] }), list.id))) })), ((_k = readMore === null || readMore === void 0 ? void 0 : readMore.isVisible) !== null && _k !== void 0 ? _k : readMore === null || readMore === void 0 ? void 0 : readMore.isPriceVisible) && (_jsxs(Flex, Object.assign({ justifyContent: "space-between", w: !(readMore === null || readMore === void 0 ? void 0 : readMore.isVisible) && (readMore === null || readMore === void 0 ? void 0 : readMore.isPriceVisible) ? "100%" : undefined, mt: rem(16), cursor: "pointer" }, { children: [(readMore === null || readMore === void 0 ? void 0 : readMore.isVisible) && _jsxs(Flex, Object.assign({ direction: "row", alignItems: "center", paddingBottom: rem(6), gap: rem(7), borderBottom: "1px solid", sx: (_l = readMore === null || readMore === void 0 ? void 0 : readMore.sx) !== null && _l !== void 0 ? _l : { borderColor: (_m = readMore === null || readMore === void 0 ? void 0 : readMore.color) !== null && _m !== void 0 ? _m : "#00000033" } }, { children: [_jsx(Text, Object.assign({ fontSize: rem(
|
|
27
|
+
} })] }))] }), list.id))) })), ((_k = readMore === null || readMore === void 0 ? void 0 : readMore.isVisible) !== null && _k !== void 0 ? _k : readMore === null || readMore === void 0 ? void 0 : readMore.isPriceVisible) && (_jsxs(Flex, Object.assign({ justifyContent: "space-between", w: !(readMore === null || readMore === void 0 ? void 0 : readMore.isVisible) && (readMore === null || readMore === void 0 ? void 0 : readMore.isPriceVisible) ? "100%" : undefined, mt: rem(16), cursor: "pointer" }, { children: [(readMore === null || readMore === void 0 ? void 0 : readMore.isVisible) && _jsxs(Flex, Object.assign({ direction: "row", alignItems: "center", paddingBottom: rem(6), gap: rem(7), borderBottom: "1px solid", sx: (_l = readMore === null || readMore === void 0 ? void 0 : readMore.sx) !== null && _l !== void 0 ? _l : { borderColor: (_m = readMore === null || readMore === void 0 ? void 0 : readMore.color) !== null && _m !== void 0 ? _m : "#00000033" } }, { children: [_jsx(Text, Object.assign({ fontSize: rem(18), color: (_o = readMore === null || readMore === void 0 ? void 0 : readMore.color) !== null && _o !== void 0 ? _o : "#000000", lineHeight: rem(24), fontWeight: 400, "data-testid": "read-more", onClick: readMore === null || readMore === void 0 ? void 0 : readMore.action }, { children: readMore === null || readMore === void 0 ? void 0 : readMore.text })), _jsx(Icon, { color: (_p = readMore === null || readMore === void 0 ? void 0 : readMore.color) !== null && _p !== void 0 ? _p : "#000000", as: readMore.icon, w: rem(10), height: rem(10) })] })), (readMore === null || readMore === void 0 ? void 0 : readMore.isPriceVisible) && _jsx(_Fragment, { children: (_q = price === null || price === void 0 ? void 0 : price.customPriceTag) !== null && _q !== void 0 ? _q : ((price === null || price === void 0 ? void 0 : price.label) && (price === null || price === void 0 ? void 0 : price.perMonthText) && _jsxs(Text, Object.assign({ fontSize: rem(14), lineHeight: rem(24), fontWeight: 400, textAlign: "right", width: "inherit" }, { children: [price === null || price === void 0 ? void 0 : price.fromText, " ", _jsx("b", Object.assign({ style: { fontSize: rem(16), fontWeight: "bold" } }, { children: price.label })), " ", price === null || price === void 0 ? void 0 : price.perMonthText] }))) })] }))), (CTA === null || CTA === void 0 ? void 0 : CTA.isVisible) && (_jsxs(Flex, Object.assign({ height: "100%", mt: rem(22), direction: "row", wrap: ["wrap", "wrap", "wrap", "inherit"], gap: 2, justifyContent: "start", alignItems: "end", w: CTA.isPriceVisible ? "100%" : undefined }, { children: [((_r = CTA.primary) === null || _r === void 0 ? void 0 : _r.isVisible) &&
|
|
28
28
|
_jsx(Flex, { children: _jsx(Button, Object.assign({ "data-testid": "primary-action", onClick: (_s = CTA.primary) === null || _s === void 0 ? void 0 : _s.onClick, outline: "none", isDisabled: (_t = CTA.primary) === null || _t === void 0 ? void 0 : _t.isDisabled, isLoading: (_u = CTA.primary) === null || _u === void 0 ? void 0 : _u.isLoading, rightIcon: (((_v = CTA.primary) === null || _v === void 0 ? void 0 : _v.iconPosition) === "right" && ((_w = CTA.primary) === null || _w === void 0 ? void 0 : _w.icon)) ? _jsx(Icon, { as: (_x = CTA.primary) === null || _x === void 0 ? void 0 : _x.icon }) : undefined, leftIcon: (((_y = CTA.primary) === null || _y === void 0 ? void 0 : _y.iconPosition) === "left" && ((_z = CTA.primary) === null || _z === void 0 ? void 0 : _z.icon)) ? _jsx(Icon, { as: (_0 = CTA.primary) === null || _0 === void 0 ? void 0 : _0.icon }) : undefined, variant: (_1 = CTA.primary) === null || _1 === void 0 ? void 0 : _1.variant, color: (_2 = CTA === null || CTA === void 0 ? void 0 : CTA.primary) === null || _2 === void 0 ? void 0 : _2.color, fill: (_3 = CTA === null || CTA === void 0 ? void 0 : CTA.primary) === null || _3 === void 0 ? void 0 : _3.color, stroke: (_4 = CTA === null || CTA === void 0 ? void 0 : CTA.primary) === null || _4 === void 0 ? void 0 : _4.color, borderRadius: rem(56), _hover: {
|
|
29
29
|
bg: (_5 = CTA.primary) === null || _5 === void 0 ? void 0 : _5.hoverBG,
|
|
30
30
|
color: (_6 = CTA.primary) === null || _6 === void 0 ? void 0 : _6.hoverColor,
|