@trafilea/afrodita-components 6.15.3 → 6.15.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.
- package/build/index.d.ts +2 -2
- package/build/index.esm.js +9 -9
- package/build/index.js +9 -9
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import * as React$1 from 'react';
|
|
3
|
-
import React__default, { FC, SVGProps, ReactNode, CSSProperties, ElementType, ReactFragment, AriaAttributes, HTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
|
|
3
|
+
import React__default, { FC, SVGProps, ReactNode, CSSProperties, ElementType, ReactFragment, AriaAttributes, HTMLAttributes, LabelHTMLAttributes, DetailedHTMLProps, VideoHTMLAttributes, RefObject } from 'react';
|
|
4
4
|
import { ComponentSize as ComponentSize$1 } from 'src/types/enums';
|
|
5
5
|
import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
|
|
6
6
|
import { TextProps as TextProps$1 } from 'src/components/text/Text';
|
|
@@ -3515,7 +3515,7 @@ declare type VideoProps = {
|
|
|
3515
3515
|
thumbnail: string;
|
|
3516
3516
|
source: string;
|
|
3517
3517
|
height?: string;
|
|
3518
|
-
}
|
|
3518
|
+
} & DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
|
|
3519
3519
|
declare const Video: React.FC<VideoProps>;
|
|
3520
3520
|
|
|
3521
3521
|
declare type ProductGalleryMobileProps = {
|
package/build/index.esm.js
CHANGED
|
@@ -3363,12 +3363,12 @@ var buildImageUrl = function (_a) {
|
|
|
3363
3363
|
|
|
3364
3364
|
var Img = newStyled.img(templateObject_1$1W || (templateObject_1$1W = __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; });
|
|
3365
3365
|
var Image$3 = function (_a) {
|
|
3366
|
-
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,
|
|
3366
|
+
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"]);
|
|
3367
3367
|
var config = useTheme().config;
|
|
3368
3368
|
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3369
3369
|
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3370
3370
|
: src;
|
|
3371
|
-
return (jsx$1(Img, { src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition
|
|
3371
|
+
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));
|
|
3372
3372
|
};
|
|
3373
3373
|
var templateObject_1$1W;
|
|
3374
3374
|
|
|
@@ -5917,9 +5917,9 @@ var AutoshipV2 = function (_a) {
|
|
|
5917
5917
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5918
5918
|
};
|
|
5919
5919
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5920
|
-
return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader,
|
|
5920
|
+
return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, { children: [jsxs$1(FlexContainer, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, void 0), jsx$1("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5921
5921
|
? benefitsColor.selected
|
|
5922
|
-
: benefitsColor.base }, void 0), jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(
|
|
5922
|
+
: benefitsColor.base }, void 0), jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "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, { 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));
|
|
5923
5923
|
};
|
|
5924
5924
|
|
|
5925
5925
|
var _a$2;
|
|
@@ -13325,7 +13325,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13325
13325
|
afterZoomOut: PropTypes.func
|
|
13326
13326
|
} : {};
|
|
13327
13327
|
|
|
13328
|
-
var ProgressContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position:
|
|
13328
|
+
var ProgressContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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); });
|
|
13329
13329
|
var ProgressFiller = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13330
13330
|
var templateObject_1$Y, templateObject_2$E;
|
|
13331
13331
|
|
|
@@ -13337,13 +13337,13 @@ var ProgressBar$1 = function (_a) {
|
|
|
13337
13337
|
var Container$K = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13338
13338
|
var HTMLVideo = newStyled.video(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
13339
13339
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
13340
|
-
var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height:
|
|
13341
|
-
var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height:
|
|
13340
|
+
var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13341
|
+
var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
13342
13342
|
var templateObject_1$X, templateObject_2$D, templateObject_3$w, templateObject_4$m, templateObject_5$g;
|
|
13343
13343
|
|
|
13344
13344
|
var Video$1 = function (_a) {
|
|
13345
13345
|
var _b, _c, _d, _e;
|
|
13346
|
-
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height;
|
|
13346
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, rest = __rest(_a, ["source", "thumbnail", "height", "className"]);
|
|
13347
13347
|
var videoRef = useRef(null);
|
|
13348
13348
|
var _f = useState(true), isLoading = _f[0], setIsLoading = _f[1];
|
|
13349
13349
|
var _g = useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
|
|
@@ -13378,7 +13378,7 @@ var Video$1 = function (_a) {
|
|
|
13378
13378
|
setVideoProgress(videoRef.current.currentTime);
|
|
13379
13379
|
}
|
|
13380
13380
|
};
|
|
13381
|
-
return (jsxs$1(Container$K, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({ "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }, void 0));
|
|
13381
|
+
return (jsxs$1(Container$K, __assign$1({ className: className }, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13382
13382
|
};
|
|
13383
13383
|
|
|
13384
13384
|
var Container$J = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
package/build/index.js
CHANGED
|
@@ -3389,12 +3389,12 @@ var buildImageUrl = function (_a) {
|
|
|
3389
3389
|
|
|
3390
3390
|
var Img = newStyled.img(templateObject_1$1W || (templateObject_1$1W = __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; });
|
|
3391
3391
|
var Image$3 = function (_a) {
|
|
3392
|
-
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,
|
|
3392
|
+
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"]);
|
|
3393
3393
|
var config = useTheme().config;
|
|
3394
3394
|
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3395
3395
|
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3396
3396
|
: src;
|
|
3397
|
-
return (jsxRuntime.jsx(Img, { src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition
|
|
3397
|
+
return (jsxRuntime.jsx(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));
|
|
3398
3398
|
};
|
|
3399
3399
|
var templateObject_1$1W;
|
|
3400
3400
|
|
|
@@ -5943,9 +5943,9 @@ var AutoshipV2 = function (_a) {
|
|
|
5943
5943
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5944
5944
|
};
|
|
5945
5945
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5946
|
-
return (jsxRuntime.jsxs(Container$11, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader,
|
|
5946
|
+
return (jsxRuntime.jsxs(Container$11, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, void 0), jsxRuntime.jsx("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5947
5947
|
? benefitsColor.selected
|
|
5948
|
-
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(
|
|
5948
|
+
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
5949
5949
|
};
|
|
5950
5950
|
|
|
5951
5951
|
var _a$2;
|
|
@@ -13351,7 +13351,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13351
13351
|
afterZoomOut: PropTypes.func
|
|
13352
13352
|
} : {};
|
|
13353
13353
|
|
|
13354
|
-
var ProgressContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position:
|
|
13354
|
+
var ProgressContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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); });
|
|
13355
13355
|
var ProgressFiller = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13356
13356
|
var templateObject_1$Y, templateObject_2$E;
|
|
13357
13357
|
|
|
@@ -13363,13 +13363,13 @@ var ProgressBar$1 = function (_a) {
|
|
|
13363
13363
|
var Container$K = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13364
13364
|
var HTMLVideo = newStyled.video(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
13365
13365
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
13366
|
-
var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height:
|
|
13367
|
-
var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height:
|
|
13366
|
+
var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13367
|
+
var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
13368
13368
|
var templateObject_1$X, templateObject_2$D, templateObject_3$w, templateObject_4$m, templateObject_5$g;
|
|
13369
13369
|
|
|
13370
13370
|
var Video$1 = function (_a) {
|
|
13371
13371
|
var _b, _c, _d, _e;
|
|
13372
|
-
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height;
|
|
13372
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, rest = __rest(_a, ["source", "thumbnail", "height", "className"]);
|
|
13373
13373
|
var videoRef = React$2.useRef(null);
|
|
13374
13374
|
var _f = React$2.useState(true), isLoading = _f[0], setIsLoading = _f[1];
|
|
13375
13375
|
var _g = React$2.useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
|
|
@@ -13404,7 +13404,7 @@ var Video$1 = function (_a) {
|
|
|
13404
13404
|
setVideoProgress(videoRef.current.currentTime);
|
|
13405
13405
|
}
|
|
13406
13406
|
};
|
|
13407
|
-
return (jsxRuntime.jsxs(Container$K, { children: [!isLoading && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({ "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }, void 0));
|
|
13407
|
+
return (jsxRuntime.jsxs(Container$K, __assign$1({ className: className }, { children: [!isLoading && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13408
13408
|
};
|
|
13409
13409
|
|
|
13410
13410
|
var Container$J = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
package/package.json
CHANGED