@trafilea/afrodita-components 5.0.0-beta.250 → 5.0.0-beta.252

package/build/index.d.ts

@@ -951,6 +951,8 @@ declare const MembersOnlyDiscountOpposite: ({ height, width, fill }: IconProps)
 
 declare const PriorityShipping: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const Guard: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const MyAccount_FreeShipping: typeof FreeShipping;
 declare const MyAccount_PersonalStylist: typeof PersonalStylist;
 declare const MyAccount_Community: typeof Community;
@@ -961,6 +963,7 @@ declare const MyAccount_MembersOnlyDiscount: typeof MembersOnlyDiscount;
 declare const MyAccount_Profile: typeof Profile;
 declare const MyAccount_MembersOnlyDiscountOpposite: typeof MembersOnlyDiscountOpposite;
 declare const MyAccount_PriorityShipping: typeof PriorityShipping;
+declare const MyAccount_Guard: typeof Guard;
 declare namespace MyAccount {
   export {
     MyAccount_FreeShipping as FreeShipping,
@@ -973,6 +976,7 @@ declare namespace MyAccount {
     MyAccount_Profile as Profile,
     MyAccount_MembersOnlyDiscountOpposite as MembersOnlyDiscountOpposite,
     MyAccount_PriorityShipping as PriorityShipping,
+    MyAccount_Guard as Guard,
   };
 }
 
@@ -1861,6 +1865,26 @@ declare type ThemeComponent = {
         backgroundColor: string;
         fontColor: string;
     };
+    banner: {
+        outlineColor: string;
+        filledColor: string;
+        fontColor: string;
+    };
+    offerTitleText: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+    };
+    linePrice: {
+        color: string;
+        badge: {
+            color: string;
+            borderRadius: string;
+        };
+    };
+    divider: {
+        color: string;
+    };
 };
 declare type ThemeTypography = {
     config: {
@@ -2416,7 +2440,7 @@ declare type TextHeroProps = {
 declare type TextDisplayProps = {
     variant: 'display1' | 'display2';
     weight?: 'bold' | 'demi';
-    size?: 'regular';
+    size?: 'regular' | 'xsmall';
     underline?: never;
     disabled?: never;
     wide?: never;
@@ -2425,9 +2449,9 @@ declare type TextDisplayProps = {
     href: never;
 };
 declare type TextHeadingProps = {
-    variant: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
+    variant: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'heading7' | 'heading8';
     weight?: 'bold' | 'demi' | 'regular';
-    size?: 'regular';
+    size?: 'regular' | 'xsmall';
     underline?: never;
     disabled?: never;
     wide?: never;
@@ -2437,7 +2461,7 @@ declare type TextHeadingProps = {
 };
 declare type TextBodyProps = {
     variant: 'body';
-    size?: 'regular' | 'small';
+    size?: 'regular' | 'small' | 'xsmall';
     weight?: 'bold' | 'demi' | 'regular';
     underline?: never;
     disabled?: never;

package/build/index.esm.js

@@ -1228,6 +1228,11 @@ var PriorityShipping = function (_a) {
     return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 43, viewBoxY: 48, title: "Priority Shipping" }, { children: [jsx$1("path", { d: "M5.62892 41.8895H3.56971C3.38439 41.8895 3.22651 41.972 3.11669 42.0925C3.04118 42.1813 3 42.2954 3 42.4223V47.0269C3 47.3187 3.25397 47.5534 3.56971 47.5534C3.88546 47.5534 4.13943 47.3187 4.13943 47.0269V45.9107H5.62892C6.82326 45.9107 7.79795 45.0037 7.79795 43.9001C7.79795 42.7902 6.82326 41.8895 5.62892 41.8895ZM5.62892 44.8515H4.13943V42.9487H5.62892C6.19177 42.9487 6.65166 43.3737 6.65166 43.9001C6.65166 44.4202 6.19177 44.8515 5.62892 44.8515Z", fill: fill }, void 0), jsx$1("path", { d: "M12.4544 45.4603C13.1339 45.1623 13.6075 44.5153 13.6075 43.7669C13.6075 42.7331 12.7015 41.8895 11.5827 41.8895H9.18025C8.98119 41.8895 8.80959 41.9847 8.70663 42.1242C8.64486 42.2066 8.61054 42.3081 8.61054 42.4223V47.0269C8.61054 47.3187 8.86451 47.5534 9.18025 47.5534C9.496 47.5534 9.74996 47.3187 9.74996 47.0269V45.6443H11.1571L12.5848 47.3504C12.6946 47.4836 12.8662 47.5534 13.0378 47.5534C13.1614 47.5534 13.2849 47.5217 13.3879 47.4455C13.6419 47.268 13.6831 46.9318 13.4909 46.7035L12.4544 45.4603ZM9.74996 42.9487H11.5827C12.07 42.9487 12.4613 43.3166 12.4613 43.7669C12.4613 44.2172 12.07 44.5851 11.5827 44.5851C11.5689 44.5851 11.4454 44.5851 11.4385 44.5851C11.4317 44.5851 11.4317 44.5851 11.4317 44.5851H9.74996V42.9487ZM11.4385 44.5851C11.4317 44.5851 11.4317 44.5851 11.4317 44.5851C11.4454 44.5851 11.4522 44.5851 11.4385 44.5851Z", fill: fill }, void 0), jsx$1("path", { d: "M15.0857 41.8895C14.77 41.8895 14.516 42.1305 14.516 42.4223V47.0269C14.516 47.3187 14.77 47.5534 15.0857 47.5534C15.4015 47.5534 15.6554 47.3187 15.6554 47.0269V42.4223C15.6554 42.1305 15.4015 41.8895 15.0857 41.8895Z", fill: fill }, void 0), jsx$1("path", { d: "M23.0204 44.7373C23.0204 43.0883 21.5584 41.7373 19.7737 41.7373C17.9822 41.7373 16.5271 43.0883 16.5271 44.7373C16.5271 46.3927 17.9822 47.7373 19.7737 47.7373C21.5584 47.7373 23.0204 46.3927 23.0204 44.7373ZM19.7737 46.6844C18.6137 46.6844 17.6665 45.8092 17.6665 44.7373C17.6665 43.6718 18.6137 42.7965 19.7737 42.7965C20.9269 42.7965 21.8741 43.6718 21.8741 44.7373C21.8741 45.8092 20.9269 46.6844 19.7737 46.6844Z", fill: fill }, void 0), jsx$1("path", { d: "M27.7376 45.4603C28.4171 45.1623 28.8907 44.5153 28.8907 43.7669C28.8907 42.7331 27.9847 41.8895 26.8658 41.8895H24.4634C24.2644 41.8895 24.0928 41.9847 23.9898 42.1242C23.928 42.2066 23.8937 42.3081 23.8937 42.4223V47.0269C23.8937 47.3187 24.1477 47.5534 24.4634 47.5534C24.7792 47.5534 25.0331 47.3187 25.0331 47.0269V45.6443H26.4403L27.868 47.3504C27.9778 47.4836 28.1494 47.5534 28.321 47.5534C28.4446 47.5534 28.5681 47.5217 28.6711 47.4455C28.9251 47.268 28.9662 46.9318 28.774 46.7035L27.7376 45.4603ZM25.0331 42.9487H26.8658C27.3532 42.9487 27.7444 43.3166 27.7444 43.7669C27.7444 44.2172 27.3532 44.5851 26.8658 44.5851C26.8521 44.5851 26.7286 44.5851 26.7217 44.5851C26.7148 44.5851 26.7148 44.5851 26.7148 44.5851H25.0331V42.9487ZM26.7217 44.5851C26.7148 44.5851 26.7148 44.5851 26.7148 44.5851C26.7286 44.5851 26.7354 44.5851 26.7217 44.5851Z", fill: fill }, void 0), jsx$1("path", { d: "M30.3689 41.8895C30.0532 41.8895 29.7992 42.1305 29.7992 42.4223V47.0269C29.7992 47.3187 30.0532 47.5534 30.3689 47.5534C30.6846 47.5534 30.9386 47.3187 30.9386 47.0269V42.4223C30.9386 42.1305 30.6846 41.8895 30.3689 41.8895Z", fill: fill }, void 0), jsx$1("path", { d: "M36.3466 41.8895H32.1664C31.8506 41.8895 31.5967 42.1305 31.5967 42.4223C31.5967 42.714 31.8506 42.9487 32.1664 42.9487H33.6833V47.0269C33.6833 47.3187 33.9442 47.5534 34.2599 47.5534C34.5756 47.5534 34.8296 47.3187 34.8296 47.0269V42.9487H36.3466C36.6692 42.9487 36.9231 42.714 36.9231 42.4223C36.9231 42.1305 36.6692 41.8895 36.3466 41.8895Z", fill: fill }, void 0), jsx$1("path", { d: "M42.7667 41.991C42.5128 41.8198 42.149 41.8705 41.9636 42.1115L40.1172 44.4582L38.2708 42.1115C38.0786 41.8705 37.7217 41.8198 37.4677 41.991C37.2137 42.1623 37.152 42.4921 37.3373 42.7331L39.5406 45.5301V47.0269C39.5406 47.3187 39.8015 47.5534 40.1172 47.5534C40.433 47.5534 40.6869 47.3187 40.6869 47.0269V45.5301L42.8903 42.7331C43.0756 42.4921 43.0207 42.1623 42.7667 41.991Z", fill: fill }, void 0), jsx$1("path", { d: "M24.5938 10.9873V10.7373H24.3438H0.25V8.6748H26.6562V13.5498V13.7998H26.9062H37.8955L38.1184 14.5053L38.1184 14.5053L38.1196 14.5091L40.6821 22.1966L40.6845 22.2037L40.6873 22.2106L40.75 22.367V32.5186H36.9564H36.763L36.7144 32.7058C36.1702 34.8032 34.2849 36.3623 32.0312 36.3623C29.7776 36.3623 27.8923 34.8032 27.3481 32.7058L27.2995 32.5186H27.1061H16.4564H16.263L16.2144 32.7058C15.6702 34.8032 13.7849 36.3623 11.5312 36.3623C9.2776 36.3623 7.39231 34.8032 6.84811 32.7058L6.79954 32.5186H6.60613H2.8125V24.0498H4.875V30.2061V30.4561H5.125H6.60613H6.79954L6.84811 30.2688C7.39231 28.1714 9.2776 26.6123 11.5312 26.6123C13.7849 26.6123 15.6702 28.1714 16.2144 30.2688L16.263 30.4561H16.4564H24.3438H24.5938V30.2061V10.9873ZM26.9062 15.8623H26.6562V16.1123V30.2061V30.4561H26.9062H27.1061H27.2995L27.3481 30.2688C27.8923 28.1714 29.7776 26.6123 32.0312 26.6123C34.2849 26.6123 36.1702 28.1714 36.7144 30.2688L36.763 30.4561H36.9564H38.4375H38.6875V30.2061V22.6787V22.6379L38.6745 22.5992L36.4721 16.0328L36.4149 15.8623H36.235H26.9062ZM12.5625 15.8623H1.53125V13.7998H12.5625V15.8623ZM10 20.9873H2.8125V18.9248H10V20.9873ZM14.3438 31.4873C14.3438 29.9181 13.1005 28.6748 11.5312 28.6748C9.96202 28.6748 8.71875 29.9181 8.71875 31.4873C8.71875 33.0565 9.96202 34.2998 11.5312 34.2998C13.1005 34.2998 14.3438 33.0565 14.3438 31.4873ZM34.8438 31.4873C34.8438 29.9181 33.6005 28.6748 32.0312 28.6748C30.462 28.6748 29.2188 29.9181 29.2188 31.4873C29.2188 33.0565 30.462 34.2998 32.0312 34.2998C33.6005 34.2998 34.8438 33.0565 34.8438 31.4873Z", fill: fill }, void 0)] }), void 0));
 };
 
+var Guard = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 55, viewBoxY: 68, title: "guard" }, { children: [jsx$1("path", { d: "M52.6628 0H2.33752C1.04659 0 0 1.04627 0 2.33752V40.0823C0.00124668 55.3179 25.4622 66.8911 26.5461 67.3761C26.85 67.512 27.1754 67.5799 27.5011 67.5799C27.8268 67.5799 28.1525 67.512 28.4557 67.3761C29.54 66.8908 55 55.3179 55 40.0819V2.33752C55.0003 1.04627 53.954 0 52.6628 0ZM50.3253 40.0819C50.3253 49.7646 34.6717 59.2481 27.5014 62.6668C20.3308 59.2481 4.67629 49.7649 4.67535 40.0819V4.67504H50.3256L50.3253 40.0819Z", fill: fill }, void 0), jsx$1("path", { d: "M18.7003 51.5716C21.5468 53.6502 24.4577 55.3248 26.3982 56.3633C26.7423 56.5478 27.1216 56.64 27.5012 56.64C27.8808 56.64 28.2604 56.5478 28.6048 56.3629C30.5456 55.3235 33.4556 53.6486 36.3027 51.5716C39.7567 49.049 45.5512 44.1143 45.5512 39.4072V11.5324C45.5512 10.2415 44.5049 9.19489 43.2137 9.19489H11.7887C10.4974 9.19489 9.45117 10.2415 9.45117 11.5324V39.4072C9.45117 44.1159 15.246 49.0499 18.7003 51.5716ZM14.1262 13.8699H40.8762V39.4072C40.8762 40.4569 39.344 43.5614 33.546 47.7958C31.4086 49.3554 29.2176 50.6768 27.5009 51.6377C25.7839 50.6778 23.5941 49.3569 21.457 47.7961C15.6584 43.5627 14.1262 40.4575 14.1262 39.4072V13.8699Z", fill: fill }, void 0)] }), void 0));
+};
+
 var MyAccount = /*#__PURE__*/Object.freeze({
     __proto__: null,
     FreeShipping: FreeShipping$1,
@@ -1239,7 +1244,8 @@ var MyAccount = /*#__PURE__*/Object.freeze({
     MembersOnlyDiscount: MembersOnlyDiscount,
     Profile: Profile,
     MembersOnlyDiscountOpposite: MembersOnlyDiscountOpposite,
-    PriorityShipping: PriorityShipping
+    PriorityShipping: PriorityShipping,
+    Guard: Guard
 });
 
 var Icon = {
@@ -4927,15 +4933,17 @@ var TAGS = {
     heading4: newStyled.h4(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject([""], [""]))),
     heading5: newStyled.h5(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject([""], [""]))),
     heading6: newStyled.h6(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject([""], [""]))),
-    body: newStyled.p(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject([""], [""]))),
-    link: newStyled.a(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n    cursor: pointer;\n    color: inherit;\n    text-decoration: ", ";\n  "], ["\n    cursor: pointer;\n    color: inherit;\n    text-decoration: ", ";\n  "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
-    button: newStyled.span(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n    display: inline-block;\n  "], ["\n    display: inline-block;\n  "]))),
-    pricing: newStyled.span(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["\n    display: inline-block;\n    font-weight: ", ";\n    text-decoration: ", ";\n  "], ["\n    display: inline-block;\n    font-weight: ", ";\n    text-decoration: ", ";\n  "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
-    label: newStyled.label(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n    color: ", " !important;\n  "], ["\n    color: ", " !important;\n  "])), function (_a) {
+    heading7: newStyled.h1(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject([""], [""]))),
+    heading8: newStyled.h1(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""]))),
+    body: newStyled.p(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
+    link: newStyled.a(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["\n    cursor: pointer;\n    color: inherit;\n    text-decoration: ", ";\n  "], ["\n    cursor: pointer;\n    color: inherit;\n    text-decoration: ", ";\n  "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
+    button: newStyled.span(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n    display: inline-block;\n  "], ["\n    display: inline-block;\n  "]))),
+    pricing: newStyled.span(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n    display: inline-block;\n    font-weight: ", ";\n    text-decoration: ", ";\n  "], ["\n    display: inline-block;\n    font-weight: ", ";\n    text-decoration: ", ";\n  "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
+    label: newStyled.label(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["\n    color: ", " !important;\n  "], ["\n    color: ", " !important;\n  "])), function (_a) {
         var theme = _a.theme;
         return theme.component.label.color;
     }),
-    tag: newStyled.span(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n    display: inline-block;\n    text-transform: ", ";\n  "], ["\n    display: inline-block;\n    text-transform: ", ";\n  "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
+    tag: newStyled.span(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    display: inline-block;\n    text-transform: ", ";\n  "], ["\n    display: inline-block;\n    text-transform: ", ";\n  "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
 };
 var Text$8 = function (_a) {
     var _b;
@@ -5001,6 +5009,12 @@ var DEFAULTS = {
     heading6: {
         weight: 'bold',
     },
+    heading7: {
+        weight: 'bold',
+    },
+    heading8: {
+        weight: 'bold',
+    },
     hero1: {
         weight: 'heavy',
     },
@@ -5040,7 +5054,7 @@ var DEFAULTS = {
         size: 'regular',
     },
 };
-var templateObject_1$1u, templateObject_2$Z, templateObject_3$M, templateObject_4$y, templateObject_5$l, templateObject_6$i, templateObject_7$c, templateObject_8$7, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2;
+var templateObject_1$1u, templateObject_2$Z, templateObject_3$M, templateObject_4$y, templateObject_5$l, templateObject_6$i, templateObject_7$c, templateObject_8$7, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$1;
 
 var ButtonsContainer = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"])), function (_a) {
     var inline = _a.inline;
@@ -9996,7 +10010,7 @@ var ImagePreviewList = function (_a) {
                     arrowWidth: 0.75,
                     arrowHeight: 1.25,
                     arrowPadding: 1.625,
-                }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.alt.includes('-video') ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.alt.includes('-video') ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
+                }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { 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.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { 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.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
 };
 var templateObject_1$1i, templateObject_2$S, templateObject_3$H, templateObject_4$w;
 
@@ -11599,7 +11613,7 @@ var Container$W = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __
 var TopTagContainer$3 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"], ["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
 var BottomTagContainer$3 = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
 var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n  text-transform: capitalize;\n  margin-top: 12px;\n\n  @media (max-width: 992px) {\n    margin-top: 4px;\n  }\n"], ["\n  text-transform: capitalize;\n  margin-top: 12px;\n\n  @media (max-width: 992px) {\n    margin-top: 4px;\n  }\n"])));
-var Video$1 = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 706px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n\n  @media (max-width: 768px) {\n    height: 506px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 706px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n\n  @media (max-width: 768px) {\n    height: 506px;\n  }\n"])));
+var Video$1 = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 666px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n\n  @media (max-width: 768px) {\n    height: 506px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 666px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n\n  @media (max-width: 768px) {\n    height: 506px;\n  }\n"])));
 var VideoTag$1 = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n  gap: 8px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"], ["\n  gap: 8px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"])));
 var Text$7 = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n  padding-top: 3px;\n"], ["\n  padding-top: 3px;\n"])));
 var ImageProductWithTags$1 = function (_a) {
@@ -13782,17 +13796,15 @@ var ImageProductWithTags = function (_a) {
     }, [images, selectedValue]);
     return (jsxs$1(Fragment$1, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$o, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
                         var _a;
+                        var activeSlide = images[e];
                         // If autoplay is true and iframe is the active slide, play the video
-                        // @ts-ignore
-                        var urlParams = new URLSearchParams((_a = document.getElementById('vwo-video')) === null || _a === void 0 ? void 0 : _a.src);
-                        var autoplay = urlParams.get('autoplay') === '1';
-                        var vwoIndex = Number(urlParams.get('vwo-index'));
-                        e == vwoIndex && autoplay ? _playVideo() : _stopVideo();
+                        var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.imageUrl) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
+                        autoplay ? _playVideo() : _stopVideo();
                     } }, settings, { 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$1, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __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')) && (jsx$1(Fragment$1, { children: 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.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay$1, { onClick: function () {
-                                                    isPlaying ? _stopVideo() : _playVideo();
-                                                } }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0) }, void 0))] }, image.key));
+                        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$1, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __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.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay$1, { onClick: function () {
+                                                isPlaying ? _stopVideo() : _playVideo();
+                                            } }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
                     }) }), void 0) }), void 0)] }, void 0));
 };
 function usePreventVerticalScroll(ref, dragThreshold) {