@anker-in/headless-ui 1.3.17 → 1.3.18

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 (23) hide show
  1. package/dist/cjs/biz-components/GiftShelf/index.js +1 -1
  2. package/dist/cjs/biz-components/GiftShelf/index.js.map +3 -3
  3. package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
  4. package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +2 -2
  5. package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js +1 -1
  6. package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js.map +2 -2
  7. package/dist/cjs/biz-components/ProductCompare/index.js +1 -1
  8. package/dist/cjs/biz-components/ProductCompare/index.js.map +2 -2
  9. package/dist/cjs/biz-components/Title/index.js +1 -1
  10. package/dist/cjs/biz-components/Title/index.js.map +3 -3
  11. package/dist/esm/biz-components/GiftShelf/index.js +1 -1
  12. package/dist/esm/biz-components/GiftShelf/index.js.map +3 -3
  13. package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
  14. package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +2 -2
  15. package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js +1 -1
  16. package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js.map +2 -2
  17. package/dist/esm/biz-components/ProductCompare/index.js +1 -1
  18. package/dist/esm/biz-components/ProductCompare/index.js.map +2 -2
  19. package/dist/esm/biz-components/Title/index.js +1 -1
  20. package/dist/esm/biz-components/Title/index.js.map +3 -3
  21. package/dist/tokens/base.css +1 -0
  22. package/package.json +1 -1
  23. package/style.css +15 -0
package/dist/cjs/biz-components/GiftShelf/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var st=Object.create;var B=Object.defineProperty;var rt=Object.getOwnPropertyDescriptor;var it=Object.getOwnPropertyNames;var lt=Object.getPrototypeOf,ut=Object.prototype.hasOwnProperty;var ct=(t,e)=>{for(var n in e)B(t,n,{get:e[n],enumerable:!0})},U=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of it(e))!ut.call(t,r)&&r!==n&&B(t,r,{get:()=>e[r],enumerable:!(s=rt(e,r))||s.enumerable});return t};var dt=(t,e,n)=>(n=t!=null?st(lt(t)):{},U(e||!t||!t.__esModule?B(n,"default",{value:t,enumerable:!0}):n,t)),ft=t=>U(B({},"__esModule",{value:!0}),t);var xt={};ct(xt,{default:()=>vt});module.exports=ft(xt);var o=require("react/jsx-runtime"),a=dt(require("react")),p=require("../../helpers/index.js"),u=require("../../components/index.js"),b=require("class-variance-authority"),V=require("swiper/react"),Y=require("../../shared/Styles.js"),Z=require("../Listing/utils/index.js"),tt=require("../AiuiProvider/index.js"),I=require("../Listing/utils/textFormat.js");const pt=(0,b.cva)("desktop:px-6 rounded-card relative min-w-0 overflow-hidden p-4",{variants:{state:{light:"bg-[#EAEAEC]",dark:"bg-[#1E2024]"}},defaultVariants:{state:"light"}}),mt=(0,b.cva)("",{variants:{layout:{vertical:"",horizontal:"desktop:flex desktop:flex-row desktop:items-stretch desktop:gap-10"}},defaultVariants:{layout:"vertical"}}),ht=(0,b.cva)("desktop:max-w-[268px] lg-desktop:max-w-[356px] lg-desktop:h-[171px] relative mx-auto h-[118px] max-w-[256px] ",{variants:{layout:{vertical:"",horizontal:"desktop:flex-1 desktop:h-[122px] lg-desktop:h-[161px]"}},defaultVariants:{layout:"vertical"}}),gt=(0,b.cva)("mt-3",{variants:{layout:{vertical:"",horizontal:"desktop:mt-0 desktop:flex-1 desktop:flex desktop:flex-col desktop:justify-center"}},defaultVariants:{layout:"vertical"}}),wt=(0,b.cva)("mt-4 self-start",{variants:{state:{light:"bg-[#080A0F] text-white",dark:"bg-white text-[#080A0F]"}},defaultVariants:{state:"light"}}),N=(0,b.cva)("",{variants:{state:{light:"text-[#080A0F]",dark:"text-white"}},defaultVariants:{state:"light"}}),q=t=>{if(!t)return;const e=[];return t.lgDesktop?.url&&e.push(`${t.lgDesktop.url} 1920`),t.desktop?.url&&e.push(`${t.desktop.url} 1439`),t.laptop?.url&&e.push(`${t.laptop.url} 1024`),t.tablet?.url&&e.push(`${t.tablet.url} 767`),t.default?.url&&e.push(t.default.url),e.length>0?e.join(", "):void 0},O=t=>t&&(t.default?.alt||t.tablet?.alt||t.laptop?.alt||t.desktop?.alt||t.lgDesktop?.alt)||"",St=t=>{const e=Math.floor(t/3600),n=Math.floor(t%3600/60),s=t%60;return`${e.toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}:${s.toString().padStart(2,"0")}`},j=t=>{if(typeof t=="number")return t;const e=new Date(t).getTime();return isNaN(e)?0:e},H=t=>{if(!t)return!1;const e=j(t.startTime),n=(t.durationDays??1)*24*3600*1e3,s=t.rounds??1,r=Date.now();if(r<e)return!1;const g=r-e,d=Math.floor(g/n)+1;if(d>s)return!1;const m=e+d*n-r,i=5*60*1e3;return m<=i&&m>0},W=(t,e)=>{if(!t||!e)return t||"";const n=j(e.startTime),s=(e.durationDays??1)*24*3600*1e3,r=e.rounds??1,g=Date.now();if(g<n){const w=new Date(n),c=`${(w.getUTCMonth()+1).toString().padStart(2,"0")}${w.getUTCDate().toString().padStart(2,"0")}`;return`${t}${c}`}const d=g-n,S=Math.min(Math.floor(d/s)+1,r),m=n+(S-1)*s,i=new Date(m),h=`${(i.getUTCMonth()+1).toString().padStart(2,"0")}${i.getUTCDate().toString().padStart(2,"0")}`;return`${t}${h}`},J=a.memo(({config:t,theme:e="light",className:n,countdownText:s="Next round start time",lastRoundText:r="Last round",beforeStartText:g="Start time",countdownIcon:d,onStateChange:S})=>{const[m,i]=a.useState(0),[h,w]=a.useState("beforeStart"),c=a.useMemo(()=>j(t.startTime),[t.startTime]),v=t.rounds??1,y=(t.durationDays??1)*24*3600*1e3;a.useEffect(()=>{const M=()=>{const k=Date.now();if(k<c){const $=Math.max(0,Math.floor((c-k)/1e3));i($),w("beforeStart");return}const P=k-c,C=Math.floor(P/y)+1;if(C>v){w("finished");return}const l=c+C*y,G=Math.max(0,Math.floor((l-k)/1e3));i(G),w(C===v?"lastRound":"running")};M();const D=setInterval(M,1e3);return()=>clearInterval(D)},[c,y,v]),a.useEffect(()=>{S?.(h)},[h,S]);const A=a.useMemo(()=>{switch(h){case"beforeStart":return g;case"lastRound":return r;default:return s}},[h,g,r,s]);return h==="finished"?null:(0,o.jsxs)("div",{className:(0,p.cn)("desktop:gap-2 laptop:text-base flex items-center gap-1 text-sm",e==="dark"?"text-white":"text-[#080A0F]",n),children:[d&&(0,o.jsx)(u.Picture,{source:d.url,alt:d.alt,className:"laptop:size-5 size-4 shrink-0",imgClassName:"size-full object-contain"}),(0,o.jsx)(u.Text,{html:A,className:"whitespace-nowrap font-bold"}),(0,o.jsx)("span",{className:"font-bold",children:"|"}),(0,o.jsx)(u.Text,{className:"font-bold",html:St(m)})]})});J.displayName="Countdown";const K=a.memo(({progress:t,theme:e="light",className:n})=>{const s=Math.min(100,Math.max(0,t));return(0,o.jsx)("div",{className:(0,p.cn)("flex h-2 w-full items-stretch overflow-hidden rounded-full",e==="dark"?"bg-white/20":"bg-black/20",n),role:"progressbar","aria-valuenow":s,"aria-valuemin":0,"aria-valuemax":100,children:(0,o.jsx)("div",{className:(0,p.cn)("h-full rounded-full transition-all duration-300",e==="dark"?"bg-white":"bg-[#080A0F]"),style:{width:`${s}%`}})})});K.displayName="ProgressBar";const Q=a.memo(({item:t,theme:e="light",layout:n="vertical",className:s,buttonClassName:r,countdownClassName:g,onButtonClick:d,onProductImageClick:S,buildData:m,buttonText:i,remainText:h,lowStockText:w,soldOutButtonText:c,discountText:v="Only {price}",countdownText:y,countdownIcon:A,lastRoundText:M,beforeStartText:D,comingSoonButtonText:k,loading:P})=>{const{locale:C="us"}=(0,tt.useAiuiContext)(),l=t.products?.[0],[G,$]=a.useState(()=>H(t.countdown)),[F,et]=a.useState(()=>W(t.codePrefix,t.countdown)),[z,ot]=a.useState("beforeStart");a.useEffect(()=>{const x=()=>{$(H(t.countdown));const _=W(t.codePrefix,t.countdown);et(L=>L!==_?_:L)};x();const E=setInterval(x,1e3);return()=>clearInterval(E)},[t.codePrefix,t.countdown]);const nt=a.useCallback(x=>{ot(x)},[]),R=a.useMemo(()=>!l?.handle||!m?.products?.length?null:m.products.find(x=>x.handle===l.handle)||null,[l?.handle,m?.products]),f=a.useMemo(()=>R?.variants?.find(x=>x?.sku===l?.sku)||{},[l?.sku,R?.variants]),T=a.useMemo(()=>{const{price:x,basePrice:E}=(0,Z.formatVariantPrice)({locale:C||"us",baseAmount:f?.price?.amount,amount:l?.custom_price??f?.price?.amount,currencyCode:R?.price?.currencyCode||"USD"});return{value:E,description:l?.custom_description,salePrice:(0,I.replaceTemplate)(v||"",{price:x})}},[R,f,C,v,l?.custom_price,l?.custom_description]),at=a.useCallback(()=>{d?.({product:l,code:F})},[d,F,l]);return(0,o.jsxs)("div",{className:(0,p.cn)(pt({state:e}),s),"data-ui-component-id":"GiftShelfCard",children:[t.countdown&&(0,o.jsx)("div",{className:"laptop:h-[24px] mb-4 h-[20px]",children:(0,o.jsx)(J,{config:t.countdown,theme:e,className:g,countdownText:y,lastRoundText:M,beforeStartText:D,countdownIcon:A,onStateChange:nt})}),(0,o.jsxs)("div",{className:mt({layout:n}),children:[(0,o.jsxs)("div",{className:ht({layout:n}),children:[t.backgroundImage&&(S?(0,o.jsx)("a",{onClick:()=>l&&S(l),className:"cursor-pointer",children:(0,o.jsx)(u.Picture,{source:q(t.backgroundImage),alt:O(t.backgroundImage),className:"rounded-card size-full overflow-hidden object-cover",imgClassName:"h-full w-full object-cover"})}):(0,o.jsx)(u.Picture,{source:q(t.backgroundImage),alt:O(t.backgroundImage),className:"rounded-card size-full overflow-hidden object-cover",imgClassName:"h-full w-full object-cover"})),(0,o.jsx)("div",{className:"absolute top-1/2 z-10 w-full -translate-y-1/2 px-6",children:(0,o.jsxs)("div",{className:"flex flex-col gap-1",children:[T.value&&(0,o.jsx)(u.Heading,{html:T.value,size:4,className:(0,p.cn)("font-bold leading-none",N({state:e}))}),T.description&&(0,o.jsx)(u.Text,{html:T.description,className:(0,p.cn)("text-base font-bold opacity-60",N({state:e}))})]})})]}),(0,o.jsxs)("div",{className:gt({layout:n}),children:[T.salePrice&&(0,o.jsx)(u.Text,{as:"p",html:T.salePrice,className:(0,p.cn)("lg-desktop:text-2xl text-xl font-bold",N({state:e}))}),(0,o.jsx)(K,{progress:l?.custom_inventory?(f?.quantityAvailable||0)/l.custom_inventory*100:0,theme:e,className:(0,p.cn)("mb-1 mt-2",f?.availableForSale&&(f?.quantityAvailable??0)<=0&&"invisible")}),h&&(f?.quantityAvailable??0)>=0&&(0,o.jsx)(u.Text,{html:(0,I.replaceTemplate)(h,{inventory:l?.custom_inventory?.toString()||"",quantity:f?.quantityAvailable?.toString()||"0"}),as:"p",className:(0,p.cn)("laptop:text-base text-sm font-bold",N({state:e}))}),w&&f?.availableForSale&&(f?.quantityAvailable??0)<0&&(0,o.jsx)(u.Text,{html:w,as:"p",className:(0,p.cn)("laptop:text-base text-sm font-bold text-red-500",N({state:e}))}),(0,o.jsx)(u.Button,{size:"lg",className:(0,p.cn)(wt({state:e}),r),onClick:at,disabled:!f?.availableForSale||P||G||z==="beforeStart"||z==="finished",loading:P&&f?.availableForSale,children:z==="beforeStart"?k||i:f?.availableForSale?i:c||i})]})]})]})});Q.displayName="GiftShelfCard";const X=a.forwardRef(({classNames:t={},data:e,onButtonClick:n,onProductImageClick:s,buildData:r,loading:g,...d},S)=>{const m=e.theme||"light",i=a.useMemo(()=>e?.items?.length||4,[e?.items]),h=i===2?"horizontal":"vertical",w=a.useMemo(()=>{const c=v=>{switch(v){case"mobile":return{slidesPerView:1.2,spaceBetween:12};case"tablet":return i<=2?{slidesPerView:2,spaceBetween:12}:{slidesPerView:2.5,spaceBetween:12};case"laptop":return i<=3?{slidesPerView:i,spaceBetween:16}:{slidesPerView:3.01,spaceBetween:16};case"desktop":return{slidesPerView:Math.min(i,4),spaceBetween:20}}};return{0:c("mobile"),768:c("tablet"),1025:c("laptop"),1440:c("desktop")}},[i]);return(0,o.jsx)(u.Container,{ref:S,className:(0,p.cn)(t?.root),childClassName:"overflow-hidden","data-ui-component-id":"GiftShelf",...d,children:(0,o.jsx)(V.Swiper,{breakpoints:w,className:"w-full !overflow-visible",children:e.items.map((c,v)=>(0,o.jsx)(V.SwiperSlide,{children:(0,o.jsx)(Q,{item:c,theme:m,layout:h,className:t?.card,buttonClassName:t?.button,countdownClassName:t?.countdown,onButtonClick:n,onProductImageClick:s,buildData:r,buttonText:e.buttonText,discountText:e.discountText,remainText:e.remainText,lowStockText:e.lowStockText,soldOutButtonText:e.soldOutButtonText,countdownText:e.countdownText,lastRoundText:e.lastRoundText,countdownIcon:e?.countdownIcon,beforeStartText:e.beforeStartText,comingSoonButtonText:e.comingSoonButtonText,loading:g})},"giftShelfCardItem"+v))})})});X.displayName="GiftShelf";var vt=(0,Y.withLayout)(X);
1
+ "use strict";"use client";var rt=Object.create;var B=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var lt=Object.getOwnPropertyNames;var ut=Object.getPrototypeOf,ct=Object.prototype.hasOwnProperty;var dt=(t,e)=>{for(var n in e)B(t,n,{get:e[n],enumerable:!0})},U=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of lt(e))!ct.call(t,r)&&r!==n&&B(t,r,{get:()=>e[r],enumerable:!(s=it(e,r))||s.enumerable});return t};var ft=(t,e,n)=>(n=t!=null?rt(ut(t)):{},U(e||!t||!t.__esModule?B(n,"default",{value:t,enumerable:!0}):n,t)),pt=t=>U(B({},"__esModule",{value:!0}),t);var bt={};dt(bt,{default:()=>xt});module.exports=pt(bt);var o=require("react/jsx-runtime"),a=ft(require("react")),p=require("../../helpers/index.js"),u=require("../../components/index.js"),b=require("class-variance-authority"),V=require("swiper/react"),Y=require("../../shared/Styles.js"),Z=require("../Listing/utils/index.js"),tt=require("../AiuiProvider/index.js"),I=require("../Listing/utils/textFormat.js");const mt=(0,b.cva)("desktop:px-6 rounded-card relative min-w-0 overflow-hidden p-4",{variants:{state:{light:"bg-[#EAEAEC]",dark:"bg-[#1E2024]"}},defaultVariants:{state:"light"}}),ht=(0,b.cva)("",{variants:{layout:{vertical:"",horizontal:"desktop:flex desktop:flex-row desktop:items-stretch desktop:gap-10"}},defaultVariants:{layout:"vertical"}}),gt=(0,b.cva)("desktop:max-w-[268px] lg-desktop:max-w-[356px] lg-desktop:h-[171px] relative mx-auto h-[118px] max-w-[256px] ",{variants:{layout:{vertical:"",horizontal:"desktop:flex-1 desktop:h-[122px] lg-desktop:h-[161px]"}},defaultVariants:{layout:"vertical"}}),wt=(0,b.cva)("mt-3",{variants:{layout:{vertical:"",horizontal:"desktop:mt-0 desktop:flex-1 desktop:flex desktop:flex-col desktop:justify-center"}},defaultVariants:{layout:"vertical"}}),St=(0,b.cva)("mt-4 self-start",{variants:{state:{light:"bg-[#080A0F] text-white",dark:"bg-white text-[#080A0F]"}},defaultVariants:{state:"light"}}),N=(0,b.cva)("",{variants:{state:{light:"text-[#080A0F]",dark:"text-white"}},defaultVariants:{state:"light"}}),q=t=>{if(!t)return;const e=[];return t.lgDesktop?.url&&e.push(`${t.lgDesktop.url} 1920`),t.desktop?.url&&e.push(`${t.desktop.url} 1439`),t.laptop?.url&&e.push(`${t.laptop.url} 1024`),t.tablet?.url&&e.push(`${t.tablet.url} 767`),t.default?.url&&e.push(t.default.url),e.length>0?e.join(", "):void 0},O=t=>t&&(t.default?.alt||t.tablet?.alt||t.laptop?.alt||t.desktop?.alt||t.lgDesktop?.alt)||"",vt=t=>{const e=Math.floor(t/3600),n=Math.floor(t%3600/60),s=t%60;return`${e.toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}:${s.toString().padStart(2,"0")}`},j=t=>{if(typeof t=="number")return t;const e=new Date(t).getTime();return isNaN(e)?0:e},H=t=>{if(!t)return!1;const e=j(t.startTime),n=(t.durationDays??1)*24*3600*1e3,s=t.rounds??1,r=Date.now();if(r<e)return!1;const g=r-e,d=Math.floor(g/n)+1;if(d>s)return!1;const m=e+d*n-r,i=5*60*1e3;return m<=i&&m>0},W=(t,e)=>{if(!t||!e)return t||"";const n=j(e.startTime),s=(e.durationDays??1)*24*3600*1e3,r=e.rounds??1,g=Date.now();if(g<n){const w=new Date(n),c=`${(w.getUTCMonth()+1).toString().padStart(2,"0")}${w.getUTCDate().toString().padStart(2,"0")}`;return`${t}${c}`}const d=g-n,S=Math.min(Math.floor(d/s)+1,r),m=n+(S-1)*s,i=new Date(m),h=`${(i.getUTCMonth()+1).toString().padStart(2,"0")}${i.getUTCDate().toString().padStart(2,"0")}`;return`${t}${h}`},J=a.memo(({config:t,theme:e="light",className:n,countdownText:s="Next round start time",lastRoundText:r="Last round",beforeStartText:g="Start time",countdownIcon:d,onStateChange:S})=>{const[m,i]=a.useState(0),[h,w]=a.useState("beforeStart"),c=a.useMemo(()=>j(t.startTime),[t.startTime]),v=t.rounds??1,y=(t.durationDays??1)*24*3600*1e3;a.useEffect(()=>{const M=()=>{const k=Date.now();if(k<c){const $=Math.max(0,Math.floor((c-k)/1e3));i($),w("beforeStart");return}const P=k-c,C=Math.floor(P/y)+1;if(C>v){w("finished");return}const G=c+C*y,l=Math.max(0,Math.floor((G-k)/1e3));i(l),w(C===v?"lastRound":"running")};M();const D=setInterval(M,1e3);return()=>clearInterval(D)},[c,y,v]),a.useEffect(()=>{S?.(h)},[h,S]);const A=a.useMemo(()=>{switch(h){case"beforeStart":return g;case"lastRound":return r;default:return s}},[h,g,r,s]);return h==="finished"?null:(0,o.jsxs)("div",{className:(0,p.cn)("desktop:gap-2 laptop:text-base flex items-center gap-1 text-sm",e==="dark"?"text-white":"text-[#080A0F]",n),children:[d&&(0,o.jsx)(u.Picture,{source:d.url,alt:d.alt,className:"laptop:size-5 size-4 shrink-0",imgClassName:"size-full object-contain"}),(0,o.jsx)(u.Text,{html:A,className:"whitespace-nowrap font-bold"}),(0,o.jsx)("span",{className:"font-bold",children:"|"}),(0,o.jsx)(u.Text,{className:"font-bold",html:vt(m)})]})});J.displayName="Countdown";const K=a.memo(({progress:t,theme:e="light",className:n})=>{const s=Math.min(100,Math.max(0,t));return(0,o.jsx)("div",{className:(0,p.cn)("flex h-2 w-full items-stretch overflow-hidden rounded-full",e==="dark"?"bg-white/20":"bg-black/20",n),role:"progressbar","aria-valuenow":s,"aria-valuemin":0,"aria-valuemax":100,children:(0,o.jsx)("div",{className:(0,p.cn)("h-full rounded-full transition-all duration-300",e==="dark"?"bg-white":"bg-[#080A0F]"),style:{width:`${s}%`}})})});K.displayName="ProgressBar";const Q=a.memo(({item:t,theme:e="light",layout:n="vertical",className:s,buttonClassName:r,countdownClassName:g,onButtonClick:d,onProductImageClick:S,buildData:m,buttonText:i,remainText:h,lowStockText:w,soldOutButtonText:c,discountText:v="Only {price}",countdownText:y,countdownIcon:A,lastRoundText:M,beforeStartText:D,comingSoonButtonText:k,loading:P})=>{const{locale:C="us",currencyCode:G}=(0,tt.useAiuiContext)(),l=t.products?.[0],[$,et]=a.useState(()=>H(t.countdown)),[F,ot]=a.useState(()=>W(t.codePrefix,t.countdown)),[z,nt]=a.useState("beforeStart");a.useEffect(()=>{const x=()=>{et(H(t.countdown));const _=W(t.codePrefix,t.countdown);ot(L=>L!==_?_:L)};x();const E=setInterval(x,1e3);return()=>clearInterval(E)},[t.codePrefix,t.countdown]);const at=a.useCallback(x=>{nt(x)},[]),R=a.useMemo(()=>!l?.handle||!m?.products?.length?null:m.products.find(x=>x.handle===l.handle)||null,[l?.handle,m?.products]),f=a.useMemo(()=>R?.variants?.find(x=>x?.sku===l?.sku)||{},[l?.sku,R?.variants]),T=a.useMemo(()=>{const{price:x,basePrice:E}=(0,Z.formatVariantPrice)({locale:G==="CAD"?"us":C||"us",baseAmount:f?.price?.amount,amount:l?.custom_price??f?.price?.amount,currencyCode:R?.price?.currencyCode||"USD"});return{value:E,description:l?.custom_description,salePrice:(0,I.replaceTemplate)(v||"",{price:x})}},[R,f,C,v,l?.custom_price,l?.custom_description]),st=a.useCallback(()=>{d?.({product:l,code:F})},[d,F,l]);return(0,o.jsxs)("div",{className:(0,p.cn)(mt({state:e}),s),"data-ui-component-id":"GiftShelfCard",children:[t.countdown&&(0,o.jsx)("div",{className:"laptop:h-[24px] mb-4 h-[20px]",children:(0,o.jsx)(J,{config:t.countdown,theme:e,className:g,countdownText:y,lastRoundText:M,beforeStartText:D,countdownIcon:A,onStateChange:at})}),(0,o.jsxs)("div",{className:ht({layout:n}),children:[(0,o.jsxs)("div",{className:gt({layout:n}),children:[t.backgroundImage&&(S?(0,o.jsx)("a",{onClick:()=>l&&S(l),className:"cursor-pointer",children:(0,o.jsx)(u.Picture,{source:q(t.backgroundImage),alt:O(t.backgroundImage),className:"rounded-card size-full overflow-hidden object-cover",imgClassName:"h-full w-full object-cover"})}):(0,o.jsx)(u.Picture,{source:q(t.backgroundImage),alt:O(t.backgroundImage),className:"rounded-card size-full overflow-hidden object-cover",imgClassName:"h-full w-full object-cover"})),(0,o.jsx)("div",{className:"absolute top-1/2 z-10 w-full -translate-y-1/2 px-6",children:(0,o.jsxs)("div",{className:"flex flex-col gap-1",children:[T.value&&(0,o.jsx)(u.Heading,{html:T.value,size:4,className:(0,p.cn)("font-bold leading-none",N({state:e}))}),T.description&&(0,o.jsx)(u.Text,{html:T.description,className:(0,p.cn)("text-base font-bold opacity-60",N({state:e}))})]})})]}),(0,o.jsxs)("div",{className:wt({layout:n}),children:[T.salePrice&&(0,o.jsx)(u.Text,{as:"p",html:T.salePrice,className:(0,p.cn)("lg-desktop:text-2xl text-xl font-bold",N({state:e}))}),(0,o.jsx)(K,{progress:l?.custom_inventory?(f?.quantityAvailable||0)/l.custom_inventory*100:0,theme:e,className:(0,p.cn)("mb-1 mt-2",f?.availableForSale&&(f?.quantityAvailable??0)<=0&&"invisible")}),h&&(f?.quantityAvailable??0)>=0&&(0,o.jsx)(u.Text,{html:(0,I.replaceTemplate)(h,{inventory:l?.custom_inventory?.toString()||"",quantity:f?.quantityAvailable?.toString()||"0"}),as:"p",className:(0,p.cn)("laptop:text-base text-sm font-bold",N({state:e}))}),w&&f?.availableForSale&&(f?.quantityAvailable??0)<0&&(0,o.jsx)(u.Text,{html:w,as:"p",className:(0,p.cn)("laptop:text-base text-sm font-bold text-red-500",N({state:e}))}),(0,o.jsx)(u.Button,{size:"lg",className:(0,p.cn)(St({state:e}),r),onClick:st,disabled:!f?.availableForSale||P||$||z==="beforeStart"||z==="finished",loading:P&&f?.availableForSale,children:z==="beforeStart"?k||i:f?.availableForSale?i:c||i})]})]})]})});Q.displayName="GiftShelfCard";const X=a.forwardRef(({classNames:t={},data:e,onButtonClick:n,onProductImageClick:s,buildData:r,loading:g,...d},S)=>{const m=e.theme||"light",i=a.useMemo(()=>e?.items?.length||4,[e?.items]),h=i===2?"horizontal":"vertical",w=a.useMemo(()=>{const c=v=>{switch(v){case"mobile":return{slidesPerView:1.2,spaceBetween:12};case"tablet":return i<=2?{slidesPerView:2,spaceBetween:12}:{slidesPerView:2.5,spaceBetween:12};case"laptop":return i<=3?{slidesPerView:i,spaceBetween:16}:{slidesPerView:3.01,spaceBetween:16};case"desktop":return{slidesPerView:Math.min(i,4),spaceBetween:20}}};return{0:c("mobile"),768:c("tablet"),1025:c("laptop"),1440:c("desktop")}},[i]);return(0,o.jsx)(u.Container,{ref:S,className:(0,p.cn)(t?.root),childClassName:"overflow-hidden","data-ui-component-id":"GiftShelf",...d,children:(0,o.jsx)(V.Swiper,{breakpoints:w,className:"w-full !overflow-visible",children:e.items.map((c,v)=>(0,o.jsx)(V.SwiperSlide,{children:(0,o.jsx)(Q,{item:c,theme:m,layout:h,className:t?.card,buttonClassName:t?.button,countdownClassName:t?.countdown,onButtonClick:n,onProductImageClick:s,buildData:r,buttonText:e.buttonText,discountText:e.discountText,remainText:e.remainText,lowStockText:e.lowStockText,soldOutButtonText:e.soldOutButtonText,countdownText:e.countdownText,lastRoundText:e.lastRoundText,countdownIcon:e?.countdownIcon,beforeStartText:e.beforeStartText,comingSoonButtonText:e.comingSoonButtonText,loading:g})},"giftShelfCardItem"+v))})})});X.displayName="GiftShelf";var xt=(0,Y.withLayout)(X);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/GiftShelf/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/GiftShelf/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Button, Container, Heading } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { GiftShelfProps, GiftShelfItem, CountdownConfig, ResponsiveBackgroundImage } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Product, ProductVariant } from '../Listing/types/product.js'\nimport { formatVariantPrice } from '../Listing/utils/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { replaceTemplate } from '../Listing/utils/textFormat.js'\nimport type { GiftShelfProduct } from './types.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * Card style variants for gift shelf\n */\nconst giftCardVariants = cva('desktop:px-6 rounded-card relative min-w-0 overflow-hidden p-4', {\n variants: {\n state: {\n light: 'bg-[#EAEAEC]',\n dark: 'bg-[#1E2024]',\n },\n },\n defaultVariants: {\n state: 'light',\n },\n})\n\n/**\n * Content layout variants - \u63A7\u5236 Background image \u548C Bottom info area \u7684\u5E03\u5C40\n * horizontal \u5E03\u5C40\u4EC5\u5728 desktop (\u22651440px) \u65AD\u70B9\u751F\u6548\n */\nconst contentLayoutVariants = cva('', {\n variants: {\n layout: {\n vertical: '',\n horizontal: 'desktop:flex desktop:flex-row desktop:items-stretch desktop:gap-10',\n },\n },\n defaultVariants: {\n layout: 'vertical',\n },\n})\n\n/**\n * Image area variants\n * horizontal \u5E03\u5C40\u4EC5\u5728 desktop (\u22651440px) \u65AD\u70B9\u751F\u6548\n */\nconst imageAreaVariants = cva(\n 'desktop:max-w-[268px] lg-desktop:max-w-[356px] lg-desktop:h-[171px] relative mx-auto h-[118px] max-w-[256px] ',\n {\n variants: {\n layout: {\n vertical: '',\n horizontal: 'desktop:flex-1 desktop:h-[122px] lg-desktop:h-[161px]',\n },\n },\n defaultVariants: {\n layout: 'vertical',\n },\n }\n)\n\n/**\n * Info area variants\n * horizontal \u5E03\u5C40\u4EC5\u5728 desktop (\u22651440px) \u65AD\u70B9\u751F\u6548\n */\nconst infoAreaVariants = cva('mt-3', {\n variants: {\n layout: {\n vertical: '',\n horizontal: 'desktop:mt-0 desktop:flex-1 desktop:flex desktop:flex-col desktop:justify-center',\n },\n },\n defaultVariants: {\n layout: 'vertical',\n },\n})\n\n/**\n * Button style variants\n */\nconst buttonVariants = cva('mt-4 self-start', {\n variants: {\n state: {\n light: 'bg-[#080A0F] text-white',\n dark: 'bg-white text-[#080A0F]',\n },\n },\n defaultVariants: {\n state: 'light',\n },\n})\n\n/**\n * Text style variants\n */\nconst textVariants = cva('', {\n variants: {\n state: {\n light: 'text-[#080A0F]',\n dark: 'text-white',\n },\n },\n defaultVariants: {\n state: 'light',\n },\n})\n\n/**\n * Convert ResponsiveBackgroundImage to Picture source string\n * Format: \"url1 1920, url2 1439, url3 1024, url4 767, url5\"\n */\nconst getResponsiveSource = (bgImage?: ResponsiveBackgroundImage): string | undefined => {\n if (!bgImage) return undefined\n\n const sources: string[] = []\n\n // lg-desktop: \u22651920px\n if (bgImage.lgDesktop?.url) {\n sources.push(`${bgImage.lgDesktop.url} 1920`)\n }\n // desktop: \u22651440px\n if (bgImage.desktop?.url) {\n sources.push(`${bgImage.desktop.url} 1439`)\n }\n // laptop: \u22651025px\n if (bgImage.laptop?.url) {\n sources.push(`${bgImage.laptop.url} 1024`)\n }\n // tablet: \u2265768px\n if (bgImage.tablet?.url) {\n sources.push(`${bgImage.tablet.url} 767`)\n }\n // default (mobile): <768px\n if (bgImage.default?.url) {\n sources.push(bgImage.default.url)\n }\n\n return sources.length > 0 ? sources.join(', ') : undefined\n}\n\n/**\n * Get alt text from ResponsiveBackgroundImage\n */\nconst getBackgroundAlt = (bgImage?: ResponsiveBackgroundImage): string => {\n if (!bgImage) return ''\n return (\n bgImage.default?.alt ||\n bgImage.tablet?.alt ||\n bgImage.laptop?.alt ||\n bgImage.desktop?.alt ||\n bgImage.lgDesktop?.alt ||\n ''\n )\n}\n\n/**\n * Format countdown time\n */\nconst formatTime = (seconds: number) => {\n const hours = Math.floor(seconds / 3600)\n const minutes = Math.floor((seconds % 3600) / 60)\n const secs = seconds % 60\n return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`\n}\n\n/**\n * \u89E3\u6790\u5F00\u59CB\u65F6\u95F4\uFF0C\u652F\u6301 ISO 8601 \u5B57\u7B26\u4E32\u6216\u65F6\u95F4\u6233\n */\nconst parseStartTime = (startTime: string | number): number => {\n if (typeof startTime === 'number') {\n return startTime\n }\n // \u89E3\u6790 ISO 8601 \u5B57\u7B26\u4E32\n const parsed = new Date(startTime).getTime()\n return isNaN(parsed) ? 0 : parsed\n}\n\n/**\n * \u8BA1\u7B97\u5F53\u524D\u662F\u5426\u5904\u4E8E\u8F6E\u6B21\u5207\u6362\u671F\uFF08\u4E0B\u4E00\u8F6E\u5F00\u59CB\u524D5\u5206\u949F\uFF09\n * @param countdown \u5012\u8BA1\u65F6\u914D\u7F6E\n * @returns \u662F\u5426\u5904\u4E8E\u5207\u6362\u671F\n */\nconst isInTransitionPeriod = (countdown?: CountdownConfig): boolean => {\n if (!countdown) return false\n const startTimeMs = parseStartTime(countdown.startTime)\n const durationMs = (countdown.durationDays ?? 1) * 24 * 3600 * 1000\n const rounds = countdown.rounds ?? 1\n const now = Date.now()\n\n // \u672A\u5230\u5F00\u59CB\u65F6\u95F4\n if (now < startTimeMs) return false\n\n // \u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\n const elapsed = now - startTimeMs\n const currentRound = Math.floor(elapsed / durationMs) + 1\n\n // \u6240\u6709\u8F6E\u6B21\u5DF2\u7ED3\u675F\n if (currentRound > rounds) return false\n\n // \u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\u7684\u7ED3\u675F\u65F6\u95F4\n const currentRoundEndTime = startTimeMs + currentRound * durationMs\n\n // \u8DDD\u79BB\u5F53\u524D\u8F6E\u6B21\u7ED3\u675F\u7684\u65F6\u95F4\n const timeUntilRoundEnd = currentRoundEndTime - now\n\n // \u5982\u679C\u8DDD\u79BB\u7ED3\u675F\u4E0D\u52305\u5206\u949F\uFF0C\u5904\u4E8E\u5207\u6362\u671F\n const TRANSITION_PERIOD_MS = 5 * 60 * 1000 // 5\u5206\u949F\n return timeUntilRoundEnd <= TRANSITION_PERIOD_MS && timeUntilRoundEnd > 0\n}\n\n/**\n * \u6839\u636E\u5012\u8BA1\u65F6\u914D\u7F6E\u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\u7684 Code\n * @param codePrefix Code \u524D\u7F00\n * @param countdown \u5012\u8BA1\u65F6\u914D\u7F6E\n * @returns \u5B8C\u6574\u7684 Code\uFF08\u524D\u7F00 + MMDD \u540E\u7F00\uFF09\n * @description \u7EDF\u4E00\u4F7F\u7528 UTC \u65F6\u95F4\u8BA1\u7B97\uFF0C\u786E\u4FDD\u5168\u7403\u4EFB\u4F55\u65F6\u533A\u5F97\u5230\u76F8\u540C\u7684 code\n */\nconst getCodeWithSuffix = (codePrefix?: string, countdown?: CountdownConfig): string => {\n if (!codePrefix || !countdown) return codePrefix || ''\n\n const startTimeMs = parseStartTime(countdown.startTime)\n const durationMs = (countdown.durationDays ?? 1) * 24 * 3600 * 1000\n const rounds = countdown.rounds ?? 1\n const now = Date.now()\n\n // \u672A\u5230\u5F00\u59CB\u65F6\u95F4\uFF0C\u4F7F\u7528\u7B2C\u4E00\u8F6E\u7684\u65E5\u671F\uFF08UTC \u65F6\u95F4\uFF09\n if (now < startTimeMs) {\n const date = new Date(startTimeMs)\n const suffix = `${(date.getUTCMonth() + 1).toString().padStart(2, '0')}${date.getUTCDate().toString().padStart(2, '0')}`\n return `${codePrefix}${suffix}`\n }\n\n // \u8BA1\u7B97\u5F53\u524D\u5904\u4E8E\u7B2C\u51E0\u8F6E\uFF08\u4ECE 1 \u5F00\u59CB\uFF09\n const elapsed = now - startTimeMs\n const currentRound = Math.min(Math.floor(elapsed / durationMs) + 1, rounds)\n\n // \u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\u7684\u5F00\u59CB\u65E5\u671F\n const currentRoundStartMs = startTimeMs + (currentRound - 1) * durationMs\n const date = new Date(currentRoundStartMs)\n\n // \u683C\u5F0F\u5316\u4E3A MMDD\uFF08\u4F7F\u7528 UTC \u65F6\u95F4\uFF09\n const suffix = `${(date.getUTCMonth() + 1).toString().padStart(2, '0')}${date.getUTCDate().toString().padStart(2, '0')}`\n\n return `${codePrefix}${suffix}`\n}\n\n/**\n * \u5012\u8BA1\u65F6\u72B6\u6001\u7C7B\u578B\n */\ntype CountdownState = 'beforeStart' | 'running' | 'lastRound' | 'finished'\n\n/**\n * Countdown Component\n * \u652F\u6301\u591A\u8F6E\u5012\u8BA1\u65F6\uFF0C\u663E\u793A\u4E0D\u540C\u72B6\u6001\u7684\u6807\u7B7E\n */\nconst Countdown = React.memo(\n ({\n config,\n theme = 'light',\n className,\n countdownText = 'Next round start time',\n lastRoundText = 'Last round',\n beforeStartText = 'Start time',\n countdownIcon,\n onStateChange,\n }: {\n config: CountdownConfig\n theme?: 'light' | 'dark'\n className?: string\n countdownText?: string\n lastRoundText?: string\n beforeStartText?: string\n countdownIcon?: Media\n onStateChange?: (state: CountdownState) => void\n }) => {\n const [timeLeft, setTimeLeft] = React.useState(0)\n const [countdownState, setCountdownState] = React.useState<CountdownState>('beforeStart')\n\n // \u89E3\u6790\u5F00\u59CB\u65F6\u95F4\u4E3A\u65F6\u95F4\u6233\n const startTimeMs = React.useMemo(() => parseStartTime(config.startTime), [config.startTime])\n\n const rounds = config.rounds ?? 1\n // \u9ED8\u8BA4 1 \u5929\uFF0C\u8F6C\u6362\u4E3A\u6BEB\u79D2 (1\u5929 = 24\u5C0F\u65F6 = 86400\u79D2 = 86400000\u6BEB\u79D2)\n const durationMs = (config.durationDays ?? 1) * 24 * 3600 * 1000\n\n React.useEffect(() => {\n const calculateCountdown = () => {\n const now = Date.now()\n\n // \u672A\u5230\u5F00\u59CB\u65F6\u95F4\uFF0C\u663E\u793A\u5F00\u59CB\u524D\u5012\u8BA1\u65F6\n if (now < startTimeMs) {\n const diff = Math.max(0, Math.floor((startTimeMs - now) / 1000))\n setTimeLeft(diff)\n setCountdownState('beforeStart')\n return\n }\n\n // \u8BA1\u7B97\u5DF2\u7ECF\u8FC7\u53BB\u7684\u65F6\u95F4\n const elapsed = now - startTimeMs\n // \u8BA1\u7B97\u5F53\u524D\u5904\u4E8E\u7B2C\u51E0\u8F6E\uFF08\u4ECE 1 \u5F00\u59CB\uFF09\n const currentRound = Math.floor(elapsed / durationMs) + 1\n\n // \u6240\u6709\u8F6E\u6B21\u5DF2\u7ED3\u675F\n if (currentRound > rounds) {\n setCountdownState('finished')\n return\n }\n\n // \u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\u7684\u76EE\u6807\u65F6\u95F4\n const currentRoundTargetTime = startTimeMs + currentRound * durationMs\n // \u8BA1\u7B97\u5269\u4F59\u79D2\u6570\n const diff = Math.max(0, Math.floor((currentRoundTargetTime - now) / 1000))\n\n setTimeLeft(diff)\n // \u5224\u65AD\u662F\u5426\u662F\u6700\u540E\u4E00\u8F6E\n setCountdownState(currentRound === rounds ? 'lastRound' : 'running')\n }\n\n calculateCountdown()\n const timer = setInterval(calculateCountdown, 1000)\n\n return () => clearInterval(timer)\n }, [startTimeMs, durationMs, rounds])\n\n // \u901A\u77E5\u7236\u7EC4\u4EF6\u72B6\u6001\u53D8\u5316\n React.useEffect(() => {\n onStateChange?.(countdownState)\n }, [countdownState, onStateChange])\n\n // \u6839\u636E\u72B6\u6001\u83B7\u53D6\u663E\u793A\u7684\u6807\u7B7E\u6587\u672C\n const labelText = React.useMemo(() => {\n switch (countdownState) {\n case 'beforeStart':\n return beforeStartText\n case 'lastRound':\n return lastRoundText\n default:\n return countdownText\n }\n }, [countdownState, beforeStartText, lastRoundText, countdownText])\n\n // \u6240\u6709\u8F6E\u6B21\u5DF2\u7ED3\u675F\uFF0C\u4E0D\u6E32\u67D3\n if (countdownState === 'finished') {\n return null\n }\n\n return (\n <div\n className={cn(\n 'desktop:gap-2 laptop:text-base flex items-center gap-1 text-sm',\n theme === 'dark' ? 'text-white' : 'text-[#080A0F]',\n className\n )}\n >\n {countdownIcon && (\n <Picture\n source={countdownIcon.url}\n alt={countdownIcon.alt}\n className=\"laptop:size-5 size-4 shrink-0\"\n imgClassName=\"size-full object-contain\"\n />\n )}\n <Text html={labelText} className=\"whitespace-nowrap font-bold\" />\n <span className=\"font-bold\">|</span>\n <Text className=\"font-bold\" html={formatTime(timeLeft)} />\n </div>\n )\n }\n)\n\nCountdown.displayName = 'Countdown'\n\n/**\n * Progress Bar Component\n */\nconst ProgressBar = React.memo(\n ({ progress, theme = 'light', className }: { progress: number; theme?: 'light' | 'dark'; className?: string }) => {\n // Clamp progress between 0 and 100\n const clampedProgress = Math.min(100, Math.max(0, progress))\n\n return (\n <div\n className={cn(\n 'flex h-2 w-full items-stretch overflow-hidden rounded-full',\n theme === 'dark' ? 'bg-white/20' : 'bg-black/20',\n className\n )}\n role=\"progressbar\"\n aria-valuenow={clampedProgress}\n aria-valuemin={0}\n aria-valuemax={100}\n >\n <div\n className={cn(\n 'h-full rounded-full transition-all duration-300',\n theme === 'dark' ? 'bg-white' : 'bg-[#080A0F]'\n )}\n style={{ width: `${clampedProgress}%` }}\n />\n </div>\n )\n }\n)\n\nProgressBar.displayName = 'ProgressBar'\n\n/**\n * Gift Shelf Card Component\n */\nconst GiftShelfCard = React.memo(\n ({\n item,\n theme = 'light',\n layout = 'vertical',\n className,\n buttonClassName,\n countdownClassName,\n onButtonClick,\n onProductImageClick,\n buildData,\n buttonText,\n remainText,\n lowStockText,\n soldOutButtonText,\n discountText = 'Only {price}',\n countdownText,\n countdownIcon,\n lastRoundText,\n beforeStartText,\n comingSoonButtonText,\n loading,\n }: {\n item: GiftShelfItem\n theme?: 'light' | 'dark'\n layout?: 'vertical' | 'horizontal'\n className?: string\n buttonClassName?: string\n countdownClassName?: string\n onButtonClick?: ({ product, code }: { product: GiftShelfProduct; code: string }) => void\n onProductImageClick?: (product: GiftShelfProduct) => void\n buildData?: {\n products: Product[]\n }\n buttonText: string\n remainText?: string\n lowStockText?: string\n soldOutButtonText?: string\n discountText?: string\n countdownText?: string\n countdownIcon?: Media\n lastRoundText?: string\n beforeStartText?: string\n comingSoonButtonText?: string\n loading?: boolean\n }) => {\n const { locale = 'us' } = useAiuiContext()\n // \u83B7\u53D6\u7B2C\u4E00\u4E2A\u4EA7\u54C1\u7684\u7B80\u5316\u6570\u636E\n const firstProduct = item.products?.[0]\n\n // \u68C0\u6D4B\u662F\u5426\u5904\u4E8E\u8F6E\u6B21\u5207\u6362\u671F + \u5F53\u524D\u8F6E\u6B21 code\uFF08\u6BCF\u79D2\u66F4\u65B0\uFF09\n const [isTransitioning, setIsTransitioning] = React.useState(() => isInTransitionPeriod(item.countdown))\n const [currentCode, setCurrentCode] = React.useState(() => getCodeWithSuffix(item.codePrefix, item.countdown))\n // \u5012\u8BA1\u65F6\u72B6\u6001\n const [countdownState, setCountdownState] = React.useState<CountdownState>('beforeStart')\n\n React.useEffect(() => {\n const checkAndUpdate = () => {\n // \u66F4\u65B0\u8F6E\u6B21\u5207\u6362\u72B6\u6001\n setIsTransitioning(isInTransitionPeriod(item.countdown))\n // \u66F4\u65B0\u5F53\u524D\u8F6E\u6B21 code\uFF08\u4EC5\u5728\u503C\u53D8\u5316\u65F6\u66F4\u65B0\uFF09\n const newCode = getCodeWithSuffix(item.codePrefix, item.countdown)\n setCurrentCode(prev => (prev !== newCode ? newCode : prev))\n }\n\n // \u521D\u59CB\u68C0\u67E5\n checkAndUpdate()\n // \u6BCF\u79D2\u68C0\u67E5\u4E00\u6B21\n const timer = setInterval(checkAndUpdate, 1000)\n\n return () => clearInterval(timer)\n }, [item.codePrefix, item.countdown])\n\n // \u5012\u8BA1\u65F6\u72B6\u6001\u53D8\u5316\u56DE\u8C03\n const handleCountdownStateChange = React.useCallback((state: CountdownState) => {\n setCountdownState(state)\n }, [])\n\n // \u901A\u8FC7 handle \u5339\u914D buildData \u4E2D\u7684\u5B8C\u6574\u4EA7\u54C1\u6570\u636E\n const fullProduct = React.useMemo(() => {\n if (!firstProduct?.handle || !buildData?.products?.length) return null\n return buildData.products.find(p => p.handle === firstProduct.handle) || null\n }, [firstProduct?.handle, buildData?.products])\n\n const fullProductVariant = React.useMemo(\n () => fullProduct?.variants?.find(variant => variant?.sku === firstProduct?.sku) || ({} as ProductVariant),\n [firstProduct?.sku, fullProduct?.variants]\n )\n\n // \u7EC4\u5408\u5C55\u793A\u6570\u636E\uFF08\u4F18\u5148\u4F7F\u7528\u8BE6\u7EC6\u6570\u636E\uFF0C\u56DE\u9000\u5230\u7B80\u5316\u6570\u636E\uFF09\n const displayData = React.useMemo(() => {\n const { price, basePrice } = formatVariantPrice({\n locale: locale || 'us',\n baseAmount: fullProductVariant?.price?.amount,\n amount: firstProduct?.custom_price ?? fullProductVariant?.price?.amount,\n currencyCode: fullProduct?.price?.currencyCode || 'USD',\n })\n\n return {\n // \u4E3B\u4EF7\u683C/\u4EF7\u503C\u5C55\u793A\uFF1A\u6709\u8BE6\u7EC6\u6570\u636E\u65F6\u663E\u793A\u4EF7\u683C\uFF0C\u5426\u5219\u663E\u793A\u4EA7\u54C1\u540D\n value: basePrice,\n // \u4EA7\u54C1\u63CF\u8FF0/\u6807\u9898\uFF1A\u6709\u8BE6\u7EC6\u6570\u636E\u65F6\u663E\u793A\u6807\u9898\uFF0C\u5426\u5219\u4E3A\u7A7A\uFF08\u907F\u514D\u91CD\u590D\u663E\u793A\uFF09\n description: firstProduct?.custom_description,\n // \u4F18\u60E0\u4EF7\u683C\n salePrice: replaceTemplate(discountText || '', {\n price,\n }),\n }\n }, [\n fullProduct,\n fullProductVariant,\n locale,\n discountText,\n firstProduct?.custom_price,\n firstProduct?.custom_description,\n ])\n\n const handleClick = React.useCallback(() => {\n onButtonClick?.({ product: firstProduct, code: currentCode })\n }, [onButtonClick, currentCode, firstProduct])\n\n return (\n <div className={cn(giftCardVariants({ state: theme }), className)} data-ui-component-id=\"GiftShelfCard\">\n {/* Countdown section - above the card content (only in vertical layout) */}\n {item.countdown && (\n <div className=\"laptop:h-[24px] mb-4 h-[20px]\">\n <Countdown\n config={item.countdown}\n theme={theme}\n className={countdownClassName}\n countdownText={countdownText}\n lastRoundText={lastRoundText}\n beforeStartText={beforeStartText}\n countdownIcon={countdownIcon}\n onStateChange={handleCountdownStateChange}\n />\n </div>\n )}\n\n {/* Content layout wrapper - \u63A7\u5236 Background image \u548C Bottom info area \u7684\u5E03\u5C40 */}\n <div className={contentLayoutVariants({ layout })}>\n {/* Background image - responsive across 5 breakpoints */}\n <div className={imageAreaVariants({ layout })}>\n {item.backgroundImage &&\n (onProductImageClick ? (\n <a onClick={() => firstProduct && onProductImageClick(firstProduct)} className=\"cursor-pointer\">\n <Picture\n source={getResponsiveSource(item.backgroundImage)}\n alt={getBackgroundAlt(item.backgroundImage)}\n className=\"rounded-card size-full overflow-hidden object-cover\"\n imgClassName=\"h-full w-full object-cover\"\n />\n </a>\n ) : (\n <Picture\n source={getResponsiveSource(item.backgroundImage)}\n alt={getBackgroundAlt(item.backgroundImage)}\n className=\"rounded-card size-full overflow-hidden object-cover\"\n imgClassName=\"h-full w-full object-cover\"\n />\n ))}\n {/* Card content area */}\n <div className=\"absolute top-1/2 z-10 w-full -translate-y-1/2 px-6\">\n {/* Value and description */}\n <div className=\"flex flex-col gap-1\">\n {/* Main value display */}\n {displayData.value && (\n <Heading\n html={displayData.value}\n size={4}\n className={cn('font-bold leading-none', textVariants({ state: theme }))}\n />\n )}\n\n {/* Description */}\n {displayData.description && (\n <Text\n html={displayData.description}\n className={cn('text-base font-bold opacity-60', textVariants({ state: theme }))}\n />\n )}\n </div>\n </div>\n </div>\n\n {/* Bottom/Right info area */}\n <div className={infoAreaVariants({ layout })}>\n {/* Sale price */}\n {displayData.salePrice && (\n <Text\n as=\"p\"\n html={displayData.salePrice}\n className={cn('lg-desktop:text-2xl text-xl font-bold', textVariants({ state: theme }))}\n />\n )}\n\n {/* Progress bar - \u8D85\u5356\u65F6\u9690\u85CF\uFF08availableForSale=true \u4E14 quantityAvailable<=0\uFF09 */}\n <ProgressBar\n progress={\n firstProduct?.custom_inventory\n ? ((fullProductVariant?.quantityAvailable || 0) / firstProduct.custom_inventory) * 100\n : 0\n }\n theme={theme}\n className={cn(\n 'mb-1 mt-2',\n fullProductVariant?.availableForSale && (fullProductVariant?.quantityAvailable ?? 0) <= 0 && 'invisible'\n )}\n />\n\n {/* Remain text - \u6B63\u5E38\u5E93\u5B58\u63D0\u793A */}\n {remainText && (fullProductVariant?.quantityAvailable ?? 0) >= 0 && (\n <Text\n html={replaceTemplate(remainText, {\n inventory: firstProduct?.custom_inventory?.toString() || '',\n quantity: fullProductVariant?.quantityAvailable?.toString() || '0',\n })}\n as=\"p\"\n className={cn('laptop:text-base text-sm font-bold', textVariants({ state: theme }))}\n />\n )}\n\n {/* Low stock text - \u652F\u6301\u8D85\u5356\u65F6\u663E\u793A\uFF08availableForSale=true \u4F46 quantityAvailable<=0\uFF09 */}\n {lowStockText &&\n fullProductVariant?.availableForSale &&\n (fullProductVariant?.quantityAvailable ?? 0) < 0 && (\n <Text\n html={lowStockText}\n as=\"p\"\n className={cn('laptop:text-base text-sm font-bold text-red-500', textVariants({ state: theme }))}\n />\n )}\n\n {/* Action button */}\n <Button\n size=\"lg\"\n className={cn(buttonVariants({ state: theme }), buttonClassName)}\n onClick={handleClick}\n disabled={\n !fullProductVariant?.availableForSale ||\n loading ||\n isTransitioning ||\n countdownState === 'beforeStart' ||\n countdownState === 'finished'\n }\n loading={loading && fullProductVariant?.availableForSale}\n >\n {countdownState === 'beforeStart'\n ? comingSoonButtonText || buttonText\n : fullProductVariant?.availableForSale\n ? buttonText\n : soldOutButtonText || buttonText}\n </Button>\n </div>\n </div>\n </div>\n )\n }\n)\n\nGiftShelfCard.displayName = 'GiftShelfCard'\n\n/**\n * GiftShelf - Gift/Promotion Shelf Component\n *\n * @description Display gift cards with countdown, pricing, and purchase buttons\n */\nconst GiftShelf = React.forwardRef<HTMLDivElement, GiftShelfProps>(\n ({ classNames = {}, data, onButtonClick, onProductImageClick, buildData, loading, ...rest }, ref) => {\n const theme = data.theme || 'light'\n\n const itemsPerRow = React.useMemo(() => {\n return data?.items?.length || 4\n }, [data?.items])\n\n // \u5F53\u5361\u7247\u6570\u91CF\u4E3A 2 \u65F6\u4F7F\u7528\u6C34\u5E73\u5E03\u5C40\uFF0C\u5426\u5219\u4F7F\u7528\u5782\u76F4\u5E03\u5C40\n const cardLayout = itemsPerRow === 2 ? 'horizontal' : 'vertical'\n\n const swiperBreakpoints = React.useMemo(() => {\n const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n switch (breakpoint) {\n case 'mobile':\n return { slidesPerView: 1.2, spaceBetween: 12 }\n case 'tablet':\n if (itemsPerRow <= 2) return { slidesPerView: 2, spaceBetween: 12 }\n return { slidesPerView: 2.5, spaceBetween: 12 }\n case 'laptop':\n if (itemsPerRow <= 3) return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n return { slidesPerView: 3.01, spaceBetween: 16 }\n case 'desktop':\n return { slidesPerView: Math.min(itemsPerRow, 4), spaceBetween: 20 }\n }\n }\n\n return {\n 0: getBreakpointConfig('mobile'),\n 768: getBreakpointConfig('tablet'),\n 1025: getBreakpointConfig('laptop'),\n 1440: getBreakpointConfig('desktop'),\n }\n }, [itemsPerRow])\n\n return (\n <Container\n ref={ref}\n className={cn(classNames?.root)}\n childClassName=\"overflow-hidden\"\n data-ui-component-id=\"GiftShelf\"\n {...rest}\n >\n {/* Cards swiper */}\n <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n {data.items.map((item, index) => (\n <SwiperSlide key={'giftShelfCardItem' + index}>\n <GiftShelfCard\n item={item}\n theme={theme}\n layout={cardLayout}\n className={classNames?.card}\n buttonClassName={classNames?.button}\n countdownClassName={classNames?.countdown}\n onButtonClick={onButtonClick}\n onProductImageClick={onProductImageClick}\n buildData={buildData}\n buttonText={data.buttonText}\n discountText={data.discountText}\n remainText={data.remainText}\n lowStockText={data.lowStockText}\n soldOutButtonText={data.soldOutButtonText}\n countdownText={data.countdownText}\n lastRoundText={data.lastRoundText}\n countdownIcon={data?.countdownIcon}\n beforeStartText={data.beforeStartText}\n comingSoonButtonText={data.comingSoonButtonText}\n loading={loading}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </Container>\n )\n }\n)\n\nGiftShelf.displayName = 'GiftShelf'\n\nexport default withLayout(GiftShelf)\nexport type {\n GiftShelfProps,\n GiftShelfData,\n GiftShelfItem,\n GiftShelfProduct,\n CountdownConfig,\n ResponsiveBackgroundImage,\n} from './types.js'\n"],
5
- "mappings": "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",
6
- "names": ["GiftShelf_exports", "__export", "GiftShelf_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_class_variance_authority", "import_react", "import_Styles", "import_utils", "import_AiuiProvider", "import_textFormat", "giftCardVariants", "contentLayoutVariants", "imageAreaVariants", "infoAreaVariants", "buttonVariants", "textVariants", "getResponsiveSource", "bgImage", "sources", "getBackgroundAlt", "formatTime", "seconds", "hours", "minutes", "secs", "parseStartTime", "startTime", "parsed", "isInTransitionPeriod", "countdown", "startTimeMs", "durationMs", "rounds", "now", "elapsed", "currentRound", "timeUntilRoundEnd", "TRANSITION_PERIOD_MS", "getCodeWithSuffix", "codePrefix", "date", "suffix", "currentRoundStartMs", "Countdown", "config", "theme", "className", "countdownText", "lastRoundText", "beforeStartText", "countdownIcon", "onStateChange", "timeLeft", "setTimeLeft", "countdownState", "setCountdownState", "calculateCountdown", "diff", "currentRoundTargetTime", "timer", "labelText", "ProgressBar", "progress", "clampedProgress", "GiftShelfCard", "item", "layout", "buttonClassName", "countdownClassName", "onButtonClick", "onProductImageClick", "buildData", "buttonText", "remainText", "lowStockText", "soldOutButtonText", "discountText", "comingSoonButtonText", "loading", "locale", "firstProduct", "isTransitioning", "setIsTransitioning", "currentCode", "setCurrentCode", "checkAndUpdate", "newCode", "prev", "handleCountdownStateChange", "state", "fullProduct", "p", "fullProductVariant", "variant", "displayData", "price", "basePrice", "handleClick", "GiftShelf", "classNames", "data", "rest", "ref", "itemsPerRow", "cardLayout", "swiperBreakpoints", "getBreakpointConfig", "breakpoint", "index"]
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Button, Container, Heading } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { GiftShelfProps, GiftShelfItem, CountdownConfig, ResponsiveBackgroundImage } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Product, ProductVariant } from '../Listing/types/product.js'\nimport { formatVariantPrice } from '../Listing/utils/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { replaceTemplate } from '../Listing/utils/textFormat.js'\nimport type { GiftShelfProduct } from './types.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * Card style variants for gift shelf\n */\nconst giftCardVariants = cva('desktop:px-6 rounded-card relative min-w-0 overflow-hidden p-4', {\n variants: {\n state: {\n light: 'bg-[#EAEAEC]',\n dark: 'bg-[#1E2024]',\n },\n },\n defaultVariants: {\n state: 'light',\n },\n})\n\n/**\n * Content layout variants - \u63A7\u5236 Background image \u548C Bottom info area \u7684\u5E03\u5C40\n * horizontal \u5E03\u5C40\u4EC5\u5728 desktop (\u22651440px) \u65AD\u70B9\u751F\u6548\n */\nconst contentLayoutVariants = cva('', {\n variants: {\n layout: {\n vertical: '',\n horizontal: 'desktop:flex desktop:flex-row desktop:items-stretch desktop:gap-10',\n },\n },\n defaultVariants: {\n layout: 'vertical',\n },\n})\n\n/**\n * Image area variants\n * horizontal \u5E03\u5C40\u4EC5\u5728 desktop (\u22651440px) \u65AD\u70B9\u751F\u6548\n */\nconst imageAreaVariants = cva(\n 'desktop:max-w-[268px] lg-desktop:max-w-[356px] lg-desktop:h-[171px] relative mx-auto h-[118px] max-w-[256px] ',\n {\n variants: {\n layout: {\n vertical: '',\n horizontal: 'desktop:flex-1 desktop:h-[122px] lg-desktop:h-[161px]',\n },\n },\n defaultVariants: {\n layout: 'vertical',\n },\n }\n)\n\n/**\n * Info area variants\n * horizontal \u5E03\u5C40\u4EC5\u5728 desktop (\u22651440px) \u65AD\u70B9\u751F\u6548\n */\nconst infoAreaVariants = cva('mt-3', {\n variants: {\n layout: {\n vertical: '',\n horizontal: 'desktop:mt-0 desktop:flex-1 desktop:flex desktop:flex-col desktop:justify-center',\n },\n },\n defaultVariants: {\n layout: 'vertical',\n },\n})\n\n/**\n * Button style variants\n */\nconst buttonVariants = cva('mt-4 self-start', {\n variants: {\n state: {\n light: 'bg-[#080A0F] text-white',\n dark: 'bg-white text-[#080A0F]',\n },\n },\n defaultVariants: {\n state: 'light',\n },\n})\n\n/**\n * Text style variants\n */\nconst textVariants = cva('', {\n variants: {\n state: {\n light: 'text-[#080A0F]',\n dark: 'text-white',\n },\n },\n defaultVariants: {\n state: 'light',\n },\n})\n\n/**\n * Convert ResponsiveBackgroundImage to Picture source string\n * Format: \"url1 1920, url2 1439, url3 1024, url4 767, url5\"\n */\nconst getResponsiveSource = (bgImage?: ResponsiveBackgroundImage): string | undefined => {\n if (!bgImage) return undefined\n\n const sources: string[] = []\n\n // lg-desktop: \u22651920px\n if (bgImage.lgDesktop?.url) {\n sources.push(`${bgImage.lgDesktop.url} 1920`)\n }\n // desktop: \u22651440px\n if (bgImage.desktop?.url) {\n sources.push(`${bgImage.desktop.url} 1439`)\n }\n // laptop: \u22651025px\n if (bgImage.laptop?.url) {\n sources.push(`${bgImage.laptop.url} 1024`)\n }\n // tablet: \u2265768px\n if (bgImage.tablet?.url) {\n sources.push(`${bgImage.tablet.url} 767`)\n }\n // default (mobile): <768px\n if (bgImage.default?.url) {\n sources.push(bgImage.default.url)\n }\n\n return sources.length > 0 ? sources.join(', ') : undefined\n}\n\n/**\n * Get alt text from ResponsiveBackgroundImage\n */\nconst getBackgroundAlt = (bgImage?: ResponsiveBackgroundImage): string => {\n if (!bgImage) return ''\n return (\n bgImage.default?.alt ||\n bgImage.tablet?.alt ||\n bgImage.laptop?.alt ||\n bgImage.desktop?.alt ||\n bgImage.lgDesktop?.alt ||\n ''\n )\n}\n\n/**\n * Format countdown time\n */\nconst formatTime = (seconds: number) => {\n const hours = Math.floor(seconds / 3600)\n const minutes = Math.floor((seconds % 3600) / 60)\n const secs = seconds % 60\n return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`\n}\n\n/**\n * \u89E3\u6790\u5F00\u59CB\u65F6\u95F4\uFF0C\u652F\u6301 ISO 8601 \u5B57\u7B26\u4E32\u6216\u65F6\u95F4\u6233\n */\nconst parseStartTime = (startTime: string | number): number => {\n if (typeof startTime === 'number') {\n return startTime\n }\n // \u89E3\u6790 ISO 8601 \u5B57\u7B26\u4E32\n const parsed = new Date(startTime).getTime()\n return isNaN(parsed) ? 0 : parsed\n}\n\n/**\n * \u8BA1\u7B97\u5F53\u524D\u662F\u5426\u5904\u4E8E\u8F6E\u6B21\u5207\u6362\u671F\uFF08\u4E0B\u4E00\u8F6E\u5F00\u59CB\u524D5\u5206\u949F\uFF09\n * @param countdown \u5012\u8BA1\u65F6\u914D\u7F6E\n * @returns \u662F\u5426\u5904\u4E8E\u5207\u6362\u671F\n */\nconst isInTransitionPeriod = (countdown?: CountdownConfig): boolean => {\n if (!countdown) return false\n const startTimeMs = parseStartTime(countdown.startTime)\n const durationMs = (countdown.durationDays ?? 1) * 24 * 3600 * 1000\n const rounds = countdown.rounds ?? 1\n const now = Date.now()\n\n // \u672A\u5230\u5F00\u59CB\u65F6\u95F4\n if (now < startTimeMs) return false\n\n // \u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\n const elapsed = now - startTimeMs\n const currentRound = Math.floor(elapsed / durationMs) + 1\n\n // \u6240\u6709\u8F6E\u6B21\u5DF2\u7ED3\u675F\n if (currentRound > rounds) return false\n\n // \u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\u7684\u7ED3\u675F\u65F6\u95F4\n const currentRoundEndTime = startTimeMs + currentRound * durationMs\n\n // \u8DDD\u79BB\u5F53\u524D\u8F6E\u6B21\u7ED3\u675F\u7684\u65F6\u95F4\n const timeUntilRoundEnd = currentRoundEndTime - now\n\n // \u5982\u679C\u8DDD\u79BB\u7ED3\u675F\u4E0D\u52305\u5206\u949F\uFF0C\u5904\u4E8E\u5207\u6362\u671F\n const TRANSITION_PERIOD_MS = 5 * 60 * 1000 // 5\u5206\u949F\n return timeUntilRoundEnd <= TRANSITION_PERIOD_MS && timeUntilRoundEnd > 0\n}\n\n/**\n * \u6839\u636E\u5012\u8BA1\u65F6\u914D\u7F6E\u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\u7684 Code\n * @param codePrefix Code \u524D\u7F00\n * @param countdown \u5012\u8BA1\u65F6\u914D\u7F6E\n * @returns \u5B8C\u6574\u7684 Code\uFF08\u524D\u7F00 + MMDD \u540E\u7F00\uFF09\n * @description \u7EDF\u4E00\u4F7F\u7528 UTC \u65F6\u95F4\u8BA1\u7B97\uFF0C\u786E\u4FDD\u5168\u7403\u4EFB\u4F55\u65F6\u533A\u5F97\u5230\u76F8\u540C\u7684 code\n */\nconst getCodeWithSuffix = (codePrefix?: string, countdown?: CountdownConfig): string => {\n if (!codePrefix || !countdown) return codePrefix || ''\n\n const startTimeMs = parseStartTime(countdown.startTime)\n const durationMs = (countdown.durationDays ?? 1) * 24 * 3600 * 1000\n const rounds = countdown.rounds ?? 1\n const now = Date.now()\n\n // \u672A\u5230\u5F00\u59CB\u65F6\u95F4\uFF0C\u4F7F\u7528\u7B2C\u4E00\u8F6E\u7684\u65E5\u671F\uFF08UTC \u65F6\u95F4\uFF09\n if (now < startTimeMs) {\n const date = new Date(startTimeMs)\n const suffix = `${(date.getUTCMonth() + 1).toString().padStart(2, '0')}${date.getUTCDate().toString().padStart(2, '0')}`\n return `${codePrefix}${suffix}`\n }\n\n // \u8BA1\u7B97\u5F53\u524D\u5904\u4E8E\u7B2C\u51E0\u8F6E\uFF08\u4ECE 1 \u5F00\u59CB\uFF09\n const elapsed = now - startTimeMs\n const currentRound = Math.min(Math.floor(elapsed / durationMs) + 1, rounds)\n\n // \u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\u7684\u5F00\u59CB\u65E5\u671F\n const currentRoundStartMs = startTimeMs + (currentRound - 1) * durationMs\n const date = new Date(currentRoundStartMs)\n\n // \u683C\u5F0F\u5316\u4E3A MMDD\uFF08\u4F7F\u7528 UTC \u65F6\u95F4\uFF09\n const suffix = `${(date.getUTCMonth() + 1).toString().padStart(2, '0')}${date.getUTCDate().toString().padStart(2, '0')}`\n\n return `${codePrefix}${suffix}`\n}\n\n/**\n * \u5012\u8BA1\u65F6\u72B6\u6001\u7C7B\u578B\n */\ntype CountdownState = 'beforeStart' | 'running' | 'lastRound' | 'finished'\n\n/**\n * Countdown Component\n * \u652F\u6301\u591A\u8F6E\u5012\u8BA1\u65F6\uFF0C\u663E\u793A\u4E0D\u540C\u72B6\u6001\u7684\u6807\u7B7E\n */\nconst Countdown = React.memo(\n ({\n config,\n theme = 'light',\n className,\n countdownText = 'Next round start time',\n lastRoundText = 'Last round',\n beforeStartText = 'Start time',\n countdownIcon,\n onStateChange,\n }: {\n config: CountdownConfig\n theme?: 'light' | 'dark'\n className?: string\n countdownText?: string\n lastRoundText?: string\n beforeStartText?: string\n countdownIcon?: Media\n onStateChange?: (state: CountdownState) => void\n }) => {\n const [timeLeft, setTimeLeft] = React.useState(0)\n const [countdownState, setCountdownState] = React.useState<CountdownState>('beforeStart')\n\n // \u89E3\u6790\u5F00\u59CB\u65F6\u95F4\u4E3A\u65F6\u95F4\u6233\n const startTimeMs = React.useMemo(() => parseStartTime(config.startTime), [config.startTime])\n\n const rounds = config.rounds ?? 1\n // \u9ED8\u8BA4 1 \u5929\uFF0C\u8F6C\u6362\u4E3A\u6BEB\u79D2 (1\u5929 = 24\u5C0F\u65F6 = 86400\u79D2 = 86400000\u6BEB\u79D2)\n const durationMs = (config.durationDays ?? 1) * 24 * 3600 * 1000\n\n React.useEffect(() => {\n const calculateCountdown = () => {\n const now = Date.now()\n\n // \u672A\u5230\u5F00\u59CB\u65F6\u95F4\uFF0C\u663E\u793A\u5F00\u59CB\u524D\u5012\u8BA1\u65F6\n if (now < startTimeMs) {\n const diff = Math.max(0, Math.floor((startTimeMs - now) / 1000))\n setTimeLeft(diff)\n setCountdownState('beforeStart')\n return\n }\n\n // \u8BA1\u7B97\u5DF2\u7ECF\u8FC7\u53BB\u7684\u65F6\u95F4\n const elapsed = now - startTimeMs\n // \u8BA1\u7B97\u5F53\u524D\u5904\u4E8E\u7B2C\u51E0\u8F6E\uFF08\u4ECE 1 \u5F00\u59CB\uFF09\n const currentRound = Math.floor(elapsed / durationMs) + 1\n\n // \u6240\u6709\u8F6E\u6B21\u5DF2\u7ED3\u675F\n if (currentRound > rounds) {\n setCountdownState('finished')\n return\n }\n\n // \u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\u7684\u76EE\u6807\u65F6\u95F4\n const currentRoundTargetTime = startTimeMs + currentRound * durationMs\n // \u8BA1\u7B97\u5269\u4F59\u79D2\u6570\n const diff = Math.max(0, Math.floor((currentRoundTargetTime - now) / 1000))\n\n setTimeLeft(diff)\n // \u5224\u65AD\u662F\u5426\u662F\u6700\u540E\u4E00\u8F6E\n setCountdownState(currentRound === rounds ? 'lastRound' : 'running')\n }\n\n calculateCountdown()\n const timer = setInterval(calculateCountdown, 1000)\n\n return () => clearInterval(timer)\n }, [startTimeMs, durationMs, rounds])\n\n // \u901A\u77E5\u7236\u7EC4\u4EF6\u72B6\u6001\u53D8\u5316\n React.useEffect(() => {\n onStateChange?.(countdownState)\n }, [countdownState, onStateChange])\n\n // \u6839\u636E\u72B6\u6001\u83B7\u53D6\u663E\u793A\u7684\u6807\u7B7E\u6587\u672C\n const labelText = React.useMemo(() => {\n switch (countdownState) {\n case 'beforeStart':\n return beforeStartText\n case 'lastRound':\n return lastRoundText\n default:\n return countdownText\n }\n }, [countdownState, beforeStartText, lastRoundText, countdownText])\n\n // \u6240\u6709\u8F6E\u6B21\u5DF2\u7ED3\u675F\uFF0C\u4E0D\u6E32\u67D3\n if (countdownState === 'finished') {\n return null\n }\n\n return (\n <div\n className={cn(\n 'desktop:gap-2 laptop:text-base flex items-center gap-1 text-sm',\n theme === 'dark' ? 'text-white' : 'text-[#080A0F]',\n className\n )}\n >\n {countdownIcon && (\n <Picture\n source={countdownIcon.url}\n alt={countdownIcon.alt}\n className=\"laptop:size-5 size-4 shrink-0\"\n imgClassName=\"size-full object-contain\"\n />\n )}\n <Text html={labelText} className=\"whitespace-nowrap font-bold\" />\n <span className=\"font-bold\">|</span>\n <Text className=\"font-bold\" html={formatTime(timeLeft)} />\n </div>\n )\n }\n)\n\nCountdown.displayName = 'Countdown'\n\n/**\n * Progress Bar Component\n */\nconst ProgressBar = React.memo(\n ({ progress, theme = 'light', className }: { progress: number; theme?: 'light' | 'dark'; className?: string }) => {\n // Clamp progress between 0 and 100\n const clampedProgress = Math.min(100, Math.max(0, progress))\n\n return (\n <div\n className={cn(\n 'flex h-2 w-full items-stretch overflow-hidden rounded-full',\n theme === 'dark' ? 'bg-white/20' : 'bg-black/20',\n className\n )}\n role=\"progressbar\"\n aria-valuenow={clampedProgress}\n aria-valuemin={0}\n aria-valuemax={100}\n >\n <div\n className={cn(\n 'h-full rounded-full transition-all duration-300',\n theme === 'dark' ? 'bg-white' : 'bg-[#080A0F]'\n )}\n style={{ width: `${clampedProgress}%` }}\n />\n </div>\n )\n }\n)\n\nProgressBar.displayName = 'ProgressBar'\n\n/**\n * Gift Shelf Card Component\n */\nconst GiftShelfCard = React.memo(\n ({\n item,\n theme = 'light',\n layout = 'vertical',\n className,\n buttonClassName,\n countdownClassName,\n onButtonClick,\n onProductImageClick,\n buildData,\n buttonText,\n remainText,\n lowStockText,\n soldOutButtonText,\n discountText = 'Only {price}',\n countdownText,\n countdownIcon,\n lastRoundText,\n beforeStartText,\n comingSoonButtonText,\n loading,\n }: {\n item: GiftShelfItem\n theme?: 'light' | 'dark'\n layout?: 'vertical' | 'horizontal'\n className?: string\n buttonClassName?: string\n countdownClassName?: string\n onButtonClick?: ({ product, code }: { product: GiftShelfProduct; code: string }) => void\n onProductImageClick?: (product: GiftShelfProduct) => void\n buildData?: {\n products: Product[]\n }\n buttonText: string\n remainText?: string\n lowStockText?: string\n soldOutButtonText?: string\n discountText?: string\n countdownText?: string\n countdownIcon?: Media\n lastRoundText?: string\n beforeStartText?: string\n comingSoonButtonText?: string\n loading?: boolean\n }) => {\n const { locale = 'us', currencyCode } = useAiuiContext()\n // \u83B7\u53D6\u7B2C\u4E00\u4E2A\u4EA7\u54C1\u7684\u7B80\u5316\u6570\u636E\n const firstProduct = item.products?.[0]\n\n // \u68C0\u6D4B\u662F\u5426\u5904\u4E8E\u8F6E\u6B21\u5207\u6362\u671F + \u5F53\u524D\u8F6E\u6B21 code\uFF08\u6BCF\u79D2\u66F4\u65B0\uFF09\n const [isTransitioning, setIsTransitioning] = React.useState(() => isInTransitionPeriod(item.countdown))\n const [currentCode, setCurrentCode] = React.useState(() => getCodeWithSuffix(item.codePrefix, item.countdown))\n // \u5012\u8BA1\u65F6\u72B6\u6001\n const [countdownState, setCountdownState] = React.useState<CountdownState>('beforeStart')\n\n React.useEffect(() => {\n const checkAndUpdate = () => {\n // \u66F4\u65B0\u8F6E\u6B21\u5207\u6362\u72B6\u6001\n setIsTransitioning(isInTransitionPeriod(item.countdown))\n // \u66F4\u65B0\u5F53\u524D\u8F6E\u6B21 code\uFF08\u4EC5\u5728\u503C\u53D8\u5316\u65F6\u66F4\u65B0\uFF09\n const newCode = getCodeWithSuffix(item.codePrefix, item.countdown)\n setCurrentCode(prev => (prev !== newCode ? newCode : prev))\n }\n\n // \u521D\u59CB\u68C0\u67E5\n checkAndUpdate()\n // \u6BCF\u79D2\u68C0\u67E5\u4E00\u6B21\n const timer = setInterval(checkAndUpdate, 1000)\n\n return () => clearInterval(timer)\n }, [item.codePrefix, item.countdown])\n\n // \u5012\u8BA1\u65F6\u72B6\u6001\u53D8\u5316\u56DE\u8C03\n const handleCountdownStateChange = React.useCallback((state: CountdownState) => {\n setCountdownState(state)\n }, [])\n\n // \u901A\u8FC7 handle \u5339\u914D buildData \u4E2D\u7684\u5B8C\u6574\u4EA7\u54C1\u6570\u636E\n const fullProduct = React.useMemo(() => {\n if (!firstProduct?.handle || !buildData?.products?.length) return null\n return buildData.products.find(p => p.handle === firstProduct.handle) || null\n }, [firstProduct?.handle, buildData?.products])\n\n const fullProductVariant = React.useMemo(\n () => fullProduct?.variants?.find(variant => variant?.sku === firstProduct?.sku) || ({} as ProductVariant),\n [firstProduct?.sku, fullProduct?.variants]\n )\n\n // \u7EC4\u5408\u5C55\u793A\u6570\u636E\uFF08\u4F18\u5148\u4F7F\u7528\u8BE6\u7EC6\u6570\u636E\uFF0C\u56DE\u9000\u5230\u7B80\u5316\u6570\u636E\uFF09\n const displayData = React.useMemo(() => {\n const { price, basePrice } = formatVariantPrice({\n locale: currencyCode === 'CAD' ? 'us' : locale || 'us',\n baseAmount: fullProductVariant?.price?.amount,\n amount: firstProduct?.custom_price ?? fullProductVariant?.price?.amount,\n currencyCode: fullProduct?.price?.currencyCode || 'USD',\n })\n\n return {\n // \u4E3B\u4EF7\u683C/\u4EF7\u503C\u5C55\u793A\uFF1A\u6709\u8BE6\u7EC6\u6570\u636E\u65F6\u663E\u793A\u4EF7\u683C\uFF0C\u5426\u5219\u663E\u793A\u4EA7\u54C1\u540D\n value: basePrice,\n // \u4EA7\u54C1\u63CF\u8FF0/\u6807\u9898\uFF1A\u6709\u8BE6\u7EC6\u6570\u636E\u65F6\u663E\u793A\u6807\u9898\uFF0C\u5426\u5219\u4E3A\u7A7A\uFF08\u907F\u514D\u91CD\u590D\u663E\u793A\uFF09\n description: firstProduct?.custom_description,\n // \u4F18\u60E0\u4EF7\u683C\n salePrice: replaceTemplate(discountText || '', {\n price,\n }),\n }\n }, [\n fullProduct,\n fullProductVariant,\n locale,\n discountText,\n firstProduct?.custom_price,\n firstProduct?.custom_description,\n ])\n\n const handleClick = React.useCallback(() => {\n onButtonClick?.({ product: firstProduct, code: currentCode })\n }, [onButtonClick, currentCode, firstProduct])\n\n return (\n <div className={cn(giftCardVariants({ state: theme }), className)} data-ui-component-id=\"GiftShelfCard\">\n {/* Countdown section - above the card content (only in vertical layout) */}\n {item.countdown && (\n <div className=\"laptop:h-[24px] mb-4 h-[20px]\">\n <Countdown\n config={item.countdown}\n theme={theme}\n className={countdownClassName}\n countdownText={countdownText}\n lastRoundText={lastRoundText}\n beforeStartText={beforeStartText}\n countdownIcon={countdownIcon}\n onStateChange={handleCountdownStateChange}\n />\n </div>\n )}\n\n {/* Content layout wrapper - \u63A7\u5236 Background image \u548C Bottom info area \u7684\u5E03\u5C40 */}\n <div className={contentLayoutVariants({ layout })}>\n {/* Background image - responsive across 5 breakpoints */}\n <div className={imageAreaVariants({ layout })}>\n {item.backgroundImage &&\n (onProductImageClick ? (\n <a onClick={() => firstProduct && onProductImageClick(firstProduct)} className=\"cursor-pointer\">\n <Picture\n source={getResponsiveSource(item.backgroundImage)}\n alt={getBackgroundAlt(item.backgroundImage)}\n className=\"rounded-card size-full overflow-hidden object-cover\"\n imgClassName=\"h-full w-full object-cover\"\n />\n </a>\n ) : (\n <Picture\n source={getResponsiveSource(item.backgroundImage)}\n alt={getBackgroundAlt(item.backgroundImage)}\n className=\"rounded-card size-full overflow-hidden object-cover\"\n imgClassName=\"h-full w-full object-cover\"\n />\n ))}\n {/* Card content area */}\n <div className=\"absolute top-1/2 z-10 w-full -translate-y-1/2 px-6\">\n {/* Value and description */}\n <div className=\"flex flex-col gap-1\">\n {/* Main value display */}\n {displayData.value && (\n <Heading\n html={displayData.value}\n size={4}\n className={cn('font-bold leading-none', textVariants({ state: theme }))}\n />\n )}\n\n {/* Description */}\n {displayData.description && (\n <Text\n html={displayData.description}\n className={cn('text-base font-bold opacity-60', textVariants({ state: theme }))}\n />\n )}\n </div>\n </div>\n </div>\n\n {/* Bottom/Right info area */}\n <div className={infoAreaVariants({ layout })}>\n {/* Sale price */}\n {displayData.salePrice && (\n <Text\n as=\"p\"\n html={displayData.salePrice}\n className={cn('lg-desktop:text-2xl text-xl font-bold', textVariants({ state: theme }))}\n />\n )}\n\n {/* Progress bar - \u8D85\u5356\u65F6\u9690\u85CF\uFF08availableForSale=true \u4E14 quantityAvailable<=0\uFF09 */}\n <ProgressBar\n progress={\n firstProduct?.custom_inventory\n ? ((fullProductVariant?.quantityAvailable || 0) / firstProduct.custom_inventory) * 100\n : 0\n }\n theme={theme}\n className={cn(\n 'mb-1 mt-2',\n fullProductVariant?.availableForSale && (fullProductVariant?.quantityAvailable ?? 0) <= 0 && 'invisible'\n )}\n />\n\n {/* Remain text - \u6B63\u5E38\u5E93\u5B58\u63D0\u793A */}\n {remainText && (fullProductVariant?.quantityAvailable ?? 0) >= 0 && (\n <Text\n html={replaceTemplate(remainText, {\n inventory: firstProduct?.custom_inventory?.toString() || '',\n quantity: fullProductVariant?.quantityAvailable?.toString() || '0',\n })}\n as=\"p\"\n className={cn('laptop:text-base text-sm font-bold', textVariants({ state: theme }))}\n />\n )}\n\n {/* Low stock text - \u652F\u6301\u8D85\u5356\u65F6\u663E\u793A\uFF08availableForSale=true \u4F46 quantityAvailable<=0\uFF09 */}\n {lowStockText &&\n fullProductVariant?.availableForSale &&\n (fullProductVariant?.quantityAvailable ?? 0) < 0 && (\n <Text\n html={lowStockText}\n as=\"p\"\n className={cn('laptop:text-base text-sm font-bold text-red-500', textVariants({ state: theme }))}\n />\n )}\n\n {/* Action button */}\n <Button\n size=\"lg\"\n className={cn(buttonVariants({ state: theme }), buttonClassName)}\n onClick={handleClick}\n disabled={\n !fullProductVariant?.availableForSale ||\n loading ||\n isTransitioning ||\n countdownState === 'beforeStart' ||\n countdownState === 'finished'\n }\n loading={loading && fullProductVariant?.availableForSale}\n >\n {countdownState === 'beforeStart'\n ? comingSoonButtonText || buttonText\n : fullProductVariant?.availableForSale\n ? buttonText\n : soldOutButtonText || buttonText}\n </Button>\n </div>\n </div>\n </div>\n )\n }\n)\n\nGiftShelfCard.displayName = 'GiftShelfCard'\n\n/**\n * GiftShelf - Gift/Promotion Shelf Component\n *\n * @description Display gift cards with countdown, pricing, and purchase buttons\n */\nconst GiftShelf = React.forwardRef<HTMLDivElement, GiftShelfProps>(\n ({ classNames = {}, data, onButtonClick, onProductImageClick, buildData, loading, ...rest }, ref) => {\n const theme = data.theme || 'light'\n\n const itemsPerRow = React.useMemo(() => {\n return data?.items?.length || 4\n }, [data?.items])\n\n // \u5F53\u5361\u7247\u6570\u91CF\u4E3A 2 \u65F6\u4F7F\u7528\u6C34\u5E73\u5E03\u5C40\uFF0C\u5426\u5219\u4F7F\u7528\u5782\u76F4\u5E03\u5C40\n const cardLayout = itemsPerRow === 2 ? 'horizontal' : 'vertical'\n\n const swiperBreakpoints = React.useMemo(() => {\n const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n switch (breakpoint) {\n case 'mobile':\n return { slidesPerView: 1.2, spaceBetween: 12 }\n case 'tablet':\n if (itemsPerRow <= 2) return { slidesPerView: 2, spaceBetween: 12 }\n return { slidesPerView: 2.5, spaceBetween: 12 }\n case 'laptop':\n if (itemsPerRow <= 3) return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n return { slidesPerView: 3.01, spaceBetween: 16 }\n case 'desktop':\n return { slidesPerView: Math.min(itemsPerRow, 4), spaceBetween: 20 }\n }\n }\n\n return {\n 0: getBreakpointConfig('mobile'),\n 768: getBreakpointConfig('tablet'),\n 1025: getBreakpointConfig('laptop'),\n 1440: getBreakpointConfig('desktop'),\n }\n }, [itemsPerRow])\n\n return (\n <Container\n ref={ref}\n className={cn(classNames?.root)}\n childClassName=\"overflow-hidden\"\n data-ui-component-id=\"GiftShelf\"\n {...rest}\n >\n {/* Cards swiper */}\n <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n {data.items.map((item, index) => (\n <SwiperSlide key={'giftShelfCardItem' + index}>\n <GiftShelfCard\n item={item}\n theme={theme}\n layout={cardLayout}\n className={classNames?.card}\n buttonClassName={classNames?.button}\n countdownClassName={classNames?.countdown}\n onButtonClick={onButtonClick}\n onProductImageClick={onProductImageClick}\n buildData={buildData}\n buttonText={data.buttonText}\n discountText={data.discountText}\n remainText={data.remainText}\n lowStockText={data.lowStockText}\n soldOutButtonText={data.soldOutButtonText}\n countdownText={data.countdownText}\n lastRoundText={data.lastRoundText}\n countdownIcon={data?.countdownIcon}\n beforeStartText={data.beforeStartText}\n comingSoonButtonText={data.comingSoonButtonText}\n loading={loading}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </Container>\n )\n }\n)\n\nGiftShelf.displayName = 'GiftShelf'\n\nexport default withLayout(GiftShelf)\nexport type {\n GiftShelfProps,\n GiftShelfData,\n GiftShelfItem,\n GiftShelfProduct,\n CountdownConfig,\n ResponsiveBackgroundImage,\n} from './types.js'\n"],
5
+ "mappings": "olBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAgWM,IAAAI,EAAA,6BA9VNC,EAAuB,qBACvBC,EAAmB,kCACnBC,EAA0D,qCAC1DC,EAAoB,oCAEpBC,EAAoC,wBACpCC,EAA2B,kCAE3BC,EAAmC,qCACnCC,GAA+B,oCAC/BC,EAAgC,0CAOhC,MAAMC,MAAmB,OAAI,iEAAkE,CAC7F,SAAU,CACR,MAAO,CACL,MAAO,eACP,KAAM,cACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CAAC,EAMKC,MAAwB,OAAI,GAAI,CACpC,SAAU,CACR,OAAQ,CACN,SAAU,GACV,WAAY,oEACd,CACF,EACA,gBAAiB,CACf,OAAQ,UACV,CACF,CAAC,EAMKC,MAAoB,OACxB,gHACA,CACE,SAAU,CACR,OAAQ,CACN,SAAU,GACV,WAAY,uDACd,CACF,EACA,gBAAiB,CACf,OAAQ,UACV,CACF,CACF,EAMMC,MAAmB,OAAI,OAAQ,CACnC,SAAU,CACR,OAAQ,CACN,SAAU,GACV,WAAY,kFACd,CACF,EACA,gBAAiB,CACf,OAAQ,UACV,CACF,CAAC,EAKKC,MAAiB,OAAI,kBAAmB,CAC5C,SAAU,CACR,MAAO,CACL,MAAO,0BACP,KAAM,yBACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CAAC,EAKKC,KAAe,OAAI,GAAI,CAC3B,SAAU,CACR,MAAO,CACL,MAAO,iBACP,KAAM,YACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CAAC,EAMKC,EAAuBC,GAA4D,CACvF,GAAI,CAACA,EAAS,OAEd,MAAMC,EAAoB,CAAC,EAG3B,OAAID,EAAQ,WAAW,KACrBC,EAAQ,KAAK,GAAGD,EAAQ,UAAU,GAAG,OAAO,EAG1CA,EAAQ,SAAS,KACnBC,EAAQ,KAAK,GAAGD,EAAQ,QAAQ,GAAG,OAAO,EAGxCA,EAAQ,QAAQ,KAClBC,EAAQ,KAAK,GAAGD,EAAQ,OAAO,GAAG,OAAO,EAGvCA,EAAQ,QAAQ,KAClBC,EAAQ,KAAK,GAAGD,EAAQ,OAAO,GAAG,MAAM,EAGtCA,EAAQ,SAAS,KACnBC,EAAQ,KAAKD,EAAQ,QAAQ,GAAG,EAG3BC,EAAQ,OAAS,EAAIA,EAAQ,KAAK,IAAI,EAAI,MACnD,EAKMC,EAAoBF,GACnBA,IAEHA,EAAQ,SAAS,KACjBA,EAAQ,QAAQ,KAChBA,EAAQ,QAAQ,KAChBA,EAAQ,SAAS,KACjBA,EAAQ,WAAW,MACnB,GAOEG,GAAcC,GAAoB,CACtC,MAAMC,EAAQ,KAAK,MAAMD,EAAU,IAAI,EACjCE,EAAU,KAAK,MAAOF,EAAU,KAAQ,EAAE,EAC1CG,EAAOH,EAAU,GACvB,MAAO,GAAGC,EAAM,SAAS,EAAE,SAAS,EAAG,GAAG,CAAC,IAAIC,EAAQ,SAAS,EAAE,SAAS,EAAG,GAAG,CAAC,IAAIC,EAAK,SAAS,EAAE,SAAS,EAAG,GAAG,CAAC,EACxH,EAKMC,EAAkBC,GAAuC,CAC7D,GAAI,OAAOA,GAAc,SACvB,OAAOA,EAGT,MAAMC,EAAS,IAAI,KAAKD,CAAS,EAAE,QAAQ,EAC3C,OAAO,MAAMC,CAAM,EAAI,EAAIA,CAC7B,EAOMC,EAAwBC,GAAyC,CACrE,GAAI,CAACA,EAAW,MAAO,GACvB,MAAMC,EAAcL,EAAeI,EAAU,SAAS,EAChDE,GAAcF,EAAU,cAAgB,GAAK,GAAK,KAAO,IACzDG,EAASH,EAAU,QAAU,EAC7BI,EAAM,KAAK,IAAI,EAGrB,GAAIA,EAAMH,EAAa,MAAO,GAG9B,MAAMI,EAAUD,EAAMH,EAChBK,EAAe,KAAK,MAAMD,EAAUH,CAAU,EAAI,EAGxD,GAAII,EAAeH,EAAQ,MAAO,GAMlC,MAAMI,EAHsBN,EAAcK,EAAeJ,EAGTE,EAG1CI,EAAuB,EAAI,GAAK,IACtC,OAAOD,GAAqBC,GAAwBD,EAAoB,CAC1E,EASME,EAAoB,CAACC,EAAqBV,IAAwC,CACtF,GAAI,CAACU,GAAc,CAACV,EAAW,OAAOU,GAAc,GAEpD,MAAMT,EAAcL,EAAeI,EAAU,SAAS,EAChDE,GAAcF,EAAU,cAAgB,GAAK,GAAK,KAAO,IACzDG,EAASH,EAAU,QAAU,EAC7BI,EAAM,KAAK,IAAI,EAGrB,GAAIA,EAAMH,EAAa,CACrB,MAAMU,EAAO,IAAI,KAAKV,CAAW,EAC3BW,EAAS,IAAID,EAAK,YAAY,EAAI,GAAG,SAAS,EAAE,SAAS,EAAG,GAAG,CAAC,GAAGA,EAAK,WAAW,EAAE,SAAS,EAAE,SAAS,EAAG,GAAG,CAAC,GACtH,MAAO,GAAGD,CAAU,GAAGE,CAAM,EAC/B,CAGA,MAAMP,EAAUD,EAAMH,EAChBK,EAAe,KAAK,IAAI,KAAK,MAAMD,EAAUH,CAAU,EAAI,EAAGC,CAAM,EAGpEU,EAAsBZ,GAAeK,EAAe,GAAKJ,EACzDS,EAAO,IAAI,KAAKE,CAAmB,EAGnCD,EAAS,IAAID,EAAK,YAAY,EAAI,GAAG,SAAS,EAAE,SAAS,EAAG,GAAG,CAAC,GAAGA,EAAK,WAAW,EAAE,SAAS,EAAE,SAAS,EAAG,GAAG,CAAC,GAEtH,MAAO,GAAGD,CAAU,GAAGE,CAAM,EAC/B,EAWME,EAAY1C,EAAM,KACtB,CAAC,CACC,OAAA2C,EACA,MAAAC,EAAQ,QACR,UAAAC,EACA,cAAAC,EAAgB,wBAChB,cAAAC,EAAgB,aAChB,gBAAAC,EAAkB,aAClB,cAAAC,EACA,cAAAC,CACF,IASM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIpD,EAAM,SAAS,CAAC,EAC1C,CAACqD,EAAgBC,CAAiB,EAAItD,EAAM,SAAyB,aAAa,EAGlF6B,EAAc7B,EAAM,QAAQ,IAAMwB,EAAemB,EAAO,SAAS,EAAG,CAACA,EAAO,SAAS,CAAC,EAEtFZ,EAASY,EAAO,QAAU,EAE1Bb,GAAca,EAAO,cAAgB,GAAK,GAAK,KAAO,IAE5D3C,EAAM,UAAU,IAAM,CACpB,MAAMuD,EAAqB,IAAM,CAC/B,MAAMvB,EAAM,KAAK,IAAI,EAGrB,GAAIA,EAAMH,EAAa,CACrB,MAAM2B,EAAO,KAAK,IAAI,EAAG,KAAK,OAAO3B,EAAcG,GAAO,GAAI,CAAC,EAC/DoB,EAAYI,CAAI,EAChBF,EAAkB,aAAa,EAC/B,MACF,CAGA,MAAMrB,EAAUD,EAAMH,EAEhBK,EAAe,KAAK,MAAMD,EAAUH,CAAU,EAAI,EAGxD,GAAII,EAAeH,EAAQ,CACzBuB,EAAkB,UAAU,EAC5B,MACF,CAGA,MAAMG,EAAyB5B,EAAcK,EAAeJ,EAEtD0B,EAAO,KAAK,IAAI,EAAG,KAAK,OAAOC,EAAyBzB,GAAO,GAAI,CAAC,EAE1EoB,EAAYI,CAAI,EAEhBF,EAAkBpB,IAAiBH,EAAS,YAAc,SAAS,CACrE,EAEAwB,EAAmB,EACnB,MAAMG,EAAQ,YAAYH,EAAoB,GAAI,EAElD,MAAO,IAAM,cAAcG,CAAK,CAClC,EAAG,CAAC7B,EAAaC,EAAYC,CAAM,CAAC,EAGpC/B,EAAM,UAAU,IAAM,CACpBkD,IAAgBG,CAAc,CAChC,EAAG,CAACA,EAAgBH,CAAa,CAAC,EAGlC,MAAMS,EAAY3D,EAAM,QAAQ,IAAM,CACpC,OAAQqD,EAAgB,CACtB,IAAK,cACH,OAAOL,EACT,IAAK,YACH,OAAOD,EACT,QACE,OAAOD,CACX,CACF,EAAG,CAACO,EAAgBL,EAAiBD,EAAeD,CAAa,CAAC,EAGlE,OAAIO,IAAmB,WACd,QAIP,QAAC,OACC,aAAW,MACT,iEACAT,IAAU,OAAS,aAAe,iBAClCC,CACF,EAEC,UAAAI,MACC,OAAC,WACC,OAAQA,EAAc,IACtB,IAAKA,EAAc,IACnB,UAAU,gCACV,aAAa,2BACf,KAEF,OAAC,QAAK,KAAMU,EAAW,UAAU,8BAA8B,KAC/D,OAAC,QAAK,UAAU,YAAY,aAAC,KAC7B,OAAC,QAAK,UAAU,YAAY,KAAMxC,GAAWgC,CAAQ,EAAG,GAC1D,CAEJ,CACF,EAEAT,EAAU,YAAc,YAKxB,MAAMkB,EAAc5D,EAAM,KACxB,CAAC,CAAE,SAAA6D,EAAU,MAAAjB,EAAQ,QAAS,UAAAC,CAAU,IAA0E,CAEhH,MAAMiB,EAAkB,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGD,CAAQ,CAAC,EAE3D,SACE,OAAC,OACC,aAAW,MACT,6DACAjB,IAAU,OAAS,cAAgB,cACnCC,CACF,EACA,KAAK,cACL,gBAAeiB,EACf,gBAAe,EACf,gBAAe,IAEf,mBAAC,OACC,aAAW,MACT,kDACAlB,IAAU,OAAS,WAAa,cAClC,EACA,MAAO,CAAE,MAAO,GAAGkB,CAAe,GAAI,EACxC,EACF,CAEJ,CACF,EAEAF,EAAY,YAAc,cAK1B,MAAMG,EAAgB/D,EAAM,KAC1B,CAAC,CACC,KAAAgE,EACA,MAAApB,EAAQ,QACR,OAAAqB,EAAS,WACT,UAAApB,EACA,gBAAAqB,EACA,mBAAAC,EACA,cAAAC,EACA,oBAAAC,EACA,UAAAC,EACA,WAAAC,EACA,WAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,aAAAC,EAAe,eACf,cAAA7B,EACA,cAAAG,EACA,cAAAF,EACA,gBAAAC,EACA,qBAAA4B,EACA,QAAAC,CACF,IAuBM,CACJ,KAAM,CAAE,OAAAC,EAAS,KAAM,aAAAC,CAAa,KAAI,mBAAe,EAEjDC,EAAehB,EAAK,WAAW,CAAC,EAGhC,CAACiB,EAAiBC,EAAkB,EAAIlF,EAAM,SAAS,IAAM2B,EAAqBqC,EAAK,SAAS,CAAC,EACjG,CAACmB,EAAaC,EAAc,EAAIpF,EAAM,SAAS,IAAMqC,EAAkB2B,EAAK,WAAYA,EAAK,SAAS,CAAC,EAEvG,CAACX,EAAgBC,EAAiB,EAAItD,EAAM,SAAyB,aAAa,EAExFA,EAAM,UAAU,IAAM,CACpB,MAAMqF,EAAiB,IAAM,CAE3BH,GAAmBvD,EAAqBqC,EAAK,SAAS,CAAC,EAEvD,MAAMsB,EAAUjD,EAAkB2B,EAAK,WAAYA,EAAK,SAAS,EACjEoB,GAAeG,GAASA,IAASD,EAAUA,EAAUC,CAAK,CAC5D,EAGAF,EAAe,EAEf,MAAM3B,EAAQ,YAAY2B,EAAgB,GAAI,EAE9C,MAAO,IAAM,cAAc3B,CAAK,CAClC,EAAG,CAACM,EAAK,WAAYA,EAAK,SAAS,CAAC,EAGpC,MAAMwB,GAA6BxF,EAAM,YAAayF,GAA0B,CAC9EnC,GAAkBmC,CAAK,CACzB,EAAG,CAAC,CAAC,EAGCC,EAAc1F,EAAM,QAAQ,IAC5B,CAACgF,GAAc,QAAU,CAACV,GAAW,UAAU,OAAe,KAC3DA,EAAU,SAAS,KAAKqB,GAAKA,EAAE,SAAWX,EAAa,MAAM,GAAK,KACxE,CAACA,GAAc,OAAQV,GAAW,QAAQ,CAAC,EAExCsB,EAAqB5F,EAAM,QAC/B,IAAM0F,GAAa,UAAU,KAAKG,GAAWA,GAAS,MAAQb,GAAc,GAAG,GAAM,CAAC,EACtF,CAACA,GAAc,IAAKU,GAAa,QAAQ,CAC3C,EAGMI,EAAc9F,EAAM,QAAQ,IAAM,CACtC,KAAM,CAAE,MAAA+F,EAAO,UAAAC,CAAU,KAAI,sBAAmB,CAC9C,OAAQjB,IAAiB,MAAQ,KAAOD,GAAU,KAClD,WAAYc,GAAoB,OAAO,OACvC,OAAQZ,GAAc,cAAgBY,GAAoB,OAAO,OACjE,aAAcF,GAAa,OAAO,cAAgB,KACpD,CAAC,EAED,MAAO,CAEL,MAAOM,EAEP,YAAahB,GAAc,mBAE3B,aAAW,mBAAgBL,GAAgB,GAAI,CAC7C,MAAAoB,CACF,CAAC,CACH,CACF,EAAG,CACDL,EACAE,EACAd,EACAH,EACAK,GAAc,aACdA,GAAc,kBAChB,CAAC,EAEKiB,GAAcjG,EAAM,YAAY,IAAM,CAC1CoE,IAAgB,CAAE,QAASY,EAAc,KAAMG,CAAY,CAAC,CAC9D,EAAG,CAACf,EAAee,EAAaH,CAAY,CAAC,EAE7C,SACE,QAAC,OAAI,aAAW,MAAGvE,GAAiB,CAAE,MAAOmC,CAAM,CAAC,EAAGC,CAAS,EAAG,uBAAqB,gBAErF,UAAAmB,EAAK,cACJ,OAAC,OAAI,UAAU,gCACb,mBAACtB,EAAA,CACC,OAAQsB,EAAK,UACb,MAAOpB,EACP,UAAWuB,EACX,cAAerB,EACf,cAAeC,EACf,gBAAiBC,EACjB,cAAeC,EACf,cAAeuC,GACjB,EACF,KAIF,QAAC,OAAI,UAAW9E,GAAsB,CAAE,OAAAuD,CAAO,CAAC,EAE9C,qBAAC,OAAI,UAAWtD,GAAkB,CAAE,OAAAsD,CAAO,CAAC,EACzC,UAAAD,EAAK,kBACHK,KACC,OAAC,KAAE,QAAS,IAAMW,GAAgBX,EAAoBW,CAAY,EAAG,UAAU,iBAC7E,mBAAC,WACC,OAAQjE,EAAoBiD,EAAK,eAAe,EAChD,IAAK9C,EAAiB8C,EAAK,eAAe,EAC1C,UAAU,sDACV,aAAa,6BACf,EACF,KAEA,OAAC,WACC,OAAQjD,EAAoBiD,EAAK,eAAe,EAChD,IAAK9C,EAAiB8C,EAAK,eAAe,EAC1C,UAAU,sDACV,aAAa,6BACf,MAGJ,OAAC,OAAI,UAAU,qDAEb,oBAAC,OAAI,UAAU,sBAEZ,UAAA8B,EAAY,UACX,OAAC,WACC,KAAMA,EAAY,MAClB,KAAM,EACN,aAAW,MAAG,yBAA0BhF,EAAa,CAAE,MAAO8B,CAAM,CAAC,CAAC,EACxE,EAIDkD,EAAY,gBACX,OAAC,QACC,KAAMA,EAAY,YAClB,aAAW,MAAG,iCAAkChF,EAAa,CAAE,MAAO8B,CAAM,CAAC,CAAC,EAChF,GAEJ,EACF,GACF,KAGA,QAAC,OAAI,UAAWhC,GAAiB,CAAE,OAAAqD,CAAO,CAAC,EAExC,UAAA6B,EAAY,cACX,OAAC,QACC,GAAG,IACH,KAAMA,EAAY,UAClB,aAAW,MAAG,wCAAyChF,EAAa,CAAE,MAAO8B,CAAM,CAAC,CAAC,EACvF,KAIF,OAACgB,EAAA,CACC,SACEoB,GAAc,kBACRY,GAAoB,mBAAqB,GAAKZ,EAAa,iBAAoB,IACjF,EAEN,MAAOpC,EACP,aAAW,MACT,YACAgD,GAAoB,mBAAqBA,GAAoB,mBAAqB,IAAM,GAAK,WAC/F,EACF,EAGCpB,IAAeoB,GAAoB,mBAAqB,IAAM,MAC7D,OAAC,QACC,QAAM,mBAAgBpB,EAAY,CAChC,UAAWQ,GAAc,kBAAkB,SAAS,GAAK,GACzD,SAAUY,GAAoB,mBAAmB,SAAS,GAAK,GACjE,CAAC,EACD,GAAG,IACH,aAAW,MAAG,qCAAsC9E,EAAa,CAAE,MAAO8B,CAAM,CAAC,CAAC,EACpF,EAID6B,GACCmB,GAAoB,mBACnBA,GAAoB,mBAAqB,GAAK,MAC7C,OAAC,QACC,KAAMnB,EACN,GAAG,IACH,aAAW,MAAG,kDAAmD3D,EAAa,CAAE,MAAO8B,CAAM,CAAC,CAAC,EACjG,KAIJ,OAAC,UACC,KAAK,KACL,aAAW,MAAG/B,GAAe,CAAE,MAAO+B,CAAM,CAAC,EAAGsB,CAAe,EAC/D,QAAS+B,GACT,SACE,CAACL,GAAoB,kBACrBf,GACAI,GACA5B,IAAmB,eACnBA,IAAmB,WAErB,QAASwB,GAAWe,GAAoB,iBAEvC,SAAAvC,IAAmB,cAChBuB,GAAwBL,EACxBqB,GAAoB,iBAClBrB,EACAG,GAAqBH,EAC7B,GACF,GACF,GACF,CAEJ,CACF,EAEAR,EAAc,YAAc,gBAO5B,MAAMmC,EAAYlG,EAAM,WACtB,CAAC,CAAE,WAAAmG,EAAa,CAAC,EAAG,KAAAC,EAAM,cAAAhC,EAAe,oBAAAC,EAAqB,UAAAC,EAAW,QAAAO,EAAS,GAAGwB,CAAK,EAAGC,IAAQ,CACnG,MAAM1D,EAAQwD,EAAK,OAAS,QAEtBG,EAAcvG,EAAM,QAAQ,IACzBoG,GAAM,OAAO,QAAU,EAC7B,CAACA,GAAM,KAAK,CAAC,EAGVI,EAAaD,IAAgB,EAAI,aAAe,WAEhDE,EAAoBzG,EAAM,QAAQ,IAAM,CAC5C,MAAM0G,EAAuBC,GAA2D,CACtF,OAAQA,EAAY,CAClB,IAAK,SACH,MAAO,CAAE,cAAe,IAAK,aAAc,EAAG,EAChD,IAAK,SACH,OAAIJ,GAAe,EAAU,CAAE,cAAe,EAAG,aAAc,EAAG,EAC3D,CAAE,cAAe,IAAK,aAAc,EAAG,EAChD,IAAK,SACH,OAAIA,GAAe,EAAU,CAAE,cAAeA,EAAa,aAAc,EAAG,EACrE,CAAE,cAAe,KAAM,aAAc,EAAG,EACjD,IAAK,UACH,MAAO,CAAE,cAAe,KAAK,IAAIA,EAAa,CAAC,EAAG,aAAc,EAAG,CACvE,CACF,EAEA,MAAO,CACL,EAAGG,EAAoB,QAAQ,EAC/B,IAAKA,EAAoB,QAAQ,EACjC,KAAMA,EAAoB,QAAQ,EAClC,KAAMA,EAAoB,SAAS,CACrC,CACF,EAAG,CAACH,CAAW,CAAC,EAEhB,SACE,OAAC,aACC,IAAKD,EACL,aAAW,MAAGH,GAAY,IAAI,EAC9B,eAAe,kBACf,uBAAqB,YACpB,GAAGE,EAGJ,mBAAC,UAAO,YAAaI,EAAmB,UAAU,2BAC/C,SAAAL,EAAK,MAAM,IAAI,CAACpC,EAAM4C,OACrB,OAAC,eACC,mBAAC7C,EAAA,CACC,KAAMC,EACN,MAAOpB,EACP,OAAQ4D,EACR,UAAWL,GAAY,KACvB,gBAAiBA,GAAY,OAC7B,mBAAoBA,GAAY,UAChC,cAAe/B,EACf,oBAAqBC,EACrB,UAAWC,EACX,WAAY8B,EAAK,WACjB,aAAcA,EAAK,aACnB,WAAYA,EAAK,WACjB,aAAcA,EAAK,aACnB,kBAAmBA,EAAK,kBACxB,cAAeA,EAAK,cACpB,cAAeA,EAAK,cACpB,cAAeA,GAAM,cACrB,gBAAiBA,EAAK,gBACtB,qBAAsBA,EAAK,qBAC3B,QAASvB,EACX,GAtBgB,oBAAsB+B,CAuBxC,CACD,EACH,EACF,CAEJ,CACF,EAEAV,EAAU,YAAc,YAExB,IAAOrG,MAAQ,cAAWqG,CAAS",
6
+ "names": ["GiftShelf_exports", "__export", "GiftShelf_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_class_variance_authority", "import_react", "import_Styles", "import_utils", "import_AiuiProvider", "import_textFormat", "giftCardVariants", "contentLayoutVariants", "imageAreaVariants", "infoAreaVariants", "buttonVariants", "textVariants", "getResponsiveSource", "bgImage", "sources", "getBackgroundAlt", "formatTime", "seconds", "hours", "minutes", "secs", "parseStartTime", "startTime", "parsed", "isInTransitionPeriod", "countdown", "startTimeMs", "durationMs", "rounds", "now", "elapsed", "currentRound", "timeUntilRoundEnd", "TRANSITION_PERIOD_MS", "getCodeWithSuffix", "codePrefix", "date", "suffix", "currentRoundStartMs", "Countdown", "config", "theme", "className", "countdownText", "lastRoundText", "beforeStartText", "countdownIcon", "onStateChange", "timeLeft", "setTimeLeft", "countdownState", "setCountdownState", "calculateCountdown", "diff", "currentRoundTargetTime", "timer", "labelText", "ProgressBar", "progress", "clampedProgress", "GiftShelfCard", "item", "layout", "buttonClassName", "countdownClassName", "onButtonClick", "onProductImageClick", "buildData", "buttonText", "remainText", "lowStockText", "soldOutButtonText", "discountText", "comingSoonButtonText", "loading", "locale", "currencyCode", "firstProduct", "isTransitioning", "setIsTransitioning", "currentCode", "setCurrentCode", "checkAndUpdate", "newCode", "prev", "handleCountdownStateChange", "state", "fullProduct", "p", "fullProductVariant", "variant", "displayData", "price", "basePrice", "handleClick", "GiftShelf", "classNames", "data", "rest", "ref", "itemsPerRow", "cardLayout", "swiperBreakpoints", "getBreakpointConfig", "breakpoint", "index"]
7
7
  }
package/dist/cjs/biz-components/ImageWithText/ImageWithText.js CHANGED
@@ -1,2 +1,2 @@
1
- "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);
1
+ "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 w-full flex-col",{"justify-center":!V,"justify-between":V,"items-start":m==="left"&&x,"items-center":m==="center"&&x,"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);
2
2
  //# sourceMappingURL=ImageWithText.js.map
package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
4
- "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"],
5
- "mappings": "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",
4
+ "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 w-full 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 // \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' && hasItems,\n 'items-center': textAlign === 'center' && hasItems,\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"],
5
+ "mappings": "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",
6
6
  "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"]
7
7
  }
package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var $=Object.create;var x=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var H=(t,o)=>{for(var l in o)x(t,l,{get:o[l],enumerable:!0})},C=(t,o,l,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of j(o))!D.call(t,p)&&p!==l&&x(t,p,{get:()=>o[p],enumerable:!(c=R(o,p))||c.enumerable});return t};var M=(t,o,l)=>(l=t!=null?$(A(t)):{},C(o||!t||!t.__esModule?x(l,"default",{value:t,enumerable:!0}):l,t)),W=t=>C(x({},"__esModule",{value:!0}),t);var U={};H(U,{default:()=>Q});module.exports=W(U);var e=require("react/jsx-runtime"),s=M(require("react")),I=require("../../shared/Styles.js"),u=require("../../helpers/utils.js"),E=require("../../hooks/useExposure.js"),T=require("../AiuiProvider/index.js"),O=M(require("../Media/index.js")),Y=require("swiper/css"),ee=require("swiper/css/navigation"),S=require("../../components/index.js"),b=require("swiper/react"),L=require("swiper/modules");const Z=({disabled:t})=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[(0,e.jsx)("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"currentColor",fillOpacity:t?"0.2":"0.6"}),(0,e.jsx)("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),_=({disabled:t})=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[(0,e.jsx)("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"currentColor",fillOpacity:t?"0.2":"0.6"}),(0,e.jsx)("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),F="video",q="media_text_overlay",G=()=>(0,e.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:(0,e.jsx)("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),J=()=>(0,e.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),(0,e.jsx)("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),K=({data:t,configuration:o,jIndex:l,classNames:c={}})=>{const p=(0,s.useRef)(null),h=(0,s.useRef)(null),{content:r,media:n}=t,k=o?.theme||"light",P=o?.size||"lg",B=o?.onlyOne||!1,g=o?.isAutoPlay??!0,[y,d]=(0,s.useState)(!1);(0,E.useExposure)(p,{componentType:F,componentName:q,position:l,componentTitle:r,navigation:o?.activeTab});const m=(0,s.useMemo)(()=>[n.lgDesktop,n.desktop,n.laptop,n.pad,n.mobile].some(a=>a?.mimeType==="video/mp4"),[n]),N=(0,s.useCallback)(()=>{const a=h.current;a&&(a.paused?(a.play(),d(!0)):(a.pause(),d(!1)))},[]);return(0,s.useEffect)(()=>{const a=h.current;if(!a||!m||!g)return;const v=new IntersectionObserver(i=>{i.forEach(f=>{f.isIntersecting?a.play().catch(V=>{console.warn("Video autoplay failed:",V)}):a.pause()})},{threshold:.5});return v.observe(a),()=>{v.disconnect()}},[m,g]),(0,e.jsxs)("div",{className:(0,u.cn)("item-wrapper rounded-box group relative box-border w-full overflow-hidden",B?{lg:"h-[400px] laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]",sm:"h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]"}[P]:"desktop:h-[384px] lg-desktop:h-[480px] h-[360px]",{"aiui-dark":k==="dark"}),ref:p,children:[(0,e.jsx)("div",{className:"absolute inset-0",children:(0,e.jsx)(O.default,{pcImage:n.lgDesktop||n.desktop,desktopImage:n.desktop,laptopImage:n.laptop,padImage:n.pad,mobileImage:n.mobile,videoClassName:"absolute inset-0 size-full object-cover",imgClassName:"absolute inset-0 size-full object-cover",videoRef:h,muted:!0,loop:!0,playsInline:!0,autoPlay:g,onVideoPlay:()=>d(!0),onVideoPause:()=>d(!1),onVideoEnded:()=>d(!1)})}),m&&(0,e.jsx)("div",{className:"desktop:p-8 absolute bottom-0 right-0 z-30 p-6",children:(0,e.jsx)("button",{type:"button","aria-label":y?"Pause video":"Play video",onClick:N,className:(0,u.cn)("flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",c.playButton),children:y?(0,e.jsx)(J,{}):(0,e.jsx)(G,{})})}),(0,e.jsx)("div",{className:(0,u.cn)("text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 desktop:px-8 desktop:pb-8 desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20",c.overlay),children:(0,e.jsx)("div",{className:(0,u.cn)("flex items-end justify-between gap-4",c.content),children:(0,e.jsx)(S.Heading,{size:2,html:r,className:"line-clamp-3"})})})]})},z=s.default.forwardRef((t,o)=>{const{data:l,className:c,classNames:p={},...h}=t,{items:r=[],theme:n="dark",size:k="sm",isShowPagination:P=!0,isAutoPlay:B=!0}=l,{locale:g="us"}=(0,T.useAiuiContext)(),y=(0,s.useRef)(null),[d,m]=(0,s.useState)({isBeginning:!0,isEnd:!1}),N=(0,s.useMemo)(()=>{const i=r?.length||0;return{0:{spaceBetween:12,slidesPerView:i>1?1.2:1},768:{spaceBetween:12,slidesPerView:i>2?2.3:i>1?2:1},1024:{spaceBetween:16,slidesPerView:Math.min(i,3)},1440:{spaceBetween:16,slidesPerView:Math.min(i,4)},1920:{spaceBetween:16,slidesPerView:Math.min(i,4)}}},[r?.length]),w=s.default.useId().replace(/:/g,""),a=`${w}-custom-swiper-button-next`,v=`${w}-custom-swiper-button-prev`;return(0,e.jsx)("section",{"data-ui-component-id":"MediaTextOverlay",ref:o,...h,className:(0,u.cn)("mediaTextOverlayBlock text-info-primary",c,p.root),children:r&&r.length>0?(0,e.jsxs)("div",{className:"group relative",children:[(0,e.jsx)(b.Swiper,{className:"!overflow-visible",modules:[L.Navigation],navigation:{nextEl:`.${a}`,prevEl:`.${v}`},onSwiper:i=>{y.current=i,m({isBeginning:i.isBeginning,isEnd:i.isEnd})},onReachEnd:()=>{m(i=>({...i,isEnd:!0}))},onReachBeginning:()=>{m(i=>({...i,isBeginning:!0}))},onFromEdge:()=>{m({isBeginning:!1,isEnd:!1})},breakpoints:N,children:r.map((i,f)=>(0,e.jsx)(b.SwiperSlide,{className:"!flex !h-[unset]",children:(0,e.jsx)(K,{data:i,configuration:{theme:n,size:k,num:r.length,locale:g,onlyOne:r.length===1,index:f,isAutoPlay:B},jIndex:f})},`${w}-SwiperSlide-${f}`))}),P&&r.length>1&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("button",{className:`${v} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${d.isBeginning?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Previous slide",children:(0,e.jsx)(Z,{disabled:d.isBeginning})}),(0,e.jsx)("button",{className:`${a} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${d.isEnd?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Next slide",children:(0,e.jsx)(_,{disabled:d.isEnd})})]})]}):null})});z.displayName="MediaTextOverlay";var Q=(0,I.withLayout)(z);
1
+ "use strict";"use client";var $=Object.create;var x=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var H=(t,s)=>{for(var l in s)x(t,l,{get:s[l],enumerable:!0})},C=(t,s,l,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let p of j(s))!D.call(t,p)&&p!==l&&x(t,p,{get:()=>s[p],enumerable:!(c=R(s,p))||c.enumerable});return t};var M=(t,s,l)=>(l=t!=null?$(A(t)):{},C(s||!t||!t.__esModule?x(l,"default",{value:t,enumerable:!0}):l,t)),W=t=>C(x({},"__esModule",{value:!0}),t);var U={};H(U,{default:()=>Q});module.exports=W(U);var e=require("react/jsx-runtime"),i=M(require("react")),I=require("../../shared/Styles.js"),u=require("../../helpers/utils.js"),E=require("../../hooks/useExposure.js"),T=require("../AiuiProvider/index.js"),O=M(require("../Media/index.js")),Y=require("swiper/css"),ee=require("swiper/css/navigation"),S=require("../../components/index.js"),b=require("swiper/react"),L=require("swiper/modules");const Z=({disabled:t})=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[(0,e.jsx)("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"currentColor",fillOpacity:t?"0.2":"0.6"}),(0,e.jsx)("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),_=({disabled:t})=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[(0,e.jsx)("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"currentColor",fillOpacity:t?"0.2":"0.6"}),(0,e.jsx)("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),F="video",q="media_text_overlay",G=()=>(0,e.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:(0,e.jsx)("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),J=()=>(0,e.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),(0,e.jsx)("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),K=({data:t,configuration:s,jIndex:l,classNames:c={}})=>{const p=(0,i.useRef)(null),g=(0,i.useRef)(null),{content:r,media:a}=t,k=s?.theme||"light",P=s?.size||"lg",B=s?.onlyOne||!1,v=s?.isAutoPlay??!0,[y,d]=(0,i.useState)(!1);(0,E.useExposure)(p,{componentType:F,componentName:q,position:l,componentTitle:r,navigation:s?.activeTab});const m=(0,i.useMemo)(()=>[a.lgDesktop,a.desktop,a.laptop,a.pad,a.mobile].some(n=>n?.mimeType==="video/mp4"),[a]),N=(0,i.useCallback)(()=>{const n=g.current;n&&(n.paused?(n.play(),d(!0)):(n.pause(),d(!1)))},[]);return(0,i.useEffect)(()=>{const n=g.current;if(!n||!m||!v)return;const h=new IntersectionObserver(o=>{o.forEach(f=>{f.isIntersecting?n.play().catch(V=>{console.warn("Video autoplay failed:",V)}):n.pause()})},{threshold:.5});return h.observe(n),()=>{h.disconnect()}},[m,v]),(0,e.jsxs)("div",{className:(0,u.cn)("item-wrapper rounded-box group relative box-border w-full overflow-hidden",B?{lg:"aspect-[390/400] tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640]",sm:"h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]"}[P]:"tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640] aspect-[390/400]",{"aiui-dark":k==="dark"}),ref:p,children:[(0,e.jsx)("div",{className:"absolute inset-0",children:(0,e.jsx)(O.default,{pcImage:a.lgDesktop||a.desktop,desktopImage:a.desktop,laptopImage:a.laptop,padImage:a.pad,mobileImage:a.mobile,videoClassName:"absolute inset-0 size-full object-cover",imgClassName:"absolute inset-0 size-full object-cover",videoRef:g,muted:!0,loop:!0,playsInline:!0,autoPlay:v,onVideoPlay:()=>d(!0),onVideoPause:()=>d(!1),onVideoEnded:()=>d(!1)})}),m&&(0,e.jsx)("div",{className:"desktop:p-8 absolute bottom-0 right-0 z-30 p-6",children:(0,e.jsx)("button",{type:"button","aria-label":y?"Pause video":"Play video",onClick:N,className:(0,u.cn)("flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",c.playButton),children:y?(0,e.jsx)(J,{}):(0,e.jsx)(G,{})})}),(0,e.jsx)("div",{className:(0,u.cn)("text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 desktop:px-8 desktop:pb-8 desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20",c.overlay),children:(0,e.jsx)("div",{className:(0,u.cn)("flex items-end justify-between gap-4",c.content),children:(0,e.jsx)(S.Heading,{size:2,html:r,className:"line-clamp-3"})})})]})},z=i.default.forwardRef((t,s)=>{const{data:l,className:c,classNames:p={},...g}=t,{items:r=[],theme:a="dark",size:k="sm",isShowPagination:P=!0,isAutoPlay:B=!0}=l,{locale:v="us"}=(0,T.useAiuiContext)(),y=(0,i.useRef)(null),[d,m]=(0,i.useState)({isBeginning:!0,isEnd:!1}),N=(0,i.useMemo)(()=>{const o=r?.length||0;return{0:{spaceBetween:12,slidesPerView:o>1?1.2:1},768:{spaceBetween:12,slidesPerView:o>2?2.3:o>1?2:1},1024:{spaceBetween:16,slidesPerView:Math.min(o,3)},1440:{spaceBetween:16,slidesPerView:Math.min(o,4)},1920:{spaceBetween:16,slidesPerView:Math.min(o,4)}}},[r?.length]),w=i.default.useId().replace(/:/g,""),n=`${w}-custom-swiper-button-next`,h=`${w}-custom-swiper-button-prev`;return(0,e.jsx)("section",{"data-ui-component-id":"MediaTextOverlay",ref:s,...g,className:(0,u.cn)("mediaTextOverlayBlock text-info-primary",c,p.root),children:r&&r.length>0?(0,e.jsxs)("div",{className:"group relative",children:[(0,e.jsx)(b.Swiper,{className:"!overflow-visible",modules:[L.Navigation],navigation:{nextEl:`.${n}`,prevEl:`.${h}`},onSwiper:o=>{y.current=o,m({isBeginning:o.isBeginning,isEnd:o.isEnd})},onReachEnd:()=>{m(o=>({...o,isEnd:!0}))},onReachBeginning:()=>{m(o=>({...o,isBeginning:!0}))},onFromEdge:()=>{m({isBeginning:!1,isEnd:!1})},breakpoints:N,children:r.map((o,f)=>(0,e.jsx)(b.SwiperSlide,{className:"!flex !h-[unset]",children:(0,e.jsx)(K,{data:o,configuration:{theme:a,size:k,num:r.length,locale:v,onlyOne:r.length===1,index:f,isAutoPlay:B},jIndex:f})},`${w}-SwiperSlide-${f}`))}),P&&r.length>1&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("button",{className:`${h} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${d.isBeginning?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Previous slide",children:(0,e.jsx)(Z,{disabled:d.isBeginning})}),(0,e.jsx)("button",{className:`${n} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${d.isEnd?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Next slide",children:(0,e.jsx)(_,{disabled:d.isEnd})})]})]}):null})});z.displayName="MediaTextOverlay";var Q=(0,I.withLayout)(z);
2
2
  //# sourceMappingURL=MediaTextOverlay.js.map