npm - @anker-in/headless-ui - Versions diffs - 1.2.2 → 1.2.3-alpha.1778583232121 - Mend

@anker-in/headless-ui 1.2.2 → 1.2.3-alpha.1778583232121

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.

Files changed (323) hide show

package/dist/cjs/biz-components/ImageWithText/ImageWithText.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var ue=Object.create;var S=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var ge=Object.getPrototypeOf,ve=Object.prototype.hasOwnProperty;var be=(n,p)=>{for(var g in p)S(n,g,{get:p[g],enumerable:!0})},U=(n,p,g,b)=>{if(p&&typeof p=="object"||typeof p=="function")for(let v of he(p))!ve.call(n,v)&&v!==g&&S(n,v,{get:()=>p[v],enumerable:!(b=fe(p,v))||b.enumerable});return n};var we=(n,p,g)=>(g=n!=null?ue(ge(n)):{},U(p||!n||!n.__esModule?S(g,"default",{value:n,enumerable:!0}):g,n)),_e=n=>U(S({},"__esModule",{value:!0}),n);var Te={};be(Te,{default:()=>Ne});module.exports=_e(Te);var e=require("react/jsx-runtime"),a=we(require("react")),r=require("../../components/index.js"),l=require("../../helpers/utils.js"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),ie=require("../../hooks/useIntersectionObserver.js"),ae=require("../AiuiProvider/index.js"),k=require("framer-motion");const ye="image",ke="image_with_text",X=(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:(0,e.jsx)("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),Y=a.default.forwardRef(({data:n,className:p},g)=>{const{title:b,subtitle:v,desc:_,descIcon:M,image:N,padImage:z,mobileImage:E,theme:oe="dark",items:H=[],layout:le="left",mediaType:se="image",datalist:d=[],video:j,padVideo:R,mobVideo:W,button:w,textAlign:m="left"}=n,i=le,{locale:C="us"}=(0,ae.useAiuiContext)(),D=(0,a.useRef)(null),I=(0,a.useRef)(null),L=(0,a.useRef)(null),P=(0,a.useRef)(null),A=(0,a.useRef)(null),[u,re]=(0,a.useState)(0),q=(0,a.useRef)([]),[$,ne]=(0,a.useState)({left:0,width:0}),[y,B]=(0,a.useState)(""),[F,O]=(0,a.useState)(""),[Z,G]=(0,a.useState)(""),c=d.length>0,T=se==="video";(0,te.useExposure)(D,{componentType:ye,componentName:ke,componentTitle:b,componentDescription:v}),(0,a.useImperativeHandle)(g,()=>D.current),(0,a.useEffect)(()=>{if(d.length>0){const t=q.current[u];if(t){const{offsetLeft:s,offsetWidth:o}=t;ne({left:s,width:o})}}},[u,d.length]);const[J,me]=(0,a.useState)(!1);(0,ie.useIntersectionObserverDelay)(A,{once:!0,threshold:.01,callback:()=>{me(!0)}}),(0,a.useEffect)(()=>{if(!J||!T)return;let t="",s="",o="";if(c&&d[u]){const f=d[u];t=f.video?.url||"",s=f.padVideo?.url||t,o=f.mobVideo?.url||t}else t=j?.url||"",s=R?.url||t,o=W?.url||t;t&&B(t),s&&O(s),o&&G(o),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},200)},[J,T,c,u,d,j?.url,R?.url,W?.url]);const de=(t,s)=>{if(re(t),s.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),T&&c&&d[t]){const o=d[t];o.video?.url&&B(o.video.url),o.padVideo?.url&&O(o.padVideo.url),o.mobVideo?.url&&G(o.mobVideo.url),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},300)}},pe=()=>!V||!w?.text||i==="top"||i==="bottom"?null:(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":m==="center","flex justify-start":m==="left"}),children:(0,e.jsx)(r.Link,{href:(0,l.getLocalizedPath)(w.link||"",C),className:"image-with-text__button whitespace-nowrap no-underline",suffixIcon:X,children:w.text})}),x=H.length>0,V=!!w,K=()=>{if(c&&d[u]){const t=d[u];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return N?`${N?.url},${z?.url||N?.url} 1024, ${E?.url||N?.url} 768`:""},Q=()=>{if(c){const f=d[u],h=f.image?.url,ce=f.imgPad?.url||h,xe=f.imageMob?.url||h;return(0,e.jsx)(k.AnimatePresence,{mode:"wait",children:(0,e.jsx)(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:I,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:h,src:y,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ce,src:F||y,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:xe,src:Z||y,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},f.video?.url||f.image?.url)})}const t=N?.url,s=z?.url||t,o=E?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:I,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:y,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:s,src:F||y,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:Z||y,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return(0,e.jsxs)("section",{ref:D,"data-ui-component-id":"ImageWithText",className:(0,l.cn)("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!c,"flex-col":!c&&(i==="top"||i==="bottom"),"items-center":i==="left"||i==="right","flex-col laptop:flex-row":!c&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":c,"aiui-dark":oe==="dark"},p),children:[c&&(b||_||d.length>0)&&(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":m==="left","text-center":m==="center"}),children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(r.Heading,{as:"h3",size:4,html:b,className:"image-with-text__title"}),(0,e.jsx)(r.Text,{as:"p",size:1,html:_,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":m==="center"}),children:(0,e.jsxs)("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:$.left,width:$.width}}),d.map((t,s)=>(0,e.jsx)("div",{ref:o=>{q.current[s]=o},onClick:o=>de(s,o),className:(0,l.cn)("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",u===s?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(r.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},s))]})})]}),!c&&(b||v||_)&&(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__content flex flex-col",{"justify-center":!V,"justify-between":V,"w-full laptop:w-fit":x,"items-start":m==="left","items-center":m==="center","text-left":m==="left","text-center":m==="center","laptop:order-1":i==="left"}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__main-content",{"flex flex-col":V}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__header",{"laptop:flex laptop:items-end laptop:justify-between laptop:gap-16":(i==="top"||i==="bottom")&&w?.text}),children:[(0,e.jsxs)("div",{className:"image-with-text__title-wrapper flex min-w-0 flex-1 flex-col",children:[(0,e.jsx)(r.Heading,{as:"h2",size:4,html:b,className:(0,l.cn)("image-with-text__title",{"text-left":x&&m==="left","text-center":x&&m==="center"})}),v&&(0,e.jsx)(r.Text,{as:"p",size:x?4:3,html:v,className:(0,l.cn)("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!x,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":x,"text-left":x&&m==="left","text-center":x&&m==="center"})})]}),(i==="top"||i==="bottom")&&w?.text&&(0,e.jsx)(r.Link,{href:(0,l.getLocalizedPath)(w.link||"",C),className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:X,children:w.text})]}),!x&&(_||M)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[M&&(0,e.jsx)("img",{src:M,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),_&&(0,e.jsx)(r.Heading,{as:"h4",size:5,html:_,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),x&&(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2":i==="left"||i==="right"}),children:H.map((t,s)=>(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__item",{"text-center":m==="center"}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":m==="center","justify-start":m==="left"}),children:[(0,e.jsx)(r.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),(0,e.jsx)(r.Heading,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(r.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},s))})]}),pe()]}),(0,e.jsx)("div",{ref:A,className:(0,l.cn)("image-with-text__media-wrapper",{"laptop:w-[60%] w-full shrink-0":i==="left"||i==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":x,"laptop:basis-[63%] desktop:basis-[57%]":x&&i==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":c,"!max-w-none !max-h-none aspect-auto":i==="top"||i==="bottom"}),children:c?T?Q():(0,e.jsx)(k.AnimatePresence,{mode:"wait",children:(0,e.jsx)(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(r.Picture,{source:K(),alt:d[u].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},d[u].image?.url)}):T?Q():(0,e.jsx)(r.Picture,{source:K(),className:(0,l.cn)("image-with-text__image rounded-box laptop:rounded-box")})})]})});Y.displayName="ImageWithText";var Ne=(0,ee.withLayout)(Y);
+"use strict";"use client";var ve=Object.create;var S=Object.defineProperty;var _e=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,ye=Object.prototype.hasOwnProperty;var ke=(n,p)=>{for(var g in p)S(n,g,{get:p[g],enumerable:!0})},te=(n,p,g,_)=>{if(p&&typeof p=="object"||typeof p=="function")for(let v of be(p))!ye.call(n,v)&&v!==g&&S(n,v,{get:()=>p[v],enumerable:!(_=_e(p,v))||_.enumerable});return n};var Ne=(n,p,g)=>(g=n!=null?ve(we(n)):{},te(p||!n||!n.__esModule?S(g,"default",{value:n,enumerable:!0}):g,n)),Te=n=>te(S({},"__esModule",{value:!0}),n);var Le={};ke(Le,{default:()=>Ie});module.exports=Te(Le);var e=require("react/jsx-runtime"),a=Ne(require("react")),r=require("../../components/index.js"),l=require("../../helpers/utils.js"),oe=require("../../shared/Styles.js"),le=require("../../hooks/useExposure.js"),se=require("../../hooks/useIntersectionObserver.js"),re=require("../AiuiProvider/index.js"),E=require("../../shared/trackUrlRef.js"),k=require("framer-motion");const H="image",z="image_with_text",ie=(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:(0,e.jsx)("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),ae=a.default.forwardRef(({data:n,className:p},g)=>{const{title:_,subtitle:v,desc:w,descIcon:D,image:N,padImage:j,mobileImage:R,theme:ne="dark",items:$=[],layout:me="left",mediaType:de="image",datalist:d=[],video:W,padVideo:C,mobVideo:A,button:b,textAlign:m="left"}=n,i=me,{locale:q="us",trackingData:B}=(0,re.useAiuiContext)(),M=(0,a.useRef)(null),I=(0,a.useRef)(null),L=(0,a.useRef)(null),P=(0,a.useRef)(null),F=(0,a.useRef)(null),[u,pe]=(0,a.useState)(0),O=(0,a.useRef)([]),[U,ce]=(0,a.useState)({left:0,width:0}),[y,Z]=(0,a.useState)(""),[G,J]=(0,a.useState)(""),[K,Q]=(0,a.useState)(""),c=d.length>0,T=de==="video";(0,le.useExposure)(M,{componentType:H,componentName:z,componentTitle:_,componentDescription:v}),(0,a.useImperativeHandle)(g,()=>M.current),(0,a.useEffect)(()=>{if(d.length>0){const t=O.current[u];if(t){const{offsetLeft:s,offsetWidth:o}=t;ce({left:s,width:o})}}},[u,d.length]);const[X,xe]=(0,a.useState)(!1);(0,se.useIntersectionObserverDelay)(F,{once:!0,threshold:.01,callback:()=>{xe(!0)}}),(0,a.useEffect)(()=>{if(!X||!T)return;let t="",s="",o="";if(c&&d[u]){const f=d[u];t=f.video?.url||"",s=f.padVideo?.url||t,o=f.mobVideo?.url||t}else t=W?.url||"",s=C?.url||t,o=A?.url||t;t&&Z(t),s&&J(s),o&&Q(o),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},200)},[X,T,c,u,d,W?.url,C?.url,A?.url]);const ue=(t,s)=>{if(pe(t),s.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),T&&c&&d[t]){const o=d[t];o.video?.url&&Z(o.video.url),o.padVideo?.url&&J(o.padVideo.url),o.mobVideo?.url&&Q(o.mobVideo.url),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},300)}},fe=()=>!V||!b?.text||i==="top"||i==="bottom"?null:(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":m==="center","flex justify-start":m==="left"}),children:(0,e.jsx)(r.Link,{href:(0,E.trackUrlRef)((0,l.getLocalizedPath)(b.link||"",q),`${B?.contextHandle||""}_${H}_${z}`),className:"image-with-text__button whitespace-nowrap no-underline",suffixIcon:ie,children:b.text})}),x=$.length>0,V=!!b,Y=()=>{if(c&&d[u]){const t=d[u];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return N?`${N?.url},${j?.url||N?.url} 1024, ${R?.url||N?.url} 768`:""},ee=()=>{if(c){const f=d[u],h=f.image?.url,he=f.imgPad?.url||h,ge=f.imageMob?.url||h;return(0,e.jsx)(k.AnimatePresence,{mode:"wait",children:(0,e.jsx)(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:I,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:h,src:y,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:he,src:G||y,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ge,src:K||y,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},f.video?.url||f.image?.url)})}const t=N?.url,s=j?.url||t,o=R?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:I,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:y,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:s,src:G||y,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:K||y,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return(0,e.jsxs)("section",{ref:M,"data-ui-component-id":"ImageWithText",className:(0,l.cn)("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!c,"flex-col":!c&&(i==="top"||i==="bottom"),"items-center":i==="left"||i==="right","flex-col laptop:flex-row":!c&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":c,"aiui-dark":ne==="dark"},p),children:[c&&(_||w||d.length>0)&&(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":m==="left","text-center":m==="center"}),children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(r.Heading,{as:"h3",size:4,html:_,className:"image-with-text__title"}),(0,e.jsx)(r.Text,{as:"p",size:1,html:w,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":m==="center"}),children:(0,e.jsxs)("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:U.left,width:U.width}}),d.map((t,s)=>(0,e.jsx)("div",{ref:o=>{O.current[s]=o},onClick:o=>ue(s,o),className:(0,l.cn)("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",u===s?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(r.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},s))]})})]}),!c&&(_||v||w)&&(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__content flex flex-col",{"justify-center":!V,"justify-between":V,"w-full laptop:w-fit":x,"items-start":m==="left","items-center":m==="center","text-left":m==="left","text-center":m==="center","laptop:order-1":i==="left"}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__main-content",{"flex flex-col":V}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__header",{"laptop:flex laptop:items-end laptop:justify-between laptop:gap-16":(i==="top"||i==="bottom")&&b?.text}),children:[(0,e.jsxs)("div",{className:"image-with-text__title-wrapper flex min-w-0 flex-1 flex-col",children:[(0,e.jsx)(r.Heading,{as:"h2",size:4,html:_,className:(0,l.cn)("image-with-text__title",{"text-left":x&&m==="left","text-center":x&&m==="center"})}),v&&(0,e.jsx)(r.Text,{as:"p",size:x?4:3,html:v,className:(0,l.cn)("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!x,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":x,"text-left":x&&m==="left","text-center":x&&m==="center"})})]}),(i==="top"||i==="bottom")&&b?.text&&(0,e.jsx)(r.Link,{href:(0,E.trackUrlRef)((0,l.getLocalizedPath)(b.link||"",q),`${B?.contextHandle||""}_${H}_${z}`),className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:ie,children:b.text})]}),!x&&(w||D)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[D&&(0,e.jsx)("img",{src:D,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),w&&(0,e.jsx)(r.Heading,{as:"h4",size:5,html:w,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),x&&(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2":i==="left"||i==="right"}),children:$.map((t,s)=>(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__item",{"text-center":m==="center"}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":m==="center","justify-start":m==="left"}),children:[(0,e.jsx)(r.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),(0,e.jsx)(r.Heading,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(r.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},s))})]}),fe()]}),(0,e.jsx)("div",{ref:F,className:(0,l.cn)("image-with-text__media-wrapper",{"laptop:w-[60%] w-full shrink-0":i==="left"||i==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":x,"laptop:basis-[63%] desktop:basis-[57%]":x&&i==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":c,"!max-w-none !max-h-none aspect-auto":i==="top"||i==="bottom"}),children:c?T?ee():(0,e.jsx)(k.AnimatePresence,{mode:"wait",children:(0,e.jsx)(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(r.Picture,{source:Y(),alt:d[u].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},d[u].image?.url)}):T?ee():(0,e.jsx)(r.Picture,{source:Y(),className:(0,l.cn)("image-with-text__image rounded-box laptop:rounded-box")})})]})});ae.displayName="ImageWithText";var Ie=(0,oe.withLayout)(ae);
 //# sourceMappingURL=ImageWithText.js.map

package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Link } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ArrowRight = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      d=\"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    layout = 'left',\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    button,\n    textAlign = 'left',\n  } = data\n\n  const effectiveLayout = layout\n\n  const { locale = 'us' } = useAiuiContext()\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n  const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n  const [videoIntersected, setVideoIntersected] = useState(false)\n\n  // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n  useIntersectionObserverDelay(mediaWrapperRef, {\n    once: true,\n    threshold: 0.01,\n    callback: () => {\n      setVideoIntersected(true)\n    },\n  })\n\n  // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n  useEffect(() => {\n    if (!videoIntersected || !isVideo) return\n\n    // \u786E\u5B9A\u89C6\u9891\u6E90\n    let desktopSrc = ''\n    let tabletSrc = ''\n    let mobileSrc = ''\n\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      desktopSrc = activeTab.video?.url || ''\n      tabletSrc = activeTab.padVideo?.url || desktopSrc\n      mobileSrc = activeTab.mobVideo?.url || desktopSrc\n    } else {\n      desktopSrc = video?.url || ''\n      tabletSrc = padVideo?.url || desktopSrc\n      mobileSrc = mobVideo?.url || desktopSrc\n    }\n\n    // \u8BBE\u7F6E\u89C6\u9891\u6E90\n    if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n    if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n    if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n    // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n    setTimeout(() => {\n      const videos = [\n        desktopVideoRef.current?.querySelector('video'),\n        tabletVideoRef.current?.querySelector('video'),\n        mobileVideoRef.current?.querySelector('video'),\n      ]\n\n      videos.forEach(videoElement => {\n        if (videoElement) {\n          videoElement.load()\n          videoElement.play().catch(() => {\n            // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n          })\n        }\n      })\n    }, 200)\n  }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n\n    // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n    if (isVideo && isTabMode && datalist[index]) {\n      const activeTab = datalist[index]\n\n      // \u66F4\u65B0\u89C6\u9891\u6E90\n      if (activeTab.video?.url) {\n        setLoadedDesktopVideoSrc(activeTab.video.url)\n      }\n      if (activeTab.padVideo?.url) {\n        setLoadedTabletVideoSrc(activeTab.padVideo.url)\n      }\n      if (activeTab.mobVideo?.url) {\n        setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n      }\n\n      // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n      setTimeout(() => {\n        const videos = [\n          desktopVideoRef.current?.querySelector('video'),\n          tabletVideoRef.current?.querySelector('video'),\n          mobileVideoRef.current?.querySelector('video'),\n        ]\n\n        videos.forEach(video => {\n          if (video) {\n            video.load()\n            video.play().catch(() => {\n              // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n            })\n          }\n        })\n      }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n    }\n  }\n\n  // \u6E32\u67D3\u6309\u94AE\n  const renderButton = () => {\n    if (!hasButton || !button?.text) return null\n    if (effectiveLayout === 'top' || effectiveLayout === 'bottom') return null\n\n    return (\n      <div\n        className={cn('image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]', {\n          'flex justify-center': textAlign === 'center',\n          'flex justify-start': textAlign === 'left',\n        })}\n      >\n        <Link\n          href={getLocalizedPath(button.link || '', locale)}\n          className=\"image-with-text__button whitespace-nowrap no-underline\"\n          suffixIcon={ArrowRight}\n        >\n          {button.text}\n        </Link>\n      </div>\n    )\n  }\n\n  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\n\n  // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n  const hasButton = Boolean(button)\n\n  // \u83B7\u53D6\u56FE\u7247\u6E90\n  const getImageSource = () => {\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n    }\n    if (image) {\n      return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n    }\n    return ''\n  }\n\n  // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n  const renderVideo = () => {\n    if (isTabMode) {\n      const activeTab = datalist[activeIndex]\n      // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n      const desktopPoster = activeTab.image?.url\n      const tabletPoster = activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeTab.video?.url || activeTab.image?.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n          >\n            <div className=\"image-with-text__video-wrapper rounded-box overflow-hidden\">\n              {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n              <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={desktopPoster}\n                  src={loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n                ></video>\n              </div>\n              {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n              <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={tabletPoster}\n                  src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n                ></video>\n              </div>\n              {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n              <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={mobilePoster}\n                  src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n                ></video>\n              </div>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      )\n    }\n\n    // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n    const desktopPoster = image?.url\n    const tabletPoster = padImage?.url || desktopPoster\n    const mobilePoster = mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={desktopPoster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n          ></video>\n        </div>\n        {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n        <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={tabletPoster}\n            src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n          ></video>\n        </div>\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobilePoster}\n            src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n          ></video>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'image-with-text text-info-primary',\n        {\n          // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n          'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n          'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n          'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n          'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n          // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n          'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n          // \u4E3B\u9898\u6837\u5F0F\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (title || desc || datalist.length > 0) && (\n        <div\n          className={cn(\n            'image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center',\n            {\n              'text-left': textAlign === 'left',\n              'text-center': textAlign === 'center',\n            }\n          )}\n        >\n          <div className=\"image-with-text__header\">\n            <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n            <Text\n              as={'p'}\n              size={1}\n              html={desc}\n              className=\"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n            />\n          </div>\n\n          <div\n            className={cn(\n              'image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll',\n              {\n                'flex justify-center': textAlign === 'center',\n              }\n            )}\n          >\n            <div className=\"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out\"\n                style={{\n                  left: sliderStyle.left,\n                  width: sliderStyle.width,\n                }}\n              />\n\n              {/* Tab Items */}\n              {datalist.map((item: ImageWithTextTabItem, index: number) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  onClick={e => handleTabClick(index, e)}\n                  className={cn(\n                    'image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]',\n                    activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n                  )}\n                >\n                  <Heading\n                    as=\"h1\"\n                    size={1}\n                    html={item?.title}\n                    className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n      {!isTabMode && (title || subtitle || desc) && (\n        <div\n          className={cn('image-with-text__content flex flex-col', {\n            // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n            'justify-center': !hasButton,\n            'justify-between': hasButton,\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full laptop:w-fit': hasItems,\n            // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n            'items-start': textAlign === 'left',\n            'items-center': textAlign === 'center',\n            // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n            'text-left': textAlign === 'left',\n            'text-center': textAlign === 'center',\n            // order\u63A7\u5236\n            'laptop:order-1': effectiveLayout === 'left',\n          })}\n        >\n          {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n          <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n            <div\n              className={cn('image-with-text__header', {\n                'laptop:flex laptop:items-end laptop:justify-between laptop:gap-16':\n                  (effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text,\n              })}\n            >\n              <div className=\"image-with-text__title-wrapper flex min-w-0 flex-1 flex-col\">\n                <Heading\n                  as={'h2'}\n                  size={4}\n                  html={title}\n                  className={cn('image-with-text__title', {\n                    'text-left': hasItems && textAlign === 'left',\n                    'text-center': hasItems && textAlign === 'center',\n                  })}\n                />\n                {subtitle && (\n                  <Text\n                    as={'p'}\n                    size={hasItems ? 4 : 3}\n                    html={subtitle}\n                    className={cn(\n                      'image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n                      {\n                        'laptop:mt-[16px]': !hasItems,\n                        'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                        'text-left': hasItems && textAlign === 'left',\n                        'text-center': hasItems && textAlign === 'center',\n                      }\n                    )}\n                  />\n                )}\n              </div>\n              {(effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text && (\n                <Link\n                  href={getLocalizedPath(button.link || '', locale)}\n                  className=\"laptop:flex hidden whitespace-nowrap no-underline\"\n                  suffixIcon={ArrowRight}\n                >\n                  {button.text}\n                </Link>\n              )}\n            </div>\n\n            {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n            {!hasItems && (desc || descIcon) && (\n              <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n                {descIcon && (\n                  <img\n                    src={descIcon}\n                    alt=\"icon\"\n                    className=\"image-with-text__description-icon desktop:size-[48px] size-[36px]\"\n                  />\n                )}\n                {desc && (\n                  <Heading\n                    as={'h4'}\n                    size={5}\n                    html={desc}\n                    className=\"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]\"\n                  />\n                )}\n              </div>\n            )}\n\n            {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n            {hasItems && (\n              <div\n                className={cn('image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6', {\n                  '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  // \u5F53 effectiveLayout \u662F top \u6216 bottom \u65F6\uFF1A\u9ED8\u8BA4 cols \u662F 2\uFF0Ctablet \u6216\u4EE5\u4E0A\u5C3A\u5BF8\u662F 4\n                  'grid-cols-2 tablet:grid-cols-4': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  // \u5F53 effectiveLayout \u662F left \u6216 right \u65F6\uFF1Acols \u9ED8\u8BA4\u662F 2\uFF0Ctablet \u662F 4\uFF0Claptop \u6216\u4EE5\u4E0A\u5C3A\u5BF8\u662F 2\n                  'grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2':\n                    effectiveLayout === 'left' || effectiveLayout === 'right',\n                })}\n              >\n                {items.map((item: ImageWithTextItem, index: number) => (\n                  <div\n                    key={index}\n                    className={cn('image-with-text__item', {\n                      'text-center': textAlign === 'center',\n                    })}\n                  >\n                    <div\n                      className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n                        'justify-center': textAlign === 'center',\n                        'justify-start': textAlign === 'left',\n                      })}\n                    >\n                      <Picture\n                        source={item.icon?.url}\n                        alt={item.icon?.alt}\n                        className=\"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]\"\n                        imgClassName=\"h-full !w-full\"\n                      />\n                      <Heading\n                        size={4}\n                        as=\"h6\"\n                        className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                      >\n                        {item.text}\n                      </Heading>\n                    </div>\n                    <Text\n                      size={4}\n                      as=\"p\"\n                      html={item.desc}\n                      className=\"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]\"\n                    />\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n          {renderButton()}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        ref={mediaWrapperRef}\n        className={cn('image-with-text__media-wrapper', {\n          'laptop:w-[60%] w-full shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n            isTabMode,\n          '!max-w-none !max-h-none aspect-auto': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={datalist[activeIndex].image?.url}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n                />\n              </motion.div>\n            </AnimatePresence>\n          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
-  "mappings": "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",
-  "names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_useIntersectionObserver", "import_AiuiProvider", "import_framer_motion", "componentType", "componentName", "ArrowRight", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "button", "textAlign", "effectiveLayout", "locale", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "mediaWrapperRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "isTabMode", "isVideo", "current", "offsetLeft", "offsetWidth", "videoIntersected", "setVideoIntersected", "desktopSrc", "tabletSrc", "mobileSrc", "activeTab", "videoElement", "handleTabClick", "index", "e", "renderButton", "hasButton", "hasItems", "getImageSource", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Link } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ArrowRight = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      d=\"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    layout = 'left',\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    button,\n    textAlign = 'left',\n  } = data\n\n  const effectiveLayout = layout\n\n  const { locale = 'us', trackingData } = useAiuiContext()\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n  const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n  const [videoIntersected, setVideoIntersected] = useState(false)\n\n  // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n  useIntersectionObserverDelay(mediaWrapperRef, {\n    once: true,\n    threshold: 0.01,\n    callback: () => {\n      setVideoIntersected(true)\n    },\n  })\n\n  // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n  useEffect(() => {\n    if (!videoIntersected || !isVideo) return\n\n    // \u786E\u5B9A\u89C6\u9891\u6E90\n    let desktopSrc = ''\n    let tabletSrc = ''\n    let mobileSrc = ''\n\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      desktopSrc = activeTab.video?.url || ''\n      tabletSrc = activeTab.padVideo?.url || desktopSrc\n      mobileSrc = activeTab.mobVideo?.url || desktopSrc\n    } else {\n      desktopSrc = video?.url || ''\n      tabletSrc = padVideo?.url || desktopSrc\n      mobileSrc = mobVideo?.url || desktopSrc\n    }\n\n    // \u8BBE\u7F6E\u89C6\u9891\u6E90\n    if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n    if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n    if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n    // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n    setTimeout(() => {\n      const videos = [\n        desktopVideoRef.current?.querySelector('video'),\n        tabletVideoRef.current?.querySelector('video'),\n        mobileVideoRef.current?.querySelector('video'),\n      ]\n\n      videos.forEach(videoElement => {\n        if (videoElement) {\n          videoElement.load()\n          videoElement.play().catch(() => {\n            // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n          })\n        }\n      })\n    }, 200)\n  }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n\n    // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n    if (isVideo && isTabMode && datalist[index]) {\n      const activeTab = datalist[index]\n\n      // \u66F4\u65B0\u89C6\u9891\u6E90\n      if (activeTab.video?.url) {\n        setLoadedDesktopVideoSrc(activeTab.video.url)\n      }\n      if (activeTab.padVideo?.url) {\n        setLoadedTabletVideoSrc(activeTab.padVideo.url)\n      }\n      if (activeTab.mobVideo?.url) {\n        setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n      }\n\n      // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n      setTimeout(() => {\n        const videos = [\n          desktopVideoRef.current?.querySelector('video'),\n          tabletVideoRef.current?.querySelector('video'),\n          mobileVideoRef.current?.querySelector('video'),\n        ]\n\n        videos.forEach(video => {\n          if (video) {\n            video.load()\n            video.play().catch(() => {\n              // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n            })\n          }\n        })\n      }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n    }\n  }\n\n  // \u6E32\u67D3\u6309\u94AE\n  const renderButton = () => {\n    if (!hasButton || !button?.text) return null\n    if (effectiveLayout === 'top' || effectiveLayout === 'bottom') return null\n\n    return (\n      <div\n        className={cn('image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]', {\n          'flex justify-center': textAlign === 'center',\n          'flex justify-start': textAlign === 'left',\n        })}\n      >\n        <Link\n          href={trackUrlRef(\n            getLocalizedPath(button.link || '', locale),\n            `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n          )}\n          className=\"image-with-text__button whitespace-nowrap no-underline\"\n          suffixIcon={ArrowRight}\n        >\n          {button.text}\n        </Link>\n      </div>\n    )\n  }\n\n  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\n\n  // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n  const hasButton = Boolean(button)\n\n  // \u83B7\u53D6\u56FE\u7247\u6E90\n  const getImageSource = () => {\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n    }\n    if (image) {\n      return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n    }\n    return ''\n  }\n\n  // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n  const renderVideo = () => {\n    if (isTabMode) {\n      const activeTab = datalist[activeIndex]\n      // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n      const desktopPoster = activeTab.image?.url\n      const tabletPoster = activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeTab.video?.url || activeTab.image?.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n          >\n            <div className=\"image-with-text__video-wrapper rounded-box overflow-hidden\">\n              {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n              <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={desktopPoster}\n                  src={loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n                ></video>\n              </div>\n              {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n              <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={tabletPoster}\n                  src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n                ></video>\n              </div>\n              {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n              <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={mobilePoster}\n                  src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n                ></video>\n              </div>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      )\n    }\n\n    // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n    const desktopPoster = image?.url\n    const tabletPoster = padImage?.url || desktopPoster\n    const mobilePoster = mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={desktopPoster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n          ></video>\n        </div>\n        {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n        <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={tabletPoster}\n            src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n          ></video>\n        </div>\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobilePoster}\n            src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n          ></video>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'image-with-text text-info-primary',\n        {\n          // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n          'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n          'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n          'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n          'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n          // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n          'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n          // \u4E3B\u9898\u6837\u5F0F\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (title || desc || datalist.length > 0) && (\n        <div\n          className={cn(\n            'image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center',\n            {\n              'text-left': textAlign === 'left',\n              'text-center': textAlign === 'center',\n            }\n          )}\n        >\n          <div className=\"image-with-text__header\">\n            <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n            <Text\n              as={'p'}\n              size={1}\n              html={desc}\n              className=\"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n            />\n          </div>\n\n          <div\n            className={cn(\n              'image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll',\n              {\n                'flex justify-center': textAlign === 'center',\n              }\n            )}\n          >\n            <div className=\"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out\"\n                style={{\n                  left: sliderStyle.left,\n                  width: sliderStyle.width,\n                }}\n              />\n\n              {/* Tab Items */}\n              {datalist.map((item: ImageWithTextTabItem, index: number) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  onClick={e => handleTabClick(index, e)}\n                  className={cn(\n                    'image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]',\n                    activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n                  )}\n                >\n                  <Heading\n                    as=\"h1\"\n                    size={1}\n                    html={item?.title}\n                    className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n      {!isTabMode && (title || subtitle || desc) && (\n        <div\n          className={cn('image-with-text__content flex flex-col', {\n            // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n            'justify-center': !hasButton,\n            'justify-between': hasButton,\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full laptop:w-fit': hasItems,\n            // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n            'items-start': textAlign === 'left',\n            'items-center': textAlign === 'center',\n            // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n            'text-left': textAlign === 'left',\n            'text-center': textAlign === 'center',\n            // order\u63A7\u5236\n            'laptop:order-1': effectiveLayout === 'left',\n          })}\n        >\n          {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n          <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n            <div\n              className={cn('image-with-text__header', {\n                'laptop:flex laptop:items-end laptop:justify-between laptop:gap-16':\n                  (effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text,\n              })}\n            >\n              <div className=\"image-with-text__title-wrapper flex min-w-0 flex-1 flex-col\">\n                <Heading\n                  as={'h2'}\n                  size={4}\n                  html={title}\n                  className={cn('image-with-text__title', {\n                    'text-left': hasItems && textAlign === 'left',\n                    'text-center': hasItems && textAlign === 'center',\n                  })}\n                />\n                {subtitle && (\n                  <Text\n                    as={'p'}\n                    size={hasItems ? 4 : 3}\n                    html={subtitle}\n                    className={cn(\n                      'image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n                      {\n                        'laptop:mt-[16px]': !hasItems,\n                        'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                        'text-left': hasItems && textAlign === 'left',\n                        'text-center': hasItems && textAlign === 'center',\n                      }\n                    )}\n                  />\n                )}\n              </div>\n              {(effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text && (\n                <Link\n                  href={trackUrlRef(\n                    getLocalizedPath(button.link || '', locale),\n                    `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n                  )}\n                  className=\"laptop:flex hidden whitespace-nowrap no-underline\"\n                  suffixIcon={ArrowRight}\n                >\n                  {button.text}\n                </Link>\n              )}\n            </div>\n\n            {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n            {!hasItems && (desc || descIcon) && (\n              <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n                {descIcon && (\n                  <img\n                    src={descIcon}\n                    alt=\"icon\"\n                    className=\"image-with-text__description-icon desktop:size-[48px] size-[36px]\"\n                  />\n                )}\n                {desc && (\n                  <Heading\n                    as={'h4'}\n                    size={5}\n                    html={desc}\n                    className=\"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]\"\n                  />\n                )}\n              </div>\n            )}\n\n            {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n            {hasItems && (\n              <div\n                className={cn('image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6', {\n                  '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  // \u5F53 effectiveLayout \u662F top \u6216 bottom \u65F6\uFF1A\u9ED8\u8BA4 cols \u662F 2\uFF0Ctablet \u6216\u4EE5\u4E0A\u5C3A\u5BF8\u662F 4\n                  'grid-cols-2 tablet:grid-cols-4': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  // \u5F53 effectiveLayout \u662F left \u6216 right \u65F6\uFF1Acols \u9ED8\u8BA4\u662F 2\uFF0Ctablet \u662F 4\uFF0Claptop \u6216\u4EE5\u4E0A\u5C3A\u5BF8\u662F 2\n                  'grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2':\n                    effectiveLayout === 'left' || effectiveLayout === 'right',\n                })}\n              >\n                {items.map((item: ImageWithTextItem, index: number) => (\n                  <div\n                    key={index}\n                    className={cn('image-with-text__item', {\n                      'text-center': textAlign === 'center',\n                    })}\n                  >\n                    <div\n                      className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n                        'justify-center': textAlign === 'center',\n                        'justify-start': textAlign === 'left',\n                      })}\n                    >\n                      <Picture\n                        source={item.icon?.url}\n                        alt={item.icon?.alt}\n                        className=\"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]\"\n                        imgClassName=\"h-full !w-full\"\n                      />\n                      <Heading\n                        size={4}\n                        as=\"h6\"\n                        className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                      >\n                        {item.text}\n                      </Heading>\n                    </div>\n                    <Text\n                      size={4}\n                      as=\"p\"\n                      html={item.desc}\n                      className=\"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]\"\n                    />\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n          {renderButton()}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        ref={mediaWrapperRef}\n        className={cn('image-with-text__media-wrapper', {\n          'laptop:w-[60%] w-full shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n            isTabMode,\n          '!max-w-none !max-h-none aspect-auto': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={datalist[activeIndex].image?.url}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n                />\n              </motion.div>\n            </AnimatePresence>\n          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
+  "mappings": "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",
+  "names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_useIntersectionObserver", "import_AiuiProvider", "import_trackUrlRef", "import_framer_motion", "componentType", "componentName", "ArrowRight", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "button", "textAlign", "effectiveLayout", "locale", "trackingData", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "mediaWrapperRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "isTabMode", "isVideo", "current", "offsetLeft", "offsetWidth", "videoIntersected", "setVideoIntersected", "desktopSrc", "tabletSrc", "mobileSrc", "activeTab", "videoElement", "handleTabClick", "index", "e", "renderButton", "hasButton", "hasItems", "getImageSource", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el"]
 }

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var ie=Object.create;var B=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var ce=(t,l)=>{for(var o in l)B(t,o,{get:l[o],enumerable:!0})},O=(t,l,o,w)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of re(l))!se.call(t,s)&&s!==o&&B(t,s,{get:()=>l[s],enumerable:!(w=oe(l,s))||w.enumerable});return t};var de=(t,l,o)=>(o=t!=null?ie(ne(t)):{},O(l||!t||!t.__esModule?B(o,"default",{value:t,enumerable:!0}):o,t)),ue=t=>O(B({},"__esModule",{value:!0}),t);var ge={};ce(ge,{default:()=>be});module.exports=ue(ge);var e=require("react/jsx-runtime"),W=require("../../../../AiuiProvider/index.js"),_=require("../../../../../components/index.js"),a=require("react"),T=require("swiper/react"),b=require("swiper/modules"),C=require("../../../../../helpers/index.js"),A=require("./types.js"),I=require("@radix-ui/react-tabs"),j=require("../../../BizProductProvider.js"),J=require("../../../hooks/use-variant-media.js"),Q=require("./components/SpecsModal.js"),X=de(require("./components/CompareModal.js")),ee=require("../../../utils/index.js"),te=require("../../../../../shared/Styles.js"),ae=require("../../../../../shared/track.js"),le=require("../../../../../components/index.js"),Y=require("es-toolkit");const q=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),U=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),pe=()=>{const{copyWriting:t}=(0,W.useAiuiContext)(),{product:l,variant:o,selectedOptions:w}=(0,j.useBizProductContext)(),s=(0,J.useVariantMedia)({product:l,variant:o}),[g,N]=(0,a.useState)(null),R=(0,a.useRef)(null),v=o?.metafields?.component?.custom_media_list;let d,S,E,L;v&&v?.available?(d=v?.product||[],S=v?.scenarios||[],E=v?.keyFeatures||[],L=v?.video||[]):(d=s?.productList,S=s?.sceneList,E=s?.keyFeaturesList,L=s?.videoList);const u=(0,a.useMemo)(()=>[...d,...S,...L],[d,S,L]),f={productList:d,sceneList:S,keyFeaturesList:E,videoList:L},i=(0,a.useMemo)(()=>{const n=l?.payload?.components?.find(y=>y.componentKey==="ProductGallery")?.data||[],p=o?.payload?.components?.find(y=>y.componentKey==="ProductGallery")?.data||[];return n?.map(y=>{const k=p?.find(F=>y?.galleries===F?.galleries);let D=f[y?.galleries]||[];if(k?.images&&Array.isArray(k.images)&&k.images.length>0){const F=k.images.map(m=>{const M=[];if(m.image_1920&&m.image_1920.trim()&&M.push(`${m.image_1920}`),m.image_1440&&m.image_1440.trim()&&M.push(`${m.image_1440} 1919`),m.image_1024&&m.image_1024.trim()&&M.push(`${m.image_1024} 1439`),m.image_768&&m.image_768.trim()&&M.push(`${m.image_768} 1023`),m.image_390&&m.image_390.trim()&&M.push(`${m.image_390} 767`),M.length>0){const K=M.join(", ");return{image:{url:K,altText:y.comment?.content||""},_fromImages:!0,_responsiveSource:K}}return null}).filter(m=>m!==null);F.length>0&&(D=F)}return{...y,galleries:D}}).filter(y=>y.galleries.length>0)},[o?.payload,f,l?.payload]),[x,r]=(0,a.useState)(i?.[0]),[c,P]=(0,a.useState)(0),[h,G]=(0,a.useState)(null),V=(0,a.useCallback)(()=>{const n=(c+1)%i.length;P(n),r(i[n]),G(0)},[c,i]),z=(0,a.useCallback)(()=>{const n=c===0?i.length-1:c-1;P(n),r(i[n]);const p=i[n]?.galleries||[];G(p.length-1)},[c,i]);(0,a.useEffect)(()=>{c!=null&&requestAnimationFrame(()=>{R.current?.scrollToTab(c)})},[c]),(0,a.useEffect)(()=>{r(i[0]),P(0)},[o?.id]);const $=(n,p)=>{switch(n?.galleryTabType){case A.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(H,{...n,index:p,onNextTab:V,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case A.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(H,{...n,index:p,onNextTab:V,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case A.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(H,{...n,index:p,onNextTab:V,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case A.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(me,{...n,onNextTab:V,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(I.Root,{className:"relative",value:x?.tabValue,defaultValue:i?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:i.map((n,p)=>(0,e.jsx)(I.Content,{className:"h-full",value:n.tabValue,children:$(n,p)},n.tabValue))}),(0,e.jsx)(Z,{ref:R,galleryTabs:i,activeGalleryTab:x,setActiveGalleryTab:r,setActiveTabIndex:P,setTargetSlideIndex:G})]})})},Z=(0,a.forwardRef)((t,l)=>{const{galleryTabs:o,activeGalleryTab:w,setActiveGalleryTab:s,setActiveTabIndex:g,setTargetSlideIndex:N}=t,{product:R}=(0,j.useBizProductContext)(),v=(0,a.useRef)(null),d=(0,a.useRef)(new Map),S=(0,a.useCallback)(u=>{if(v.current){const f=v.current,i=u.currentTarget,x=i.offsetLeft-f.offsetWidth/2+i.offsetWidth/2;f.scrollTo({left:x,behavior:"smooth"})}},[]),E=(0,a.useCallback)((u,f,i)=>{s(f),g(i),N(0),S(u)},[s,g,N,S]),L=(0,a.useCallback)(u=>{if(v.current&&o[u]){const f=v.current,i=o[u],x=d.current.get(i.tabValue);if(x){const r=x.offsetLeft-f.offsetWidth/2+x.offsetWidth/2;f.scrollTo({left:r,behavior:"smooth"})}}},[o]);return(0,a.useImperativeHandle)(l,()=>({scrollToTab:L})),(0,e.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,e.jsx)(I.List,{ref:v,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:o?.map((u,f)=>(0,e.jsx)(I.Trigger,{ref:i=>{i?d.current.set(u.tabValue,i):d.current.delete(u.tabValue)},className:(0,C.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",u.tabValue===w?.tabValue&&"bg-white"),onClick:i=>E(i,u,f),value:u.tabValue,children:u.tabLabel},u.tabValue+f))})}),(0,e.jsx)("div",{className:"desktop:gap-2 desktop:flex hidden",children:R.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(Q.SpecsModal,{})," | ",(0,e.jsx)(X.default,{})]})})]})});Z.displayName="ProductGalleryTab";const H=(0,a.forwardRef)((t,l)=>{const{locale:o="us",copyWriting:w}=(0,W.useAiuiContext)(),{variant:s,totalSavings:g}=(0,j.useBizProductContext)(),N=(0,a.useRef)(null),[R,v]=(0,a.useState)(null),[d,S]=(0,a.useState)(null),[E,L]=(0,a.useState)([]),u=(0,a.useRef)(null),f=(0,a.useMemo)(()=>{if(t?.galleryTabType===A.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===A.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,A.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),i=(0,a.useCallback)(()=>{d?.isBeginning?t.onPrevTab?.():d?.slidePrev()},[d,t]),x=(0,a.useCallback)(()=>{d?.isEnd?t.onNextTab?.():d?.slideNext()},[d,t]);return(0,a.useEffect)(()=>{d&&t.targetSlideIndex&&(d.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[d,t.targetSlideIndex,t]),(0,a.useEffect)(()=>{const r=()=>{if(!t?.comment?.content||!u.current)return;const h=u.current;h.textContent="Test";const V=h.offsetHeight*2+2,$=t.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),n=[];let p="";for(let y=0;y<$.length;y++){const k=$[y],D=p?`${p} ${k}`:k;h.textContent=D,h.offsetHeight>V?p?(n.push(p),p=k):(n.push(k),p=""):p=D}p&&n.push(p),h.textContent="",L(n)},c=requestAnimationFrame(()=>{requestAnimationFrame(()=>{r()})}),P=()=>{r()};return window.addEventListener("resize",(0,Y.debounce)(P,500)),()=>{cancelAnimationFrame(c),window.removeEventListener("resize",(0,Y.debounce)(P,500))}},[t?.comment?.content]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(T.Swiper,{ref:l,className:"h-full",onSwiper:S,onTouchEnd:(r,c)=>{r.isBeginning&&r.swipeDirection==="prev"?i():r.isEnd&&r.swipeDirection==="next"&&x()},pagination:{clickable:!0,el:N.current},thumbs:{swiper:R},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((r,c)=>{const P=`${t.tabValue}-${c}`,h=()=>{(0,ae.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${s.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:c+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},G=r?._responsiveSource||r?.image?.url||"";return(0,e.jsx)(T.SwiperSlide,{className:"h-full",children:(0,e.jsx)(le.ExposureDetector,{onExposure:h,exposureKey:P,threshold:.5,duration:2e3,className:"h-full",children:(0,e.jsx)(_.Picture,{source:G,alt:r?.image?.altText,className:(0,C.cn)("h-full",f),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+c)})}),s.availableForSale&&!!g&&!t.index&&(0,e.jsx)(_.Badge,{size:"lg",className:"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,ee.formatPrice)({amount:g,currencyCode:s?.price?.currencyCode,locale:o})} ${w?.off}`}),(0,e.jsx)("div",{className:(0,C.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:i,children:(0,e.jsx)(q,{className:(0,C.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,C.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:x,children:(0,e.jsx)(U,{className:(0,C.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)(T.Swiper,{className:"flex items-center justify-between",onSwiper:v,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[b.Navigation,b.Thumbs],children:t?.galleries?.map((r,c)=>(0,e.jsx)(T.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,e.jsx)(_.Picture,{source:r.image?.url,alt:r.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+c))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(_.Picture,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,e.jsxs)("div",{className:"relative max-w-[528px]",children:[(0,e.jsx)("div",{ref:u,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),(0,e.jsx)(T.Swiper,{modules:[b.Autoplay],loop:E.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:E.length>0?E.map((r,c)=>(0,e.jsx)(T.SwiperSlide,{children:(0,e.jsx)(_.Text,{html:r,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},c+"text-group")):(0,e.jsx)(T.SwiperSlide,{children:(0,e.jsx)(_.Text,{as:"div",html:t?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),(0,e.jsx)("div",{ref:N,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})});H.displayName="ProductGalleryTabImage";const me=t=>{const[l,o]=(0,a.useState)(null),w=(0,a.useCallback)(()=>{l?.isBeginning?t.onPrevTab?.():l?.slidePrev()},[l,t]),s=(0,a.useCallback)(()=>{l?.isEnd?t.onNextTab?.():l?.slideNext()},[l,t]);return(0,a.useEffect)(()=>{l&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(l.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[l,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(T.Swiper,{className:"h-full",onSwiper:o,onTouchEnd:(g,N)=>{g.isBeginning&&g.swipeDirection==="prev"?w():g.isEnd&&g.swipeDirection==="next"&&s()},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((g,N)=>(0,e.jsx)(T.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full object-cover",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:g?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:g?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:g?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+N))}),(0,e.jsx)("div",{className:(0,C.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:w,children:(0,e.jsx)(q,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,C.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:s,children:(0,e.jsx)(U,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ve=t=>(0,e.jsx)("div",{children:"3D View"});var be=(0,te.withLayout)(pe);
+"use strict";var ie=Object.create;var H=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var ce=(e,l)=>{for(var i in l)H(e,i,{get:l[i],enumerable:!0})},O=(e,l,i,w)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of re(l))!se.call(e,s)&&s!==i&&H(e,s,{get:()=>l[s],enumerable:!(w=oe(l,s))||w.enumerable});return e};var de=(e,l,i)=>(i=e!=null?ie(ne(e)):{},O(l||!e||!e.__esModule?H(i,"default",{value:e,enumerable:!0}):i,e)),ue=e=>O(H({},"__esModule",{value:!0}),e);var fe={};ce(fe,{default:()=>ge});module.exports=ue(fe);var t=require("react/jsx-runtime"),W=require("../../../../AiuiProvider/index.js"),_=require("../../../../../components/index.js"),a=require("react"),T=require("swiper/react"),b=require("swiper/modules"),C=require("../../../../../helpers/index.js"),I=require("./types.js"),A=require("@radix-ui/react-tabs"),j=require("../../../BizProductProvider.js"),J=require("../../../hooks/use-variant-media.js"),Q=require("./components/SpecsModal.js"),X=de(require("./components/CompareModal.js")),ee=require("../../../utils/index.js"),te=require("../../../../../shared/Styles.js"),ae=require("../../../../../shared/track.js"),le=require("../../../../../components/index.js"),Y=require("es-toolkit");const q=e=>(0,t.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,t.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,t.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),U=e=>(0,t.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,t.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,t.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),pe=()=>{const{copyWriting:e}=(0,W.useAiuiContext)(),{product:l,variant:i,selectedOptions:w}=(0,j.useBizProductContext)(),s=(0,J.useVariantMedia)({product:l,variant:i}),[y,N]=(0,a.useState)(null),V=(0,a.useRef)(null),f=i?.metafields?.component?.custom_media_list;let d,S,E,L;f&&f?.available?(d=f?.product||[],S=f?.scenarios||[],E=f?.keyFeatures||[],L=f?.video||[]):(d=s?.productList,S=s?.sceneList,E=s?.keyFeaturesList,L=s?.videoList);const u=(0,a.useMemo)(()=>[...d,...S,...L],[d,S,L]),g={productList:d,sceneList:S,keyFeaturesList:E,videoList:L},o=(0,a.useMemo)(()=>{const n=l?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[],p=i?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[];return n?.map(v=>{const k=p?.find(F=>v?.galleries===F?.galleries);let D=g[v?.galleries]||[];if(k?.images&&Array.isArray(k.images)&&k.images.length>0){const F=k.images.map(m=>{const M=[];if(m.image_1920&&m.image_1920.trim()&&M.push(`${m.image_1920}`),m.image_1440&&m.image_1440.trim()&&M.push(`${m.image_1440} 1919`),m.image_1024&&m.image_1024.trim()&&M.push(`${m.image_1024} 1439`),m.image_768&&m.image_768.trim()&&M.push(`${m.image_768} 1023`),m.image_390&&m.image_390.trim()&&M.push(`${m.image_390} 767`),M.length>0){const K=M.join(", ");return{image:{url:K,altText:v.comment?.content||""},_fromImages:!0,_responsiveSource:K}}return null}).filter(m=>m!==null);F.length>0&&(D=F)}return{...v,galleries:D}}).filter(v=>v.galleries.length>0)},[i?.payload,g,l?.payload]),[x,r]=(0,a.useState)(o?.[0]),[c,P]=(0,a.useState)(0),[h,G]=(0,a.useState)(null),R=(0,a.useCallback)(()=>{const n=(c+1)%o.length;P(n),r(o[n]),G(0)},[c,o]),z=(0,a.useCallback)(()=>{const n=c===0?o.length-1:c-1;P(n),r(o[n]);const p=o[n]?.galleries||[];G(p.length-1)},[c,o]);(0,a.useEffect)(()=>{c!=null&&requestAnimationFrame(()=>{V.current?.scrollToTab(c)})},[c]),(0,a.useEffect)(()=>{r(o[0]),P(0)},[i?.id]);const B=(n,p)=>{switch(n?.galleryTabType){case I.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,t.jsx)($,{...n,index:p,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case I.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,t.jsx)($,{...n,index:p,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case I.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,t.jsx)($,{...n,index:p,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case I.GalleryTabType.GALLERY_VIDEO:return(0,t.jsx)(be,{...n,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});default:return null}};return(0,t.jsx)("div",{id:"ipc-product-gallery",children:(0,t.jsxs)(A.Root,{className:"relative",value:x?.tabValue,defaultValue:o?.[0]?.tabValue,children:[(0,t.jsx)("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:o.map((n,p)=>(0,t.jsx)(A.Content,{className:"h-full",value:n.tabValue,children:B(n,p)},n.tabValue))}),(0,t.jsx)(Z,{ref:V,galleryTabs:o,activeGalleryTab:x,setActiveGalleryTab:r,setActiveTabIndex:P,setTargetSlideIndex:G})]})})},Z=(0,a.forwardRef)((e,l)=>{const{galleryTabs:i,activeGalleryTab:w,setActiveGalleryTab:s,setActiveTabIndex:y,setTargetSlideIndex:N}=e,{product:V}=(0,j.useBizProductContext)(),f=(0,a.useRef)(null),d=(0,a.useRef)(new Map),S=(0,a.useCallback)(u=>{if(f.current){const g=f.current,o=u.currentTarget,x=o.offsetLeft-g.offsetWidth/2+o.offsetWidth/2;g.scrollTo({left:x,behavior:"smooth"})}},[]),E=(0,a.useCallback)((u,g,o)=>{s(g),y(o),N(0),S(u)},[s,y,N,S]),L=(0,a.useCallback)(u=>{if(f.current&&i[u]){const g=f.current,o=i[u],x=d.current.get(o.tabValue);if(x){const r=x.offsetLeft-g.offsetWidth/2+x.offsetWidth/2;g.scrollTo({left:r,behavior:"smooth"})}}},[i]);return(0,a.useImperativeHandle)(l,()=>({scrollToTab:L})),(0,t.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,t.jsx)(A.List,{ref:f,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,t.jsx)("div",{className:"whitespace-nowrap",children:i?.map((u,g)=>(0,t.jsx)(A.Trigger,{ref:o=>{o?d.current.set(u.tabValue,o):d.current.delete(u.tabValue)},className:(0,C.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",u.tabValue===w?.tabValue&&"bg-white"),onClick:o=>E(o,u,g),value:u.tabValue,children:u.tabLabel},u.tabValue+g))})}),(0,t.jsx)("div",{className:"desktop:gap-2 desktop:flex hidden",children:V.metafields?.global?.specifications&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(Q.SpecsModal,{})," | ",(0,t.jsx)(X.default,{})]})})]})});Z.displayName="ProductGalleryTab";const $=(0,a.forwardRef)((e,l)=>{const{locale:i="us",copyWriting:w}=(0,W.useAiuiContext)(),{variant:s,totalSavings:y}=(0,j.useBizProductContext)(),N=(0,a.useRef)(null),[V,f]=(0,a.useState)(null),[d,S]=(0,a.useState)(null),[E,L]=(0,a.useState)([]),u=(0,a.useRef)(null),g=(0,a.useMemo)(()=>{if(e?.galleryTabType===I.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";e?.galleryTabType===I.GalleryTabType.GALLERY_IMAGE_FEATURES||(e?.galleryTabType,I.GalleryTabType.GALLERY_IMAGE_SCENE)},[e?.galleryTabType]),o=(0,a.useCallback)(()=>{d?.isBeginning?e.onPrevTab?.():d?.slidePrev()},[d,e]),x=(0,a.useCallback)(()=>{d?.isEnd?e.onNextTab?.():d?.slideNext()},[d,e]);return(0,a.useEffect)(()=>{d&&e.targetSlideIndex&&(d.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[d,e.targetSlideIndex,e]),(0,a.useEffect)(()=>{const r=()=>{if(!e?.comment?.content||!u.current)return;const h=u.current;h.textContent="Test";const R=h.offsetHeight*2+2,B=e.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),n=[];let p="";for(let v=0;v<B.length;v++){const k=B[v],D=p?`${p} ${k}`:k;h.textContent=D,h.offsetHeight>R?p?(n.push(p),p=k):(n.push(k),p=""):p=D}p&&n.push(p),h.textContent="",L(n)},c=requestAnimationFrame(()=>{requestAnimationFrame(()=>{r()})}),P=()=>{r()};return window.addEventListener("resize",(0,Y.debounce)(P,500)),()=>{cancelAnimationFrame(c),window.removeEventListener("resize",(0,Y.debounce)(P,500))}},[e?.comment?.content]),(0,t.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,t.jsx)(T.Swiper,{ref:l,className:"h-full",onSwiper:S,onTouchEnd:(r,c)=>{r.isBeginning&&r.swipeDirection==="prev"?o():r.isEnd&&r.swipeDirection==="next"&&x()},pagination:{clickable:!0,el:N.current},thumbs:{swiper:V},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((r,c)=>{const P=`${e.tabValue}-${c}`,h=()=>{(0,ae.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${s.sku}`,component_type:"image",component_name:e?.tabLabel||"",position:c+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},G=r?._responsiveSource||r?.image?.url||"";return(0,t.jsx)(T.SwiperSlide,{className:"h-full",children:(0,t.jsx)(le.ExposureDetector,{onExposure:h,exposureKey:P,threshold:.5,duration:2e3,className:"h-full",children:(0,t.jsx)(_.Picture,{source:G,alt:r?.image?.altText,className:(0,C.cn)("h-full",g),imgClassName:"object-cover h-full"})})},e?.id+"SwiperSlideItem"+c)})}),s.availableForSale&&!!y&&!e.index&&(0,t.jsx)(_.Badge,{size:"lg",className:"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,ee.formatPrice)({amount:y,currencyCode:s?.price?.currencyCode,locale:i})} ${w?.off}`}),(0,t.jsx)("div",{className:(0,C.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:o,children:(0,t.jsx)(q,{className:(0,C.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,t.jsx)("div",{className:(0,C.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:x,children:(0,t.jsx)(U,{className:(0,C.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,t.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)(T.Swiper,{className:"flex items-center justify-between",onSwiper:f,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[b.Navigation,b.Thumbs],children:e?.galleries?.map((r,c)=>(0,t.jsx)(T.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,t.jsx)(_.Picture,{source:r.image?.url,alt:r.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},e?.id+"SwiperSlideThumbItem"+c))})}),!e?.index&&(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(_.Picture,{source:e?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,t.jsxs)("div",{className:"relative max-w-[528px]",children:[(0,t.jsx)("div",{ref:u,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),(0,t.jsx)(T.Swiper,{modules:[b.Autoplay],loop:E.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:E.length>0?E.map((r,c)=>(0,t.jsx)(T.SwiperSlide,{children:(0,t.jsx)(_.Text,{html:r,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},c+"text-group")):(0,t.jsx)(T.SwiperSlide,{children:(0,t.jsx)(_.Text,{as:"div",html:e?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),(0,t.jsx)("div",{ref:N,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})});$.displayName="ProductGalleryTabImage";const me=({src:e})=>{const l=(0,a.useRef)(null);return(0,a.useEffect)(()=>{const i=l.current;i&&(i.muted=!0,i.play().catch(()=>{}))},[]),(0,t.jsxs)("video",{ref:l,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,controls:!0,className:"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover",children:[(0,t.jsx)("track",{kind:"captions"}),(0,t.jsx)("source",{src:e,type:"video/mp4"}),(0,t.jsx)("source",{src:e,type:"video/webm"}),(0,t.jsx)("source",{src:e,type:"video/ogg"})]})},be=e=>{const[l,i]=(0,a.useState)(null),w=(0,a.useCallback)(()=>{l?.isBeginning?e.onPrevTab?.():l?.slidePrev()},[l,e]),s=(0,a.useCallback)(()=>{l?.isEnd?e.onNextTab?.():l?.slideNext()},[l,e]);return(0,a.useEffect)(()=>{l&&e.targetSlideIndex!==null&&e.targetSlideIndex!==void 0&&(l.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[l,e.targetSlideIndex,e]),(0,t.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,t.jsx)(T.Swiper,{className:"h-full",onSwiper:i,onTouchEnd:(y,N)=>{y.isBeginning&&y.swipeDirection==="prev"?w():y.isEnd&&y.swipeDirection==="next"&&s()},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((y,N)=>(0,t.jsx)(T.SwiperSlide,{className:"h-full bg-info-primary",children:(0,t.jsx)(me,{src:y?.sources?.[0]?.url})},e?.id+"SwiperSlideItem"+N))}),(0,t.jsx)("div",{className:(0,C.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:w,children:(0,t.jsx)(q,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,t.jsx)("div",{className:(0,C.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:s,children:(0,t.jsx)(U,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ye=e=>(0,t.jsx)("div",{children:"3D View"});var ge=(0,te.withLayout)(pe);
 //# sourceMappingURL=index.js.map