@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
406 lines • 26.5 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import * as React from "react";
import { motion } from "framer-motion";
import HUDLoading from "./HUDLoading.js";
import HUDTyper from "./HUDTyper.js";
var FeatureItem = function FeatureItem(_ref) {
var _ref$pricingCardFeatu = _ref.pricingCardFeatureCheckIconContainerAnimationTransitionConfigurationSettings,
pricingCardFeatureCheckIconContainerAnimationTransitionConfigurationSettings = _ref$pricingCardFeatu === void 0 ? {} : _ref$pricingCardFeatu,
_ref$pricingCardFeatu2 = _ref.pricingCardFeatureCheckIconContainerInitialAnimationConfigurationSettings,
pricingCardFeatureCheckIconContainerInitialAnimationConfigurationSettings = _ref$pricingCardFeatu2 === void 0 ? {} : _ref$pricingCardFeatu2,
_ref$pricingCardFeatu3 = _ref.pricingCardFeatureCheckIconContainerAnimationConfigurationSettings,
pricingCardFeatureCheckIconContainerAnimationConfigurationSettings = _ref$pricingCardFeatu3 === void 0 ? {} : _ref$pricingCardFeatu3,
_ref$pricingCardFeatu4 = _ref.pricingCardFeatureAnimationTransitionConfigurationSettings,
pricingCardFeatureAnimationTransitionConfigurationSettings = _ref$pricingCardFeatu4 === void 0 ? {} : _ref$pricingCardFeatu4,
_ref$pricingCardFeatu5 = _ref.pricingCardFeatureContainerConfigurationSettings,
pricingCardFeatureContainerConfigurationSettings = _ref$pricingCardFeatu5 === void 0 ? {} : _ref$pricingCardFeatu5,
_ref$pricingCardFeatu6 = _ref.pricingCardFeatureHoverConfigurationSettings,
pricingCardFeatureHoverConfigurationSettings = _ref$pricingCardFeatu6 === void 0 ? {} : _ref$pricingCardFeatu6,
_ref$pricingCardFeatu7 = _ref.pricingCardFeatureConfigurationSettings,
pricingCardFeatureConfigurationSettings = _ref$pricingCardFeatu7 === void 0 ? {} : _ref$pricingCardFeatu7,
_ref$pricingCardFeatu8 = _ref.pricingCardFeatureCheckIconContainerConfigurations,
pricingCardFeatureCheckIconContainerConfigurations = _ref$pricingCardFeatu8 === void 0 ? {} : _ref$pricingCardFeatu8,
_ref$pricingCardFeatu9 = _ref.pricingCardFeatureContainerConfigurations,
pricingCardFeatureContainerConfigurations = _ref$pricingCardFeatu9 === void 0 ? {} : _ref$pricingCardFeatu9,
_ref$pricingCardFeatu10 = _ref.pricingCardFeatureCheckIconConfigurations,
pricingCardFeatureCheckIconConfigurations = _ref$pricingCardFeatu10 === void 0 ? {} : _ref$pricingCardFeatu10,
_ref$pricingCardFeatu11 = _ref.pricingCardFeatureNameLabelConfigurations,
pricingCardFeatureNameLabelConfigurations = _ref$pricingCardFeatu11 === void 0 ? {} : _ref$pricingCardFeatu11,
_ref$pricingCardFeatu12 = _ref.pricingCardFeatureConfigurations,
pricingCardFeatureConfigurations = _ref$pricingCardFeatu12 === void 0 ? {} : _ref$pricingCardFeatu12,
feature = _ref.feature;
return /*#__PURE__*/React.createElement(motion.div, _extends({
whileHover: _objectSpread({
backgroundColor: "rgba(37, 99, 235, 0.07)",
scale: 1.0269
}, pricingCardFeatureHoverConfigurationSettings),
transition: _objectSpread({
duration: 0.269
}, pricingCardFeatureAnimationTransitionConfigurationSettings),
style: _objectSpread({
display: "flex",
flexDirection: "row",
alignItems: "center",
transition: "background 0.369s ease",
borderRadius: "8px",
gap: "14px",
padding: "12px"
}, pricingCardFeatureContainerConfigurationSettings)
}, pricingCardFeatureContainerConfigurations), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
alignItems: "center",
fontWeight: "500",
fontSize: "16px",
color: "#374151",
gap: "14px"
}, pricingCardFeatureConfigurationSettings)
}, pricingCardFeatureConfigurations), /*#__PURE__*/React.createElement(motion.svg, _extends({
initial: _objectSpread({
opacity: 0,
scale: 0.569
}, pricingCardFeatureCheckIconContainerInitialAnimationConfigurationSettings),
animate: _objectSpread({
opacity: 1,
scale: 1
}, pricingCardFeatureCheckIconContainerAnimationConfigurationSettings),
transition: _objectSpread({
duration: 0.469
}, pricingCardFeatureCheckIconContainerAnimationTransitionConfigurationSettings),
xmlns: "http://www.w3.org/2000/svg",
strokeLinejoin: "round",
strokeLinecap: "round",
viewBox: "0 0 24 24",
stroke: "#2563EB",
strokeWidth: "2",
fill: "none",
height: "22",
width: "22"
}, pricingCardFeatureCheckIconContainerConfigurations), /*#__PURE__*/React.createElement("path", _extends({
d: "M20 6 9 17l-5-5"
}, pricingCardFeatureCheckIconConfigurations))), /*#__PURE__*/React.createElement("span", pricingCardFeatureNameLabelConfigurations, feature.name ? feature.name : feature)), feature.component ? feature.component : null);
};
function HUDPricingCard(_ref2) {
var _ref2$pricingCardFeat = _ref2.pricingCardFeatureCheckIconContainerAnimationTransitionConfigurationSettings,
pricingCardFeatureCheckIconContainerAnimationTransitionConfigurationSettings = _ref2$pricingCardFeat === void 0 ? {} : _ref2$pricingCardFeat,
_ref2$pricingCardFeat2 = _ref2.pricingCardFeatureCheckIconContainerInitialAnimationConfigurationSettings,
pricingCardFeatureCheckIconContainerInitialAnimationConfigurationSettings = _ref2$pricingCardFeat2 === void 0 ? {} : _ref2$pricingCardFeat2,
_ref2$pricingCardFeat3 = _ref2.pricingCardFeatureCheckIconContainerAnimationConfigurationSettings,
pricingCardFeatureCheckIconContainerAnimationConfigurationSettings = _ref2$pricingCardFeat3 === void 0 ? {} : _ref2$pricingCardFeat3,
_ref2$pricingCardPric = _ref2.pricingCardPriceContainerAnimationTransitionConfigurationSettings,
pricingCardPriceContainerAnimationTransitionConfigurationSettings = _ref2$pricingCardPric === void 0 ? {} : _ref2$pricingCardPric,
_ref2$pricingCardActi = _ref2.pricingCardActionButtonAnimationTransitionConfigurationSettings,
pricingCardActionButtonAnimationTransitionConfigurationSettings = _ref2$pricingCardActi === void 0 ? {} : _ref2$pricingCardActi,
_ref2$pricingCardBest = _ref2.pricingCardBestValueAnimationTransitionConfigurationSettings,
pricingCardBestValueAnimationTransitionConfigurationSettings = _ref2$pricingCardBest === void 0 ? {} : _ref2$pricingCardBest,
_ref2$pricingCardSect = _ref2.pricingCardSectionedFeaturesContainerConfigurationSettings,
pricingCardSectionedFeaturesContainerConfigurationSettings = _ref2$pricingCardSect === void 0 ? {} : _ref2$pricingCardSect,
_ref2$pricingCardFeat4 = _ref2.pricingCardFeatureAnimationTransitionConfigurationSettings,
pricingCardFeatureAnimationTransitionConfigurationSettings = _ref2$pricingCardFeat4 === void 0 ? {} : _ref2$pricingCardFeat4,
_ref2$pricingCardPric2 = _ref2.pricingCardPriceContainerAnimationConfigurationSettings,
pricingCardPriceContainerAnimationConfigurationSettings = _ref2$pricingCardPric2 === void 0 ? {} : _ref2$pricingCardPric2,
_ref2$pricingCardSect2 = _ref2.pricingCardSectionedFeaturesTitleConfigurationSettings,
pricingCardSectionedFeaturesTitleConfigurationSettings = _ref2$pricingCardSect2 === void 0 ? {} : _ref2$pricingCardSect2,
_ref2$pricingCardAnim = _ref2.pricingCardAnimationTransitionConfigurationSettings,
pricingCardAnimationTransitionConfigurationSettings = _ref2$pricingCardAnim === void 0 ? {} : _ref2$pricingCardAnim,
_ref2$pricingCardBest2 = _ref2.pricingCardBestValueAnimationConfigurationSettings,
pricingCardBestValueAnimationConfigurationSettings = _ref2$pricingCardBest2 === void 0 ? {} : _ref2$pricingCardBest2,
_ref2$pricingCardFeat5 = _ref2.pricingCardFeaturesContainerConfigurationSettings,
pricingCardFeaturesContainerConfigurationSettings = _ref2$pricingCardFeat5 === void 0 ? {} : _ref2$pricingCardFeat5,
_ref2$pricingCardSect3 = _ref2.pricingCardSectionedFeaturesConfigurationSettings,
pricingCardSectionedFeaturesConfigurationSettings = _ref2$pricingCardSect3 === void 0 ? {} : _ref2$pricingCardSect3,
_ref2$pricingCardActi2 = _ref2.pricingCardActionButtonHoverConfigurationSettings,
pricingCardActionButtonHoverConfigurationSettings = _ref2$pricingCardActi2 === void 0 ? {} : _ref2$pricingCardActi2,
_ref2$pricingCardFeat6 = _ref2.pricingCardFeatureContainerConfigurationSettings,
pricingCardFeatureContainerConfigurationSettings = _ref2$pricingCardFeat6 === void 0 ? {} : _ref2$pricingCardFeat6,
_ref2$pricingCardPric3 = _ref2.pricingCardPriceContainerConfigurationSettings,
pricingCardPriceContainerConfigurationSettings = _ref2$pricingCardPric3 === void 0 ? {} : _ref2$pricingCardPric3,
_ref2$pricingCardActi3 = _ref2.pricingCardActionButtonConfigurationSettings,
pricingCardActionButtonConfigurationSettings = _ref2$pricingCardActi3 === void 0 ? {} : _ref2$pricingCardActi3,
_ref2$pricingCardFeat7 = _ref2.pricingCardFeatureHoverConfigurationSettings,
pricingCardFeatureHoverConfigurationSettings = _ref2$pricingCardFeat7 === void 0 ? {} : _ref2$pricingCardFeat7,
_ref2$pricingCardCont = _ref2.pricingCardContainerConfigurationSettings,
pricingCardContainerConfigurationSettings = _ref2$pricingCardCont === void 0 ? {} : _ref2$pricingCardCont,
_ref2$pricingCardBest3 = _ref2.pricingCardBestValueConfigurationSettings,
pricingCardBestValueConfigurationSettings = _ref2$pricingCardBest3 === void 0 ? {} : _ref2$pricingCardBest3,
_ref2$pricingCardFeat8 = _ref2.pricingCardFeatureConfigurationSettings,
pricingCardFeatureConfigurationSettings = _ref2$pricingCardFeat8 === void 0 ? {} : _ref2$pricingCardFeat8,
_ref2$pricingCardHove = _ref2.pricingCardHoverConfigurationSettings,
pricingCardHoverConfigurationSettings = _ref2$pricingCardHove === void 0 ? {} : _ref2$pricingCardHove,
_ref2$pricingCardTitl = _ref2.pricingCardTitleConfigurationSettings,
pricingCardTitleConfigurationSettings = _ref2$pricingCardTitl === void 0 ? {} : _ref2$pricingCardTitl,
_ref2$pricingCardPric4 = _ref2.pricingCardPriceConfigurationSettings,
pricingCardPriceConfigurationSettings = _ref2$pricingCardPric4 === void 0 ? {} : _ref2$pricingCardPric4,
_ref2$pricingCardConf = _ref2.pricingCardConfigurationSettings,
pricingCardConfigurationSettings = _ref2$pricingCardConf === void 0 ? {} : _ref2$pricingCardConf,
_ref2$pricingCardFeat9 = _ref2.pricingCardFeatureCheckIconContainerConfigurations,
pricingCardFeatureCheckIconContainerConfigurations = _ref2$pricingCardFeat9 === void 0 ? {} : _ref2$pricingCardFeat9,
_ref2$pricingCardFeat10 = _ref2.pricingCardFeatureContainerConfigurations,
pricingCardFeatureContainerConfigurations = _ref2$pricingCardFeat10 === void 0 ? {} : _ref2$pricingCardFeat10,
_ref2$pricingCardFeat11 = _ref2.pricingCardFeatureCheckIconConfigurations,
pricingCardFeatureCheckIconConfigurations = _ref2$pricingCardFeat11 === void 0 ? {} : _ref2$pricingCardFeat11,
_ref2$pricingCardFeat12 = _ref2.pricingCardFeatureNameLabelConfigurations,
pricingCardFeatureNameLabelConfigurations = _ref2$pricingCardFeat12 === void 0 ? {} : _ref2$pricingCardFeat12,
_ref2$pricingCardFeat13 = _ref2.pricingCardFeatureConfigurations,
pricingCardFeatureConfigurations = _ref2$pricingCardFeat13 === void 0 ? {} : _ref2$pricingCardFeat13,
_ref2$pricingCardSect4 = _ref2.pricingCardSectionedFeaturesContainerConfigurations,
pricingCardSectionedFeaturesContainerConfigurations = _ref2$pricingCardSect4 === void 0 ? {} : _ref2$pricingCardSect4,
_ref2$pricingCardSect5 = _ref2.pricingCardSectionedFeaturesTitleConfigurations,
pricingCardSectionedFeaturesTitleConfigurations = _ref2$pricingCardSect5 === void 0 ? {} : _ref2$pricingCardSect5,
_ref2$pricingCardFeat14 = _ref2.pricingCardFeaturesContainerConfigurations,
pricingCardFeaturesContainerConfigurations = _ref2$pricingCardFeat14 === void 0 ? {} : _ref2$pricingCardFeat14,
_ref2$pricingCardSect6 = _ref2.pricingCardSectionedFeaturesConfigurations,
pricingCardSectionedFeaturesConfigurations = _ref2$pricingCardSect6 === void 0 ? {} : _ref2$pricingCardSect6,
_ref2$pricingCardPric5 = _ref2.pricingCardPriceContainerConfigurations,
pricingCardPriceContainerConfigurations = _ref2$pricingCardPric5 === void 0 ? {} : _ref2$pricingCardPric5,
_ref2$pricingCardActi4 = _ref2.pricingCardActionButtonConfigurations,
pricingCardActionButtonConfigurations = _ref2$pricingCardActi4 === void 0 ? {} : _ref2$pricingCardActi4,
_ref2$pricingCardCont2 = _ref2.pricingCardContainerConfigurations,
pricingCardContainerConfigurations = _ref2$pricingCardCont2 === void 0 ? {} : _ref2$pricingCardCont2,
_ref2$pricingCardBest4 = _ref2.pricingCardBestValueConfigurations,
pricingCardBestValueConfigurations = _ref2$pricingCardBest4 === void 0 ? {} : _ref2$pricingCardBest4,
_ref2$pricingCardTitl2 = _ref2.pricingCardTitleConfigurations,
pricingCardTitleConfigurations = _ref2$pricingCardTitl2 === void 0 ? {} : _ref2$pricingCardTitl2,
_ref2$pricingCardPric6 = _ref2.pricingCardPriceConfigurations,
pricingCardPriceConfigurations = _ref2$pricingCardPric6 === void 0 ? {} : _ref2$pricingCardPric6,
_ref2$pricingCardConf2 = _ref2.pricingCardConfigurations,
pricingCardConfigurations = _ref2$pricingCardConf2 === void 0 ? {} : _ref2$pricingCardConf2,
onButtonClick = _ref2.onButtonClick,
_ref2$bestValueConten = _ref2.bestValueContent,
bestValueContent = _ref2$bestValueConten === void 0 ? "Recommended" : _ref2$bestValueConten,
_ref2$bestValueHeader = _ref2.bestValueHeader,
bestValueHeader = _ref2$bestValueHeader === void 0 ? null : _ref2$bestValueHeader,
_ref2$bestValueFooter = _ref2.bestValueFooter,
bestValueFooter = _ref2$bestValueFooter === void 0 ? null : _ref2$bestValueFooter,
_ref2$pricingCardCont3 = _ref2.pricingCardContent,
pricingCardContent = _ref2$pricingCardCont3 === void 0 ? null : _ref2$pricingCardCont3,
_ref2$priceContent = _ref2.priceContent,
priceContent = _ref2$priceContent === void 0 ? null : _ref2$priceContent,
_ref2$pricingCardActi5 = _ref2.pricingCardActionButtonHoverBackgroundColor,
pricingCardActionButtonHoverBackgroundColor = _ref2$pricingCardActi5 === void 0 ? "linear-gradient(90deg, #1E40AF, #1B36A2)" : _ref2$pricingCardActi5,
_ref2$pricingCardActi6 = _ref2.pricingCardActionButtonBackgroundColor,
pricingCardActionButtonBackgroundColor = _ref2$pricingCardActi6 === void 0 ? "linear-gradient(90deg, #2563EB, #1E40AF)" : _ref2$pricingCardActi6,
_ref2$pricingCardBest5 = _ref2.pricingCardBestValueBorderColor,
pricingCardBestValueBorderColor = _ref2$pricingCardBest5 === void 0 ? "2px solid #2563EB" : _ref2$pricingCardBest5,
_ref2$pricingCardBord = _ref2.pricingCardBorderColor,
pricingCardBorderColor = _ref2$pricingCardBord === void 0 ? "1px solid #E5E7EB" : _ref2$pricingCardBord,
_ref2$showCardActionB = _ref2.showCardActionButtonNearFooter,
showCardActionButtonNearFooter = _ref2$showCardActionB === void 0 ? true : _ref2$showCardActionB,
_ref2$showCardActionB2 = _ref2.showCardActionButtonNearPrice,
showCardActionButtonNearPrice = _ref2$showCardActionB2 === void 0 ? false : _ref2$showCardActionB2,
_ref2$animateBestValu = _ref2.animateBestValue,
animateBestValue = _ref2$animateBestValu === void 0 ? true : _ref2$animateBestValu,
_ref2$animatePrice = _ref2.animatePrice,
animatePrice = _ref2$animatePrice === void 0 ? false : _ref2$animatePrice,
_ref2$bestValue = _ref2.bestValue,
bestValue = _ref2$bestValue === void 0 ? false : _ref2$bestValue,
_ref2$sectionedFeatur = _ref2.sectionedFeatures,
sectionedFeatures = _ref2$sectionedFeatur === void 0 ? [] : _ref2$sectionedFeatur,
_ref2$features = _ref2.features,
features = _ref2$features === void 0 ? [] : _ref2$features,
buttonLabel = _ref2.buttonLabel,
title = _ref2.title,
price = _ref2.price;
return /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "12px"
}, pricingCardContainerConfigurationSettings)
}, pricingCardContainerConfigurations), bestValue && bestValueHeader, /*#__PURE__*/React.createElement(motion.div, _extends({
whileHover: _objectSpread({
scale: 1.0369
}, pricingCardHoverConfigurationSettings),
transition: _objectSpread({
duration: 0.369,
ease: "easeOut"
}, pricingCardAnimationTransitionConfigurationSettings),
style: _objectSpread({
position: "relative",
overflow: "hidden",
textAlign: "left",
transition: "0.369s ease-out",
border: bestValue ? pricingCardBestValueBorderColor : pricingCardBorderColor,
borderRadius: "18px",
boxShadow: bestValue ? "0px 0px 22px rgba(37, 99, 235, 0.6)" : "0px 5px 18px rgba(0, 0, 0, 0.08)",
background: "#FFFFFF",
color: "#111827",
maxWidth: "460px",
width: "100%",
padding: "42px"
}, pricingCardConfigurationSettings)
}, pricingCardConfigurations), bestValue && /*#__PURE__*/React.createElement(motion.div, _extends({
animate: animateBestValue ? _objectSpread({
scale: [1, 1.08, 1]
}, pricingCardBestValueAnimationConfigurationSettings) : {},
transition: _objectSpread({
duration: 1.569,
repeat: Infinity
}, pricingCardBestValueAnimationTransitionConfigurationSettings),
style: _objectSpread({
position: "absolute",
textTransform: "uppercase",
letterSpacing: "0.569px",
fontWeight: "bold",
fontSize: "12px",
borderRadius: "6px",
background: "#2563EB",
color: "#FFF",
padding: "6px 16px",
left: "16px",
top: "16px"
}, pricingCardBestValueConfigurationSettings)
}, pricingCardBestValueConfigurations), bestValueContent), /*#__PURE__*/React.createElement("h3", _extends({
style: _objectSpread({
fontWeight: "700",
fontSize: "26px",
marginBottom: "12px"
}, pricingCardTitleConfigurationSettings)
}, pricingCardTitleConfigurations), title), /*#__PURE__*/React.createElement(motion.div, _extends({
animate: animatePrice ? _objectSpread({
scale: [1, 1.0569, 1]
}, pricingCardPriceContainerAnimationConfigurationSettings) : {},
transition: _objectSpread({
duration: 2,
repeat: Infinity
}, pricingCardPriceContainerAnimationTransitionConfigurationSettings),
style: _objectSpread({
position: "relative",
display: "flex",
alignItems: "center",
width: "calc(100%)",
marginBottom: "24px"
}, pricingCardPriceContainerConfigurationSettings)
}, pricingCardPriceContainerConfigurations), priceContent ? priceContent : /*#__PURE__*/React.createElement(HUDLoading, _extends({
wordConfigurationSettings: _objectSpread({
fontWeight: "900"
}, pricingCardPriceConfigurationSettings),
word: price,
wordColor: "#2563EB",
fontSize: "34px",
type: "word"
}, pricingCardPriceConfigurations))), showCardActionButtonNearPrice ? /*#__PURE__*/React.createElement(motion.div, _extends({
whileHover: _objectSpread({
scale: 1.069
}, pricingCardActionButtonHoverConfigurationSettings),
transition: _objectSpread({
duration: 0.369
}, pricingCardActionButtonAnimationTransitionConfigurationSettings),
style: _objectSpread({
cursor: "pointer",
textAlign: "center",
transition: "background 0.369s",
fontWeight: "600",
fontSize: "17px",
border: "none",
borderRadius: "10px",
boxShadow: "0px 0px 16px rgba(37, 99, 235, 0.469)",
background: pricingCardActionButtonBackgroundColor,
color: "#FFF",
width: "auto",
padding: "16px 24px"
}, pricingCardActionButtonConfigurationSettings),
onMouseEnter: function onMouseEnter(e) {
return e.target.style.background = pricingCardActionButtonHoverBackgroundColor;
},
onMouseLeave: function onMouseLeave(e) {
return e.target.style.background = pricingCardActionButtonBackgroundColor;
},
onClick: onButtonClick
}, pricingCardActionButtonConfigurations), buttonLabel) : null, pricingCardContent, features.length > 0 && /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "grid",
gridTemplateColumns: "1fr",
gap: "12px",
marginBottom: "28px"
}, pricingCardFeaturesContainerConfigurationSettings)
}, pricingCardFeaturesContainerConfigurations), features.map(function (feature, index) {
return /*#__PURE__*/React.createElement(FeatureItem, {
key: index,
pricingCardFeatureCheckIconContainerAnimationTransitionConfigurationSettings: pricingCardFeatureCheckIconContainerAnimationTransitionConfigurationSettings,
pricingCardFeatureCheckIconContainerInitialAnimationConfigurationSettings: pricingCardFeatureCheckIconContainerInitialAnimationConfigurationSettings,
pricingCardFeatureCheckIconContainerAnimationConfigurationSettings: pricingCardFeatureCheckIconContainerAnimationConfigurationSettings,
pricingCardFeatureAnimationTransitionConfigurationSettings: pricingCardFeatureAnimationTransitionConfigurationSettings,
pricingCardFeatureContainerConfigurationSettings: pricingCardFeatureContainerConfigurationSettings,
pricingCardFeatureHoverConfigurationSettings: pricingCardFeatureHoverConfigurationSettings,
pricingCardFeatureConfigurationSettings: pricingCardFeatureConfigurationSettings,
pricingCardFeatureCheckIconContainerConfigurations: pricingCardFeatureCheckIconContainerConfigurations,
pricingCardFeatureContainerConfigurations: pricingCardFeatureContainerConfigurations,
pricingCardFeatureCheckIconConfigurations: pricingCardFeatureCheckIconConfigurations,
pricingCardFeatureNameLabelConfigurations: pricingCardFeatureNameLabelConfigurations,
pricingCardFeatureConfigurations: pricingCardFeatureConfigurations,
feature: feature
});
})), sectionedFeatures.length > 0 && sectionedFeatures.map(function (section, index) {
return /*#__PURE__*/React.createElement("div", _extends({
key: index,
style: _objectSpread({
marginBottom: "20px"
}, pricingCardSectionedFeaturesContainerConfigurationSettings)
}, pricingCardSectionedFeaturesContainerConfigurations), /*#__PURE__*/React.createElement("h4", _extends({
style: _objectSpread({
fontSize: "18px",
fontWeight: "600",
color: "#2563EB",
marginBottom: "10px"
}, pricingCardSectionedFeaturesTitleConfigurationSettings)
}, pricingCardSectionedFeaturesTitleConfigurations), section.title), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "grid",
gridTemplateColumns: "1fr",
gap: "12px"
}, pricingCardSectionedFeaturesConfigurationSettings)
}, pricingCardSectionedFeaturesConfigurations), section.features.map(function (feature, i) {
return /*#__PURE__*/React.createElement(FeatureItem, {
key: i,
pricingCardFeatureCheckIconContainerAnimationTransitionConfigurationSettings: pricingCardFeatureCheckIconContainerAnimationTransitionConfigurationSettings,
pricingCardFeatureCheckIconContainerInitialAnimationConfigurationSettings: pricingCardFeatureCheckIconContainerInitialAnimationConfigurationSettings,
pricingCardFeatureCheckIconContainerAnimationConfigurationSettings: pricingCardFeatureCheckIconContainerAnimationConfigurationSettings,
pricingCardFeatureAnimationTransitionConfigurationSettings: pricingCardFeatureAnimationTransitionConfigurationSettings,
pricingCardFeatureContainerConfigurationSettings: pricingCardFeatureContainerConfigurationSettings,
pricingCardFeatureHoverConfigurationSettings: pricingCardFeatureHoverConfigurationSettings,
pricingCardFeatureConfigurationSettings: pricingCardFeatureConfigurationSettings,
pricingCardFeatureCheckIconContainerConfigurations: pricingCardFeatureCheckIconContainerConfigurations,
pricingCardFeatureContainerConfigurations: pricingCardFeatureContainerConfigurations,
pricingCardFeatureCheckIconConfigurations: pricingCardFeatureCheckIconConfigurations,
pricingCardFeatureNameLabelConfigurations: pricingCardFeatureNameLabelConfigurations,
pricingCardFeatureConfigurations: pricingCardFeatureConfigurations,
feature: feature
});
})));
}), showCardActionButtonNearFooter ? /*#__PURE__*/React.createElement(motion.div, _extends({
whileHover: _objectSpread({
scale: 1.069
}, pricingCardActionButtonHoverConfigurationSettings),
transition: _objectSpread({
duration: 0.369
}, pricingCardActionButtonAnimationTransitionConfigurationSettings),
style: _objectSpread({
cursor: "pointer",
textAlign: "center",
transition: "background 0.369s",
fontWeight: "600",
fontSize: "17px",
border: "none",
borderRadius: "10px",
boxShadow: "0px 0px 16px rgba(37, 99, 235, 0.469)",
background: pricingCardActionButtonBackgroundColor,
color: "#FFF",
width: "auto",
padding: "16px 24px"
}, pricingCardActionButtonConfigurationSettings),
onMouseEnter: function onMouseEnter(e) {
return e.target.style.background = pricingCardActionButtonHoverBackgroundColor;
},
onMouseLeave: function onMouseLeave(e) {
return e.target.style.background = pricingCardActionButtonBackgroundColor;
},
onClick: onButtonClick
}, pricingCardActionButtonConfigurations), buttonLabel) : null), bestValue && bestValueFooter);
}
;
export default HUDPricingCard;