@trafilea/afrodita-components 6.26.2 → 6.27.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.
- package/build/index.d.ts +8 -2
- package/build/index.esm.js +62 -24
- package/build/index.esm.js.map +1 -1
- package/build/index.js +62 -24
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -154,6 +154,7 @@ declare type IconProps$1 = {
|
|
|
154
154
|
|
|
155
155
|
declare const Icon$1: React__default.NamedExoticComponent<IconProps$1>;
|
|
156
156
|
|
|
157
|
+
declare type ImgAttributes = React.ImgHTMLAttributes<HTMLImageElement>;
|
|
157
158
|
declare type ImageStyleProps = {
|
|
158
159
|
height?: string;
|
|
159
160
|
width?: string;
|
|
@@ -167,8 +168,9 @@ declare type ImageProps = ImageStyleProps & {
|
|
|
167
168
|
alt: string;
|
|
168
169
|
srcSet?: string;
|
|
169
170
|
sizes?: string;
|
|
170
|
-
loading?: 'lazy' | 'eager';
|
|
171
171
|
quality?: number;
|
|
172
|
+
loading?: ImgAttributes['loading'];
|
|
173
|
+
decoding?: ImgAttributes['decoding'];
|
|
172
174
|
};
|
|
173
175
|
declare const Image: React.FC<ImageProps>;
|
|
174
176
|
|
|
@@ -2395,6 +2397,7 @@ interface ProductItemSmallMobileProps extends ProductItemProps {
|
|
|
2395
2397
|
showDiscountPercentageTag?: boolean;
|
|
2396
2398
|
discountTagLoading?: boolean;
|
|
2397
2399
|
discountTag?: DiscountTagProps;
|
|
2400
|
+
isOnViewport?: boolean;
|
|
2398
2401
|
}
|
|
2399
2402
|
|
|
2400
2403
|
declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React__default.FC<P>, data: ProductItemProps[]): {
|
|
@@ -2751,6 +2754,7 @@ declare type ProductGalleryProps = {
|
|
|
2751
2754
|
withZoom?: boolean;
|
|
2752
2755
|
hasToPreserveOrder?: boolean;
|
|
2753
2756
|
isRatioSquare?: boolean;
|
|
2757
|
+
itemsOnViewport?: number;
|
|
2754
2758
|
};
|
|
2755
2759
|
declare const ProductGallery: React.FC<ProductGalleryProps>;
|
|
2756
2760
|
|
|
@@ -2880,6 +2884,7 @@ interface ProductGalleryMobileProps$3 {
|
|
|
2880
2884
|
borderRadiusVariant?: boolean;
|
|
2881
2885
|
selectedValue?: ContentType;
|
|
2882
2886
|
hasToPreserveOrder?: boolean;
|
|
2887
|
+
itemsOnViewport?: number;
|
|
2883
2888
|
}
|
|
2884
2889
|
declare const ProductGalleryMobile: React__default.FC<ProductGalleryMobileProps$3>;
|
|
2885
2890
|
|
|
@@ -3747,9 +3752,10 @@ declare type JoinClubProps = {
|
|
|
3747
3752
|
link: string;
|
|
3748
3753
|
bodyCopy: string;
|
|
3749
3754
|
titleCopy: string;
|
|
3755
|
+
style?: React.CSSProperties;
|
|
3750
3756
|
};
|
|
3751
3757
|
|
|
3752
|
-
declare function JoinClubCard({ onCheckToggle, isChecked, icon, link, bodyCopy, titleCopy, }: JoinClubProps): JSX.Element;
|
|
3758
|
+
declare function JoinClubCard({ onCheckToggle, isChecked, icon, link, bodyCopy, titleCopy, style, }: JoinClubProps): JSX.Element;
|
|
3753
3759
|
|
|
3754
3760
|
interface ProductCardProps extends ProductItemProps {
|
|
3755
3761
|
size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
|
package/build/index.esm.js
CHANGED
|
@@ -3919,12 +3919,12 @@ var buildImageUrl = function (_a) {
|
|
|
3919
3919
|
|
|
3920
3920
|
var Img = newStyled.img(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3921
3921
|
var Image$3 = function (_a) {
|
|
3922
|
-
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3922
|
+
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3923
3923
|
var config = useTheme().config;
|
|
3924
3924
|
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3925
3925
|
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3926
3926
|
: src;
|
|
3927
|
-
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3927
|
+
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3928
3928
|
};
|
|
3929
3929
|
var templateObject_1$21;
|
|
3930
3930
|
|
|
@@ -6718,7 +6718,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6718
6718
|
} : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
|
|
6719
6719
|
strength: -1,
|
|
6720
6720
|
description: '',
|
|
6721
|
-
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading, _k = _a.version, version = _k === void 0 ? 1 : _k, _l = _a.showDiscountPercentageTag, showDiscountPercentageTag = _l === void 0 ? false : _l, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag;
|
|
6721
|
+
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading, _k = _a.version, version = _k === void 0 ? 1 : _k, _l = _a.showDiscountPercentageTag, showDiscountPercentageTag = _l === void 0 ? false : _l, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag, _m = _a.isOnViewport, isOnViewport = _m === void 0 ? false : _m;
|
|
6722
6722
|
var theme = useTheme();
|
|
6723
6723
|
var styles = getStylesBySize$c(size);
|
|
6724
6724
|
var isMobile = useWindowDimensions().isMobile;
|
|
@@ -6757,7 +6757,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6757
6757
|
return jsx(Fragment, {}, void 0);
|
|
6758
6758
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6759
6759
|
};
|
|
6760
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$2, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
6760
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%", loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$2, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
6761
6761
|
letterSpacing: '-0.05rem',
|
|
6762
6762
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6763
6763
|
};
|
|
@@ -11982,9 +11982,9 @@ var Image$1 = newStyled.img(templateObject_1$17 || (templateObject_1$17 = __make
|
|
|
11982
11982
|
var templateObject_1$17;
|
|
11983
11983
|
|
|
11984
11984
|
var ImageSmallPreview = function (_a) {
|
|
11985
|
-
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare;
|
|
11985
|
+
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare, _c = _a.loading, loading = _c === void 0 ? 'eager' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'auto' : _d;
|
|
11986
11986
|
var theme = useTheme();
|
|
11987
|
-
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading:
|
|
11987
|
+
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: loading, decoding: decoding, width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
11988
11988
|
};
|
|
11989
11989
|
|
|
11990
11990
|
var horizontalStyles = css(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
@@ -12004,8 +12004,24 @@ var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$h || (templateObject
|
|
|
12004
12004
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
12005
12005
|
var templateObject_1$16, templateObject_2$P, templateObject_3$F, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$h, templateObject_8$c;
|
|
12006
12006
|
|
|
12007
|
+
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12008
|
+
var loading = 'eager';
|
|
12009
|
+
if (itemsOnViewport) {
|
|
12010
|
+
var shouldApply = index < itemsOnViewport;
|
|
12011
|
+
loading = shouldApply ? 'eager' : 'lazy';
|
|
12012
|
+
}
|
|
12013
|
+
return loading;
|
|
12014
|
+
};
|
|
12015
|
+
var getDecodingProp = function (index, itemsOnViewport) {
|
|
12016
|
+
var decoding = 'auto';
|
|
12017
|
+
if (itemsOnViewport) {
|
|
12018
|
+
var shouldApply = index < itemsOnViewport;
|
|
12019
|
+
decoding = shouldApply ? 'sync' : 'async';
|
|
12020
|
+
}
|
|
12021
|
+
return decoding;
|
|
12022
|
+
};
|
|
12007
12023
|
var ImagePreviewList = function (_a) {
|
|
12008
|
-
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare;
|
|
12024
|
+
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare, _b = _a.itemsOnViewport, itemsOnViewport = _b === void 0 ? 0 : _b;
|
|
12009
12025
|
var handleScrollVerticalPrev = function () {
|
|
12010
12026
|
var element = document.querySelector(".imageListContainer");
|
|
12011
12027
|
element.scrollBy(0, -200);
|
|
@@ -12018,7 +12034,9 @@ var ImagePreviewList = function (_a) {
|
|
|
12018
12034
|
arrowWidth: 0.75,
|
|
12019
12035
|
arrowHeight: 1.25,
|
|
12020
12036
|
arrowPadding: 1.625,
|
|
12021
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare
|
|
12037
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) {
|
|
12038
|
+
return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key));
|
|
12039
|
+
})) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12022
12040
|
};
|
|
12023
12041
|
|
|
12024
12042
|
var ProgressContainer = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
@@ -13711,7 +13729,9 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13711
13729
|
return (jsxs$1(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13712
13730
|
alt: content.alt,
|
|
13713
13731
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13714
|
-
|
|
13732
|
+
loading: 'eager',
|
|
13733
|
+
decoding: 'sync',
|
|
13734
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13715
13735
|
};
|
|
13716
13736
|
|
|
13717
13737
|
var Container$N = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
@@ -13725,8 +13745,8 @@ var getInitialIndex = function (images, selectedValue) {
|
|
|
13725
13745
|
return 0;
|
|
13726
13746
|
};
|
|
13727
13747
|
var ProductGallery = function (_a) {
|
|
13728
|
-
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? true : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e, _f = _a.hasToPreserveOrder, hasToPreserveOrder = _f === void 0 ? false : _f, isRatioSquare = _a.isRatioSquare;
|
|
13729
|
-
var
|
|
13748
|
+
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? true : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e, _f = _a.hasToPreserveOrder, hasToPreserveOrder = _f === void 0 ? false : _f, isRatioSquare = _a.isRatioSquare, _g = _a.itemsOnViewport, itemsOnViewport = _g === void 0 ? 6 : _g;
|
|
13749
|
+
var _h = useState(getInitialIndex(images, selectedValue)), activeIndex = _h[0], setActiveIndex = _h[1];
|
|
13730
13750
|
useEffect(function () {
|
|
13731
13751
|
if (selectedValue && !hasToPreserveOrder) {
|
|
13732
13752
|
var index = images.indexOf(selectedValue);
|
|
@@ -13741,7 +13761,7 @@ var ProductGallery = function (_a) {
|
|
|
13741
13761
|
setActiveIndex(index);
|
|
13742
13762
|
};
|
|
13743
13763
|
var selectedImage = images[activeIndex];
|
|
13744
|
-
return (jsxs$1(Container$N, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
|
|
13764
|
+
return (jsxs$1(Container$N, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
|
|
13745
13765
|
};
|
|
13746
13766
|
|
|
13747
13767
|
var getStylesBySize$8 = function (size) {
|
|
@@ -14145,12 +14165,24 @@ var settings$1 = {
|
|
|
14145
14165
|
slidesToScroll: 1,
|
|
14146
14166
|
initialSlide: 0,
|
|
14147
14167
|
};
|
|
14168
|
+
var getImageAttributes = function (idx, itemsOnViewport, imgAttributes) {
|
|
14169
|
+
if (itemsOnViewport) {
|
|
14170
|
+
// add loading and decoding attributes if enabled
|
|
14171
|
+
// to speed up the loading of the images
|
|
14172
|
+
var shouldApply = idx < itemsOnViewport;
|
|
14173
|
+
var loading = shouldApply ? 'eager' : 'lazy';
|
|
14174
|
+
var decoding = shouldApply ? 'sync' : 'async';
|
|
14175
|
+
imgAttributes.loading = loading;
|
|
14176
|
+
imgAttributes.decoding = decoding;
|
|
14177
|
+
}
|
|
14178
|
+
return imgAttributes;
|
|
14179
|
+
};
|
|
14148
14180
|
var ImageProductSlide = function (_a) {
|
|
14149
|
-
var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
14181
|
+
var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue, onChange = _a.onChange, _c = _a.itemsOnViewport, itemsOnViewport = _c === void 0 ? 0 : _c;
|
|
14150
14182
|
var slick = useRef(null);
|
|
14151
14183
|
var sliderWrapper = useRef(null);
|
|
14152
14184
|
useRef(null);
|
|
14153
|
-
var
|
|
14185
|
+
var _d = useState(false); _d[0]; var setIsPlaying = _d[1];
|
|
14154
14186
|
usePreventVerticalScroll(sliderWrapper);
|
|
14155
14187
|
var onButtonClick = useCallback(function (i) {
|
|
14156
14188
|
var _a;
|
|
@@ -14188,21 +14220,27 @@ var ImageProductSlide = function (_a) {
|
|
|
14188
14220
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14189
14221
|
autoplay ? _playVideo() : _stopVideo();
|
|
14190
14222
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
14191
|
-
} }, settings$1, { nextArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content) {
|
|
14223
|
+
} }, settings$1, { nextArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content, idx) {
|
|
14192
14224
|
var _a;
|
|
14193
14225
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14194
14226
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
14195
|
-
|
|
14227
|
+
// default imgAttributes
|
|
14228
|
+
var imgAttributes = {
|
|
14229
|
+
alt: content.alt,
|
|
14230
|
+
width: '100%',
|
|
14231
|
+
height: '510px',
|
|
14232
|
+
};
|
|
14233
|
+
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14196
14234
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14197
14235
|
};
|
|
14198
14236
|
var templateObject_1$U, templateObject_2$F, templateObject_3$z, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
14199
14237
|
|
|
14200
14238
|
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14201
14239
|
var ProductGalleryMobile = function (_a) {
|
|
14202
|
-
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c;
|
|
14203
|
-
var
|
|
14240
|
+
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
|
|
14241
|
+
var _e = useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
14204
14242
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14205
|
-
return (jsx$1(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); } }, void 0) }), void 0));
|
|
14243
|
+
return (jsx$1(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); }, itemsOnViewport: itemsOnViewport }, void 0) }), void 0));
|
|
14206
14244
|
};
|
|
14207
14245
|
var templateObject_1$T;
|
|
14208
14246
|
|
|
@@ -20394,7 +20432,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20394
20432
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsx$1(Benefit, { children: jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice, { isNoMember: true, testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20395
20433
|
};
|
|
20396
20434
|
|
|
20397
|
-
var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: white;\n
|
|
20435
|
+
var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: white;\n gap: 8px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: white;\n gap: 8px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
20398
20436
|
var $checked = _a.$checked;
|
|
20399
20437
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20400
20438
|
}, function (_a) {
|
|
@@ -20408,18 +20446,18 @@ var ClubCopyTextWrapper = newStyled.div(templateObject_5$5 || (templateObject_5$
|
|
|
20408
20446
|
var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$5;
|
|
20409
20447
|
|
|
20410
20448
|
function Card(_a) {
|
|
20411
|
-
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20412
|
-
return (jsxs$1(ContainerWrapper, __assign$1({ "$checked": isChecked }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [icon, jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), jsxs$1(CardBody, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }, void 0)] }), void 0));
|
|
20449
|
+
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style;
|
|
20450
|
+
return (jsxs$1(ContainerWrapper, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [icon, jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), jsxs$1(CardBody, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }, void 0)] }), void 0));
|
|
20413
20451
|
}
|
|
20414
20452
|
|
|
20415
20453
|
function JoinClubCard(_a) {
|
|
20416
|
-
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20454
|
+
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style;
|
|
20417
20455
|
var _b = useState(isChecked), checked = _b[0], setChecked = _b[1];
|
|
20418
20456
|
var handleToggleValue = function (value) {
|
|
20419
20457
|
setChecked(value);
|
|
20420
20458
|
onCheckToggle(value);
|
|
20421
20459
|
};
|
|
20422
|
-
return (jsx$1(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy }, { children: jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: isChecked }, void 0) }), void 0));
|
|
20460
|
+
return (jsx$1(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style }, { children: jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: isChecked }, void 0) }), void 0));
|
|
20423
20461
|
}
|
|
20424
20462
|
|
|
20425
20463
|
var ImageContainer$1 = newStyled.div(function (_a) {
|