@trafilea/afrodita-components 6.39.9 → 6.39.11

package/build/index.d.ts

@@ -151,15 +151,15 @@ declare type StyledIconProps = {
 
 declare type Actions$1 = 'actions/add' | 'actions/check_box_empty' | 'actions/check_box_light' | 'actions/check_box_solid' | 'actions/check' | 'actions/circle_check' | 'actions/circle_clear' | 'actions/circle_info' | 'actions/circle_minus' | 'actions/circle_plus' | 'actions/circle_question' | 'actions/circle_solid_check' | 'actions/circle_solid_clear' | 'actions/circle_solid_info' | 'actions/circle_solid_minus' | 'actions/circle_solid_plus' | 'actions/circle_solid_question' | 'actions/circle_solid_styled_check' | 'actions/circle_solid_warning' | 'actions/circle_solid_reload' | 'actions/circle_warning' | 'actions/clear_light' | 'actions/close' | 'actions/copy_outlined' | 'actions/copy' | 'actions/edit' | 'actions/light_check' | 'actions/light_exclamation' | 'actions/like_solid' | 'actions/like' | 'actions/minus' | 'actions/not_allowed' | 'actions/question' | 'actions/radio_empty' | 'actions/radio_filled' | 'actions/settings_solid' | 'actions/settings' | 'actions/share' | 'actions/signout' | 'actions/signout_light' | 'actions/trash' | 'actions/warning' | 'actions/navigate' | 'actions/camera';
 declare type Arrows$1 = 'arrows/chevron_down' | 'arrows/chevron_down_variant' | 'arrows/chevron_left' | 'arrows/chevron_left_lite' | 'arrows/chevron_left_variant' | 'arrows/chevron_right' | 'arrows/chevron_right_lite' | 'arrows/chevron_right_variant' | 'arrows/chevron_up' | 'arrows/chevron_up_solid' | 'arrows/chevron_up_variant' | 'arrows/circle_chevron_down' | 'arrows/circle_chevron_left' | 'arrows/circle_chevron_right' | 'arrows/circle_chevron_up' | 'arrows/circle_line_down' | 'arrows/circle_line_left' | 'arrows/circle_line_right' | 'arrows/circle_line_up' | 'arrows/circle_up' | 'arrows/double_arrow_up' | 'arrows/chevron_right_grey' | 'arrows/circle_round' | 'arrows/circle_round_grayed';
-declare type Custom$1 = 'custom/atom' | 'custom/avatar_placeholder' | 'custom/bra' | 'custom/bubbles' | 'custom/bullet_one' | 'custom/bullet_three' | 'custom/bullet_two' | 'custom/certified' | 'custom/clinically_tested' | 'custom/cruelty_free' | 'custom/fair_advantages' | 'custom/frown' | 'custom/money_flow' | 'custom/new_sixty_days_guarantee' | 'custom/packs_and_bundles' | 'custom/seamless_support_bra' | 'custom/sixty_days_bold' | 'custom/sixty_days_guarantee' | 'custom/smiling' | 'custom/subscription' | 'custom/thumbs_down' | 'custom/thumbs_up' | 'custom/underwear' | 'custom/wire_free_comfort' | 'custom/wire_free_comfort_bold' | 'custom/tk_sixty_days_bold' | 'custom/free_shipping_truck' | 'custom/higher_discounts' | 'custom/zoom' | 'custom/focus' | 'custom/beauty_face' | 'custom/bar' | 'custom/ears' | 'custom/pain' | 'custom/rociar' | 'custom/star' | 'custom/time' | 'custom/winter_light' | 'custom/priority_support' | 'custom/sound_on' | 'custom/sound_off' | 'custom/gift_thin' | 'custom/returns' | 'custom/paint_brush' | 'custom/savings';
+declare type Custom$1 = 'custom/atom' | 'custom/avatar_placeholder' | 'custom/bra' | 'custom/bubbles' | 'custom/bullet_one' | 'custom/bullet_three' | 'custom/bullet_two' | 'custom/certified' | 'custom/clinically_tested' | 'custom/cruelty_free' | 'custom/fair_advantages' | 'custom/frown' | 'custom/money_flow' | 'custom/new_sixty_days_guarantee' | 'custom/packs_and_bundles' | 'custom/seamless_support_bra' | 'custom/sixty_days_bold' | 'custom/sixty_days_guarantee' | 'custom/smiling' | 'custom/subscription' | 'custom/thumbs_down' | 'custom/thumbs_up' | 'custom/underwear' | 'custom/wire_free_comfort' | 'custom/wire_free_comfort_bold' | 'custom/tk_sixty_days_bold' | 'custom/free_shipping_truck' | 'custom/higher_discounts' | 'custom/zoom' | 'custom/focus' | 'custom/beauty_face' | 'custom/bar' | 'custom/ears' | 'custom/pain' | 'custom/rociar' | 'custom/star' | 'custom/time' | 'custom/winter_light' | 'custom/priority_support' | 'custom/sound_on' | 'custom/sound_off' | 'custom/gift_thin' | 'custom/returns' | 'custom/paint_brush' | 'custom/savings' | 'custom/unhappy' | 'custom/no_trial_time' | 'custom/expensive_wallet' | 'custom/product_usage';
 declare type Download$1 = 'download/apple_store' | 'download/google_play';
 declare type Emoji$1 = 'emoji/blowing_kiss' | 'emoji/frowning' | 'emoji/grinning' | 'emoji/grinning_with_sweat' | 'emoji/relieved' | 'emoji/smiling_v2' | 'emoji/smiling_v3' | 'emoji/thinking';
 declare type Messaging$1 = 'messaging/ada_chat' | 'messaging/comment' | 'messaging/comment_dots' | 'messaging/comment_light' | 'messaging/comment_money' | 'messaging/community' | 'messaging/light' | 'messaging/light_bulb' | 'messaging/light_bulb_solid' | 'messaging/mail' | 'messaging/messenger' | 'messaging/question_circle' | 'messaging/quote_left' | 'messaging/quote_right' | 'messaging/quote_solid_left' | 'messaging/quote_solid_right' | 'messaging/question_circle_light';
-declare type MyAccount$1 = 'myaccount/birthday_gifts' | 'myaccount/community' | 'myaccount/deals_offers' | 'myaccount/free_returns' | 'myaccount/free_shipping' | 'myaccount/guard' | 'myaccount/members_only_discount' | 'myaccount/members_only_discount_opposite' | 'myaccount/personal_stylist' | 'myaccount/priority_shipping' | 'myaccount/profile' | 'myaccount/place_image' | 'myaccount/sale_tag' | 'myaccount/style_fashion_content' | 'myaccount/cart' | 'myaccount/vip' | 'myaccount/calendar';
+declare type MyAccount$1 = 'myaccount/birthday_gifts' | 'myaccount/community' | 'myaccount/deals_offers' | 'myaccount/free_returns' | 'myaccount/free_shipping' | 'myaccount/guard' | 'myaccount/members_only_discount' | 'myaccount/members_only_discount_opposite' | 'myaccount/personal_stylist' | 'myaccount/priority_shipping' | 'myaccount/profile' | 'myaccount/place_image' | 'myaccount/sale_tag' | 'myaccount/style_fashion_content' | 'myaccount/cart' | 'myaccount/vip' | 'myaccount/calendar' | 'myaccount/skin_type' | 'myaccount/magnify' | 'myaccount/beauty_products' | 'myaccount/email' | 'myaccount/contact';
 declare type Navigation$1 = 'navigation/address_information' | 'navigation/benefits' | 'navigation/club_membership' | 'navigation/ellipsis' | 'navigation/ellipsis_horizontal' | 'navigation/filters' | 'navigation/hamburger' | 'navigation/home' | 'navigation/home_solid' | 'navigation/loading' | 'navigation/lock' | 'navigation/lock_solid' | 'navigation/map_marker' | 'navigation/map_marker_light' | 'navigation/map_solid' | 'navigation/menu_lines' | 'navigation/search' | 'navigation/shaperbox' | 'navigation/shopping_bag' | 'navigation/shopping_bag_v2' | 'navigation/shopping_bag_v3' | 'navigation/shopping_bag_v4' | 'navigation/shopping_cart' | 'navigation/shopping_cart_v2' | 'navigation/slide_dot' | 'navigation/slide_dot_solid' | 'navigation/user' | 'navigation/address_information_light' | 'navigation/user_solid' | 'navigation/user_v2' | 'navigation/filters_v2' | 'navigation/gift';
 declare type Other$1 = 'other/bod_con_label' | 'other/bod_con_mobile_label' | 'other/call_us' | 'other/chat' | 'other/email' | 'other/express_shipping' | 'other/fit_guarantee' | 'other/fit_predictor' | 'other/free_exchange' | 'other/get_discount' | 'other/hassel_free_returns' | 'other/loading' | 'other/mc_afee' | 'other/play' | 'other/qr_code' | 'other/question_with_circle' | 'other/revel_beauty' | 'other/shapermint' | 'other/shapermint_club_icon' | 'other/shapermint_club_icon2' | 'other/shapermint_club_label' | 'other/shapermint_club_mobile_label' | 'other/shapermint_logo' | 'other/shm_club' | 'other/shop_now' | 'other/sign_form' | 'other/sixty_days_tsd' | 'other/the_bod_con' | 'other/the_spa_dr' | 'other/lock' | 'other/help_center' | 'other/coupons';
 declare type Payment$1 = 'payment/amazon' | 'payment/amex' | 'payment/jcb' | 'payment/klarna' | 'payment/master_card' | 'payment/paypal' | 'payment/visa' | 'payment/payment_methods';
-declare type PDP$1 = 'pdp/circle_number' | 'pdp/clock' | 'pdp/drop' | 'pdp/drop_empty' | 'pdp/error_cross' | 'pdp/flag_usa' | 'pdp/hours' | 'pdp/klarna_logo' | 'pdp/light_bulb' | 'pdp/free_returns_v2' | 'pdp/free_shipping_v2' | 'pdp/minus' | 'pdp/moon' | 'pdp/new_clock' | 'pdp/play_mini' | 'pdp/play_video' | 'pdp/plus' | 'pdp/rule' | 'pdp/shipping' | 'pdp/shipping_empty' | 'pdp/size_empty' | 'pdp/size_empty_v2' | 'pdp/star' | 'pdp/stars' | 'pdp/star_empty' | 'pdp/star_half' | 'pdp/stopwatch' | 'pdp/drop_v2' | 'pdp/few_drops' | 'pdp/trust_badge' | 'pdp/verified' | 'pdp/wrinkle_free_face' | 'pdp/skin_appearance' | 'pdp/shine_heart' | 'pdp/cruelty_free' | 'pdp/ph_formula' | 'pdp/box' | 'pdp/afterpay_logo' | 'pdp/trustpilot_start' | 'pdp/trustpilot_half_start';
+declare type PDP$1 = 'pdp/circle_number' | 'pdp/clock' | 'pdp/drop' | 'pdp/drop_empty' | 'pdp/error_cross' | 'pdp/flag_usa' | 'pdp/hours' | 'pdp/klarna_logo' | 'pdp/light_bulb' | 'pdp/free_returns_v2' | 'pdp/free_shipping_v2' | 'pdp/minus' | 'pdp/moon' | 'pdp/new_clock' | 'pdp/play_mini' | 'pdp/play_video' | 'pdp/plus' | 'pdp/rule' | 'pdp/shipping' | 'pdp/shipping_empty' | 'pdp/size_empty' | 'pdp/size_empty_v2' | 'pdp/star' | 'pdp/stars' | 'pdp/star_empty' | 'pdp/star_half' | 'pdp/stopwatch' | 'pdp/drop_v2' | 'pdp/few_drops' | 'pdp/trust_badge' | 'pdp/verified' | 'pdp/wrinkle_free_face' | 'pdp/skin_appearance' | 'pdp/shine_heart' | 'pdp/cruelty_free' | 'pdp/ph_formula' | 'pdp/box' | 'pdp/afterpay_logo' | 'pdp/trustpilot_star' | 'pdp/trustpilot_half_star';
 declare type SlideDots$1 = 'slidedots/slide_dot';
 declare type SocialMedia$1 = 'socialmedia/facebook' | 'socialmedia/facebook_solid' | 'socialmedia/instagram' | 'socialmedia/instagram_solid' | 'socialmedia/interaction' | 'socialmedia/pinterest' | 'socialmedia/twitter' | 'socialmedia/youtube' | 'socialmedia/spotify' | 'socialmedia/apple_podcast';
 declare type IconName = Actions$1 | Arrows$1 | Custom$1 | Download$1 | Emoji$1 | Messaging$1 | MyAccount$1 | Navigation$1 | Other$1 | Payment$1 | PDP$1 | SlideDots$1 | SocialMedia$1;
@@ -1098,9 +1098,9 @@ declare const Stopwatch: IconComponent;
 
 declare const TrustBadge: IconComponent;
 
-declare const TrustPilotHalfStart: IconComponent;
+declare const TrustPilotHalfStar: IconComponent;
 
-declare const TrustPilotStart: IconComponent;
+declare const TrustPilotStar: IconComponent;
 
 declare const Verified: IconComponent;
 
@@ -1135,8 +1135,8 @@ declare const PDP_StarHalf: typeof StarHalf;
 declare const PDP_Stars: typeof Stars;
 declare const PDP_Stopwatch: typeof Stopwatch;
 declare const PDP_TrustBadge: typeof TrustBadge;
-declare const PDP_TrustPilotHalfStart: typeof TrustPilotHalfStart;
-declare const PDP_TrustPilotStart: typeof TrustPilotStart;
+declare const PDP_TrustPilotHalfStar: typeof TrustPilotHalfStar;
+declare const PDP_TrustPilotStar: typeof TrustPilotStar;
 declare const PDP_Verified: typeof Verified;
 declare namespace PDP {
   export {
@@ -1171,8 +1171,8 @@ declare namespace PDP {
     PDP_Stars as Stars,
     PDP_Stopwatch as Stopwatch,
     PDP_TrustBadge as TrustBadge,
-    PDP_TrustPilotHalfStart as TrustPilotHalfStart,
-    PDP_TrustPilotStart as TrustPilotStart,
+    PDP_TrustPilotHalfStar as TrustPilotHalfStar,
+    PDP_TrustPilotStar as TrustPilotStar,
     PDP_Verified as Verified,
   };
 }
@@ -1304,8 +1304,9 @@ interface AccordionProps {
     openIcon: IconType;
     closeIcon: IconType;
     onClick?: (index: number) => void;
+    testId?: string;
 }
-declare const Accordion: ({ header, headerOnOpen, content, defaultOpen, forceOpenHandler, forceOpenValue, titleColor, variant, disabled, innerHTML, backgroundCover, controlIconPos, openIcon, closeIcon, onClick, }: AccordionProps) => JSX.Element;
+declare const Accordion: ({ header, headerOnOpen, content, defaultOpen, forceOpenHandler, forceOpenValue, titleColor, variant, disabled, innerHTML, backgroundCover, controlIconPos, openIcon, closeIcon, onClick, testId, }: AccordionProps) => JSX.Element;
 
 interface AccordionOptionsProps {
     titleColor: string;

package/build/index.esm.js

@@ -4643,9 +4643,9 @@ var Stopwatch = function (props) { return jsx$1(Icon$1, __assign$1({}, props, {
 
 var TrustBadge = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/trust_badge" }), void 0); };
 
-var TrustPilotHalfStart = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/trustpilot_half_start" }), void 0)); };
+var TrustPilotHalfStar = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/trustpilot_half_star" }), void 0)); };
 
-var TrustPilotStart = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/trustpilot_start" }), void 0)); };
+var TrustPilotStar = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/trustpilot_star" }), void 0)); };
 
 var Verified = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/verified" }), void 0); };
 
@@ -4682,8 +4682,8 @@ var PDP = /*#__PURE__*/Object.freeze({
     Stars: Stars,
     Stopwatch: Stopwatch,
     TrustBadge: TrustBadge,
-    TrustPilotHalfStart: TrustPilotHalfStart,
-    TrustPilotStart: TrustPilotStart,
+    TrustPilotHalfStar: TrustPilotHalfStar,
+    TrustPilotStar: TrustPilotStar,
     Verified: Verified
 });
 
@@ -5061,9 +5061,9 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
 var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
 var StyledContent$1 = newStyled.button(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  cursor: auto;\n  user-select: text;\n  writing-mode: unset;\n  font-family: inherit;\n"], ["\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  cursor: auto;\n  user-select: text;\n  writing-mode: unset;\n  font-family: inherit;\n"])));
 var Accordion$1 = function (_a) {
-    var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
+    var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, testId = _a.testId;
     var theme = useTheme();
-    return (jsx$1(StyledDisclosure$1, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick, controlIconPos: controlIconPos }, { children: function (_a) {
+    return (jsx$1(StyledDisclosure$1, __assign$1({ "data-testid": testId, theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick, controlIconPos: controlIconPos }, { children: function (_a) {
             var open = _a.open;
             var openWithForce = forceOpenHandler ? forceOpenValue : open;
             var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
@@ -20518,6 +20518,26 @@ function usePreventVerticalScroll(ref, dragThreshold) {
     }, [preventTouch, ref, touchStart]);
 }
 
+var sendCommandToIframe = function (command, elementId) {
+    if (elementId === void 0) { elementId = 'vwo-video'; }
+    var iframe = document.getElementById(elementId);
+    var origin = new URL(iframe === null || iframe === void 0 ? void 0 : iframe.src).origin;
+    // TODO: Add verification to only allow specific origins
+    // const allowedOrigins = ['https://youtube.com'];
+    // if (!allowedOrigins.includes(origin)) return;
+    (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
+        iframe.contentWindow.postMessage(JSON.stringify({
+            event: 'command',
+            func: command,
+        }), origin);
+};
+var stopVideoCommand = function () {
+    sendCommandToIframe('stopVideo');
+};
+var playVideoCommand = function () {
+    sendCommandToIframe('playVideo');
+};
+
 var Container$g = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  ", "\n  position: relative;\n  max-height: 524px;\n  overflow: hidden;\n  & .slick-dots li.slick-active button:before {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  position: relative;\n  max-height: 524px;\n  overflow: hidden;\n  & .slick-dots li.slick-active button:before {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var borderRadiusVariant = _a.borderRadiusVariant;
     return borderRadiusVariant &&
@@ -20526,7 +20546,6 @@ var Container$g = newStyled.div(templateObject_1$i || (templateObject_1$i = __ma
     var theme = _a.theme;
     return theme.component.slideNavigation.slideDots.selectedDotColor;
 });
-// max-height: 31.875rem;
 var TopTagContainer$4 = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"], ["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
 var TopRightTagContainer$1 = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n"])));
 var BottomTagContainer$4 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
@@ -20556,28 +20575,29 @@ var ImageProductSlide = function (_a) {
     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;
     var slick = useRef(null);
     var sliderWrapper = useRef(null);
-    useRef(null);
     var _d = useState(false); _d[0]; var setIsPlaying = _d[1];
     usePreventVerticalScroll(sliderWrapper);
     var onButtonClick = useCallback(function (i) {
         var _a;
         (_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
     }, [slick]);
-    var _sendCommandToIframe = function (command) {
-        var iframe = document.getElementById('vwo-video');
-        (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
-            iframe.contentWindow.postMessage(JSON.stringify({
-                event: 'command',
-                func: command,
-            }), '*');
-    };
-    var _stopVideo = function () {
-        _sendCommandToIframe('stopVideo');
-        setIsPlaying(false);
+    var stopVideo = function () {
+        stopVideoCommand();
+        setIsPlaying(function (prevIsPlaying) {
+            if (prevIsPlaying) {
+                return !prevIsPlaying;
+            }
+            return prevIsPlaying;
+        });
     };
-    var _playVideo = function () {
-        _sendCommandToIframe('playVideo');
-        setIsPlaying(true);
+    var playVideo = function () {
+        playVideoCommand();
+        setIsPlaying(function (prevIsPlaying) {
+            if (!prevIsPlaying) {
+                return prevIsPlaying;
+            }
+            return !prevIsPlaying;
+        });
     };
     useEffect(function () {
         var _a;
@@ -20593,7 +20613,7 @@ var ImageProductSlide = function (_a) {
                         var activeSlide = contents[e];
                         // If autoplay is true and iframe is the active slide, play the video
                         var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
-                        autoplay ? _playVideo() : _stopVideo();
+                        autoplay ? playVideo() : stopVideo();
                         onChange === null || onChange === void 0 ? void 0 : onChange(e);
                     } }, settings$3, { nextArrow: jsx$1(NavButtonContainer$3, { 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$3, { 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) {
                         var _a;
@@ -20966,7 +20986,6 @@ var Container$b = newStyled.div(templateObject_1$b || (templateObject_1$b = __ma
     var theme = _a.theme;
     return theme.component.slideNavigation.slideDots.selectedDotColor;
 });
-// max-height: 31.875rem;
 var TopTagContainer$2 = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"], ["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
 var BottomTagContainer$2 = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
 var VideoOverlay = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  content: '';\n  background: transparent;\n  width: 100%;\n  height: 100%;\n  min-height: 1px;\n  position: absolute;\n  top: 0;\n"], ["\n  content: '';\n  background: transparent;\n  width: 100%;\n  height: 100%;\n  min-height: 1px;\n  position: absolute;\n  top: 0;\n"])));
@@ -20994,21 +21013,23 @@ var ImageProductSlideV3 = function (_a) {
         var _a;
         (_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
     }, [slick]);
-    var _sendCommandToIframe = function (command) {
-        var iframe = document.getElementById('vwo-video');
-        (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
-            iframe.contentWindow.postMessage(JSON.stringify({
-                event: 'command',
-                func: command,
-            }), '*');
-    };
-    var _stopVideo = function () {
-        _sendCommandToIframe('stopVideo');
-        setIsPlaying(false);
+    var stopVideo = function () {
+        stopVideoCommand();
+        setIsPlaying(function (prevIsPlaying) {
+            if (prevIsPlaying) {
+                return !prevIsPlaying;
+            }
+            return prevIsPlaying;
+        });
     };
-    var _playVideo = function () {
-        _sendCommandToIframe('playVideo');
-        setIsPlaying(true);
+    var playVideo = function () {
+        playVideoCommand();
+        setIsPlaying(function (prevIsPlaying) {
+            if (!prevIsPlaying) {
+                return prevIsPlaying;
+            }
+            return !prevIsPlaying;
+        });
     };
     useEffect(function () {
         var _a;
@@ -21024,11 +21045,11 @@ var ImageProductSlideV3 = function (_a) {
                         var activeSlide = images[e];
                         // If autoplay is true and iframe is the active slide, play the video
                         var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
-                        autoplay ? _playVideo() : _stopVideo();
+                        autoplay ? playVideo() : stopVideo();
                     } }, settings$2, { nextArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$2, { 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$2, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
                         var _a, _b;
                         return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Video, { children: [jsx$1("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay, { onClick: function () {
-                                                isPlaying ? _stopVideo() : _playVideo();
+                                                isPlaying ? stopVideo() : playVideo();
                                             } }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
                     }) }), void 0) }), void 0)] }, void 0));
 };
@@ -21041,21 +21062,6 @@ var ProductGalleryMobileV3 = function (_a) {
 };
 var templateObject_1$a;
 
-var _sendCommandToIframe = function (command) {
-    var iframe = document.getElementById('vwo-video');
-    (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
-        iframe.contentWindow.postMessage(JSON.stringify({
-            event: 'command',
-            func: command,
-        }), '*' + '');
-};
-var _stopVideo = function () {
-    _sendCommandToIframe('stopVideo');
-};
-var _playVideo = function () {
-    _sendCommandToIframe('playVideo');
-};
-
 function closeZoom() {
     var closeButton = document.querySelectorAll('.iiz__btn.iiz__close.iiz__close--visible')[0];
     if (closeButton) {
@@ -21069,7 +21075,7 @@ var afterChangeSlide = function (_a) {
     var activeSlide = contents[slide];
     // If autoplay is true and iframe is the active slide, play the video
     var autoplay = (_b = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _b === void 0 ? void 0 : _b.includes('autoplay=1');
-    autoplay ? _playVideo() : _stopVideo();
+    autoplay ? playVideoCommand() : stopVideoCommand();
     setSelectedImageIndex(Math.round(slide));
     onChange === null || onChange === void 0 ? void 0 : onChange(slide);
     closeZoom();